body {
    padding: 0px;
    top: 0;
    left: 0;
    margin: 0px;
    font-size: 1.25rem !important;
    /*font-family: 'Noto Sans', sans-serif;*/
    font-family: "Helvetica Neue", sans-serif;
}

.heading-1 {
    margin: 0;
    display: block;
    padding: 0;
    font-size: 2.4rem;
    font-weight: 500;
    margin: 0;
    margin-bottom: 1rem;
    padding-left: 1rem;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"HelvFetica Neue",Arial,"Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    padding-bottom: .6rem;
    border-radius: .5rem;
    text-shadow: 0 0 0.1rem rgb(0 0 0 / 60%);
}

.k-popover-header {
    padding: 1rem;
}

.k-header.k-with-icon.k-filterable,
.k-filter-row th,
.k-grid-header th.k-header {
    overflow: visible;
    text-overflow: initial;
}

.risk-content-header {
    width: 100%;
}





.risk-content-header,
.action-strip {
    background-color: #fff;
    padding: 7px;
    border-radius: .5rem;
    box-shadow: 0.1rem 0.1rem 0.4rem rgb(0 0 0 / 50%);
    margin: 9px 0;
    height: auto;
    padding-left: 7px;
}

.heading-2 {
    padding: 5px 2px;
    font-size: 2.2rem;
    color: #f5f5f5;
    font-weight: 400;
    display: block;
}

.heading-1-charts,
.heading-1-dashboad {
    padding: 5px 2px;
    font-size: 1.6rem;
    font-weight: 500;
    display: block;
    padding: 6px 9px;
    white-space: normal;
    text-align: center;
    margin: 0;
    background-color: #ED7D31;
}

.ksi-current-chart {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    gap: 1rem;
    align-items: stretch;
    padding: 1rem;
}

.current-chart {
    min-width: 202px;
    border: 1px solid #eee;
    border-radius: 0.5rem;
    padding: 2rem 0;
    position: relative;
    border: 1px solid #ccc;
    width: 33.3%;
    box-shadow: 0.2rem 0.2rem 0.4rem rgba(0, 0, 0, 0.16);
    text-shadow: 0rem 0rem 0.1rem rgb(0 0 0 / 60%);
}

.current-chart-title {
    border: 1px solid #eee;
    padding: 0.6rem;
    border-radius: 0.5rem;
    font-size: 1.4rem;
    font-weight: 500;
    color: #3c3c3c;
}

.current-chart-value {
    font-size: 3.6rem;
    font-weight: 500;
    margin: 6px;
    color: #495057;
}

.current-chart-icon {
    font-size: 10rem;
    display: block;
    float: right;
    position: absolute;
    right: -2px;
    top: 5px;
    opacity: .5;
}

.current-month-positive .current-chart-title,
.current-month-variable .current-chart-title,
.current-month-negative .current-chart-title {
    width: 50%;
    display: block;
    color: #fff;
    font-weight: 600;
    font-size: 1.6rem;
}

.current-month-positive .current-chart-title {
    background-color: #e12828;
}

.current-month-positive .current-chart-title {
}

.current-month-positive .current-chart-icon {
    color: #e12828;
}

.current-month-variable .current-chart-title {
    background-color: orange;
}

.current-month-variable .current-chart-icon {
    color: orange;
}

.current-month-negative .current-chart-title {
    background-color: green;
}

.current-month-negative .current-chart-icon {
    color: green;
}

.header {
    width: 100%;
    height: 56px;
    box-shadow: 0.1rem 0.1rem 0.4rem rgb(0 0 0 / 50%);
    position: relative;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-size: 1.6rem;
}

/* .compliance_background {
    background-color: #ed7d31;
} */

/* .risk_background {
    background-color: rgb(133,25,85);
} */

#risk-logo {
    margin-left: 10px;
    margin-top: 2px;
    width: 150px;
    height: 47px;
    float: left;
}

.menubar {
    float: left;
    margin-left: 50px;
    margin-top: 10px;
    display: table-cell;
    vertical-align: middle;
    /*height:30px;*/
}

.menuitem {
    height: 100px;
    width: 100%;
    text-align: center;
    /*display:table;*/
    border-bottom-color: #808080;
    border-bottom-style: solid;
    margin-top: 10px;
    margin-bottom: 10px;
}

.menu-item-logo {
    /*display:table-cell;*/
    display: inline-block;
    cursor: pointer;
}

#account-logo {
    float: right;
    width: 45px;
    height: 45px;
    margin-right: 5px;
    display: table-cell;
    vertical-align: middle;
    margin-top: 2px;
}

#login-user {
    float: right;
    margin-right: 80px;
    margin-top: 12px;
    display: table-cell;
}

.header-right {
    float: right;
    margin-right: 20px;
    margin-top: 5px;
    display: table-cell;
}

.list-header {
    font-size: 23px;
}

.setting-header {
    height: 30px;
    width: 100%;
    margin-left: 5px;
    padding-left: 60px;
    background-color: rgba(187, 178, 178, 0.95);
    display: inline-block;
}

.setting-header-text {
    display: inline-block;
    vertical-align: middle;
    line-height: 30px;
    font-size: 20px;
    font-weight: bold;
    float: left;
}

.setting-header-img {
    float: left;
    height: 15px;
    width: 15px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 3px;
    margin-top: 8px;
}

    .setting-header-img:hover {
        cursor: pointer;
    }

.hide {
    display: none;
}

.div-hide {
    display: none;
}

.show {
    display: block;
}

.color-button {
    height: 20px;
    width: 20px;
    margin-right: 3px;
    float: left;
    border: none;
}

.list-items {
    float: left;
    width: 200px;
    height: 300px;
    border-style: solid;
    border-width: 5px;
    margin: 10px;
}

.list-content {
    float: left;
    width: 600px;
    margin: 10px;
}

.ui-dialog {
    overflow: visible;
}

.ui-front {
    z-index: 0 !important;
}

.ui-selectmenu-open {
    z-index: 9999 !important;
}
.dropdown-menu {
    max-height: 400px; /* Adjust this value based on your preference */
    overflow-y: auto; /* Enables vertical scrolling */
    overflow-x: hidden; /* Hides horizontal scrollbar */
}

.div-overflow {
    overflow: auto;
    /*height:100vh;*/
}

.div-overflow-x {
    overflow-x: auto;
    overflow-y: hidden;
}

.div-overflow-y {
    overflow-y: auto;
    overflow-x: hidden;
}

.parent-overflow {
    /*overflow: hidden;*/
    /*height:100vh;*/
}


.div-login {
    width: 420px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -180px;
    margin-left: -210px;
    border-radius: 12px;
    background-color: white;
    padding: 15px;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"HelvFetica Neue",Arial,"Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    border: 1px solid #777;
    letter-spacing: 1px;
    font-weight: 500;
}

.login-input {
    margin: 26px 0;
    margin-top: 0;
}

    .login-input label {
        font-weight: 400;
        font-size: 1.4rem;
        -moz-transition: .4s all ease-in-out;
        -o-transition: .4s all ease-in-out;
        -webkit-transition: .4s all ease-in-out;
        transition: .4s all ease-in-out;
    }

    .login-input input[type=text],
    .login-input input[type=password] {
        border: 1px solid #cccccc;
        padding: 8px 12px;
        font-size: 16px;
        color: #000;
        border-radius: 6px;
        background-color: #f5f5f5;
        box-shadow: 2px 2px 3px #ddd inset;
        -moz-transition: .4s all ease-in-out;
        -o-transition: .4s all ease-in-out;
        -webkit-transition: .4s all ease-in-out;
        transition: .4s all ease-in-out;
    }

        .login-input input[type=text]:hover,
        .login-input input[type=password]:hover {
            border: 1px solid #ED7D31;
        }

        .login-input input[type=text]:focus,
        .login-input input[type=text]:active,
        .login-input input[type=password]:focus,
        .login-input input[type=password]:active {
            border: 1px solid #ED7D31;
            background-color: #fff;
            /* -webkit-box-shadow: 0 0 6px #76abd9; */
            /* box-shadow: 0 0 6px #76abd9; */
            /* box-shadow: #76abd9 0px 4px 12px; */
            /* box-shadow: #76abd9 1.95px 1.95px 2.6px; */
            box-shadow: #ED7D31 0.2rem 0.2rem 0.6rem;
        }

    .login-input .focused-label {
        font-weight: 500;
        padding-left: 6px;
        border-left: 5px solid #ED7D31;
        border-radius: 4px;
        color: #ED7D31;
    }

button#btnLogin {
    padding: 12px;
    height: auto;
    border-radius: 6px;
    border: 1px solid #c16120;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1px;
    box-shadow: rgb(50 50 93 / 25%) 0px 2px 5px -1px, rgb(0 0 0 / 30%) 0px 1px 3px -1px;
    background-color: #ED7D31;
}

    button#btnLogin:hover,
    button#btnLogin:focus {
        background-color: #ed8a46;
        box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
    }

    button#btnLogin:active {
        box-shadow: 2px 2px 8px #3333334d inset;
        border: 1px solid #337ab7;
    }

#linkRegister,
#activateLicense {
    display: block;
    font-size: 14px;
    font-weight: 600;
    padding: 6px 0;
    position: relative;
    -moz-transition: .4s all ease-in-out;
    -o-transition: .4s all ease-in-out;
    -webkit-transition: .4s all ease-in-out;
    transition: .4s all ease-in-out;
    text-decoration: underline;
}

    #linkRegister:before,
    #activateLicense:before {
        content: " ";
        display: block;
        width: 0%;
        height: 100%;
        background-color: #ED7D31;
        bottom: 0;
        left: 0;
        right: 0;
        position: absolute;
        border-radius: 3px;
        -moz-transition: .4s all ease-in-out;
        -o-transition: .4s all ease-in-out;
        -webkit-transition: .4s all ease-in-out;
        transition: .4s all ease-in-out;
        z-index: -16;
    }

    #linkRegister:hover:before,
    #activateLicense:hover:before {
        width: 100%;
    }

    #linkRegister:hover,
    #activateLicense:hover {
        text-decoration: none;
        color: #fff;
        padding-right: 8px;
        padding-left: 8px;
    }

.div-register {
    height: 460px;
    width: 800px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -180px;
    margin-left: -400px;
    border-radius: 10px;
    background-color: white;
    padding: 10px;
}


.circle {
    border-radius: 50%;
    height: 40px;
    width: 40px;
    border-width: 0px;
}


#account-logo {
    border-radius: 50%;
    height: 50px;
    width: 50px;
    border-width: 0px;
    cursor: pointer;
}

.module-logo {
    margin-left: 50px;
    margin-top: 20px;
}

.appSelect-page {
    /* justify-items: center; */
    /* display: flex; */
    /* height: 400px; */
    /* width: 1000px; */
    /* position: fixed; */
    /* top: 50%; */
    /* left: 50%; */
    /* margin-top: -200px; */
    /* margin-left: -500px; */
    display: flex;
    flex-flow: column;
    margin-top: 6rem;
}

.app-select-row .container {
    width: fit-content;
    font-size: 9rem;
    /* display: flex; */
    /* align-content: center; */
    /* justify-content: center; */
    /* justify-items: center; */
    /* justify-self: center; */
    margin: auto;
    overflow: hidden;
    flex-grow: 1;
    padding-top: 2rem;
}

.app-select-row .card {
    min-width: 306px;
    min-height: 260px;
    background-color: #fff;
    border-radius: .5rem;
    overflow: hidden;
    box-shadow: 0.2rem 0.2rem 0.8rem rgb(0 0 0 / 30%);
    cursor: pointer;
    /* background-color: #e6e6e6; */
    transition: .3s all cubic-bezier(0.075, 0.82, 0.165, 1);
    border: 1px solid #868686;
}

.cards {
    /* box-shadow: 0.2rem 0.2rem 0.8rem rgb(0 0 0 / 30%); */
    /* transition: 0.3s; */
    /* border-radius: .5rem; */
}

