﻿/*.pageHeaderTop h1 {
    font-size: 19px;
    padding: 6px 0;
    color: #343a40;
}

.pageHeaderTop input[type="text"] {
    height: 32px;
}

.userBtn {
    height: 32px;
    line-height: 10px !important;
}

.table th, .table thead th {
    font-weight: 600;
    padding: 10px;
}

.tx-uppercase {
    text-transform: uppercase;
}

.threedots {
    font-size: 16px;
}

.dropDown:after {
    display: none !important;
}
.dropDown{padding:0;}
.dropDownMenu {box-shadow: 0 0 3px rgba(86, 96, 117, 0.7) !important;}
.dropDownMenu a {
    font-size: 14px;
    color: #000;
    font-weight: 500;
}
.searchIcon{padding:6px 10px;}
.formInput{height:39px;}
.badge.badge-outlined {background-color: transparent;}
.badge.badge-outlined.badge-success {border:1px solid #64dd17;color: #64dd17;}
.badge.badge-outlined.badge-danger {border:1px solid #ef1c1c;color: #ef1c1c;}
.userbadge {font-size: 9px;padding: 4px 10px;}
.dropDownToggle:after{display:none !important;}
.table.dataTable tbody td, .table td a {
    color: #272727 !important;
}
.table.dataTable tbody td, .table td{color: #272727 !important;font-size:13px;}
.closeIcon {font-size: 18px;top: 8px;position: relative;}
.formLabel {color: #000;margin-bottom: 4px !important;font-size: 13px !important;}
.sidebar-icon-only .headerNavBarToggle {position: relative;left:25px;}
body.sidebar-icon-only .brand-logo-mini{display:block !important;}
body.sidebar-icon-only .brand-logo-mini img {width: 30px !important;height: 30px !important;margin-left: -5px !important;max-width: initial !important;}
.logoPrt img{height:auto !important;}
.restText h4{font-size:16px;color:#000;}
*/


/*body*/
body{font-size:0.9rem}
.font-weight-600{font-weight:600}
/*Nav logo dimensions*/
.navbar .navbar-brand-wrapper .navbar-brand img {
    height: auto;
}

/*Page title*/
.page-title{
    font-size: 1.5rem;
    color: #383838;
}
/*Hover color for grid*/
.table-hover tbody tr:hover {
  
    background-color: #eaeaf159;
}
/*font color for grid*/
.table{color:#262626}
/*Font style for Names in a grid (the ones wit hyperlink)*/
.table td a:not(.btn){font-weight:bold; color:#262626}

/*Custom Input group*/
.input-group.input-group-custom .form-control-sm{height:35px}
    .input-group.input-group-custom-md .form-control-sm{height:39px}

.input-group.input-group-custom .input-group-append a, .input-group.input-group-custom .input-group-append button {
    padding: 5px 9px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

    .input-group.input-group-custom .input-group-append a i, .input-group.input-group-custom .input-group-append button i {
        font-size: 1.4rem
    }

/*Sidebar - General Styles*/
#sidebar li {
  position:relative
}

#sidebar li a {
    display: flex;
    align-items: center;
    padding: 3px 10px;
    font-weight:600
}
#sidebar li a .nav-icon {
    padding: 0px 10px;
}

    #sidebar li a .nav-icon i{
        font-size: 1.3rem;
        font-weight: bold;
    }
#sidebar li a .nav-title{
    font-weight: bold;
}

    #sidebar li ul.child-menu {
        margin-left:26px;
        list-style:disc
    }

body:not(.sidebar-icon-only) #sidebar:not(.active) ul.child-menu li.sub-title{display:none}
body #sidebar.active ul.child-menu li.sub-title {
    display: none
}
/*ul.child-menu li.sub-title::marker{content:''}*/

/*Sidebar colors and themes*/
.sidebar {
    background: #16529e;
}
#sidebar li ul.child-menu li:hover a:not(.user-select-none) {
    background: var(--secondary-color);
    color: white
}
#sidebar li ul.child-menu li.mm-active a, #sidebar li.mm-active > a {
    background: var(--primary-color);
    color: white
}

#sidebar li ul.child-menu li.mm-active a, #sidebar li.mm-active > a {
    background: #87bcff3d;
    color: white;
}
    #sidebar li ul.child-menu li.mm-active::marker{color: white}

    #sidebar li:not(.mm-active):hover > a:not(.user-select-none) {
        background: var(--secondary-color);
        color: white
    }