/* .cards:hover {
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
        cursor: pointer;
    } */

.app-select-row .card:hover {
    box-shadow: 0.4rem 0.4rem 2rem rgb(0 0 0 / 35%);
    background-color: #fff;
    transform: scale(1.05);
}

/* .cards.content {
        height: 170px;
        width: 180px;
    } */

.cards-container {
    height: 50px;
    /* width: 250px; */
    /* background-color: rgb(166,58,118); */
    /* color: white; */
    /* font-size: 15px; */
    /* border-top-right-radius: 5px; */
    /* border-top-left-radius: 5px; */
    text-align: center;
    /* vertical-align: text-bottom; */
    /* display: table; */
    /* line-height: 20px; */
}

    .cards-container h1 {
        font-size: 18px;
        font-weight: bold;
        color: white;
        display: table-cell;
        vertical-align: middle;
    }

.app-select-row .card .cards {
    box-shadow: none;
    transition: none;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}


.container {
    /*height: 220px;
    width: 250px;
    font-size: 5px;*/
}

    .container a {
        /*font-size: 18px;
        font-weight: bold;*/
        /*color: #000000;*/
        /*display: table-cell;
        vertical-align: middle;*/
    }

.app-choice {
    /* max-width: 260px; */
    /* height: 200px; */
    /* padding-left: 5px; */
    /* padding-right: 5px; */
    /* padding-top: 2px; */
    /* background-color: #fff; */
    padding: 7.5px;
}

.notification-icon {
    text-decoration: none;
    position: relative;
    display: inline-block;
    margin-top: 17px;
}

    .notification-icon .badge {
        position: absolute;
        top: -10px;
        right: -10px;
        padding: 5px 10px;
        border-radius: 50%;
        background: red;
        color: white;
    }

.settings-card {
    /* background-color: #fff; */
    /* border-radius: .5rem; */
    /* padding: 1rem; */
    /* padding-bottom: 4rem;     */
}

.settings-row {
    display: flex;
    flex-direction: row;
    margin-bottom: 2rem;
}

    .settings-row .col-md-4 {
        /* height: 218px; */
        /* min-height: 100%; */
        background-color: #fff;
        border-radius: .5rem;
        padding: 0;
        margin: 0 1rem;
        box-shadow: 0.2rem 0.2rem 0.8rem rgb(0 0 0 / 30%);
        min-height: 180px;
        width: 31.333333%;
    }

        .settings-row .col-md-4 .heading-1 {
            white-space: nowrap;
        }

@media (max-width: 992px) {
    .settings-row .col-md-4 .heading-1 {
        font-size: 1.8rem;
    }

    .settings-row .col-md-4 a {
        font-size: 1.4rem;
    }
}

.settings-row .col-md-4 .container {
    width: 100%;
}

.settings-row .col-md-4 a {
    line-height: 14px;
    /* font-weight: 600; */
    font-size: 1.4rem;
    display: block;
    border-bottom: 2px solid transparent;
    width: fit-content;
    transition: .3s all cubic-bezier(0.075, 0.82, 0.165, 1);
    cursor: pointer;
    margin-bottom: 6px;
}

    .settings-row .col-md-4 a:hover,
    .settings-row .col-md-4 a:active,
    .settings-row .col-md-4 a:focus {
        text-decoration: none;
        border-bottom: 2px solid #696969;
        color: #616161;
        cursor: pointer;
    }

.app-select-row {
    align-content: center;
    gap: 1rem;
    display: inline-flex;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 2rem;
    margin-bottom: 2rem;
}


.hand-cursor {
    cursor: pointer;
}

.setting-table-height {
    height: 480px;
}

.likelihood label {
    text-decoration: underline;
    color: blue;
    cursor: pointer;
}

.impact label {
    text-decoration: underline;
    color: blue;
    cursor: pointer;
}

.cf label {
    text-decoration: underline;
    color: blue;
    cursor: pointer;
}

.alignRight {
    text-align: right;
}

.number-input {
    width: 40px;
}

.riskheatmap td {
    width: 80px;
}

    .riskheatmap td:first-child {
        width: 30px;
    }

.riskheatmap label {
    /*font-family: Arial;*/
    font-weight: lighter;
    font-style: italic;
    font-size: 10px;
    margin-left: 3px;
}

.riskheatmap button {
    width: 100%;
    height: 40px;
    border-style: none;
    font-weight: bold;
    font-size: 20px;
}

.vertical-text {
    transform: rotate(90deg);
    /*font-weight:bold;
    font-size:20px;*/
    /*transform-origin: left top 0;*/
}

.horizontal-text {
    text-align: center;
}

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

.app-page {
    margin: 0;
    background-color: rgb(169 169 169);
    min-height: 90vh;
}

#main_content {
    margin-left: 20px;
    margin-right: 10px;
}

.domain-view {
    border: 1px solid #c7cdd5;
    background-color: #fff;
    height: 85vh;
    border-radius: .5rem;
    /* margin-left: 8px; */
    box-shadow: 0.2rem 0.2rem 0.8rem rgb(0 0 0 / 30%);
    /* padding-top: 15px; */
}

.child-header {
    height: 40px;
    width: 100%;
    font-size: 12px;
    display: table-cell;
    text-align: center;
    background-color: red;
}

.risk-page {
    margin-left: 8px;
    margin-right: 5px;
}

.risk-content-view {
    /*height: 86vh;*/
    border-style: solid;
    border-width: 1px;
    border-color: transparent;
    /*border-left-width:2px;
    border-left-color:white;*/
    /*background-color:white;*/
}

.audit-header-vertical-center {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    margin-left: 10px;
}


.left-group, .right-group {
    display: flex;
}

.right-group {
    margin-left: auto;
}



.risk-header-vertical-center {
    display: table-cell;
    height: 50px;
    vertical-align: middle;
    margin-left: 10px;
    /*white-space: nowrap;
    overflow-x: auto;*/
}

.risk-details {
    height: 73vh;
}

.risk-edit-form {
    background-color: white;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 5px;
}

.float-right {
    float: right;
}

.float-left {
    float: left;
    margin-right: 5px;
    margin-left: 5px;
}

.search-div {
    border-style: solid;
    border-width: 0.5px;
    border-color: lightgrey;
    margin-left: 10px;
    border-radius: 4px;
    padding: 3px;
}

    .search-div input[type=text] {
        width: 200px;
    }

.no-border {
    border-style: none;
}

.bg-transparent {
    /*background-color: rgba(0,0,0,1);*/ /*red, green, blue, alpha*/
    /*background-color: transparent;
    background-repeat: no-repeat;*/
    background: none;
    border-style: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
}

.white-bg {
    background-color: white;
}

.no-overflow {
    overflow: hidden;
}

.app-table {
    /*border-style: solid;
    border-width: 0.5px;*/
    /*width: 2000px;*/
}

    .app-table table {
        /*width: 2000px;*/
        border-style: solid;
        border-width: 0.5px;
        border-color: lightgray;
        background-color: white;
        /*text-align:left;*/
    }

        .app-table table th {
            border-style: solid;
            border-width: 0.5px;
            border-collapse: collapse;
            border-color: lightgray;
            text-align: center;
            height: 40px;
            color: white;
        }

        .app-table table tr {
            min-height: 25px;
        }

        .app-table table td {
            border-style: solid;
            border: 1px solid #eee;
            border-collapse: collapse;
            vertical-align: middle;
            font-size: 1.25rem;
            padding: .6rem;
            border-bottom: 1px solid #cacaca;
        }

        .app-table table tr:nth-child(odd) {
            background-color: rgba(0,0,0,.05);
        }

        .app-table table tr:hover {
            cursor: default;
        }

/*.row-selected,
.row-selected td {
    color: white !important;
}*/

.risk-table-width {
    width: 2400px;
}

.incident-table-width {
    width: 1600px;
}

.linkbutton {
    border: none;
    /*border-bottom: solid;*/
    /*border-width: 1px;*/
    background-color: white;
    color: dimgray;
}

.margin-20 {
    margin-left: 20px;
    margin-right: 20px;
}

.margin-left-40 {
    margin-left: 40px;
}

.margin-right-40 {
    margin-right: 40px;
}

.margin-bottom-20 {
    margin-bottom: 20px;
}

.small-letter {
    font-size: 11px;
    padding: 5px;
}

.width-80 {
    width: 80px;
}

.padding-10 {
    padding: 10px;
}

.padding-5 {
    padding: 5px;
}

.padding-l-r-10 {
    padding-left: 10px;
    padding-right: 10px;
}

.div-h1 {
    font-size: 15px;
    font-weight: bold;
}

.div-border {
    border-style: solid;
    border-radius: 5px;
    border-width: 2px;
    border-color: #D3D3D3;
}

.div-300 {
    width: 300px;
}

.div-500 {
    width: 500px;
}

.div-height-250 {
    max-height: 300px;
}

.cursor-pointer {
    cursor: pointer;
}

.align-left {
    text-align: left !important;
}

.web-bg {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    /*background-repeat: no-repeat;*/
    background: url('../images/artistic-blurry-colorful-wallpaper-background.jpg') no-repeat center center fixed;
    background-size: cover;
}

.home-div-header {
    /*background-color: rgba(187, 178, 178, 0.95);*/
    background-color: #D3D3D3;
    color: #696969;
}

.div-page-size {
    font-size: 13px;
    color: dimgray;
}

    .div-page-size input {
        border-style: solid;
        border-width: 0.5px;
        border-color: lightgrey;
        border-radius: 4px;
        width: 40px;
    }

/* The container */
.container-box-button {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 15px;
    color: dimgray;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    /* Hide the browser's default radio button */
    .container-box-button input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

/* Create a custom radio button */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 50%;
}

/* Create a custom checkbox */
.checkmark-checkbox {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container-box-button:hover input ~ .checkmark, .container-box-button:hover input ~ .checkmark-checkbox {
    background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container-box-button input:checked ~ .checkmark, .container-box-button input:checked ~ .checkmark-checkbox {
    background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after, .checkmark-checkbox:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.container-box-button input:checked ~ .checkmark:after, .container-box-button input:checked ~ .checkmark-checkbox:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.container-box-button .checkmark:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}

/* Style the checkmark/indicator */
.container .checkmark-checkbox:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* Carousel */
.carousel-caption p {
    font-size: 20px;
    line-height: 1.4;
}

/* Make .svg files in the carousel display properly in older browsers */
.carousel-inner .item img[src$=".svg"] {
    width: 100%;
}

/* QR code generator */
#qrCode {
    margin: 15px;
}

/*
    k-grig styling
*/

.k-grid {
    font-size: 1.4rem;
    border-radius: .5rem;
    border: 1px solid #c7cdd5;
    box-shadow: 0.1rem 0.1rem 0.4rem rgb(0 0 0 / 28%);
    padding: .5rem;
    /*height: auto !important;*/
}

.k-grid-link {
    color: #007bff !important;
    font-weight: 600;
    display: block;
    text-decoration: underline !important;
    cursor: pointer;
}

    .k-grid-link:hover {
        text-decoration: none !important;
        color: blue !important;
        cursor: pointer;
    }


.k-grid td {
    border-width: 0 0 0 1px;
    vertical-align: top;
    font-size: 1.25rem;
}

.k-grid-header .k-link:link,
.k-grid-header .k-link:visited,
.k-grouping-header .k-link {
    color: #fff;
}

.k-item,
.k-button,
.k-input,
.k-item.k-state-selected.k-state-focused {
    font-size: 1.4rem;
    font-weight: normal;
}

.k-textbox {
    /*padding: 1.5rem .75rem;*/
}

.k-floating-label-container > .k-label,
.k-textbox-container > .k-label {
    font-size: 1.25rem;
    font-weight: bold;
}

.k-button.k-button-icontext.k-grid-add,
.k-button.k-button-icontext.k-grid-pdf,
.k-button.k-button-icontext.k-grid-excel,
.k-button.k-button-icontext.k-grid-delete,
.k-textbox.k-grid-search.k-display-flex .k-input {
    /*font-size: 1.4rem;*/
}

.k-button.k-button-icontext.k-grid-edit,
.k-button.k-button-icontext.k-grid-add,
.k-button.k-button-icontext.k-grid-pdf,
.k-button.k-button-icontext.k-grid-excel,
.k-button.k-button-icontext.k-grid-delete {
    color: #fff;
}

.k-button.k-button-icontext.k-grid-edit {
}

.k-button.k-button-icontext.k-grid-delete {
    background-color: #d9534f;
    border-color: #d43f3a;
}

.delete-btn,
.k-button.k-button-icontext.k-grid-cancel-changes {
    background-color: #d9534f;
    border-color: #d9534f;
    color: #fff !important;
}

.k-button.k-button-icontext.k-grid-save-changes {
    background-color: #5cb85c;
    border-color: #5cb85c;
    color: white;
}

.k-button.k-button-icontext.k-grid-add {
    background-color: #5cb85c;
    border-color: #4cae4c;
}

.k-button.k-button-icontext.k-grid-excel {
    background-color: green;
}

.k-button.k-button-icontext.k-grid-pdf {
    background-color: #007bff;
}

/*k-pager-wrap.k-grid-pager.k-widget.k-floatwrap {
    padding: 3rem 1rem;
}*/

.k-header {
    color: #fff;
}

/*.k-filter-row {
    background-color: #ed7d314d;
}*/

.k-pager-wrap.k-grid-pager.k-widget.k-floatwrap {
    padding: 1rem 0;
}

.k-toolbar.k-grid-toolbar {
    padding: 1rem 0;
}

.settings-view-module .k-header {
    background-color: #212529;
}

.k-grid col.k-sorted,
.k-grid th.k-sorted {
    background-color: #f5f5f5;
    box-shadow: 0 0 8px #33333369 inset;
}

    .k-grid col.k-sorted .k-link,
    .k-grid th.k-sorted .k-link {
        color: #000;
        font-weight: 400;
    }

.k-grid td.k-state-selected:hover,
.k-grid tr.k-state-selected:hover td {
    background-color: rgb(237 125 49 / 33%) !important;
}

.compliance-module .k-pager-numbers .k-link.k-state-selected,
.compliance-module .k-widget.k-autocomplete.k-autocomplete-clearable.k-state-default .k-input {
    border: 1px solid #ED7D31;
}

.k-pager-numbers .k-link:hover {
    color: #fff;
}

.k-pager-wrap .k-link:hover {
    color: #333333;
}

#SoruceGrid {
    padding: 0 2rem;
}

.k-textbox.k-grid-search.k-display-flex {
    /*border-color: #ED7D31;*/
    order: 50;
    flex-grow: 1;
}

.k-pager-info.k-label,
.k-link.k-pager-nav.k-pager-first.k-state-disabled .k-icon.k-i-arrow-end-left,
.k-link.k-pager-nav.k-state-disabled .k-icon.k-i-arrow-60-left,
.k-link.k-pager-nav.k-state-disabled .k-icon.k-i-arrow-60-right,
.k-link.k-pager-nav.k-pager-last.k-state-disabled .k-icon.k-i-arrow-end-right,
.k-pager-wrap.k-grid-pager.k-widget.k-floatwrap {
    font-weight: 500;
}

.k-pager-numbers .k-link {
    font-weight: 500;
}

.k-grid .k-master-row > td {
    border-bottom: 1px solid transparent;
    border-top: 1px solid transparent;
}

.k-grid .k-selectable tr,
.k-grid .k-selectable td {
    cursor: pointer;
}

.k-grid .k-alt.k-master-row.k-state-selected,
.k-grid td.k-state-selected,
.k-grid th.k-state-selected,
.k-grid tr.k-state-selected > td {
    color: #212529;
    background-color: rgb(237 125 49 / 33%);
    border-bottom: 1px solid rgb(189 114 61);
    border-top: 1px solid rgb(189 114 61);
}

.k-draghandle.k-state-selected:hover,
.k-ghost-splitbar-horizontal,
.k-ghost-splitbar-vertical,
.k-list > .k-state-highlight,
.k-list > .k-state-selected,
.k-marquee-color,
.k-panel > .k-state-selected,
.k-scheduler .k-today.k-state-selected,
.k-state-selected,
.k-state-selected:link,
.k-state-selected:visited,
.k-tool.k-state-selected {
    background-color: transparent;
}

.k-grid col.k-sorted {
    /*background-color: #ED7D31;*/
}

.k-grid th.k-sorted {
}

.k-grid-header .k-grid-filter.k-state-active,
.k-grid-header .k-header-column-menu.k-state-active,
.k-grid-header .k-hierarchy-cell .k-icon.k-state-active {
    color: #fff;
    background-color: #ec8a46;
    border: 1px solid #e0752c;
}

.k-scheduler {
    font-size: inherit;
}

.k-button-secondary.k-state-selected, .k-button.k-state-selected {
    border-color: #161616;
    color: #fff;
    background-color: #2e2e2e;
}

.k-scheduler-toolbar .k-nav-current {
    font-size: 1.4rem;
    font-weight: 400;
}

.k-scheduler-layout .k-scheduler-cell,
.k-scheduler-layout td {
}

    .k-scheduler-layout .k-scheduler-cell.k-state-selected,
    .k-scheduler-layout td.k-state-selected {
        background-color: rgb(0 123 255 / 15%);
        outline: 1px solid rgb(0 123 255 / 35%);
    }

.k-event .k-event-template,
.kendo-scheduler .k-event .k-event-template {
    font-size: 1.2rem;
    text-shadow: 0.05rem 0.05rem rgb(104 104 104);
}

.k-pager-nav.k-link:hover, .k-pager-refresh:hover, .k-state-hover.k-pager-nav.k-link, .k-state-hover.k-pager-refresh {
    color: #ED7D31;
}

.k-edit-label {
    margin: 0 0 1 rem 0;
    padding: calc(0.375 rem + 1 px ) 0;
    width: 30%;
    line-height: 1.5;
    text-align: right;
    float: left;
    clear: both;
    font-size: 1.2rem;
}

/*
    tile layout styling
*/

.k-card {
    border-color: rgb(169 169 169 / 13%);
}

/* 
    tooltip style
 */

.k-tooltip {
    font-size: 1.3rem;
    padding: .8rem;
}

#pdfviewer {
    width: 100%;
}

.pdf-viewer {
    display: flex;
    flex-direction: row;
}

.pdf-viewer-head {
    text-decoration: none;
    display: block;
    /*padding: 1.2rem .8em;*/
    font-size: 1.2rem;
    color: #333;
    font-weight: 500;
    border-bottom: 1px solid #aaa;
    background-color: #d2d2d2;
    min-width: 170px;
    padding: 20px 0;
}

.pdf-viewer-body {
    box-shadow: -0.2rem 0.2rem 0.2rem rgb(0 0 0 / 10%);
    min-width: 1000px;
    min-height: 800px
}

.pdf-viewer-item,
.web-link-item {
    text-decoration: none;
    display: block;
    padding: 1.2rem .8em;
    font-size: 1.2rem;
    color: #333;
    font-weight: 500;
    border-bottom: 1px solid #aaa;
    position: relative;
    border-right: none;
    right: -5px;
}

.web-link-item {
    text-decoration: underline;
    color: #1a4b76;
}

.pdf-viewer-item.active,
.pdf-viewer-item.active:hover,
.pdf-viewer-item:focus {
    background-color: #fff;
    /*box-shadow: 0.05rem 0.1rem 0.4rem rgb(0 0 0 / 30%);*/
    /*border: none;*/
    /*outline: none;*/
    text-decoration: none;
}

.pdf-viewer-item:first-child {
    border-top: 1px solid #aaa;
}

.pdf-viewer-item:hover {
    text-decoration: none;
    color: #333;
    background-color: #dcdcdc;
}

a.view-doc-link {
    color: #007bff;
    display: block;
    font-weight: 500;
}

    a.view-doc-link:hover {
        text-decoration: underline;
    }

.k-window-title {
    font-size: 1.4rem;
    font-weight: 600;
}

@media (min-width: 992px) {
    .modal-dialog.modal-lg.checklist-modal {
        width: 1200px;
    }
}
@media (min-width: 768px) {
    .modal-dialog.modal-xl {
        min-width: 60% !important;
        margin: auto !important;
    }
}


.k-animation-container {
    /* box-shadow: 0.6rem 0.6rem 1.2rem rgb(0 0 0 / 61%); */
}

.k-notification {
    border: 4px solid #ffffff;
    font-size: 1.4rem;
    text-shadow: 0.05rem 0.05rem 0rem #fffefe;
    bottom: 90%;
    margin: 2px 0;
    box-shadow: 0.6rem 0.6rem 5px rgb(0 0 0 / 18%);
    outline: 1px solid #e4e7eb;
}

/*****************************
end of telerik styling
******************************/

/*****************************
compliance dashboard
******************************/

.content-view {
    background-color: #fff;
    padding: 15px;
    padding-bottom: 1rem;
    padding-top: 15px;
    border-radius: .5rem;
    border: 1px solid rgb(119 119 119 / 52%);
    box-shadow: 0.2rem 0.2rem 0.8rem rgb(0 0 0 / 30%);
    overflow: hidden;
}

.dashboard-view {
    /*font-family: 'Poppins', sans-serif;*/
    background-color: #fff;
    display: inline-flex;
    padding: 1.2rem;
    gap: 1rem;
    width: 100%;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    padding-right: 0;
    padding-left: 0;
}

.dash-block {
    -webkit-flex-grow: 1;
    flex-grow: 1;
}

.number-widget {
    -webkit-flex-grow: .25;
    flex-grow: .25;
}

.dash-block,
.number-widget {
    gap: .8rem;
    /*box-shadow: 0.2rem 0.2rem 0.6rem rgb(0 0 0 / 20%);*/
    /*border-radius: .5rem !important;*/
    padding: 1rem;
    height: 100%;
    /*border: 1px solid #cecece;*/
    /*display: flex;*/
    /*flex-flow: column;*/
    /*transition: box-shadow 2s cubic-bezier(0.075, 0.82, 0.165, 1);*/
}

    .dash-block:hover,
    .number-widget:hover {
        /*box-shadow: 0.6rem 0.6rem 1.4rem rgb(0 0 0 / 40%) !important;*/
    }

.number-widget-menu,
.number-widget-icon {
    position: absolute;
    top: 28px;
    right: 6px;
    font-size: 1.8rem;
    cursor: pointer;
    width: 24px;
    height: 24px;
    /*border: 1px solid #777;*/
    text-align: center;
    z-index: 5;
    border-radius: 0.4rem;
    color: #5b5b5b;
    transition: .3s color ease-in-out;
}

    .number-widget-menu:hover {
        color: #484f56;
    }

.dash-block-head {
    /*margin-bottom: 1rem;*/
}

.dash-block-body {
    padding: 1rem;
    display: flex;
    flex-flow: column;
    height: 100%;
    /*justify-content: center;*/
    width: fit-content;
    margin: auto;
    margin-bottom: 0;
    /*padding-top: 3rem;*/
    /*padding-bottom: 3rem;*/
}

    .dash-block-body.dash-block-gauge-body {
        flex-flow: row;
        gap: 1rem;
    }

.overview-grid .dash-block-body {
    width: 100%;
}

.overview-content {
    display: flex;
    flex-direction: column;
}

.overview-graphs {
    display: flex;
    gap: 1rem;
    opacity: 0;
    overflow: hidden;
    transition: .3s all ease-in-out;
    flex-direction: column;
    height: 0;
}

    .overview-graphs.has-graphs {
        opacity: 1;
        height: auto;
        height: fit-content;
    }

.graphs-section {
    display: flex;
    gap: 1rem;
    justify-content: center;
    padding-bottom: 2rem;
}