a.font-weight-bold.user-select-none {
    pointer-events: none;
    background: #f1f1f1;
    color: black !important;
    border: 1px solid #ececec;
}
#sidebar li a {
    text-decoration: none;
    transition: all ease-in-out 0.26s;
    color: #ffffffc2
}

body.sidebar-icon-only #sidebar:not(.active) li:hover a.has-arrow + ul.child-menu li a {
    color: #007bff
}

body.sidebar-icon-only #sidebar:not(.active) li:hover a.has-arrow + ul.child-menu li.mm-active a {
    color: white
}

body.sidebar-icon-only #sidebar:not(.active) li:hover a.has-arrow + ul.child-menu li:hover a {
    color: white
}


/*Hide arrow for menu when collapsed*/
body.sidebar-icon-only #sidebar:not(.active) li a .nav-title, body.sidebar-icon-only #sidebar li a.has-arrow::after {
    display: none
}

body.sidebar-icon-only #sidebar:not(.active) li a .nav-icon {
    padding: 0px 13px;
}

/*Hide submenu on sidebar collapse*/
/*Sidebar gets class active in mobile view, body gets sidebar-icon-only when collapsed*/
body.sidebar-icon-only #sidebar:not(.active) li a.has-arrow + ul.child-menu{display:none;}

/*Open menu on hover - hasChildren*/
body.sidebar-icon-only #sidebar:not(.active) li:hover a.has-arrow + ul.child-menu {
    display: block;
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 180px;
    background: white;
    height: auto !important;
    margin-left: 0;
    list-style: none;
    padding: 0;
    box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%) !important
}

/*Open menu on hover - Single menu*/
body.sidebar-icon-only #sidebar:not(.active) li:hover a:not(.has-arrow) .nav-title {
    display: flex;
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 180px;
    background: white;
    min-height: 100%;
    align-items: center;
    padding-left: 12px;
    box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%) !important;
    color: #007bff
}


/*Root*/
:root {
    --primary-color: #16529E;
    --secondary-color: #80CADC;
}

/*Btn solid styles*/
.btn-primary{background:var(--primary-color); border-color:var(--primary-color);}
    .btn-primary:hover, .btn-primary:active, .btn-primary:focus {
        background: var(--secondary-color);
        border-color: var(--secondary-color);
    }

    .btn-primary, .wizard > .actions a, .btn-primary:hover, .wizard > .actions a:hover {
        box-shadow: none
    }
/*Btn outline styles*/
.btn-outline-primary {
    background: white;
    color: var(--primary-color);
    border-color:var(--primary-color)
}
.btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary:focus {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color:white
}

.btn-action {
    width: 35px;
    height: 35px;
    border-radius: 50%
}


    .btn-action + .dropdown-menu a.dropdown-item {
        padding: .40rem 0.8rem;
        font-weight: 500;
        font-size: 0.8rem;
    }

 /*Pagination*/
.pagination .page-item.active .page-link, .pagination .page-item:hover .page-link {
    background: var(--primary-color);
}

/*Form Control*/
.form-control:focus, .asColorPicker-input:focus, .dataTables_wrapper select:focus, .jsgrid .jsgrid-table .jsgrid-filter-row input:focus[type=text], .jsgrid .jsgrid-table .jsgrid-filter-row select:focus, .jsgrid .jsgrid-table .jsgrid-filter-row input:focus[type=number], .select2-container--default .select2-selection--single:focus, .select2-container--default .select2-selection--single .select2-search__field:focus, .typeahead:focus, .tt-query:focus, .tt-hint:focus{border-color:var(--primary-color)


}

/*Badge colors*/
.badge-success, .preview-list .preview-item .preview-thumbnail .badge.badge-online {
    color: #ffffff;
    background-color: var(--green);
}

/*Profile dropdown*/
.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu.flat-dropdown .flat-dropdown-header {
    background: linear-gradient(45deg, #16529e, #36a223);
    background-size: 400% 400%;
    -webkit-animation: gradientflow 1s ease infinite;
    -moz-animation: gradientflow 1s ease infinite;
    animation: gradientflow 7s ease infinite;
}

.css-grad-animation {
    background: linear-gradient(45deg, #16529e, #36a223);
    background-size: 400% 400%;
    -webkit-animation: gradientflow 1s ease infinite;
    -moz-animation: gradientflow 1s ease infinite;
    animation: gradientflow 6s ease infinite;
}

@-webkit-keyframes gradientflow {
    0% {
        background-position: 99% 0%
    }

    50% {
        background-position: 2% 100%
    }

    100% {
        background-position: 99% 0%
    }
}

@-moz-keyframes gradientflow {
    0% {
        background-position: 99% 0%
    }

    50% {
        background-position: 2% 100%
    }

    100% {
        background-position: 99% 0%
    }
}

@keyframes gradientflow {
    0% {
        background-position: 99% 0%
    }

    50% {
        background-position: 2% 100%
    }

    100% {
        background-position: 99% 0%
    }
}
/*modal*/
/*.modal-body {
    background: #f8f8f8
}*/
.modal-header .close {
    padding: 2px;
    margin: 0;
}
.modal .modal-dialog .modal-content .modal-body {
    padding: 25px 25px;
}
.modal .modal-dialog .modal-content .modal-footer {
    padding: 15px 20px;
}

/*Select2*/

/**multiselect*/
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    
    font-size: 0.725rem;
  
}
/*multi*/
.select2-container--default .select2-selection--single {
    height: 39px;
    padding: 0.5rem 0.81rem;

}

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 22px;
    }