#compliancePieChart,
#controlsDonutChart,
#applicableBarChart,
.graphs-selected-act-heading {
    border-radius: .5rem;
    border: 1px solid #c7cdd5;
    box-shadow: 0.1rem 0.1rem 0.4rem rgb(0 0 0 / 28%);
    padding: .5rem;
    margin-top: 1rem;
    width: 34%;
    height: 340px;
}

.graphs-selected-act-heading {
    width: 100%;
    height: fit-content;
    height: auto;
    margin-bottom: -10px;
}

.k-chart,
.k-sparkline,
.k-stockchart {
    font-size: 9rem !important;
    margin: auto;
}

.dash-block-head h1,
.dash-block-head h2,
.dash-block-head h3,
.dash-block-head h4,
.dash-block-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1.6rem;
    font-weight: 600;
    color: #fff;
    background-color: #ed7d31;
    border-radius: .5rem !important;
    padding: .6rem 1.2rem;
    width: auto;
    margin-left: -.4rem;
    margin-right: -.4rem;
    box-shadow: 0.2rem 0.2rem 0.4rem rgb(0 0 0 / 38%);
    text-shadow: 0rem 0rem 0.1rem rgb(0 0 0 / 60%);
    border: 1px solid #ca590c;
}

.pie-item-wraper {
    display: grid;
    grid-template-columns: 110px 110px;
    width: 100%;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid #ddd;
    cursor: pointer;
}

.pie-item {
    display: flex;
    height: 110px;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    text-shadow: 0.08rem 0.08rem 0.15rem #000;
}

    .pie-item:after {
        content: "";
        display: block;
        background-color: rgb(255 255 255 / 0%);
        position: absolute;
        width: 110px;
        height: 109px;
        -o-transition: background-color .3s ease-in-out;
        -webkit-transition: background-color .3s ease-in-out;
        transition: background-color .3s ease-in-out;
    }

    .pie-item:hover::after {
        background-color: rgb(255 255 255 / 20%);
    }

    .pie-item:hover .pie-item-value {
        transform: scale(1.25);
    }

    .pie-item:hover .pie-item-title {
        transform: scale(1.1);
    }

    .pie-item .pie-item-value {
        color: #fff;
        font-size: 2.4rem;
        font-weight: 600;
    }

    .pie-item .pie-item-title {
        position: absolute;
        width: 10%;
        font-size: 1.2rem;
        font-weight: 600;
        color: #333;
        padding-top: 0;
        padding-bottom: 0;
        text-shadow: 0.1rem 0.1rem 0.05rem rgb(255 255 255);
        line-height: 1.6rem;
        max-width: 93px;
        -moz-transition: .3s transform ease-in-out;
        -o-transition: .3s transform ease-in-out;
        -webkit-transition: .3s transform ease-in-out;
        transition: .3s transform ease-in-out;
    }

.tr-title,
.br-title {
    border-left: 1px solid #aaa;
    padding-left: 8px;
}

.bl-title,
.tl-title {
    border-right: 1px solid #aaa;
    padding-right: 8px;
}

.tr-title,
.tl-title {
    margin-bottom: 133px;
}

.br-title,
.bl-title {
    margin-top: 133px;
}

.tl-title {
    margin-right: 66px;
    text-align: right;
}

.tr-title {
    margin-left: 66px;
}

.br-title {
    margin-left: 66px;
}

.bl-title {
    margin-right: 66px;
    text-align: right;
}

.compliance-heat-map-table tbody tr .heat-map-count,
.pie-item .pie-item-value, .number-widget-value {
    -webkit-text-fill-color: white;
    -webkit-text-stroke-width: thin;
    -webkit-text-stroke-color: black;
    cursor: pointer;
    -moz-transition: transform .3s ease-in-out;
    -o-transition: transform .3s ease-in-out;
    -webkit-transition: transform .3s ease-in-out;
    transition: transform .3s ease-in-out;
}

    .compliance-heat-map-table tbody tr .heat-map-count:after {
        content: "";
        display: block;
        background-color: rgb(255 255 255 / 0%);
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        -moz-transition: background-color .3s ease-in-out;
        -o-transition: background-color .3s ease-in-out;
        -webkit-transition: background-color .3s ease-in-out;
        transition: background-color .3s ease-in-out;
    }

    .compliance-heat-map-table tbody tr .heat-map-count:hover:after {
        background-color: rgb(255 255 255 / 20%);
    }

    .compliance-heat-map-table tbody tr .heat-map-count:hover {
        transform: scale(1.06);
        z-index: 10;
        box-shadow: 0.2rem 0.3rem 1rem #0006;
    }

        .compliance-heat-map-table tbody tr .heat-map-count:hover > tr:first-child {
            background-color: rgb(0 0 0 / 30%);
        }

.pie-item-wraper::before,
.pie-item-wraper::after {
    position: absolute;
    background-color: #fff;
    box-shadow: 0 0.2rem .6rem rgb(0 0 0 / 15%);
    border: 1px solid #d2cbcb;
}

.pie-item-wraper::before {
    content: " ";
    display: block;
    width: 8px;
    height: 260px;
    margin-left: calc(110px - 4px);
    margin-top: -20px;
}

.pie-item-wraper::after {
    content: " ";
    display: block;
    height: 8px;
    background-color: #fff;
    width: 260px;
    margin-top: calc(110px - 4px);
    margin-left: -20px;
}

.bg-mid,
.reg-universe-item {
    background-color: rgb(255, 166, 0);
}

.reg-core-item,
.bg-caution {
    background-color: #d43f3a;
}

.reg-topical-item,
.bg-ok {
    background-color: #5cb85c;
}

.reg-secondary-item {
    background-color: rgb(236, 236, 72);
}

.heat-map-wraper {
    padding-left: 1rem;
    padding-bottom: 4rem;
}

.compliance-heat-map-table {
    width: 100%;
    border-collapse: collapse;
    display: block;
}

    .compliance-heat-map-table::before {
        content: "Impact";
        position: absolute;
        transform: rotate(270deg);
        margin-left: -41px;
        margin-top: calc(301px/2);
        font-size: 1.4rem;
    }

    .compliance-heat-map-table::after {
        content: "Likelihood";
        position: absolute;
        margin-left: calc(381px/2);
        margin-top: 46px;
        font-size: 1.4rem;
    }

    .compliance-heat-map-table tbody tr td {
        padding: 0.4rem;
        padding-top: 14px;
        border: 1px solid #cacaca;
        width: 55px;
        /* min-width: 60px; */
        height: 55px;
        text-align: center;
        vertical-align: middle;
        font-size: 2rem;
        color: #a2a2a2;
        position: relative;
        font-weight: 600;
        text-shadow: 0.08rem 0.08rem 0.15rem #000;
        box-sizing: border-box;
    }

    .compliance-heat-map-table tbody tr {
        position: relative;
    }

        .heat-map-label,
        .compliance-heat-map-table tbody tr .heat-map-label {
            text-shadow: none;
            display: flex;
            border: none;
            text-align: right;
            align-items: center;
            justify-content: flex-end;
            font-weight: 600;
            padding-right: 8px;
            width: 8rem !important;
            /* padding: 0 33px; */
            align-content: end;
            align-items: flex-end;
            white-space: nowrap;
        }

        .heat-map-label,
        .compliance-heat-map-table tbody tr .heat-map-label,
        .heat-map-label-x,
        .compliance-heat-map-table tbody tr .heat-map-label-x {
            font-size: 1rem;
            color: #000;
            width: 5rem;
            height: 5rem;
            border-top: 1px solid #777;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

            .heat-map-label span {
                display: block;
            }

                .heat-map-label span:last-child,
                .heat-map-label-x span:last-child {
                    font-weight: 400;
                }

.heat-map-label-bottom {
    display: flex;
    justify-content: flex-end;
    /*padding-top: 1rem;*/
    border-top: 1px solid #aaa;
    transform: translateX(20px);
    padding-right: 2rem;
}

.heat-map-label-x,
.compliance-heat-map-table tbody tr .heat-map-label-x {
    width: 55px;
    font-weight: 600;
    padding-top: 3px;
    text-align: center;
    border-right: 1px solid #aaa;
    height: 50%;
}

.heat-map-value {
    font-size: 1.6rem;
    position: absolute;
    left: 0;
    top: 0;
    line-height: 19px;
    -webkit-text-fill-color: #ffffff;
    background-color: rgb(0 0 0 / 50%);
    -webkit-text-stroke-width: thin;
    padding: 0.1rem;
}

.heat-map-temp-1 {
    background-color: #28a745;
}

.heat-map-temp-2 {
    background-color: #ffeb00;
}

.heat-map-temp-3 {
    background-color: #ffa500;
}

.heat-map-temp-4 {
    background-color: #ff0018;
}

.heat-map-temp-5 {
    background-color: #730202;
}

.number-widget {
    display: flex;
    flex-flow: column wrap;
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding: 2rem;
    justify-content: center;
}

/*
    odometer styling
*/

span.odometer-digit {
    background-color: #f8f9fa;
    border: 1px solid #c7cdd5;
    border-radius: 2px;
    margin-left: 2px;
    box-shadow: 0.2rem 0.2rem 0.4rem rgb(0 0 0 / 10%) inset;
    /*padding: 0px 2px 0 1px;*/
}

.k-tilelayout-item-body.k-card-body .number-widget {
    min-height: 112px;
    padding-left: 0;
    border: none;
    border-left-color: currentcolor;
    border-left-style: none;
    border-left-width: medium;
    border-left: 6px solid #495057;
}

.k-tilelayout-item-body.k-card-body .number-widget-value {
    text-align: left;
    padding-left: 10px;
    margin: 0;
    -webkit-text-fill-color: #495057;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #495057;
    margin-bottom: -3px;
}

.k-tilelayout-item-body.k-card-body .number-widget-title {
    box-shadow: none;
    /* background-color: #495057; */
    color: #fff;
    padding: 6px 10px;
    border: none;
    border-radius: .2rem;
    text-align: left;
    font-size: 1.4rem;
    padding-top: 12px;
    padding-bottom: 12px;
    /*margin-left: -15px;*/
    /*box-shadow: 0.3rem 0.3rem 0.6rem rgb(0 0 0 / 42%);*/
    background-color: #484f56;
    z-index: 1;
    padding-left: 12px;
    margin-bottom: 0.6rem;
}

.k-tilelayout-item-body.k-card-body .widget-icon {
    font-size: 9rem;
    /* align-self: end; */
    /* border: 1px solid #aaa; */
    width: 160px;
    height: 160px;
    text-align: center;
    border-radius: 50%;
    position: absolute;
    background-color: #484f56;
    color: #fff;
    /* opacity: .8; */
    padding-top: 4px;
    top: -5px;
    right: 1px;
    /* box-shadow: 0.3rem 0.3rem 0.6rem rgb(0 0 0 / 42%); */
    opacity: .1;
}

.k-arcgauge-label {
    font-size: 18px;
    font-weight: 600;
}

.gauge-widget {
    border: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

    .gauge-widget.number-widget:hover,
    .gauge-widget:hover {
        box-shadow: none !important;
    }

    .gauge-widget.number-widge,
    .gauge-widget {
        padding: 1rem;
        display: flex;
        flex-direction: column;
    }

        .gauge-widget.number-widge:first-child,
        .gauge-widget:first-child {
            /*padding-right: 1rem;*/
        }

        /*.gauge-widget.gauge-widget-not-assessed .number-widget-title,
        .gauge-widget.number-widge.gauge-widget-not-assessed .number-widget-title,
        .gauge-widget.gauge-widget-assessed .number-widget-title,
        .gauge-widget.number-widge.gauge-widget-assessed .number-widget-title,
        .number-widget-title.not-monitered,
        .number-widget-title.monitered {
            color: #fff;
            box-shadow: none;
            padding: .6rem;
            text-shadow: 0rem 0rem 0.1rem rgb(0 0 0 / 60%);
        }*/

        .gauge-widget.gauge-widget-not-assessed .number-widget-title,
        .gauge-widget.number-widge.gauge-widget-not-assessed .number-widget-title,
        .number-widget-title.not-monitered,
        .k-tilelayout-item-body.k-card-body .number-widget-title.not-monitered {
            background-color: #d43f3a;
        }

        .gauge-widget.gauge-widget-assessed .number-widget-title,
        .gauge-widget.number-widge.gauge-widget-assessed .number-widget-title,
        .number-widget-title.monitered,
        .k-tilelayout-item-body.k-card-body .number-widget-title.monitered {
            background-color: #5cb85c;
        }

.dash-block-widget-body {
    display: flex;
    gap: .8rem;
    flex-wrap: wrap;
    flex-flow: column;
    height: 100%;
    justify-content: space-between;
}


.chart-year .k-datepicker .k-picker-wrap {
    border-color: transparent;
    color: #6e6e6e;
    background-color: #f5f5f5;
}

.k-calendar .k-header,
.k-calendar .k-calendar-view,
.k-calendar .k-footer {
    font-size: 1.2rem;
}

.k-calendar .k-calendar-view {
    height: fit-content;
}

.number-widget-value {
    font-size: 4rem;
    line-height: 3rem;
    font-weight: 400;
    color: #fff;
    order: 0;
    text-align: center;
    margin-bottom: .6rem;
}

.number-widget-title {
    font-size: 1.6rem;
    font-weight: 600;
    color: #484848;
    background-color: #ffffff;
    border-radius: .2rem !important;
    padding: .2rem;
    width: auto;
    /* margin-left: 3rem; */
    line-height: 1.4rem;
    box-shadow: 0.2rem 0.2rem 0.4rem rgb(0 0 0 / 38%);
    /* min-width: 20rem; */
    text-align: center;
    border: 1px solid #bfbfbf;
}

    .k-tilelayout-item-body.k-card-body .number-widget-title.number-widget-title-no-value,
    .number-widget-title.number-widget-title-no-value {
        text-align: center;
    }

    .number-widget-title .badge {
        font-size: 1.8rem;
        float: right;
        background-color: #fff;
        color: #484f56;
        padding: 0 1.4rem;
        box-shadow: 0.2rem 0.2rem 1.2rem rgb(0 0 0 / 25%);
        border: 1px solid #ccc;
    }

.dash-block-body .k-grid {
    border-color: transparent;
    /* margin-left: -15px; */
    /* margin-right: -16px; */
    margin-top: -20px;
    width: 100%;
}

/*.k-popover-callout.k-callout-w {
    display: none;
}*/


.filter-group label {
    color: #1c1c1c;
    font-weight: 400;
    font-size: 1.2rem;
    margin-bottom: 4px;
    display: block;
}

.filter-group input {
    margin-bottom: 8px;
}

#total-risk-sub .subtitle {
    font-weight: 600;
    color: #4a4a4a;
    font-size: 1.2rem;
    margin-top: 0;
}

.top-ten-movement-table .table tbody tr td:nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 182px;
}

.top-ten-movement-table .table tbody tr td {
    padding: 2px 4px;
}

    .top-ten-indicator,
    .top-ten-trends,
    .top-ten-movement-table .table tbody tr td:nth-child(3),
    .top-ten-movement-table .table tbody tr td:nth-child(4) {
        text-align: center;
        font-size: 1.4rem;
        font-weight: 500;
    }

.top-ten-indicator,
.top-ten-trends {
    border-radius: 3px;
    display: block;
    cursor: default;
    transition: .3s all ease-in-out;
    border: 1px solid rgb(0 0 0 / 25%);
}

    .top-ten-indicator:hover,
    .top-ten-trends:hover {
        transform: scale(1.1);
        box-shadow: 0.2rem 0.2rem 0.4rem rgb(0 0 0 / 40%);
    }

#total-risk-sub .k-button.k-flat.k-button-icon {
    width: 100%;
}

.asignee-item[data-role=popover] {
}

.proggress-bar-cell,
.k-grid .proggress-bar-cell {
    padding: .2rem;
}

.comp-prog {
    position: relative;
    width: 100%;
    height: 100%;
    border: 1px solid #b1b1b1;
    border-radius: .2rem;
}

.comp-prog-perc {
    color: #000;
    font-weight: 500;
    /*text-shadow: 0 0 0.2rem #ffffff;*/
    position: absolute;
    left: 0;
    right: 0;
    /* margin: 0 auto; */
    text-align: center;
    /* -webkit-text-fill-color: white; */
    /* -webkit-text-stroke-width: 1px; */
    /* -webkit-text-stroke-color: black; */
    font-size: 1.6rem;
    line-height: 1.8rem;
}

.comp-prog-meter-bg {
    display: flex;
    flex-flow: row;
    /*background: #c21500;*/
    /*background-image: linear-gradient(to right, #730202, #ff0018, #ffa500, #ffeb00, #28a745);*/
    background: -webkit-linear-gradient(to right,#730202, #ff0018, #ffa500, #ffeb00, #28a745); /* Chrome 10-25, Safari 5.1-6 */
}

.comp-prog-meter-fill {
    animation: fill-bar-animation 1.8s ease-in-out;
}

.k-animation-container, .k-animation-container *, .k-animation-container :after, .k-block .k-header, .k-list-container, .k-widget, .k-widget *, .k-widget :before {
    box-sizing: border-box;
}

@keyframes fill-bar-animation {
    from {
        background-color: #fff;
        width: 0;
    }
}

.comp-prog-meter-no-fill {
    flex-grow: 1;
    background-color: #efefef;
    box-shadow: 0 0 0.2rem rgb(0 0 0 / 30%) inset;
}


/*****************************
end of compliance dashboard
******************************/

/********************************
start of the drawer styling
*********************************/

.name-logo {
    width: 8rem;
    position: relative;
    bottom: -11px;
}

.module-name {
    padding: 1rem 1.2rem;
    box-shadow: 0rem 0.2rem 0.4rem rgb(210 210 210);
}

.module-name-text {
    font-size: 4rem;
    font-weight: 400;
    text-shadow: 0rem 0rem 0.2rem rgb(0 0 0 / 30%);
    margin: 10px 0 0 0;
    transform: translateX(-100%);
    transition: transform .8s cubic-bezier(.68,-0.08,.28,1.03);
}

.nav-menu.active .module-name .module-name-text {
    transform: translateX(0);
}

.nav-menu-item {
    font-weight: 600;
    /*font-family: sans-serif;*/
    overflow: hidden;
}

.nav-menu {
    width: 35rem;
    transform: translateX(-100%);
    transition: transform .8s cubic-bezier(.68,-0.08,.28,1.03);
    border: 1px solid #eee;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 1000;
    background-color: #fff;
    border-right: 1px solid #ced3db;
    overflow-y: auto;
    height: 100vh;
}

    .nav-menu.active {
        transform: none;
        box-shadow: 0rem 1.2rem 0.68rem #2f2f2f;
    }

        .nav-menu.active:after {
            display: block;
            opacity: -5;
            content: " ";
            z-index: 900;
            position: fixed;
            left: 35rem;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: #000;
            -webkit-transition: opacity 1s ease-in-out;
            -moz-transition: opacity 1s ease-in-out;
            -ms-transition: opacity 1s ease-in-out;
            -o-transition: opacity 1s ease-in-out;
            transition: opacity 1s ease-in-out;
        }

        .nav-menu.active:after {
            display: block;
            opacity: .2;
        }

.nav-menu-link {
    padding: 1.4rem 1rem;
    padding-right: .1rem;
    display: block;
    font-weight: 500;
    font-size: 1.6rem;
    text-shadow: 0rem 0rem 0.1rem #00000026;
    border-left: 10px solid transparent;
    border-bottom: 1px solid #dee2e6;
    transition: .3s all ease-in-out;
    position: relative;
}

    .nav-menu-link:hover:after {
        content: " ";
        display: block;
        width: 1px;
        height: 100%;
        position: absolute;
        background-color: #fff;
        top: 0;
        left: 0px;
    }

.task-nav-menu-link {
    padding: 1.4rem 1rem;
    padding-right: .1rem;
    display: block;
    font-weight: 500;
    font-size: 1.6rem;
    text-shadow: 0rem 0rem 0.1rem #00000026;
    border-left: 10px solid transparent;
    border-bottom: 1px solid #dee2e6;
    transition: .3s all ease-in-out;
    position: relative;
}

.nav-menu-bg {
    margin-top: 2rem;
    margin-bottom: 4rem;
}

.nav-menu-link:hover {
    text-decoration: none;
    color: #fff;
    border-left: 10px solid rgb(32, 32, 32);
    text-shadow: 0rem 0rem 0.2rem rgb(0 0 0 / 48%);
}

    .nav-menu-link:hover .svg-inline--fa,
    .app-select-row .card:hover .container .svg-inline--fa {
        -webkit-animation: bounce 1s ease-in-out;
        -moz-animation: bounce 1s ease-in-out;
        animation: bounce 1s ease-in-out;
    }

.nav-menu-link .svg-inline--fa {
    padding: 0 1rem;
    padding-left: 0;
    width: 2em;
    height: 2rem;
    transform: scale(1.2);
}

.version {
    align-self: center;
    margin-top: 2rem;
}

.bounce {
    animation-name: bounce-3;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.menu {
    font-size: 2rem;
    margin-right: 2rem;
    cursor: pointer;
    transition: .3s all ease-in-out;
    cursor: pointer;
}

    .menu:hover {
        color: #fd7e14;
        cursor: pointer;
    }


@keyframes bounce {
    0% {
        transform: translateY(0);
    }

    30% {
        transform: translateY(-100px);
    }

    50% {
        transform: translateY(0);
    }

    80% {
        transform: translateY(0);
    }

    95% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

/*@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
*/

.nav-menu .close {
    width: 35px;
    height: 35px;
    font-size: 4rem;
    align-self: flex-end;
    margin-right: 15px;
}

.version,
.contact-support-header {
    align-self: center;
    margin-top: 2rem;
    background-color: #aaa;
    padding: 2px;
    color: #fff;
    border-radius: 4px;
    padding-left: 3px;
    padding-right: 3px;
}

.contact-support-header {
    color: #777;
    font-weight: 700;
    background-color: #fff;
    border: 1px solid #777;
    /*margin: 0;*/
    margin-bottom: 14px;
    padding-left: 10px;
    padding-right: 10px;
}
/*
        Theming
    */

.compliance-module .k-pager-info.k-label,
.compliance-module .k-pager-numbers .k-link.k-state-hover,
.compliance-module .k-textbox.k-grid-search.k-display-flex .k-input-icon,
.compliance-module .k-pager-numbers .k-link, .compliance-module .k-pager-wrap .k-link, .compliance-module .k-pager-numbers .k-link.k-state-hover, .compliance-module .module-name-text, .compliance-module .nav-menu-link, .compliance-report-module .module-name-text, .compliance-report-module .nav-menu-link, .compliance .container {
    color: #ED7D31;
}

.risk-module .k-pager-info.k-label,
.risk-module .k-pager-numbers .k-link.k-state-hover,
.risk-module .k-textbox.k-grid-search.k-display-flex .k-input-icon,
.risk-module .k-pager-numbers .k-link,
.risk-module .k-pager-wrap .k-link,
.risk-module .k-pager-numbers .k-link.k-state-hover,
.risk-report-module .module-name-text,
.risk-report-module .nav-menu-link,
.risk-module .module-name-text,
.risk-module .nav-menu-link,
.risk .container {
    color: #851955;
}

.audits .container {
    color: #33cccc;
}

.kris .container {
    color: rgb(84,130,53);
}

.incidents .container {
    color: rgb(255,51,0);
}

.tasks .container {
    color: #26496c;
}

.icon-curcle {
    width: 140px;
    height: 140px;
    color: #fff;
    text-align: center;
    border-radius: 50%;
}

/* .risk .container .icon-curcle {
    background-color: #851955;
} */

/* headings */

.app-select-row .card .cards-container .heading-1,
.heading-1 {
    color: #fff;
}

/* other modules */

.tasks-module .module-name-text,
.tasks-module .nav-menu-link,
.audits-module .module-name-text,
.audits-module .nav-menu-link,
.incidents-module .module-name-text,
.incidents-module .nav-menu-link,
.keyRiskIndicator-module .module-name-text,
.keyRiskIndicator-module .nav-menu-link,
.settings-view-module .module-name-text,
.settings-view-module .nav-menu-link {
    color: #212529;
}

    /* hover */

    .common-bg,
    .tasks-module .nav-menu-link:hover,
    .audits-module .nav-menu-link:hover,
    .incidents-module .nav-menu-link:hover,
    .keyRiskIndicator-module .nav-menu-link:hover,
    .settings-view-module .nav-menu-link:hover,
    .settings-view-module .app-table table th {
        background-color: #212529;
    }

.compliance-module .nav-menu-link:hover,
.compliance-report-module .nav-menu-link:hover {
    background-color: #ED7D31;
}

.risk-module .nav-menu-link:hover,
.risk-report-module .nav-menu-link:hover {
    background-color: #851955;
}

.sub-div-header,
.compliance-sub-div-header,
.tasks-module .nav-menu-link:hover,
.audits-module .nav-menu-link:hover,
.incidents-module .nav-menu-link:hover,
.keyRiskIndicator-module .nav-menu-link:hover,
.settings-view-module .nav-menu-link:hover,
.compliance-module .nav-menu-link:hover,
.risk-module .nav-menu-link:hover,
.compliance-module .nav-menu-link:hover,
.risk-report-module .nav-menu-link:hover,
.compliance-report-module .nav-menu-link:hover {
    color: #fff;
}

/* default nav */

.navbar {
    background-color: rgb(133,25,85);
}

/* .compliance-module .heading-1,
.compliance-module #main-header {
    background-color: #ed7d31;
} */

#main-header,
.settings-view-module #main-header,
.app-select-view-module #main-header {
    background-color: #ed7d31;
    background-image: linear-gradient(45deg, #ed7d31 5%, rgb(255 255 255 / 8%));
}

.settings-view-module #main-header {
    background-image: linear-gradient(45deg, transparent, transparent);
}

#main-header .exclaim-logo {
    display: none;
    width: 111px;
    float: left;
    margin-top: 3px;
    margin-left: 36px;
    position: relative;
    z-index: 20;
    /* top: 7px; */
}

#main-header .skewed-board {
    content: " ";
    display: none;
    width: 168px;
    height: 53px;
    background-color: #fff;
    position: absolute;
    z-index: 10;
    box-shadow: 0.4rem 0.4rem 0.8rem rgb(0 0 0 / 27%);
    top: -220px;
    left: 9px;
    border-radius: .5rem;
    margin-top: 221px;
}