.select2-container .select2-selection--single .select2-selection__rendered{padding-left:0}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    margin-top: 0px;
    top: 60%;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: #28529e;
}

.form-group label {
   
    color: #444;
}



.modal-dialog.modal-md {
    max-width: 768px;
}

.table td, .jsgrid .jsgrid-table td {
    font-size: 0.85rem;
}

/*dropzone*/
.company-logo .dropzone {
    min-height: 123px;
    border: 1px solid #e6e6e6;
    padding: 15px 15px;
}
.company-logo .dropzone .dz-preview .dz-image {
    border-radius: 10px;
    width: 80px;
    height: 80px;
  
}

.company-logo .dropzone .dz-preview {
   
    margin: 5px;
    min-height: 70px;
}

/*tabs*/
.tab-content {
  
    padding: 1rem 1rem;
  
}
/*.profile-pic {
    position: absolute;
     bottom: -7px; 
    top: 2px;
    right: 0;
    left: 0px;
}*/

/*profile part*/
.profile-header {
    background: linear-gradient( 45deg, #16529e, #36a223);
}
.profile-pic {
    position: relative;
    /* bottom: -7px; */
    /* top: 2px; */
    /* right: 0; */
    /* left: 0px; */
    width: 25%;
    display: block;
}
.profile-user-wid {
    position: relative;
}
.file-input-contentedit {
    position: absolute;
    left: 92px;
    top: 60px;
    display: block;
    right: 0;
    padding: 14px;
}
.file-input-plus {
    height: 20px;
    width: 17px;
    background-color: #ffffff;
    color: #478ce4;
    border: 0px dashed;
    font-size: 8px;
    cursor: pointer;
    text-align: center;
    border-radius: 50px;
    box-shadow: 0px 0 10px 5px rgb(25 42 70 / 13%);
}
.file-input-contentedit i {
    position: relative;
    top: -8px;
    left: -8px;
    font-size: 15px;
}
.file-input input {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: 0;
    cursor: pointer !important;
}

/*report*/
table.k-editor {
    width: 100% !important
}

.op-8 {
    opacity: 0.8
}

.page .content-text p {
    font-size: 0.9rem;
    text-align:left
}

.content-illustration ul.list-inline {
    background: #9eb36c
}

    .content-illustration ul.list-inline li {
        font-size: 0.9rem;
        padding: 1rem 1rem;
        text-align: center;
        flex: 1;
        margin-right: 0;
        display: flex;
        justify-content:center;
        align-items: center;
    }

.content-heading {
    color: #28529e
}

.bg-report-green {
    background: #9eb36c
}

.competency-modal-grid th {
    font-size: 0.95rem;
    padding: 0.6rem 0rem;
    text-align: center;
    font-weight: bold
}

.competency-modal-grid tr td {
    font-size: 0.90rem;
    padding: 0.9rem 0.5rem
}

.blue-bg {
    background: #223a5e
}

.green-bg {
    background: #5b792e;
}

.light-green-bg {
    background: #9eb36c;
}
.medium-green-bg {
    /*background: #7ca51a;*/
    background: #3db450;
}

.light-blue-bg {
    background: #98b4d4;
}

.blue-cl {
    color: #223a5e
}

.green-cl {
    color: #5b792e;
}

.light-green-cl {
    color: #9eb36c;
}

.light-blue-cl {
    color: #98b4d4;
}


.radial-title {
    font-size: 0.9rem;
    position: relative;
   
}

/*Datepicker*/
.datepicker.datepicker-dropdown{width:240px}
    .datepicker.datepicker-dropdown .datepicker-days {
        padding: 0.375rem 0.75rem
    }

.bootstrap-datetimepicker-widget table td{line-height:normal !important}
.bootstrap-datetimepicker-widget table td {
    height: 30px;
    line-height: normal;
}
.bootstrap-datetimepicker-widget a[data-action]{padding:0}
.bootstrap-datetimepicker-widget table td span {
    height: 24px;
    line-height: normal;
}
.mdi-arrow-up-bold:before {
    top: 2px;
    position: relative;
}

.mdi-arrow-down-bold:before {
    position: relative;
    top: 4px;
}

/*notes*/
section.notes{height: calc(100vh - 205px);
overflow-y: auto;
overflow-x: hidden;}

section.notes .note .note-author .author-img {
    height: 30px;
    width: 30px;
    background-position: center;
    background-size: cover;
    border-radius: 50%
}
section.notes .note{position:relative}


    section.notes .note .note-author .name {
   font-size:0.8rem }
    section.notes .note .note-author .time {
        font-size: 0.7rem
    }
    section.notes .note .note-actions {
        position: absolute;
        transform: translateX(100px);
        opacity: 0;
        top: 6px;
        right: 5px;
        transition: all 0.25s ease-in-out
    }
section.notes .note:hover .note-actions {
   
    transform: translateX(0px);
    opacity: 1;
}
.note-editor{
    display: none
}
.note-editor.editing{display:block}
section.notes .note:hover .note-editor.editing ~ .note-actions, section.notes .note:hover .note-delete.deleting ~ .note-actions {
    transform: translateX(100px);
    opacity: 0;
}

.note-delete {
    position: absolute;
    left: 0;
    right: 0;
    top: 100px;
    bottom: 0;
    background: rgba(0,0,0,0.6);
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transition:all 0.30s ease-in-out;
    border-radius:0px;
    opacity:0;
    pointer-events:none
}
    .note-delete.deleting {
        border-radius: 15px;
        opacity: 1;
        top: 0;
        transition: all 0.30s ease-in-out;
        pointer-events:all
    }

/*just checkbox*/
.form-check .form-check-label.centered-checkbox input[type="checkbox"] + .input-helper:before,
.form-check .form-check-label.centered-checkbox input[type="checkbox"] + .input-helper:after {
    left: 40%
}

.tab-content table td {text-align:initial}

.nowrap{white-space:nowrap}

/*validation error*/
label.error {
    font-size: 0.8rem;
    color: #ef5958 !important;
    margin-top:0.25rem;
    margin-bottom:0;
    transition:all ease-in 0.25s;
   
}

.form-group input:valid + label.error{transform:translateY(-10px); opacity:0}
/*.form-group input:invalid {
    border:1px solid red
}*/
.form-group input:invalid + label.error {
    transform: translateY(0px);
    opacity:1
}
.loader {
    top: 0;
    left: 0;
    position: fixed;
    opacity: 0.8;
    z-index: 10000000;
    background: rgb(0 0 0 / 57%);
    height: 100%;
    width: 100%;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
/*.form-group {
    transition: all ease-in 0.25s;
}*/

#radarGraph .apexcharts-canvas.apexcharts-theme-light{margin:auto !important}

/*wave tab*/
.wave-grid thead tr{background:#f6f8fa}

.height36p {
    height: 36px;
}
@media only screen and (min-width:769px) {
    .reporttemplatestyleIA {
        /*white-space: pre-wrap;*/
        word-break: break-word;
        font-size: 0.90rem;
        margin-bottom: .5rem;
        line-height: 1px;
        background: #ffffff !important;
        font-family: "Roboto", sans-serif;
        font-weight: initial;
        -webkit-font-smoothing: antialiased;
        color: #6c7293;
        
    }
    .reporttemplatestyle {
        /*white-space: pre-wrap;*/
        word-break: break-word;
        font-size: 0.90rem;
        margin-bottom: .5rem;
        line-height: 1px;
        background: #ffffff !important;
        font-family: "Roboto", sans-serif;
        font-weight: initial;
        -webkit-font-smoothing: antialiased;
        color: #6c7293;
    }
 
}
 
@media only screen and (max-width: 600px) {
    .reporttemplatestyleIA {
        word-break: break-word !important;
        font-size: 0.75rem !important;
        margin-bottom: .5rem !important;
        line-height: 1px !important;
        background: #ffffff !important;
        font-family: "Roboto", sans-serif !important;
        font-weight: initial !important;
        -webkit-font-smoothing: antialiased !important;
        color: #6c7293 !important;
        
    }
}


.d-grid {
    display: grid
}

    .d-grid.grid-cols-3 {
        grid-template-columns: repeat(3,1fr)
    }   