.app-select-view-module #main-header .exclaim-logo,
.app-select-view-module #main-header .skewed-board {
    display: block;
}

.app-select-view-module .menubar.menu {
    display: none;
}


.compliance-module .k-header,
.compliance-module .k-pager-numbers .k-link .k-state-selected,
.compliance-module .k-pager-numbers .k-link.k-state-selected,
.compliance-module .k-button.k-button-icontext.k-grid-edit,
.compliance-module .k-grid col.k-sorted,
.compliance-module .k-grid th.k-sorted,
.compliance-sub-div-header,
.compliance-bg,
.heading-1.compliance-bg,
.compliance-module .content-view .heading-1,
.compliance-module #main-header,
.compliance-module .app-table table th,
.compliance .container .icon-curcle,
.compliance-report-module .content-view .heading-1,
.compliance-report-module #main-header,
.compliance-report-module .app-table table th {
    background-color: #ED7D31;
}

.risk-module .k-header,
.risk-module .k-pager-numbers .k-link .k-state-selected,
.risk-module .k-pager-numbers .k-link.k-state-selected,
.risk-module .k-button.k-button-icontext.k-grid-edit,
.risk-module .k-grid col.k-sorted,
.risk-module .k-grid th.k-sorted,
.risk-bg,
.heading-1.risk-bg,
.risk-module #main-header,
.risk-module .content-view .heading-1,
.risk-module .app-table table th,
.risk-module .sub-div-header,
.risk-module .compliance-sub-div-header,
.risk .container .icon-curcle,
.risk-report-module #main-header,
.risk-report-module .content-view .heading-1,
.risk-report-module #main-header,
.risk-report-module .app-table table th {
    background-color: rgb(133,25,85);
    background-image: none;
}

.risk-module .row-selected td,
.risk-module .app-table table tr:nth-child(odd).row-selected {
    border-bottom: 1px solid #4c072d;
    border-top: 1px solid #4c072d;
    background-color: rgb(133 25 85 / 30%);
    color: #212529;
}

.incidents-module .k-header,
.incidents-module .k-pager-numbers .k-link .k-state-selected,
.incidents-module .k-pager-numbers .k-link.k-state-selected,
.incidents-module .k-button.k-button-icontext.k-grid-edit,
.incidents-module .k-grid col.k-sorted,
.incidents-module .k-grid th.k-sorted,
.incident-bg,
.heading-1.incident-bg,
.incidents-module .content-view .heading-1,
.incidents-module #main-header,
.incidents-module .app-table table th,
.incidents-module .sub-div-header,
.incidents-module .compliance-sub-div-header,
.incidents .container .icon-curcle {
    background-color: rgb(255,51,0);
}

.incidents-module .row-selected td,
.incidents-module .app-table table tr:nth-child(odd).row-selected {
    border-bottom: 1px solid #ff3300;
    border-top: 1px solid #ff3300;
    background-color: rgb(255 51 0 / 30%);
    color: #212529;
}

.keyRiskIndicator-module .k-header,
.keyRiskIndicator-module .k-pager-numbers .k-link .k-state-selected,
.keyRiskIndicator-module .k-pager-numbers .k-link.k-state-selected,
.keyRiskIndicator-module .k-button.k-button-icontext.k-grid-edit,
.keyRiskIndicator-module .k-grid col.k-sorted,
.keyRiskIndicator-module .k-grid th.k-sorted,
.kri-bg,
.heading-1.kri-bg,
.keyRiskIndicator-module .content-view .heading-1,
.keyRiskIndicator-module #main-header,
.keyRiskIndicator-module .app-table table th,
.keyRiskIndicator-module .sub-div-header,
.keyRiskIndicator-module .compliance-sub-div-header,
.kris .container .icon-curcle {
    background-color: rgb(84,130,53);
}

.keyRiskIndicator-module .row-selected td,
.keyRiskIndicator-module .app-table table tr:nth-child(odd).row-selected {
    border-bottom: 1px solid #548235;
    border-top: 1px solid #548235;
    background-color: rgb(84 130 53 / 30%);
    color: #212529;
}

.tasks-module .k-header,
.tasks-module .k-pager-numbers .k-link .k-state-selected,
.tasks-module .k-pager-numbers .k-link.k-state-selected,
.tasks-module .k-button.k-button-icontext.k-grid-edit,
.tasks-module .k-grid col.k-sorted,
.tasks-module .k-grid th.k-sorted,
.task-bg,
.heading-1.task-bg,
.tasks-module .content-view .heading-1,
.tasks-module #main-header,
.tasks-module .app-table table th,
.tasks-module .sub-div-header,
.tasks-module .compliance-sub-div-header,
.tasks .container .icon-curcle {
    background-color: #26496c;
}

.tasks-module .row-selected td,
.tasks-module .app-table table tr:nth-child(odd).row-selected {
    border-bottom: 1px solid #548235;
    border-top: 1px solid #548235;
    background-color: rgb(84 130 53 / 30%);
    color: #212529;
}

.audits-module .k-header,
.audits-module .k-pager-numbers .k-link .k-state-selected,
.audits-module .k-pager-numbers .k-link.k-state-selected,
.audits-module .k-button.k-button-icontext.k-grid-edit,
.audits-module .k-grid col.k-sorted,
.audits-module .k-grid th.k-sorted,
.audit-bg,
.heading-1.audit-bg,
.audits-module .content-view .heading-1,
.audits-scheduler-module .content-view .heading-1,
.audits-module #main-header,
.audits-module .app-table table th,
.audits-module .sub-div-header,
.audits-module .compliance-sub-div-header,
.audits .container .icon-curcle {
    background-color: #33cccc;
}

.k-pager-numbers .k-link.k-state-selected {
    color: #fff;
    border: none;
    background-color: #3e3e3e;
}

.k-pager-wrap .k-link.k-state-selected, .k-pager-wrap .k-link.k-state-selected:hover {
    background-color: #3e3e3e;
}

.k-pager-wrap .k-link {
    color: #333333;
}

    .k-pager-wrap .k-link:focus {
        box-shadow: inset 0 0 7px 0 #0000003b;
    }

.audits-module .row-selected td,
.audits-module .app-table table tr:nth-child(odd).row-selecte {
    border-bottom: 1px solid #33cccc;
    border-top: 1px solid #33cccc;
    background-color: rgb(51 204 204 / 30%);
    color: #212529;
}

.compliance-bg,
.heading-1.compliance-bg,
.compliance-module .content-view .heading-1,
.compliance-module #main-header,
.compliance-module .app-table table th,
.compliance .container .icon-curcle,
.risk-bg,
.heading-1.risk-bg,
.risk-module #main-header,
.risk-module .content-view .heading-1,
.risk-module .app-table table th,
.risk .container .icon-curcle,
.incident-bg,
.heading-1.incident-bg,
.incidents-module .content-view .heading-1,
.incidents-module #main-header,
.incidents-module .app-table table th,
.incidents .container .icon-curcle,
.kri-bg,
.heading-1.kri-bg,
.keyRiskIndicator-module .content-view .heading-1,
.keyRiskIndicator-module #main-header,
.keyRiskIndicator-module .app-table table th,
.kris .container .icon-curcle,
.task-bg,
.heading-1.task-bg,
.tasks-module .content-view .heading-1,
.tasks-module #main-header,
.tasks-module .app-table table th,
.tasks .container .icon-curcle,
.audit-bg,
.heading-1.audit-bg,
.audits-module .content-view .heading-1,
.audits-module #main-header,
.audits-module .app-table table th,
.audits .container .icon-curcle,
.audit-bg,
.heading-1.audit-bg,
.audits-module .content-view .heading-1,
.audits-module #main-header,
.audits-module .app-table table th,
.audits .container .icon-curcle {
    background-image: linear-gradient(45deg, transparent, transparent);
}

/********************************
    end of the drawer styling
*********************************/

/*
    dashboad color
*/

.dash-block-title.dash-block-title-audit,
.dash-block-title.dash-block-title-kri {
    background-color: #484f56;
    border: none;
}

.dashboad-tabs {
    margin-bottom: 1rem;
    white-space: nowrap;
}

    /*    .dashboad-tabs:after {
        content: "";
        display: block;
        height: 2px;
        width: 100%;
        background-color: #777;
        position: relative;
        z-index: 1;
    }*/

    .dashboad-tabs .dashboad-tabs-item {
        display: inline-block;
        font-size: 1.6rem;
        border: 1px solid #ddd;
        padding: 1px;
        /*padding-bottom: 16px;*/
        font-weight: 600;
        background-color: #dddddd;
        border-bottom: 1px solid #777;
        margin-left: -2px;
        border-top: 4px solid transparent;
        border-radius: 3px 3px 0 0;
        min-width: 160px;
        color: #8e8e8e;
        transition: .3s all ease-in-out;
    }

.dashboad-tabs-item.active,
.dashboad-tabs-item.active.dashboad-tabs-item:hover {
    background-color: transparent;
    color: #495057;
    border: 1px solid #777;
    border-top: 4px solid #484f56;
    border-bottom-color: transparent;
    transform: scale(1.05);
    background-color: #fff;
}

.k-tilelayout {
    padding: 0 !important;
}

.dashboad-tabs .dashboad-tabs-item:hover {
    border: 1px solid #ddd;
    border-top: 4px solid #ddd;
    border-bottom: 1px solid #777;
    background-color: #EEEEEE;
    color: #484f56;
}

.dashboad-tabs .dashboad-tabs-item .dash-link-icon {
    /*padding-left: 12px;*/
    display: inline-block;
    margin-left: 12px;
}

/*.dashboad-tabs-item.dash-link-risk.active {
    border-top-color: rgb(133,25,85);
    color: rgb(133,25,85);
}

.dashboad-tabs-item.dash-link-compliance.active {
    border-top-color: #ED7D31;
    color: #ED7D31;
}

.dashboad-tabs-item.dash-link-incidents.active {
    border-top-color: rgb(255,51,0);
    color: rgb(255,51,0);
}

.dashboad-tabs-item.dash-link-kri.active {
    border-top-color: rgb(84,130,53);
    color: rgb(84,130,53);
}

.dashboad-tabs-item.dash-link-task.active {
    border-top-color: #26496c;
}

.dashboad-tabs-item.dash-link-audit.active {
    border-top-color: #3cc;
}*/

/*
    end of dashboad
*/
.content-header {
    font-size: 2.4rem;
    font-weight: 500;
    color: #ed7d31;
    margin-bottom: 3rem;
}

/********************************
    start lbrary styling
*********************************/

h4.lib-search-muted.text-muted {
    font-size: 1.6rem;
}

.lib-search-criteria-group {
    gap: 1rem;
    flex-wrap: wrap;
    display: inline-flex;
}

.lib-search-scope-group {
    padding-left: 1rem;
}

    .lib-search-scope-group input[type=radio],
    .lib-search-criteria-group input[type=radio] {
        visibility: hidden;
        position: absolute;
        margin: 0;
    }

.lib-search-criteria-btn,
.lib-search-scope-btn {
    cursor: pointer;
    position: relative;
    background-color: #ffffff;
}

.lib-search-scope-btn {
    border: 1px solid #c7cdd5;
    border-bottom: none;
    padding: 1rem 1rem;
    padding-bottom: 1.2rem;
    font-weight: 500;
    border-radius: .5rem .5rem 0 0;
    margin: 0;
    margin-right: -4px;
    background-color: #f9f9f9;
    min-width: 108px;
    text-align: center;
    font-size: 1.4rem;
}



.btn-search {
    border: 1px solid #c7cdd5;
    padding: 1.2rem 4rem;
    font-weight: 500;
    background-color: #f9f9f9;
    border-radius: 4px;
    align-self: self-end;
    background-color: #f5f5f5;
}

    .btn-search:hover {
        background-color: #f8f9fa;
        box-shadow: 0.1px 0.1px 3px #ccc;
    }

.btn:focus, .btn:active:focus {
    outline: none;
}

.lib-search-criteria-btn {
    padding: .6rem 1.6rem;
    display: block;
    /* padding: .6rem; */
    color: #ed7d31;
    border: 1px solid;
    width: max-content;
    white-space: nowrap;
    margin: 0;
    border-radius: 6rem;
    font-weight: 400;
    font-size: 1.4rem;
    box-shadow: 0.05rem 0.05rem 0.2rem rgb(0 0 0 / 30%);
}

    .lib-search-scope-btn:hover,
    .lib-search-criteria-btn:hover {
        background-color: #ececec;
    }

.lib-search-scope-btn.active {
    background-color: #ed7d31;
    color: #fff;
    border: none;
    box-shadow: 0.1rem 0.1rem 0.4rem rgb(0 0 0 / 40%);
    z-index: 5;
}

.lib-search-criteria-btn.active {
    color: #fff;
    background-color: #ed7d31;
    border-color: #ed7d31;
    box-shadow: 0.1rem 0.1rem 0.2rem rgb(0 0 0 / 40%) inset;
}

.lib-search-scope-btn.active:hover {
    background-color: #f38941;
}

.lib-search-tools,
.lib-alerts {
    border: 1px solid #c7cdd5;
    box-shadow: 0 0 0.8rem rgb(0 0 0 / 22%);
    position: relative;
    z-index: 10;
    background-color: #fff;
    padding: 2rem;
}

h6.alert-header {
    font-size: 2rem;
    color: #363333;
    margin-bottom: 22px;
}

.alert-card {
    border-radius: 30px;
    border: 1px solid #d5d5d5;
    box-shadow: rgb(50 50 93 / 25%) 0px 6px 12px -2px, rgb(0 0 0 / 30%) 0px 3px 7px -3px;
    display: flex;
    padding: 20px;
    margin-bottom: 30px;
    -moz-transition: .3s transform linear;
    -o-transition: .3s transform linear;
    -webkit-transition: .3s transform linear;
    transition: .3s transform linear;
    background-color: #fff;
}

    .alert-card:hover {
        transform: scale(1.05);
    }

.alert-card-logo {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.alert-card:hover .alert-card-logo img {
    animation: wiggle 2s linear infinite;
}

.alert-btn-icon {
    display: inline-block;
    margin-left: 5px;
    -moz-transition: .3s all linear;
    -o-transition: .3s all linear;
    -webkit-transition: .3s all linear;
    transition: .3s all linear;
}

.alert-btn:hover .alert-btn-icon {
    transform: scale(1.5);
    margin-left: 14px;
}

@keyframes wiggle {
    0%, 7% {
        transform: rotateZ(0);
    }

    15% {
        transform: rotateZ(-15deg);
    }

    20% {
        transform: rotateZ(10deg);
    }

    25% {
        transform: rotateZ(-10deg);
    }

    30% {
        transform: rotateZ(6deg);
    }

    35% {
        transform: rotateZ(-4deg);
        transform: scale(1.05);
    }

    40%, 100% {
        transform: rotateZ(0);
        transform: scale(1.0);
    }
}


.alert-text {
    flex: auto;
    margin-right: 20px;
}

    .alert-text p {
        margin-bottom: 30px;
    }

p.note {
    font-size: 1.4rem;
    font-style: italic;
    color: #f35800;
    line-height: 18px;
    display: block;
    background: #eeeeee4a;
    padding: 40px 5px 30px 39px;
    border-left: 4px solid #f358007a;
    font-weight: bold;
    margin-bottom: 5px;
    position: relative;
    border-right: 1px solid #dd843930;
    border-bottom: 1px solid #dd843930;
    border-top: 1px solid #dd843930;
    text-shadow: 0px 0px transparent;
}

a.alert-btn {
    background-color: #d75c23;
    display: block;
    color: #fff;
    align-self: end;
    padding: 8px 22px;
    font-size: 1.4rem;
    font-weight: 500;
    border-radius: 5px;
}

.note-quote {
    position: absolute;
    display: block;
    top: 8px;
    left: 8px;
    opacity: 0.3;
}

.lib-search-input.k-input {
    font-size: 1.6rem;
    font-weight: normal;
    padding: 0;
    line-height: 1rem;
    font-style: normal;
}

.lib-search-input.k-textbox {
    padding-top: 13px;
    padding-bottom: 10px;
}

.k-floating-label-container .k-label.k-input-label[for=librarySearch],
.k-floating-label-container.k-state-empty .k-label.k-input-label[for=librarySearch] {
    color: #333;
    font-weight: 300;
    top: 30px;
    left: 14px;
}

.k-floating-label-container .k-label.k-input-label[for=librarySearch],
.k-floating-label-container.k-state-focused .k-label.k-input-label[for=librarySearch] {
    top: 21px;
    font-size: 1.6rem;
    left: 28px;
}

.k-dropdown-wrap.k-state-default .k-select .k-icon {
    font-size: 2.4rem;
    /*right: 10px;*/
    top: 3px;
}



.k-dropdown .k-dropdown-wrap .k-select,
.k-dropdowntree .k-dropdown-wrap .k-select {
    padding-right: 23 px;
    padding-left: 0;
}

.k-list > .k-state-focused.k-state-selected,
.k-listview > .k-state-focused.k-state-selected,
.k-state-focused.k-state-selected,
td.k-state-focused.k-state-selected {
    color: #000;
    background-color: #e4e7eb;
    font-size: 1.4rem;
}

.k-list-filter > .k-icon {
    right: 26px;
}

.k-floating-label-container,
.lib-search-textbox {
    width: 100%;
}

    .lib-search-textbox .k-icon {
        font-size: 3rem;
        width: 43px;
        top: 14px;
        right: -9px;
    }

}

.k-list .k-item,
.k-list-optionlabel,
.dropdown-footer {
    font-size: 1.25rem;
    padding: .6rem .8rem;
}

    .k-list .k-item.k-state-hover.k-state-selected,
    .k-list .k-item:hover.k-state-selected,
    .k-list-optionlabel.k-state-hover.k-state-selected,
    .k-list-optionlabel:hover.k-state-selected {
        background-color: #ED7D31;
    }

.k-animation-container {
    /* box-shadow: 0.4rem 0.4rem 1.2rem rgb(0 0 0 / 25%); */
}

.k-picker-wrap input {
    font-size: 1.4rem;
}

.k-grid-norecords {
    padding: 1rem;
}

.library-loader {
    padding: 2rem;
    width: min-content;
    margin: 0 auto;
}

.pdf-viewer-content .k-loader-secondary {
    color: #aaa;
}

.pdf-viewer-content .k-loader {
    padding: 25% 0 0 0;
    transform: scale(2);
}

.pdf-viewer-content {
    text-align: center;
    margin: 0 auto;
}

.k-loader-segment:after {
    background-color: #aeaeae;
    /*display: none;*/
}

.k-list-optionlabel {
    font-size: 1.4rem;
}


/********************************
    end of library styling
*********************************/

/********************************
    division tree styling
*********************************/

.domain-view {
    /*padding-top: 15px;*/
}

.ztree * {
    /*font-size: 1.25rem;*/
    /*font-weight: 600;*/
    /*font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";*/
}

.ztree li span {
    padding-left: .2rem;
}

.ztree li a {
    padding: 0px 8px 0 2px;
    margin: 1px;
    height: 21px;
    border: 1px solid transparent;
}

    .ztree li a.curSelectedNode {
        /* padding-top: 1px; */
        height: 21px;
        opacity: 0.9;
        border: 1px #e08703 solid;
    }

.ztree li span.button.chk {
    margin: 0 1px 0 0;
}

/* Hide/rearrange for smaller screens */
@media screen and (max-width: 767px) {
    /* Hide captions */
    .carousel-caption {
        display: none;
    }
}

/*
    Timeline styling
*/

.k-timeline .k-timeline-flag {
    background-color: #ed7d31;
    font-size: 1.4rem;
    font-weight: 500;
    box-shadow: 0.4rem 0.4rem 0.6rem rgb(0 0 0 / 40%);
    text-shadow: 0rem 0rem 0.1rem rgb(0 0 0 / 60%);
    border: 2px solid #ffffff;
    outline: 1px solid #d56b22;
    /*border-bottom: none;*/
    margin-top: 1px;
}


.k-timeline-horizontal .k-timeline-flag::after {
    background-color: #ed7d31;
    width: 11px;
    height: 11px;
}

.k-timeline .k-timeline-circle {
    background-color: #ed7d31;
    box-shadow: 0.4rem 0.4rem 0.6rem rgb(0 0 0 / 40%);
    border: 2px solid #ffffff;
    outline: 1px solid #d56b22;
}

.k-timeline .k-timeline-date {
    font-weight: bold;
    font-size: 1.4rem;
}

.k-card-title {
    font-size: 1.6rem;
}

.k-card-subtitle {
    font-size: 1.25rem;
}

.k-tilelayout-item-header.k-card-header {
    background-color: #e5e5e5;
    border-bottom: 1px solid #aeaeae;
    padding: 0;
}

.k-tilelayout-item-body {
    font-size: 1.2rem;
    padding: 0;
}

.no-show-details,
.no-show-details .number-widget-value,
.no-show-details .pie-item .pie-item-value {
    cursor: default !important;
}

.show-details {
    -moz-transition: .2s border ease-in-out;
    -o-transition: .2s border ease-in-out;
    -webkit-transition: .2s border ease-in-out;
    transition: .2s border ease-in-out;
    border: 2px solid transparent;
    border-right: none;
    border-left: none;
}

    .show-details:hover {
        cursor: pointer;
        border-top: 2px solid #76abd987;
        border-bottom: 2px solid #76abd987;
    }

.k-tilelayout-item {
    transition: .3s all ease-in-out;
    border-radius: .5rem !important;
    border: 1px solid #ccc;
}

    .k-tilelayout-item:hover {
        box-shadow: 0.6rem 0.6rem 1.4rem rgb(0 0 0 / 40%) !important;
    }

.k-timeline-horizontal .k-timeline-track-wrap::after,
.k-timeline-vertical::after {
    border-color: #aaa;
}

.k-timeline-arrow {
    border: 1px solid #cbc8c8;
    box-shadow: 0.1rem 0.1rem 0.2rem rgb(0 0 0 / 30%);
}

/*
    end
*/

/*
    scheduler asignee style
*/

div.asignee-container {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.asignee-item {
    margin: 1rem 0;
    cursor: pointer;
    border: 1px solid #cbcbcb;
    border-radius: 0.6rem;
    min-width: 180px;
    padding: 0.6rem;
    background-image: linear-gradient( 320deg, transparent, rgb(255 255 255 / 30%));
    transition: .3s background-color ease-in-out;
}

.edit-color-btn {
    color: #fff;
    float: right;
    transition: .3s all ease-in-out;
    /*width: 20px;*/
    /*height: 20px;*/
    font-size: 1.4rem;
}

.asignee-item .svg-inline--fa:hover {
    color: #e5e5e5;
    box-shadow: 0.2rem 0.2rem 1rem #818181;
}

.asignee-info {
    /*display: flex;*/
}

.asignee-pic {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 2px solid #7d7c7c;
    display: inline-block;
    float: left;
    margin-right: 1rem;
    background-color: #fff;
    outline: 2px solid #fff;
    margin-top: -3px;
    box-shadow: 0.2rem 0.2rem 0.6rem rgb(0 0 0 / 40%);
    padding: 0.6rem;
}

.asignee-item.disabled {
    background-color: #d3d3d3;
    outline: 2px solid #d3d3d3;
}

.asignee-pic img {
    width: 100%;
}

span.asignee-full-name,
span.asignee-username {
    color: #fff;
    display: block;
    text-shadow: 0.1rem 0.1rem 1px #000;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 96px;
    white-space: nowrap;
}

span.asignee-username {
    font-weight: 600;
    font-size: 1.5rem;
}

span.asignee-full-name {
}

.toggle-switch {
    float: right;
}

.owner-marker {
    display: inline-block;
    margin-right: 6px;
    width: 20px;
    height: 15px;
    border: 1px solid #777;
}


/*
    range calendar
*/
/*
    end
*/
.date-range {
    text-align: center;
}

.k-textbox {
    font-size: 1.3rem;
    font-weight: 600;
    /*font-family: 'Noto Sans';*/
    margin-top: .4rem;
}

/*
    key risk robot
*/

.key-risk-robot-container {
    flex-flow: row;
    height: 340px;
    width: 137px;
    background-color: #4c4c4c;
    border-radius: 12px;
    border: 7px solid #777;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-evenly;
    align-items: center;
    box-shadow: 0.4rem 0.4rem 1rem #000 inset;
    margin: auto;
}

.key-risk-robot-orange,
.key-risk-robot-green,
.key-risk-robot-red {
    width: 98px;
    height: 98px;
    border-radius: 190px;
    border: 4px solid #fff;
    box-shadow: 0.4rem 0.4rem 1rem #000;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

    .key-risk-robot-red,
    .key-risk-robot-red span.title {
        background-color: #e12828;
    }

    .key-risk-robot-orange,
    .key-risk-robot-orange span.title {
        background-color: orange;
    }

    .key-risk-robot-green,
    .key-risk-robot-green span.title {
        background-color: green;
    }

span.title {
    position: absolute;
    font-size: 1.6rem;
    background-color: #fff;
    margin-top: 8px;
    margin-left: 184px;
    padding: 2px 6px;
    box-shadow: 0.2rem 0.2rem 0.3rem rgb(0 0 0 / 30%);
    border-radius: 3px;
    border: 1px solid rgb(145 145 145);
    font-weight: 600;
    color: #fff;
}

span.value {
    font-size: 2.6rem;
    text-shadow: 0.2rem 0.2rem 1rem rgb(0 0 0 / 37%);
    color: #fff;
}

/*
    FILE UPLOAD STYLE
*/

.file-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    gap: 1rem;
}

.file-box.file-upload,
.file-box.file-url-link-upload {
    border: 1px solid #aeaeae;
    padding: 1rem;
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1;
    text-align: center;
    background-color: #eee;
    transition: all .3s ease-in-out;
}

    .file-box.file-upload.has-drag,
    .file-box.file-url-link-upload.active {
        border: 1px solid #3374ad;
        background-color: rgb(0 123 255 / 11%);
        box-shadow: 2px 2px 6px rgb(0 0 0 / 26%);
        outline: 1px dashed #5fb5ffab;
    }

    .file-box.file-upload p,
    .file-box.file-url-link-upload p {
        font-style: italic;
        font-size: 1.4rem;
        font-weight: 500;
        color: #777;
    }

    .file-box.file-url-link-upload.has-drag p {
        color: #3374ad;
    }

    .file-box.file-url-link-upload .form-control.file-url-input:focus {
        border: 1px solid #3374ac;
    }

    .file-box.file-url-link-upload .form-control.file-url-input {
        font-style: italic;
        padding: 0.6rem;
        font-weight: 500;
        border: 1px solid #e5e5e5;
        border-radius: 3px;
        font-size: 1.2rem;
        display: block;
    }

.url-error-text,
.path-error-text {
    font-size: 1.2rem;
    font-weight: 600;
    color: red;
}

.error-hide {
    display: none;
}

    .error-hide.error-show {
        display: block;
    }

.form-control.error {
    border: 1px solid red;
    box-shadow: 0 0 3px red;
}

.file-box.file-url-link-upload input:focus,
.file-box.file-url-link-upload input:focus-within,
.file-box.file-url-link-upload input:active {
    border: 1px solid #428bca;
}

.file-box.file-upload .svg-inline--fa.fa-cloud-upload-alt {
    margin: 0 auto;
    color: #777;
    display: block;
}

    .file-box.file-upload .svg-inline--fa.fa-cloud-upload-alt:hover {
        cursor: pointer;
        color: #888;
    }

.file-box.file-upload.has-drag .svg-inline--fa.fa-cloud-upload-alt,
.file-box.file-url-link-upload.has-drag .svg-inline--fa.fa-cloud-upload-alt {
    color: #3374ad;
    animation-name: bounce-2;
    animation-timing-function: ease;
    animation-duration: 1.4s;
}

@keyframes bounce-2 {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}

.file-remove {
    cursor: pointer;
}

    .file-remove:hover {
        transform: scale(1.2);
    }

table.table.file-list-table {
    font-size: 1.4rem;
}


.archive-btn,
.k-button.k-button-icontext.k-grid-delete.archive-btn {
    background-color: #f0ad4e;
    border-color: #eea236;
    color: #fff;
}

.fileAttached {
    /*position: absolute;*/
}

#checklistGrid table {
    position: relative;
}

.k-selectable tbody:after,
#riskTable tbody:after {
    content: '';
    display: block;
    height: 50px;
}

.license-status {
    display: block;
    color: #fff;
    width: 152px;
    padding: 15px;
    font-weight: 500;
    font-size: 15px;
    text-align: center;
}

.license-status-active {
    background-color: #23bb23;
}

.license-status-not-active {
    background-color: #dc3545;
}

.version-container {
    font-size: 1.3rem;
    display: block;
    margin-top: 20px;
}
/* FOR SCROLLBAR*/

/* For WebKit browsers (Chrome, Safari, Opera) */
::-webkit-scrollbar {
    width: 12px; /* Set the width of the scrollbar */
    background-color: #F5F5F5; /* Set the background color of the scrollbar track */
}

::-webkit-scrollbar-thumb {
    background-color: #888; /* Set the color of the scrollbar thumb */
    border-radius: 10px; /* Make the scrollbar thumb have rounded edges */
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: #555; /* Set the color of the scrollbar thumb when hovered */
    }

/* For Firefox */
* {
    scrollbar-width: thin; /* Set the width of the scrollbar */
    scrollbar-color: #888 #F5F5F5; /* Set the color of the scrollbar thumb and track */
}

/* Hide the scrollbar arrows */
::-webkit-scrollbar-button {
    display: none;
}
/*FOR BUTTONS*/
/* General tree styling */

.notification-table tr:nth-child(odd) {
    background-color: #f2f2f2;
}

.notification-table td {
    max-height: 40px;
    overflow: hidden;
    position: relative;
}

    .notification-table td .ru-item-name {
        display: inline-block;
        max-height: 40px;
        line-height: 20px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .notification-table td:hover .ru-item-name {
        position: absolute;
        width: auto;
        background-color: #f8f9fa;
        white-space: normal;
        text-overflow: clip;
        overflow: visible;
        z-index: 100;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        padding: 5px;
        border-radius: 3px;
    }

.notification-center {
    position: relative;
}

.notification-list {
    position: absolute;
    right: 0;
    top: 100%;
    min-width: 300px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.notification-list-header {
    display: flex;
    justify-content: flex-end;
    padding: 5px 10px;
    background-color: #f8f8f8;
    border-bottom: 1px solid #ccc;
}

#duration {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

#lblSlider {
    margin-bottom: 10px;
}

.slider-container {
    display: flex;
    align-items: center;
}

.custom-slider {
    flex-grow: 1;
    margin-right: 10px;
}

#durationTextbox {
    width: 70px;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 3px;
}

.btn-lock {
    display: inline-block;
    background: #20cca5; /* Change from red to green */
    width: 64px;
    height: 64px;
    box-sizing: border-box;
    padding: 12px 0 0 18px;
    border-radius: 50%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}


    .btn-lock svg {
        fill: none;
        transform: translate3d(0, 0, 0);
    }

        .btn-lock svg .bling {
            stroke: #fff;
            stroke-width: 2.5;
            stroke-linecap: round;
            stroke-dasharray: 3;
            stroke-dashoffset: 15;
            transition: all 0.3s ease;
        }

        .btn-lock svg .lock {
            stroke: #fff;
            stroke-width: 4;
            stroke-linejoin: round;
            stroke-linecap: round;
            stroke-dasharray: 36;
            transition: all 0.4s ease;
        }

        .btn-lock svg .lockb {
            fill: #fff;
            fill-rule: evenodd;
            clip-rule: evenodd;
            transform: rotate(8deg);
            transform-origin: 14px 20px;
            transition: all 0.2s ease;
        }

#inpLock {
    display: none;
}

    #inpLock:checked + label {
        background: #ff5b5b; /* Change from green to red */
    }

        #inpLock:checked + label svg {
            opacity: 1;
        }

            #inpLock:checked + label svg .bling {
                animation: bling6132 0.3s linear forwards;
                animation-delay: 0.2s;
            }

            #inpLock:checked + label svg .lock {
                stroke-dasharray: 48;
                animation: locked 0.3s linear forwards;
            }

            #inpLock:checked + label svg .lockb {
                transform: rotate(0);
                transform-origin: 14px 22px;
            }

.lock-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: auto;
    float: right;
    margin-right: 15px;
}
.ui-selectmenu-menu .ui-menu {
    max-height: 300px; /* Set a maximum height for the dropdown */
    overflow-y: scroll; /* Enable vertical scrolling */
}

.lock-text {
    margin-left: 10px;
    font-size: 16px;
    color: #333;
}


@keyframes bling6132 {
    50% {
        stroke-dasharray: 3;
        stroke-dashoffset: 12;
    }

    100% {
        stroke-dasharray: 3;
        stroke-dashoffset: 9;
    }
}

@keyframes locked {
    50% {
        transform: translateY(1px);
    }
}