/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Sep 19, 2018, 12:07:49 PM
    Author     : Delvene
*/

/*----------------------------------------------------------------------
[1. Layout]
*/
@import url('custom-style.css');

:root {
    --form-A-header-color: #ff00d8;
    --form-B-header-color: #007bff;
    --form-C-header-color: #00db5f;
    --form-D-header-color: #efff00;
    --form-E-header-color: #F1CDB5;
}

body {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.625;
    color: #303030;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #EEF5F9;
    position: relative;
}

.public-dashboard #search-section {
    padding-top: 150px;
    min-height: 500px;
    color: #000; 
    display: flex;
    justify-content: center;
    text-align: center;
}

.public-dashboard #statistic-section {
    padding-top: 80px;
    padding-bottom: 80px;
    min-height: 500px;
    color: #000; 
    display: flex;
    justify-content: center;
    text-align: center;
}

.public-dashboard #process-section {
    padding-top: 80px;
    padding-bottom: 80px;
    min-height: 500px;
    color: #000; 
    display: flex;
    justify-content: center;
    /*text-align: center;*/
}

.body-content {
    font-size: 14px;
}

.body-content .btn {
    font-size: 14px;
    min-width: 105px;
}

.body-content .btn.dropdown-toggle {
    min-width: 0px;
}

.body-content .btn.btn-block {
    min-width: 0;
}

.dropdown-menu {
    font-size: 14px;
}

.report-content {
    height: 100%;
}

.body-content, .report-content {
    font-size: 14px;
}

.body-content .btn, .report-content .btn {
    font-size: 14px;
    min-width: 105px;
}

.report-content .report-row {
    height: 90%;
}

a:focus, a:active, button:focus, button:active {
    outline: 0;
}

a:hover, a, i:hover {
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
    text-decoration: none;
}

.page-content {
    padding: 0px 10px;
    margin: 20px 0;
}

.footer {
    font-size: 0.85rem;
    padding: 20px 0;
}

.in-pool {
    color: #fbc658;
}

.pending {
    color: #ef8157;
}

.completed {
    color: #6bd098;
}

.pending-icon {
    color: #ff9900;
    font-size: 16px;
}

.select-prepend {
    background-color: #e9ecef;
    padding-top: 0.25rem;
    max-width: 143px;
}

.select-prepend .select-role-name {
    padding-left: 0.5rem;
}

.custom-file-label {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  height: auto;
  padding: 0.25rem 0.5rem;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}

.custom-file-label::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: block;
  height: auto;
  padding: 0.25rem 0.5rem;
  line-height: 1.5;
  color: #495057;
  content: "Browse";
  background-color: #e9ecef;
  border-left: 1px solid #ced4da;
  border-radius: 0 0.25rem 0.25rem 0;
}

.badge-download {
    font-weight: 400;
    padding: 0.35em 0.55em;
}

.table-bordered  td.table-no {
    width: 10px;
    border-right: none;
}

.table-bordered  td.table-name {
    border-left: none;
}

.was-validated .bootstrap-select>.dropdown-toggle.bs-invalid:focus, .bootstrap-select .selectpicker:invalid + .dropdown-toggle:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.was-validated .bootstrap-select.bs-invalid ~ .invalid-feedback {
  display: block;
}

ul.actionMessage, ul.errorMessage {
    display: inline-block;
    list-style: none;
    padding: 0;
    margin: 0;
    vertical-align: top;
}

.card-body.card-search {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background-color: #f9f9f9;
}

.form-group-input {
    margin-bottom: 0.5rem;
}

.form-group.btn-bottom {
    margin-top: 1rem;
}

.required, .bootstrap-select .selectpicker.required + .dropdown-toggle, .custom-file-input.required ~ .custom-file-label {
    border-left: 4px solid #dc3545;
}

/*input[type="checkbox"] {
    vertical-align: bottom;
}*/

.modal-content {
    border: none;
}

.bizagi-diagram {
    width: 300px;
    height: auto;
    border: 1px solid #99caff;
}

.bizagi-diagram:hover {
    border: 1px solid #007bff;
}

.overflow-hidden {
    overflow: hidden;
}

.invalid-ldapID {
    display: none;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 80%;
    color: #dc3545;
}

.status .badge {
    font-size: 90%;
    font-weight: 400;
    vertical-align: sub;
}

/*----------------------------------------------------------------------
[2. Login]
*/
.login-wrapper {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    /*background: #e9faff;*/
    /*background: #E0FFFF;*/
    /*background-image: url("../../../images/bpms_bg.png");*/
    /*height: 100%;*/
    /*background-position: center;*/
    /*background-repeat: no-repeat;*/
    /*background-size: cover;*/
    /*background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);*/
    
}

.login-container {
    width: 900px;
    position:relative;
}

.login-form {
    background: rgba(255,255,255, 0.8);
    border-radius: 10px;
    -webkit-box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.1);
    padding: 2rem 1rem;
}

.epres-info{
    /*padding-bottom: 55px;*/
    /*border-bottom: 1px solid #dee2e6;*/
    display: none;
}

    .epres-login{
        padding: 55px 15px;
    }
    
/*    .login-logo-container, .login-logo-container .login-logo{ position: relative;}
    .login-logo-container .login-logo { z-index: 2; }
    .login-logo-container .square-1,
    .login-logo-container .square-2,
    .login-logo-container .square-3{
        position: absolute;
        border: 25px solid black;
        top:0;
        bottom:0;
        left:0;
        right:0;
        margin:auto;
        opacity: 0.5;
        
        -webkit-animation: spinning 5s linear infinite;  Safari 4.0 - 8.0 
        animation: spinning 5s linear infinite;
        
        animation-play-state: running; 
    }
    
    .login-logo-container .square-1{
        width:50px;
        height:50px;
    }
    .login-logo-container .square-2{
        width:100px;
        height:100px;
        
        -webkit-animation: spinning-r 5s linear infinite;  Safari 4.0 - 8.0 
        animation: spinning-r 5s linear infinite;
        animation-delay: -0.5s;
    }
    .login-logo-container .square-3{
        width:150px;
        height:150px;
        animation-delay: -1s;
    }*/
    .login-logo-container .login-logo{
        margin: 0;
    }
    
    .login-logo-container {
        width: 140px;
        height: 140px;
        margin: 0 auto;
    }

    .circle__inner {
        position: absolute;
        top:0;
        opacity: 0.5;
        display: block;
        width: 140px;
        height: 140px;
        border-radius: 50%;
        box-shadow: 
          0 -10px 0 0 rgba(0,77,64, .6),
          -7.5px 5px 0 0 rgba(0,121,107, .6),
          7.5px 5px 0 0 rgba(0,150,136, .6);
        animation: rotate 5s linear infinite;
    }
    .circle__inner:nth-child(2) {
        box-shadow: 
          7.5px -5px 0 0 rgba(49,27,146, .6),
          -7.5px -5px 0 0 rgba(81,45,168, .6),
          0 10px 0 0 rgba(103,58,183, .6);
        animation: rotate__other 140px linear infinite;
    }
    @keyframes rotate {
        50% {
          /*transform: scale(1.4) rotate(360deg);*/
          transform: rotate(360deg);
        }
        100% {
          /*transform: scale(1) rotate(720deg);*/
          transform: rotate(720deg);
        }
    }

    @keyframes rotate__other {
        50% {
          transform: rotate(-360deg);
          /*transform: scale(1.5) rotate(-360deg);*/
        }
        100% {
          transform: rotate(-720deg);
          /*transform: scale(1) rotate(-720deg);*/
        }
    }

    @keyframes spinning {
        0%   {
            -moz-transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -moz-transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
    @keyframes spinning-r {
        0%   {
            -moz-transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -moz-transform: rotate(-360deg);
            -webkit-transform: rotate(-360deg);
            -o-transform: rotate(-360deg);
            -ms-transform: rotate(-360deg);
            transform: rotate(-360deg);
        }
    }

@media (max-width: 767px) {
    .epres-info:after {
        content: "";
        display: block;
        margin: 0 auto;
        width: 80%;
        padding-top: 55px;
        border-bottom: 1px solid #dee2e6;
    }
    
}

@media (min-width: 768px) { 
    .epres-info{
        padding-bottom: 55px;
        border-bottom: none;
        display: block;
    }
    
    .login-form {
        padding: 55px;    
    }
    
    .epres-login{
        padding-top: 0;
        border-left: 1px solid #dee2e6 
    }
}

.login-logo {
    width: 140px;
    height: 140px;
    display: block;
    margin: 2rem auto;
}

.login-copyright {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: max-content;
    margin: 0 auto;
}

.show_hide_password {
    cursor: pointer;
}

.tooltip.warning-tooltip .tooltip-inner {
    background-color: red;
}

.tooltip.warning-tooltip .arrow:before {
    border-right-color: red !important;
}

/*----------------------------------------------------------------------
[3. Main Header]
*/
.main-container {
    /*background: #EEF5F9;*/
    /*background: #FCFCFC;*/
/*    padding-left: 260px;*/
}

.main-navbar {
    background: #000066;
    -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    height: 64px;
    z-index: 3;
}

.pub-container .main-navbar {
    background: #000066;
    -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    height: 64px;
    z-index: 3;
}

.pub-container .pub-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: flex !important;
}

.pub-container .pub-menu ul li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

.pub-container .pub-menu ul li a:hover, .pub-container .pub-menu ul li.active a {
    color: #007bff;
}

.main-container .main-navbar-content, .pub-container .main-navbar-content {
    overflow: visible;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    padding: 0 30px;
}

.noti-info {
    min-width: 340px;
    position: absolute;
    top: 47px;
    background: #fff;
    -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e5e5;
    right: 0;
}

.noti-info::after {
    content: '';
    display: block;
    width: 19px;
    height: 19px;
    position: absolute;
    top: -18px;
    right: 175px;
}

.noti-info .noti-list-title {
    padding: 18px;
    border-bottom: 1px solid #f2f2f2;
    cursor: default;
}

.noti-info .noti-list-title p {
    line-height: -webkit-calc(29/14);
    line-height: -moz-calc(29/14);
    line-height: calc(29/14);
    font-size: 14px;
    color: #808080;
    margin: 0;
}

.noti-info .noti-list-item {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    padding: 18px;
    padding-bottom: 19px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f2f2f2;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.noti-info .noti-list-item:hover {
    cursor: pointer;
    background: #f7f7f7;
}

.noti-info .noti-list-item .noti-icon {
    position: relative;
    margin-right: 15px;
    height: 40px;
    width: 40px;
    background-color: #00ad5f;
}

.noti-info .noti-list-item .noti-icon i {
    font-size: 16px;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.noti-info .noti-list-item .noti-content {
    width: -webkit-calc(100% - 55px);
    width: -moz-calc(100% - 55px);
    width: calc(100% - 55px);
    text-align: left;
    font-size: 14px;
}

.noti-info .noti-list-item .noti-content p {
    color: #555;
    line-height: 1;
    padding-top: 5px;
    margin: 0;
    margin-bottom: 2px;
}

.noti-info .noti-list-item .noti-content .date {
    font-size: 12px;
    color: #999;
}

.noti-info .noti-all a {
    display: block;
    text-transform: capitalize;
    text-align: center;
    font-size: 14px;
    color: #4272d7;
    padding: 18px 0;
}

.noti-item {
    position: relative;
    margin-right: 30px;
    display: inline-block;
    cursor: pointer;
}

.noti-item i {
    font-size: 25px;
    color: #fff;
}

.noti-item .badge {
    border-radius: 50%;
    vertical-align: top;
    margin-left: -10px;
    margin-top: -4px;
    font-weight: 500;
}

.noti-wrap, .account-wrap {
    position: relative;
}

.account-wrap .account-name a {
    color: #fff;
    text-transform: capitalize;
    font-weight: 500;
}

.noti-item i:hover, .account-wrap .account-name a:hover {
    color: #007bff;
}

.account-info {
    min-width: 305px;
    position: absolute;
    top: 47px;
    right: 0;
    background: #fff;
    -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e5e5;
}

.account-info::after {
    content: '';
    display: block;
    width: 19px;
    height: 19px;
    position: absolute;
    top: -18px;
    right: 33px;
}

.account-info .user-info {
    padding: 20px 25px;
    border-top: 1px solid #f5f5f5;
    border-bottom: 1px solid #f2f2f2;
}

.account-info .user-info .name {
    color: #007bff;
}

.account-info .user-info .email {
    font-size: 14px;
}

.user-info-item a, .user-logout a {
    display: block;
    color: #333;
    padding: 15px 25px;
    font-size: 14px;
}

.user-info-item a:hover, .user-logout a:hover {
    background: #4272d7;
    color: #fff;
}

.user-info-item a i, .user-logout a i {
    line-height: 1;
    margin-right: 20px;
    font-size: 18px;
    vertical-align: middle;
}

.user-logout {
    border-top: 1px solid #f2f2f2;
}

/*----------------------------------------------------------------------
[3.5. Custom Navbar]
*/

.custom-navbar{ padding: 0 !important; font-size: 0.9rem;}
.custom-navbar{ width:100%;}
/*.custom-navbar .navbar-nav .nav-item a{ padding: 1rem 0.5rem; }*/
.custom-navbar .navbar-nav .nav-item .dropdown-menu{ left:auto; right: 0; }
.custom-navbar .navbar-brand .version-label{ font-size: 0.6rem; font-weight: lighter; border: 1px solid #007bff; padding: 1px 5px; border-radius: 5px; }
.custom-navbar .navbar-brand #navbar-badge-container { padding: 0 10px; }

.custom-navbar .container-fluid{ background-color: #f8f8f8; padding:1px 1rem;}
.custom-navbar.navbar .container-fluid{ border-bottom:5px solid #222222;}
.custom-navbar .navbar-brand a{ color: #222222; font-weight: bold; }
.custom-navbar .navbar-brand .version-label{ color: #007bff; }
.custom-navbar .navbar-toggler{ color: #222222;}
.custom-navbar .navbar-nav .nav-item{ 
    color: #000000; 
    
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;        
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

/*.custom-navbar::after{
    display: none;
    content:"";
    padding: 0.25rem;
    background-color: pink;
    position:absolute;
    top:64px;
    left:0;
    right:0;
    opacity: 0.5;
}*/

.custom-navbar .navbar-nav .nav-item:hover{ background-color: #fff}
.custom-navbar .navbar-nav .nav-item .nav-link{ color: #000000;}

.custom-navbar.form-A.navbar .container-fluid{ border-bottom-color: var(--form-A-header-color);}
.custom-navbar.form-B.navbar .container-fluid{ border-bottom-color: var(--form-B-header-color);}
.custom-navbar.form-C.navbar .container-fluid{ border-bottom-color: var(--form-C-header-color);}
.custom-navbar.form-D.navbar .container-fluid{ border-bottom-color: var(--form-D-header-color);}
.custom-navbar.form-E.navbar .container-fluid{ border-bottom-color: var(--form-E-header-color);}
/*.custom-navbar.form-E.navbar .container-fluid{ border-bottom: 10px double #222222}*/

/*.custom-navbar.form-A::after{ display: block; background-color: #ff00d8; border-bottom: 1px solid #222222;}
.custom-navbar.form-B::after{ display: block; background-color: #007bff; border-bottom: 1px solid #222222;}
.custom-navbar.form-C::after{ display: block; background-color: #00db5f; border-bottom: 1px solid #222222;}
.custom-navbar.form-D::after{ display: block; background-color: #efff00; border-bottom: 1px solid #222222;}
.custom-navbar.form-E::after{ display: block; background-color: #ffffff; border-bottom: 1px solid #222222;}*/

/*
.custom-navbar.formA{ background-color: #ff00d8;border:1px solid #ff00d8;}
.custom-navbar.formA .navbar-brand a{color: #ffffff;}
.custom-navbar.formA .navbar-brand .version-label{   color: #FFC0CB;}
.custom-navbar.formA .navbar-toggler{ color: #ffffff;}
.custom-navbar.formA .navbar-nav .nav-item{ color: #ffffff;}
.custom-navbar.formA .navbar-nav .nav-item .nav-link{ color: #ffffff;}
.custom-navbar.formA .navbar-nav .nav-item .nav-link:hover{background-color: #ffffff; color: #ff00d8 !important;}

.custom-navbar.formC{ background-color: #00db5f;border:1px solid #00db5f;}
.custom-navbar.formC .navbar-brand a{color: #ffffff;}
.custom-navbar.formC .navbar-brand .version-label{   color: #008f3e;}
.custom-navbar.formC .navbar-toggler{ color: #ffffff;}
.custom-navbar.formC .navbar-nav .nav-item{ color: #ffffff;}
.custom-navbar.formC .navbar-nav .nav-item .nav-link{ color: #ffffff;}
.custom-navbar.formC .navbar-nav .nav-item .nav-link:hover{background-color: #ffffff; color: #00db5f !important;}

.custom-navbar.formD{ background-color: #efff00;border:1px solid #efff00;}
.custom-navbar.formD .navbar-brand a{color: #262626;}
.custom-navbar.formD .navbar-brand .version-label{   color: #727272;}
.custom-navbar.formD .navbar-toggler{ color: #262626;}
.custom-navbar.formD .navbar-nav .nav-item{ color: #262626;}
.custom-navbar.formD .navbar-nav .nav-item .nav-link{ color: #262626;}
.custom-navbar.formD .navbar-nav .nav-item .nav-link:hover{background-color: #ffffff; color: #262626 !important;}*/


.dropdown-subcontainer{ overflow: hidden; }
.dropdown-submenu .arrow{
    -webkit-transform: translate(100%, 0);
    -moz-transform: translate(100%, 0);
    -ms-transform: translate(100%, 0);
    -o-transform: translate(100%, 0);
    transform: translate(100%, 0); 
}
.dropdown-subcontainer .dropdown-subcontent{ 
    margin-top: 4px;
    height: auto;
    max-height: 0px;
    
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;        
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.dropdown-subcontainer .dropdown-subcontent.show-subcontent{  max-height: 1000px;}
.dropdown-subcontainer .dropdown-subcontent > a:not(:last-child){
    border-bottom: solid 1px #e9ecef;
}
.dropdown-submenu i, .dropdown-item i, .dropdown-modal-link i 
{ padding-right: 1rem; }
.dropdown-submenu .fas.fa-angle-down, 
.dropdown-item .fas.fa-angle-down,
.dropdown-modal-link .fas.fa-angle-down { 
    padding-right: 0; 
    margin-right: -1.25rem;
    float: right;
}

.dropdown-modal-link{
    display: block;
    width: 100%;
    padding: 0.75rem 1.5rem;
    clear: both;
    font-weight: 400;
    text-align: inherit;
    white-space: nowrap;
    border: 0;
    color: #000000;
    cursor: pointer;
}

.nav-link i{ 
    font-size: 1.25em;     
}
#notification-icon{
    position: relative;
    display: inline-block;
}
#notification-icon i{
    margin:0 0.5em;
}
@media (max-width: 575px) { 
    .nav-item .float-icon { float: right; }
    .nav-link i { margin: 0 0.5em; }
}
#navbarDropdown #notification-icon .badge {
    position: absolute;
    top: 0;
    right: 0;
    
    -ms-transform: translate(25%,-50%);
    -moz-transform: translate(25%,-50%);
    -webkit-transform: translate(25%,-50%);
    transform: translate(25%,-50%);
}
.custom-navbar .dropdown-menu{ 
    max-height: 0px;
    display: block;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;        
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.custom-navbar .dropdown-menu.show{ 
    max-height: 1000px; 
/*    padding-top: 8px;
    padding-bottom: 8px;*/
}
body.modal-open{
    overflow: initial;
}
/*----------------------------------------------------------------------
[3. Side Menu]
*/
.menu-sidebar {
    width: 260px;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    background: #fff;
    overflow-y: auto;
    height: 100vh;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
    /*z-index: 1000;*/
}

.menu-sidebar .logo {
    height: 64px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: #000066;
    padding: 0 24px;
    -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
}

.pub-container .logo {
    height: 64px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: #000066;
    padding: 0 24px;
}

.menu-sidebar .logo a, .pub-container .logo a {
    display: flex;
}

.menu-sidebar .logo img, .pub-container .logo img {
    width: 50px;
    height: 50px;
}

.menu-sidebar .logo .logo-title, .pub-container .logo .logo-title {
    padding-left: 10px;
    color: #fff;
    margin: auto;
}

.menu-sidebar .logo .logo-version, .pub-container .logo .logo-version {
    font-size: 11px;
    padding-left: 10px;
    color: #fff;
    margin: auto;
}

.menu-sidebar-content {
    height: -webkit-calc(100vh - 75px);
    height: -moz-calc(100vh - 75px);
    height: calc(100vh - 75px);
    border-right: 1px solid #e5e5e5;
    position: relative;
}

.navbar-sidebar .navbar-list li {
    position: relative;
    cursor: pointer;
}

.navbar-sidebar .navbar-list li.active > a, .mobile-navbar .mobile-menu .mobile-menu-list li.active > a {
    color: #4272d7;
}

.navbar-sidebar .navbar-list li > a:hover, .mobile-navbar .mobile-menu-list li > a:hover {
    color: #4272d7;
}

.navbar-sidebar .navbar-list li a {
    font-size: 16px;
    color: #555;
    display: block;
    padding: 16px 25px;
    border-bottom: 1px solid #f2f2f2;
}

.navbar-sidebar .navbar-list li > ul > li > a {
    padding-left: 65px;
    background-color: #f8f8f8;
}

.navbar-sidebar .navbar-list li a > i, .mobile-navbar .mobile-menu .mobile-menu-list li a > i {
    margin-right: 20px;
    min-width: 22px;
}

.navbar-sidebar .navbar-list li .arrow {
    position: absolute;
    right: 0;
    top: 0;
    text-align: center;
    vertical-align: middle;
    height: 59px;
    width: 59px;
    line-height: 59px;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.navbar-sidebar .navbar-list li .arrow.up {
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

.navbar-sidebar .navbar-list li .arrow i {
    font-size: 16px;
    color: #999;
}

a.dropdown-toggle::after {
    border: none;
    margin:0;
}

/** Mobile **/
.mobile-navbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.mobile-navbar .container-fluid {
    padding: 15px 0;
}

.mobile-navbar .mobile-menu {
    top: 88px;
    z-index: 20;
    width: 90%;
    position: absolute;
}

.mobile-navbar .mobile-menu .mobile-menu-list {
    background: #f8f8f8;
}

.mobile-navbar .mobile-menu .mobile-menu-list .mobile-sub-list {
    background: #ffffff;
}

.mobile-navbar .mobile-menu .mobile-menu-list li a {
    color: #555;
    display: block;
    padding: 10px 15px;
    padding-left: 15px;
    border-bottom: 1px solid #e6e6e6;
    text-transform: capitalize;
    line-height: inherit;
    width: 100%;
}

.mobile-navbar .mobile-menu .mobile-menu-list li .arrow {
    right: 30px;
    text-align: center;
    vertical-align: middle;
    height: 27px;
    width: 27px;
    line-height: 27px;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
    float: right;
}

.mobile-navbar .mobile-menu .mobile-menu-list li .arrow.up {
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

.mobile-navbar .mobile-menu .mobile-menu-list li .arrow i {
    font-size: 16px;
    color: #999;
}

.main-content {
    /*padding-top: 125px;*/
    /*padding-top: 65px;*/
    /*min-height: 89vh;*/
    min-height: 75vh;
}

.pub-content {
    min-height: 89vh;
}

.breadcrumb-container {
    background-color: #fff;
    position: relative;
    padding: 16px 25px;
    margin-bottom: 1rem;
    /*top: 64px;*/
    width: 100%;
    z-index: 2;
    -webkit-box-shadow: 0px 2px 5px -2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 2px 5px -2px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 2px 5px -2px rgba(0, 0, 0, 0.2);
}

.custom-breadcrumb {
    list-style: none;
    margin: 0;
    padding: 0;
}

.custom-breadcrumb .breadcrumb-item {
    float: left;
}

.custom-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    display: inline-block;
    color: #636c72;
    content: "/";
}

.custom-breadcrumb .breadcrumb-item > a {
    color: #555;
}

.custom-breadcrumb .breadcrumb-item.active > a {
    color: #4272d7;
}

.custom-breadcrumb .breadcrumb-item > a:hover {
    color: #000080;
}

.print-container {
    text-align: right;
}

.print-container i {
    cursor: pointer;
}

.print-container i:hover {
    color: #4272d7;
}


/*----------------------------------------------------------------------
[1. Dashboard]
*/
.dashboard .task-list .card {
    border-radius: 0;
    border: 0;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.1),-1px 0 2px rgba(0,0,0,0.05);
}

.home-container, .section-container, .process-container {
    width: 90%;
}

.section-container .round-chart {
    display: inline-block;
}

.section-container .card {
    border-radius: 0;
    border: 0;
}

.dashboard .task-container .task-icon,
.dashboard .task-container .task-detail,
.dashboard .task-container .task-detail .task-name,
.dashboard .task-container .task-count{
    align-self: center !important;    
}

.dashboard .task-list .task-icon {
    margin-right: 25px;
}

/*.dashboard .task-list .task-detail {
    align-self: center !important;
    width: 100%;
}*/

.dashboard .task-detail .task-name {
   font-weight: 500;
   color: #303030;
   margin-bottom: 0rem;
   margin-top: 0rem;
}

.dashboard .task-count {
    color: #000080;
    font-size: 1.5rem;
    font-weight: 500;
    margin-right: auto;
    align-self: center !important;    
}

.dashboard .task-detail .task-url {
    margin-top: 0.5rem;
    text-align: right;
}

.dashboard .task-icon.pending{
    margin-right: 1rem;
    /*align-self: center;*/
}
.dashboard .task-count{
    font-size: 1.25rem;
}

.dashboard .table-list .card {
    border-radius: 0;
    border: 0;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.1),-1px 0 2px rgba(0,0,0,0.05);
}

.dashboard .card .card-header {
    padding: 1.25rem 1.25rem 0 1.25rem;
}

.dashboard .card .card-body, .dashboard .card .card-header.card-name {
    padding: 1.25rem;
}

.dashboard .table-list .card .card-body .table {
    margin-bottom: 0;
}

.dashboard .table-list .card .card-body .table-hover tbody tr:hover {
  background-color: #cce6ff;
}

.dashboard .table-list .table td > a:hover {
    text-decoration: underline;
}

.dashboard .card .card-header {
    background-color: #f0f8ff;
    color: #000080;
    border-bottom: none;
}

.dashboard .card .card-name {
    float: left;
    font-size: 18px;
}

.dashboard .table-list .card .card-button {
    float: right;
}

.dashboard .table-list .card .card-body {
    font-size: 14px;
}

.dashboard .table-list .card .card-footer {
    border-top: 1px solid #f2f2f2;
    background-color: #fff;
    text-align: center;
    color: #4272d7;
    font-size: 14px;
}

.dashboard .analytic-list .card {
    border-radius: 0;
    border: 0;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.1),-1px 0 2px rgba(0,0,0,0.05);
}

.dashboard .analytic-list .analytic-name {
    color: #303030;
    font-size: 16px;
    font-weight: 500;
}

.dashboard .analytic-list .stage-count {
    font-size: 22px;
    color: #303030;
    font-weight: 600;
}

.dashboard .analytic-list .stage-label {
    font-size: 14px;
    float: right;
    margin-top: 8px;
    color: #555;
    font-weight: 300;
}

.dashboard .analytic-list .analytic-value {
    font-size: 14px;
}

.dashboard .analytic-list .progress {
    height: 5px;
    margin-bottom: 0;
}

.dashboard .analytic-list ul.process-domain {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}

.dashboard .analytic-list .process-domain li:not(:first-child) {
    margin: 26px 0px;
}

.dashboard .analytic-list .process-domain h2 {
    font-size: 18px;
    margin-bottom: 2px;
}

.dashboard .analytic-list .process-domain small {
    font-size: 14px;
}

.dashboard .progress .progress-bar {
    -webkit-transition: none !important;
    transition: none !important;
}

.public-dashboard #statistic-section .card-body {
    display: flex;
}

.public-dashboard .statistic-data {
    text-align: left;
}

.public-dashboard .statistic-data h2 {
    font-size: 28px;
    color: #000080;
}

.public-dashboard .statistic-data p {
    font-size: 16px;
    color: #303030;
    margin: 0;
}

.public-dashboard .statistic-icon {
    margin-left: auto;
    margin-top: 10px;
}

.public-dashboard .statistic-icon i {
    font-size: 50px;
}
/*----------------------------------------------------------------------
[1. Navigation Step]
*/
.navigation-step {
    margin: 0 20px;
}

.navigation-step .navigation-box {
    padding: 0;
    position: relative;
}

.navigation-step .navigation-box .progress {
    position: relative;
    border-radius: 0px;
    height: 6px;
    margin: 24px 0;
}

.navigation-step .navigation-box:first-child .progress {
    left: 50%;
    width: 50%;
}

.navigation-step .navigation-box:last-child .progress {
    width: 50%;
}

.navigation-step .navigation-box .progress .progress-bar {
    background: #b3b3b3;
}

.navigation-step .navigation-box .step-no {
    position: absolute;
    width: 30px;
    height: 30px;
    display: block;
    top: 27px;
    left: 50%;
    margin-top: -15px;
    margin-left: -15px;
    border-radius: 50%;
    font-size: 15px;
    font-weight: 400;
    border: 3px solid #b3b3b3;
    background-color: #fff;
    color: #b3b3b3;
}

.navigation-step .navigation-box .step-detail {
    text-align: center;
}

.navigation-step .navigation-box.active .step-no, .navigation-step .navigation-box.complete .step-no {
    color: #32cd56;
    border-color: #46d267;
}

/*.navigation-step .navigation-box.active .step-no,*/ 
.navigation-step .navigation-box.rejected .step-no {
    color: #cd3232;
    border-color: #cd3232;
}

.navigation-step .navigation-box.active .progress .progress-bar {
    width: 50%;
    background: #46d267;
}

.navigation-step .navigation-box:first-child.active .progress .progress-bar {
    width: 0%;
}

.navigation-step .navigation-box.complete .progress .progress-bar {
    width: 100%;
    background: #46d267;
}

.navigation-step .navigation-box.rejected .progress .progress-bar {
    width: 50%;
    background: linear-gradient(to right, #46d267 , #cd3232);
    /*background: #cd3232;*/
}

/*----------------------------------------------------------------------
[1. Content]
*/
.body-content .card {
    border-radius: 0;
    border: 0;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.1),-1px 0 2px rgba(0,0,0,0.05);
}

.body-content .card .card-header {
    /*background-color: #fff;*/
    color: #000080;
    border-bottom: 2px solid #f2f2f2;
}

.body-content .card .card-header .card-subheader {
    font-size: 13px;
}

.body-content .dynamic-table .table th, .dashboard .table-list .table th, .public-dashboard .dynamic-table .table th {
    border: none;
    font-weight: 500;
    color: #fff;
    vertical-align: top;
    background-color: #000080;
}

.body-content .dynamic-table .table th > a, .body-content .application-table .table th > a, .dashboard .dynamic-table .table th > a,
.public-dashboard .dynamic-table .table th > a{
    color: #fff;
}

.body-content .dynamic-table .table-striped > tbody > tr:nth-of-type(2n+1), 
.body-content .application-table .table-striped > tbody > tr:nth-of-type(2n+1),
.dashboard .table-list .table-striped > tbody > tr:nth-of-type(2n+1), 
.public-dashboard .dynamic-table .table-striped > tbody > tr:nth-of-type(2n+1){
    background-color: #f1f8ff;
} 

.body-content .dynamic-table .table td > a:hover {
    text-decoration: underline;
}

.body-content .application-table .table th {
    font-weight: 500;
    color: #fff;
    vertical-align: top;
    background-color: #000080;
}

.body-content .application-table .additional-rights {
    background-color: #f1f8ff;
}

.process-form .table thead th {
    font-weight: 500;
}

.process-form a:hover {
    text-decoration: underline;
}

.process-form .input-group-prepend.input-designation .input-group-text {
    min-width: 130px;
}

.process-form .multiple-file {
    margin: 0;
}

.process-form .custom-file-button {
    padding-right: 0;
}

.process-form .custom-file-button .btn {
    line-height: inherit;
}

.process-form .policy-doc {
    line-height: 1.5;
    padding: 0.25rem 0.5rem;
}

.process-form .row.compare:hover {
    background-color: #cce6ff;
}

.input-group .select2-selection--multiple {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

/*----------------------------------------------------------------------
[1. Loading]
*/
#loading {
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   position: fixed;
   display: block;
   opacity: 0.85;
   background-color: #fff;
   z-index: 99;
   text-align: center;
   display: none;
}

#loading .loading-div {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 100;
    width: 360px;
    height: 156px;
    margin-top: -78px;
    margin-left: -180px;
}

#loading .loading-image {
  
  width: 100px;
  height: 100px;
  -webkit-animation: spin 4s linear infinite; /* Safari */
  animation: spin 4s linear infinite;
}

#loading .loading-title {
    font-size: 18px;
    font-weight: 600;
}

#loading .loading-desc {
    font-size: 14px;
}

#docChart, #valChart, #impChart, #comChart {
  margin: 20px;
  width: 180px;
  height: 180px;
  position: relative;
}

@media (max-width: 991px) {
    .main-container {
        position: relative;
        /*top: 88px;*/
        padding-left: 0;
    }
    
    .main-navbar {
        position: relative;
        top: 0;
        left: 0;
        height: 170px;
    }
    
    .main-container .main-navbar-content {
        padding: 0;
    }
    
    .main-content {
        /*padding-top: 50px;*/
    }
}


.form-control-plaintext{
  border: 1px solid #ced4da !important;
  border-width: 1px !important;
  border-radius: 5px !important;
}

/*  eprestasi  (START) */
/*.radio-label-vertical-wrapper {
  padding-bottom: 13px;
  position: relative;
  display: inline-block;
  margin-bottom: 20px;
}*/

.radio-label-vertical-wrapper .form-group {
    margin-top: 1.5rem;
    width: max-content;
    letter-spacing: 1px;
}

.radio-label-vertical-wrapper input {
    margin: 0 10px;
}

.radio-label-vertical-wrapper label:not(.radio-label-vertical) {
  display: inline-block;
/*  position: relative;
  right: 0.9rem;
  bottom: 1rem;*/
  /*margin-right:0.5rem;*/

    /*position: absolute;*/
    -webkit-transform: translate(calc(-100% - 10px), -100%);
    -moz-transform: translate(calc(-100% - 10px), -100%);
    -ms-transform: translate(calc(-100% - 10px), -100%);
    -o-transform: translate(calc(-100% - 10px), -100%);
    transform: translate(calc(-100% - 10px), -100%);
  
  text-align: center;
  width: 15px;
}

.radio-label-vertical input {
  position: absolute;
  top: 28px;
  left: 50%;
  margin-left: -6px;
  margin-top: 1.5rem;
  display: inline-block;
  cursor: pointer;
}

.table-container{
    overflow: auto;
}

.min-width{
    min-width: 420px;    
}

.form-title{
    text-align: center;
    font-size: large;
}

.remove-border{
    border: none;
}

.custom-sm-input{
    border: 1px solid #ced4da !important;
    padding: 6px 10px;
    width: 5rem;
    border-radius: 5px;
}

.list-v-padding{
    padding-top:6px;
    padding-bottom:6px;
}

.list-h-padding{
    padding-right:20px;
}

.card .card-body{
    margin: 12px 20px;
}

.total-input-width{
    width: 4rem;
}
/*  eprestasi  (END) */
.custom-form-title {
  padding: 30px 0;
  text-align: center;
  letter-spacing: 2px;
}

.custom-form-title h3 {
    margin: 0 0 20px;
    font-size: 2.5rem;
    font-weight: 300;
}

.custom-form-title h2 {
    margin: 0 0 20px;
    font-size: 2rem;
    font-weight: 300;
}

.custom-form-title.alert {
    font-size: 0.6rem;
}

.custom-card-container{
    padding: 1.5rem 1rem;
    background-color: white; 
    border-color: #dee2e6;
    border-style: solid;
    border-top-style: none;
    border-width: 1px;
    margin: 0;
    width: 100%;
}    

.card{
    border: 1px solid #dee2e6 !important;
    
}

.custom-footer{
    padding: 10px;
    background-color: #F0FFFF;
    border-color: #dee2e6;
    border-style: solid;
    border-top-style: none;
    border-width: 1px;
    margin-bottom: 1rem;
}

.form-control::placeholder {
    color: #6c757d;
    opacity: 0.4;
}

.card-header, .modal-header{
    background-color: #F0FFFF;
}

#to-top-button {
  display: inline-block;
  background-color: #000066;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: background-color .3s, 
    opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
  font-weight: normal;
  font-style: normal;
  font-size: 2em;
  line-height: 50px;
  color: #fff;
}

#to-top-button:hover {
  cursor: pointer;
  background-color: #333;
}

#to-top-button:active {
  background-color: #555;
}

#to-top-button.show {
  opacity: 0.75;
  visibility: visible;
}

.imagesInner{
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    /*height: 638px;*/
    height: 100%;
    overflow: hidden;
    position: relative;
    user-select: none;
}

.icon-position {
    /*position: absolute;*/
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes float-icon {
    0%      {top:0px;}
    100%    {top:20px;}
}

/* Standard syntax */
@keyframes float-icon {
    0%      {top:0px;}
    100%    {top:20px;}
}

.animated-icon {
  width: 80px;
  height: 80px;
  position: relative;
  -webkit-animation-name: float-icon; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 1.5s; /* Safari 4.0 - 8.0 */
  -webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */
  animation-name: float-icon;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
}

.document-icon-position {
    position: absolute;
    left: 50%;
    margin-top: 201px;
    margin-left: -600px;
}

.contact-icon-position {
    position: absolute;
    left: 50%;
    margin-top: 400px;
    margin-left: 500px;
}

.monitor-icon-position {
    position: absolute;
    left: 50%;
    margin-top: 265px;
    margin-left: -630px;
}

.delayed-animation-4 {
    -webkit-animation-delay: .4s;
    animation-delay: .4s;
}

.attention-needed-tab{
    /*border: 5px solid greenyellow !important;*/
    border-color: greenyellow !important;
    box-shadow: 0 -5px 10px -5px greenyellow !important;

    transition: box-shadow 1s;
}

.attention-needed-tab:hover{
    box-shadow: 0 -10px 20px -10px greenyellow !important;
}

.nav-tabs{
    border-bottom: 1px solid #dee2e6 ;
    background-color: #F5F5F5;
}

.custom-alert{
    position: relative;    
}

#static-alert .custom-alert-msg{
    padding: 0.75rem 1.25rem;
}

#static-alert{
    
}

.custom-alert-float{
    border-radius: 0px;
    position: fixed;
    max-width: 60%;
    
    bottom: 1rem;
    right: 1rem;
    
/*    top: 64px;
    left: 50%;

    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);*/
    
    z-index: 10;
    opacity: 0.9;
}

#jpa-skt-form .section-title-container, #jpa_createApprovedJpa_page .section-title-container { text-align: center; margin-bottom: 2rem; }
#jpa-skt-form .section-title-container .reminder-container,
#jpa_createApprovedJpa_page .section-title-container .reminder-container{ margin-top: 0.5rem; }
#jpa-skt-form .section-title-container .main-title,
#jpa_createApprovedJpa_page .section-title-container .main-title{ font-size: 1.25rem; font-weight: bold; }
#jpa-skt-form .section-title-container .sub-title,
#jpa_createApprovedJpa_page .section-title-container .sub-title{  font-size: 1rem; }
#jpa-skt-form .section-title-container .alert,
#jpa_createApprovedJpa_page .section-title-container .alert{  font-size: 0.75rem; }
#jpa-skt-form .card .table-responsive-lg{  margin: 0 auto;}
#jpa-skt-form .form-input-content{ padding: 10px; }

@media (min-width: 768px) { 
    #jpa-skt-form .section-title-container{ text-align: center; }
    #jpa-skt-form .section-title-container .main-title{ font-size: 1.25rem; font-weight: bold; }
    #jpa-skt-form .section-title-container .sub-title{  font-size: 1.1rem; }
    #jpa-skt-form .section-title-container .alert{  font-size: 0.75rem; padding: 0.5rem; }
    #jpa-skt-form .form-input-content{
        padding: 20px;
    }
}

@media (max-width: 767px) { 
    .container-fluid.jpa-container{
        padding:0;
    }
    
    .custom-alert-float{
        max-width: 100%;
        bottom: 0;
        right: 0;
        margin:0;
    }
}

.reminder-container .btn{
    font-size: 0.75rem;
}

.custom-alert-success{
    background-color: greenyellow; 
}

.custom-alert-success .custom-alert-icon{
    background-color: green; 
}

.custom-alert-fail{
    background-color: pink; 
}

.custom-alert-fail .custom-alert-icon{
    background-color: red; 
}

.custom-alert-icon{
    position: absolute;
    
    left:0;
    top:0;
    padding: 0.75rem 1.25rem;
    height:100%;
    color: white;
}

.custom-alert-msg{
    margin-left: 3rem;
}

.custom-alert-icon { 
    display: flex; 
    margin: auto; 
} 

.custom-alert-icon i { 
  margin: auto; /* Important */ 
  text-align: center; 
}

/*html, body, 
.main-container, 
.main-content, 
.page-content, 
.container-fluid,
.body-content, 
.body-content .col-12,
.body-content .col-12 .process-form,
.form-content,
.form-content .form-input-content{
    height: 100%;
}*/

html{
    /*scroll-behavior: smooth;*/
}
    
/*.form-content{
    position: relative !important;
}*/

.form-content{
    position: relative;
    /*border: 1px solid #dee2e6  ;*/
    /*background-color: white;*/
    /*overflow-y: auto;*/
}

/*.scrollspy {
    height: 100%;
    overflow: auto;
}*/

/*#jpa-title, #skt-title{
    margin-top: 3rem !important;
}*/


#jpa-skt-nav{
    position: fixed;
    right: -1rem;
    top: 78px;
    /*    top: 50%;
    
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    transform: translate(0, -50%);    */
}

#jpa-skt-nav {
    z-index: 2;
}

#jpa-skt-nav .nav-link {
    margin-bottom: 0.25rem;
    box-shadow: 1px 1px 5px grey;
    background-color: white;
    border-radius: 1.5rem 0 0 1.5rem !important;
    border: 1px solid #dee2e6  ;
    opacity: 0.75;
    text-decoration: none;
}

#jpa-skt-nav .nav-link {
    position: relative;
    padding-left: 1rem;
    padding-right: 1.5rem;
}

#jpa-skt-nav .top-icon {
    position: absolute;
    font-size: 1.5rem;
    left: 0.5rem;
    
    top:50%;
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

#jpa-skt-nav .nav-link.back-to-top{
    position: absolute;
    background: none;
    border: none;
    box-shadow: none;
    padding: 1.4em;
    /*margin-left: -3.5em;*/
    bottom: -3rem;
    right: 1.5rem;
        
    box-shadow: 1px 1px 5px grey;
    background-color: white;
    border-radius: 1.4em !important;
    border: 1px solid #dee2e6;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes blinking-red {
    0%      {   opacity:0.75; box-shadow: 0px 0px 5px green;   }
    100%    {   opacity:1; box-shadow: 0px 0px 10px green;   }
}

/* Standard syntax */
@keyframes blinking-red {
    0%      {   opacity:0.75; box-shadow: 0px 0px 5px green;   }
    100%    {   opacity:1; box-shadow: 0px 0px 10px green;   }
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes blinking-border {
    0%      {   box-shadow: 0px 0px 8px red;   }
    100%    {   box-shadow: 0px 0px 10px red;   }
}

/* Standard syntax */
@keyframes blinking-border {
    0%      {   box-shadow: 0px 0px 8px red;   }
    100%    {   box-shadow: 0px 0px 10px red;   }
}

#jpa-skt-nav .attention-needed-nav{
    /*border: 5px solid greenyellow !important;*/
    border-color: red !important;
    box-shadow: 0 0 5px red !important;

    transition: box-shadow 1s;
}

#jpa-skt-nav .attention-needed-nav:hover{
    box-shadow: 0 0 20px red !important;
}

/*#jpa-skt-nav .attention-needed-nav::after {
    content: '';
    background: red;
    border-radius:1rem;
    padding:0.3rem;
    position: absolute;
    left: 0;
    top: 0.25rem;
    box-shadow: 0px 0px 15px red;   
    opacity:0.75;

    -webkit-animation-name: blinking-red;  Safari 4.0 - 8.0 
    -webkit-animation-duration: 1s;  Safari 4.0 - 8.0 
    -webkit-animation-iteration-count: infinite;  Safari 4.0 - 8.0 
    animation-name: blinking-red;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
}*/

.form-input-content { border-bottom: 1px solid #dee2e6 }

/*.form-input-content .attention-needed-card {*/
.attention-needed {
    border-color: red;
    box-shadow: 0 0 5px red;

    transition: box-shadow 1s;;
    /*top: 50%;*/
    
    -webkit-animation-name: blinking-border; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
    -webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */
    animation-name: blinking-border;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
}

/*.form-input-content .attention-needed-card .card-header{
    position: relative;
}*/
/*.form-input-content .attention-needed-card .card-header::after {
    content: '';
    background: red;
    border-radius:1rem;
    padding:0.4rem;
    position: absolute;
    left: 0.25rem;
    box-shadow: 0px 0px 15px red;
    
    top: 0.25rem;
    top: 50%;

    -webkit-transform: translate(50%, -50%);
    -moz-transform: translate(50%, -50%);
    -ms-transform: translate(50%, -50%);
    -o-transform: translate(50%, -50%);
    transform: translate(0, -50%);    

    -webkit-transform: translate(50%, -50%);
    -moz-transform: translate(50%, -50%);
    -ms-transform: translate(50%, -50%);
    -o-transform: translate(50%, -50%);
    transform: translate(0, -50%);    
    
    -webkit-animation-name: blinking-red;  Safari 4.0 - 8.0 
    -webkit-animation-duration: 0.5s;  Safari 4.0 - 8.0 
    -webkit-animation-iteration-count: infinite;  Safari 4.0 - 8.0 
    animation-name: blinking-red;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
}*/

#jpa-skt-nav .nav-link:hover{
    opacity: 1;

    -webkit-transform: translate(-0.5rem, 0);
    -moz-transform: translate(-0.5rem, 0);
    -ms-transform: translate(-0.5rem, 0);
    -o-transform: translate(-0.5rem, 0);
    transform: translate(-0.5rem, 0);    
}


#jpa-skt-nav .sub-nav .nav-item {
    margin-left: 2rem;
}

#jpa-skt-nav .active {
    background-color: #007bff;
    border: 1px solid #007bff;
}

#top-page-marker{
    -webkit-transform: translate(0, -150px);
    -moz-transform: translate(0, -150px);
    -ms-transform: translate(0, -150px);
    -o-transform: translate(0, -150px);
    transform: translate(0, -150px); 
}

/*for nav*/
#jpa-title,
#jpa-1,
#jpa-2,
#jpa-3,
#jpa-4,
#jpa-5,
#jpa-6,
#jpa-7,
#jpa-8,
#jpa-9,
#skt-title,
#skt-1,
#skt-2,
#skt-2-q2,
#skt-3,
#skt-3-q2{
    -webkit-transform: translate(0, -100px);
    -moz-transform: translate(0, -100px);
    -ms-transform: translate(0, -100px);
    -o-transform: translate(0, -100px);
    transform: translate(0, -100px);    
}

#jpa-2-2,
#jpa-2-3{
    -webkit-transform: translate(0, -100px);
    -moz-transform: translate(0, -100px);
    -ms-transform: translate(0, -100px);
    -o-transform: translate(0, -100px);
    transform: translate(0, -100px);        
}


#jpa-skt-form .card.moderation-card{
    min-height: min-content;    
}

.no-padding{
    padding: 0;
}

@media (max-width: 767px) { 
    #jpa-skt-form .card.moderation-card .card-body{
        margin:0;  
    }
        
    #jpa-skt-form .card .card-body{
        margin:0;  
    }
    
    .page-content{
        padding: 0;
    }
    
    #jpa-skt-nav{
        display:none;
    }
    
    #jpa-skt-form .form-input-content{
        width:100%;
    }
}

@media (min-width: 768px) { 
    #jpa-skt-form .card{
        /*min-height: 35rem;*/
    }
}

.form-button-container{
    /*padding: 3rem;*/
    text-align: center;
}

/* TemporRY */
/*.menu-sidebar{
    display: none !important;
}
    
.main-container{
    padding-left: 0;
}

.main-navbar{
    left: 0;
}*/
/* TemporRY */

.main-navbar .header-logo {
    /*height: 64px;*/
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: #000066;
    padding: 0 24px;
/*    -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);*/
}

.main-navbar .header-logo a {
    display: flex;
}

.main-navbar .header-logo img {
    width: 50px;
    height: 50px;
}

.main-navbar .header-logo .logo-title {
    padding-left: 10px;
    color: #fff;
    margin: auto;
}

.main-navbar .header-logo .logo-version {
    font-size: 11px;
    padding-left: 10px;
    /*color: #fff;*/
    bottom: 0;
    margin: auto;
}

.fold-table{}

.fold-table .row-label{
    position: relative;
    /*background-color: green !important;*/
}

.fold-table .row-label:after {
    content: "";
    border: solid black;
    border-width: 0 4px 4px 0;
    display: inline-block;
    padding: 4px;
    
    margin-right: -12px;
    
    transition: all .3s ease;

    -webkit-transform: translate(-200%,100%) rotate(45deg);
    -moz-transform: translate(-200%,100%) rotate(45deg);
    -ms-transform: translate(-200%,100%) rotate(45deg);
    -o-transform: translate(-200%,100%) rotate(45deg);
    transform: translate(-200%,100%) rotate(45deg);
}

.fold-table .row-label.open:after {
    -webkit-transform: translate(-200%,100%) rotate(-135deg);
    -moz-transform: translate(-200%,100%) rotate(-135deg);
    -ms-transform: translate(-200%,100%) rotate(-135deg);
    -o-transform: translate(-200%,100%) rotate(-135deg);
    transform: translate(-200%,100%) rotate(-135deg);
}

.legends-label,
.row-label td{     
    color: #00529B;
    background-color: #BDE5F8;
}
    
.legends-label.is-incomplete,
.row-label.is-incomplete td{ 
    color: #9F6000;
    background-color: #FEEFB3;;
}

.legends-label.is-rejected,
.row-label.is-rejected td{ 
    color: #D8000C;
    background-color: #FFD2D2;
}
.legends-label.is-verified,
.row-label.is-verified td{ 
    color: #4F8A10;
    background-color: #DFF2BF;
}

.row-fold { 
    border-bottom: 2px solid #696969;
}

.row-fold td{ padding: 0; }

.row-fold td .fold-container{ 
    padding: 0rem 1rem; 
    max-height: 0px; 
    overflow: hidden;
    
    -webkit-transition: all 1s ease; /* For Safari 3.1 to 6.0 */
            transition: all 1s ease;
}
.row-fold.open td .fold-container{ 
    padding: 1rem; 
    max-height: 300px; 
}

.duration-input{
    display: inline-block;
    width: 6rem;
}

#skt-awal-work-table .charsRemaining,
#skt-review .charsRemaining,
.textarea-content .charsRemaining,
.table-content .charsRemaining,
#skt-tengah-work-table .charsRemaining{
    margin-top: 4px;
    font-size: 0.75rem;
    color: #A9A9A9;
    float: right;
}

.pink-border{
    height: inherit;
    border-left: 4rem solid pink;
}

.progress .progress-bar{
    width:0%;
    
    -webkit-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    transition: all 1.5s ease;
}

.progress .progress-bar:hover{
    width:33%;
}

#progress-bar-container{
    padding: 4rem 0 2rem;
}
#progress-bar-container .lead{
    font-size: 2rem;
}

/*.bs-wizard {margin-top: 40px;}*/

/*Form Wizard*/
/*.bs-wizard {border-bottom: solid 1px #e0e0e0; padding: 3rem 0 5rem 0;}
.bs-wizard > .bs-wizard-step {padding: 0; position: relative;}
.bs-wizard > .bs-wizard-step + .bs-wizard-step {}
.bs-wizard > .bs-wizard-step .bs-wizard-stepnum {color: #595959; font-size: 16px; margin-bottom: 5px;}
.bs-wizard > .bs-wizard-step .bs-wizard-info {color: #999; font-size: 14px;}
.bs-wizard > .bs-wizard-step > .bs-wizard-dot {position: absolute; width: 30px; height: 30px; display: block; background: pink; top: 45px; left: 50%; margin-top: -15px; margin-left: -15px; border-radius: 50%;} 
.bs-wizard > .bs-wizard-step > .bs-wizard-dot:after {content: ' '; width: 14px; height: 14px; background: red; border-radius: 50px; position: absolute; top: 8px; left: 8px; } 
.bs-wizard > .bs-wizard-step > .progress {position: relative; border-radius: 0px; height: 8px; box-shadow: none; margin: 20px 0;}
.bs-wizard > .bs-wizard-step > .progress > .progress-bar {width:0px; box-shadow: none; background: pink;}
.bs-wizard > .bs-wizard-step.complete > .progress > .progress-bar {width:100%;}
.bs-wizard > .bs-wizard-step.active > .progress > .progress-bar {width:50%;}
.bs-wizard > .bs-wizard-step:first-child.active > .progress > .progress-bar {width:0%;}
.bs-wizard > .bs-wizard-step:last-child.active > .progress > .progress-bar {width: 100%;}
.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot {background-color: #f5f5f5;}
.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot:after {opacity: 0;}
.bs-wizard > .bs-wizard-step:first-child  > .progress {left: 50%; width: 50%;}
.bs-wizard > .bs-wizard-step:last-child  > .progress {width: 50%;}
.bs-wizard > .bs-wizard-step.disabled a.bs-wizard-dot{ pointer-events: none; }*/
/*END Form Wizard*/

.form-input-content .card{
    margin: 3rem 0 1rem;
}

.custom-alert-light{
    opacity: 0.5;
}

.form-indicator{
    position: absolute;
    top: 64px;
    text-align: center;
    padding: 2px;
    background-color: pink;
    width: 100%;
}

.modal.show{
    display: block;
}

.custom-badge {
    font-size: 1em;
}

@media print{    
    #jpa-skt-form-container {
        display: inline;
    }
    
    #form-action-button-container, #hrc-action-button-container{
        display: none;
    }
    
    #jpa-skt-form .form-A,
    #jpa-skt-form .form-B,
    #jpa-skt-form .form-C,
    #jpa-skt-form .form-D,
    #jpa-skt-form .form-E
    {
        color-adjust: exact; 
        -webkit-print-color-adjust: exact; 
        print-color-adjust: exact;
    }
}

#jpa-skt-form .form-A .card-header,
#action-label.form-A .card-header,
#jpa-skt-form .form-A .modal-header{
    /*color: #212529; background-color: #FCCDFF;*/
    color: #212529; background-color: #FCCDFF;
}

#jpa-skt-nav .form-A .nav-link { color: var(--form-A-header-color); background-color: #ffffff; }
#jpa-skt-nav .form-A .nav-link.active { color: #ffffff; background-color: var(--form-A-header-color); border-color: var(--form-A-header-color) }

#jpa-skt-form .form-B .card-header,
#action-label.form-B .card-header,
#jpa-skt-form .form-B .modal-header{
    color: #212529; background-color: #CDE9FF;
}

#action-label.form-C .card-header,
#jpa-skt-form .form-C .card-header,
#jpa-skt-form .form-C .modal-header{
    color: #212529; background-color: #CFFFCD;
}

#jpa-skt-nav .form-C .nav-link { color: var(--form-C-header-color); background-color: #ffffff; }
#jpa-skt-nav .form-C .nav-link.active { color: #ffffff; background-color: var(--form-C-header-color); border-color: var(--form-C-header-color) }

#action-label.form-D .card-header,
#jpa-skt-form .form-D .card-header,
#jpa-skt-form .form-D .modal-header{
    color: #212529; background-color: #FCFFCD;
}

#jpa-skt-nav .form-D .nav-link { color: var(--form-D-header-color); background-color: #ffffff; }
#jpa-skt-nav .form-D .nav-link.active { color: #212529; background-color: var(--form-D-header-color); border-color: var(--form-D-header-color); font-weight:bold; }

#action-label.form-E .card-header,
#jpa-skt-form .form-E .card-header,
#jpa-skt-form .form-E .modal-header{
    color: #ffffff; background-color:#F1CDB5 ;
}

#jpa-skt-nav .form-E .nav-link { color: var(--form-E-header-color); background-color: #ffffff; }
#jpa-skt-nav .form-E .nav-link.active { color: #ffffff; background-color: var(--form-E-header-color); border-color: var(--form-E-header-color) }

.dhtmlwindow .drag-handle{
    padding: 1rem 2rem;
    background: none;
    
}

.history-container{
    height: max-content;
    width: 100%;
    background-color: white;
}

.history-container .table{
    font-size: 0.75rem;
}

.history-container .table td:nth-child(2),
.history-container .table td:nth-child(4){ 
    max-width: 100px;
    word-wrap: anywhere;
}
.history-container .table td:nth-child(3){ 
    max-width: 200px;
    word-wrap: anywhere;
}

#jpa-skt-form-container{ padding: 0; }

body.modal-open {
    padding-right: 0 !important;
}

.list-group-item:hover{
    z-index: auto;
}

.list-group-item a:hover{
    color: #007bff;
    background-color: #f8f8f8;
}


#notification-card .card-header,
#season-card.card .card-header{ border-bottom: 1px solid #dee2e6; }
#notification-card .btn { text-align: left; }
#notification-card {
    margin-bottom: 1rem;
    box-shadow: 0 0 0 0rem rgba(0, 123, 255, 0.5);
    border-radius: 0.25rem;
       
    -webkit-transition: all ease-in-out 0.2s; /* Safari prior 6.1 */
    transition: all ease-in-out 0.2s;
}

/*#notification-card:hover {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);    
}*/

#notification-card .btn{
    padding: 0;
}

#notification-card .btn .task-container{
    padding: 0.5rem 1.25rem;
}

/*Mobile Navigation*/

/*Mobile Navigation*/
html, body{
    height: 100%;
}

#action-label{
    padding: 0;
    text-align: center;
}
    
#action-label,
#action-label .card-header{
    border-bottom: none !important;
}

#action-label .card-header .action-title{
    font-size: 1.25rem;
    font-weight: bold;    
}
#action-label .card-header .action-sub{
    font-size: 0.75rem;
}

#action-label .card-header p{ margin: 0; }

#navigation-step.card { border-bottom: none !important; }

#skt-title-container{
    margin-top: 2rem;
}

/*#jpa_createApprovedJpa_page (START)*/

#jpa_createApprovedJpa_page .card{
    margin-bottom: 1rem;
}

#jpa_createApprovedJpa_page .carousel-item .carousel-card .carousel-card-body{
    height: 550px;
    overflow-y: auto;
}

#jpa_createApprovedJpa_page #JpaFormCarousel{
    margin-bottom: 3rem;
}

#jpa_createApprovedJpa_page #JpaFormCarousel .carousel-inner .carousel-item .card {
    /*margin: 0 2rem;*/
    -webkit-transition: all ease-in-out 2s; /* Safari prior 6.1 */
    transition: all ease-in-out 2s;
}

#jpa_createApprovedJpa_page #JpaFormCarousel .carousel{
    position: absolute;
    width: 100%;
}

#jpa_createApprovedJpa_page #JpaFormCarousel .carousel .carousel-caption{
    top:0;
    bottom: 0;
}

#jpa_createApprovedJpa_page #JpaFormCarousel .carousel-control-next{
    right:-3rem;
}

#jpa_createApprovedJpa_page #JpaFormCarousel .carousel-control-prev {
    left:-3rem;
}

#jpa_createApprovedJpa_page #JpaFormCarousel .carousel-control-next, #JpaFormCarousel .carousel-control-prev {
    width: 3rem;
    font-size: 2rem;
    color: #000;
}

#jpa_createApprovedJpa_page #JpaFormCarousel .carousel-indicators li {
    background-color: #c2c2c2;
}

#jpa_createApprovedJpa_page #JpaFormCarousel .carousel-indicators .active {
    background-color: #000000;
}

#jpa_createApprovedJpa_page #JpaFormCarousel .carousel-indicators {
    /*width: 100%;*/
    left: 0;
    right: 0;
    margin: 1rem 0;
    bottom: 0;
}

#jpa_createApprovedJpa_page #JpaFormCarousel .carousel-card-body {
    margin: 0;
}

#jpa_createApprovedJpa_page .custom-close {
    position:absolute;
    top:1rem;
    right:1rem;
    cursor: pointer;
    z-index: 10;
}

#jpa_createApprovedJpa_page .btn-container {
    padding: 1rem 0;
}
/*#jpa_createApprovedJpa_page (END)*/


a.status-link {
    text-shadow: white 1px 0px 0px, white 0.540302px 0.841471px 0px, white -0.416147px 0.909297px 0px, white -0.989992px 0.14112px 0px, white -0.653644px -0.756802px 0px, white 0.283662px -0.958924px 0px, white 0.96017px -0.279415px 0px;
    text-decoration: none;
    background-image: linear-gradient(#37b2b2 50%, #37b2b2 50%);
    background-size: 10000px 2px;
    color: #37b2b2 !important;
    background-repeat: no-repeat;
    /*background-position: 0 1.1rem;*/
    background-position: -10000px 1.1rem;
    cursor: pointer;
}

a.status-link::after {
    font-family: 'Font Awesome 5 Free';
    font-weight: 400; 
    content: "\f017";
    margin-left: 0.5rem;
}

a.status-link:hover {
    color: #37b2b2 !important;
    text-decoration: none !important;
    background-position: 0 1.1rem;
    transition: background-position 2s ease-in-out;
    background-color: transparent;
}

/*Input Style Strt*/
.input-div {
  width: 250px;
  padding: 0 10px;
  display: inline-block;
}

.input-field label {
  top: 15px;
}

.input-line {
  margin: 0 !important;
  border: 1px solid #CBCED1;
}

.input-line:focus:not([readonly]) + label {
  color: gray !important;
}

.input-line:focus {
  border-bottom: 1px solid #414042 !important;
  box-shadow: none !important;
}

.input-field::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 15px;
  height: 1px;
  content: '';
  background-color: #414042;
}

/*Input Style End*/


/*Custom Alert Box Start*/

.custom-box {
    border-width: 2px 4px;
    border-style: solid;
    border-radius: 5px;
    padding: 1rem 2rem;
}
.custom-box.custom-box-alert { border-color: #dc3545; }
.custom-box.custom-box-success { border-color: #46d267; }
.custom-box.custom-box-info { border-color: #00529B; }

.custom-box-alert .custom-box-title{ color: #dc3545; }
.custom-box-success .custom-box-title{ color: #46d267; }
.custom-box-info .custom-box-title{ color: #00529B; }
    
.custom-box .custom-box-title{
    font-weight: bold;
}
.custom-box .custom-box-alert-msg{}

@media (min-width: 768px) { 
    .custom-box {
        max-width: 80%;
        margin: 0 auto;
    }
    .custom-box-alert .custom-box-alert-title{}
    .custom-box-alert .custom-box-alert-msg{}    
}

/*Custom Alert Box End*/



.input-number {
  width: 80px;
  padding: 0 12px;
  vertical-align: top;
  text-align: center;
  outline: none;
}

.input-number,
.input-number-decrement,
.input-number-increment {
  border: 1px solid #ccc;
  height: 40px;
  user-select: none;
}

.input-number-decrement,
.input-number-increment {
  display: inline-block;
  width: 30px;
  line-height: 38px;
  background: #f1f1f1;
  color: #444;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}
.input-number-decrement:active,
.input-number-increment:active {
  background: #ddd;
}

.input-number-decrement {
  border-right: none;
  border-radius: 4px 0 0 4px;
}

.input-number-increment {
  border-left: none;
  border-radius: 0 4px 4px 0;
}

.custom-modal-backdrop {
    z-index: 1020;
}

#durationCheckModal{
    z-index: 1030;
}

.btn.dropdown-toggle.is-invalid,
.btn.dropdown-toggle.is-invalid:hover{
    border: 1px solid #dc3545;
} 

.custom-checkbox{
    padding: 0.6rem 1rem;
    /*margin-top: 20px;*/
}
/*.custom-checkbox .custom-checkbox-label { cursor: pointer; }
.custom-checkbox .custom-checkbox-input { display: none; }
.custom-checkbox .fa-check-square { display: none; }
.custom-checkbox .custom-checkbox-content { 
    max-height: 0px; 
    overflow: hidden;
    
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.custom-checkbox .custom-checkbox-input:checked + .custom-checkbox-label .fa-check-square { display: inline; }
.custom-checkbox .custom-checkbox-input:checked + .custom-checkbox-label .fa-square { display: none; }*/
/*.custom-checkbox .custom-checkbox-input:checked ~ .custom-checkbox-content { max-height: 100px; overflow: visible; }*/


.custom-accordian-container{ margin: 3rem 0 1rem; }
.custom-accordian-card{
    min-height: max-content;
    /*box-shadow: 2px 2px 2px rgba(0,0,0,0.1),-1px 0 2px rgba(0,0,0,0.05);*/
    /*border-bottom: .5px solid #dee2e6;*/
}
.custom-accordian-card-header{
    border: .5px solid #dee2e6;
    position: relative;
    font-size: 1.1em;
    padding: 0.75rem 1.25rem;
}

.custom-arrow-container{
    display: inline-block;
    position: absolute;
    right: 1rem;
    top:0;
    margin-right: -12px;    
    padding: 1rem;
    cursor: pointer;
    transition: all .3s ease;

    -webkit-transform: translate(0,10%);
    -moz-transform: translate(0,10%);
    -ms-transform: translate(0%,10%);
    -o-transform: translate(0%,10%);
    transform: translate(0%,10%);
}
.custom-arrow-container:hover{
    -webkit-transform: scale(1.1,1.1);
    -moz-transform: scale(1.1,1.1);
    -ms-transform: scale(1.1,1.1);
    -o-transform: scale(1.1,1.1);
    transform: scale(1.1,1.1);
}

.custom-arrow-container .custom-arrow{
    transition: all .3s ease;
    
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.show .custom-arrow {
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

.custom-arrow {
    content: "";
    border: solid #2b2b2b;
    border-width: 0 4px 4px 0;
    padding: 4px;  
/*    position: absolute;
    right: 0;
    margin-right: -12px;*/
    
}
.custom-arrow-container:hover > .custom-arrow{
    border-color: #000000;    
    /*box-shadow: 5px 5px 8px #808080;*/        
}


.custom-accordian-card-body{ 
    max-height: 0px;
    overflow: hidden;
    padding: 0;
    margin: 0;

    -webkit-transition: all 1s ease-in;
    -o-transition: all 1s ease-in;
    -moz-transition: all 1s ease-in;
    transition: all 1s ease-in;
}
.custom-accordian-card-content{
    margin: 0;
    padding: 1rem;    
}

.custom-accordian-card-content .row{
    margin-left: 0 !important;
    margin-right: 0 !important;
}

@media (min-width: 768px) {
    .custom-accordian-card-content{
        margin: 0 1rem;
        padding: 1rem 2rem 3rem;    
    }    
}
.show .custom-accordian-card-body{ 
    max-height: 20000px;
}

.form-A .custom-accordian-card-header,
#jpa_createApprovedJpa_page.form-A .card-header
{ color: #212529; background-color: #FCCDFF; }
.form-B .custom-accordian-card-header,
#jpa_createApprovedJpa_page.form-B .card-header
{ color: #212529; background-color: #CDE9FF; }
.form-C .custom-accordian-card-header,
#jpa_createApprovedJpa_page.form-C .card-header
{ color: #212529; background-color: #CFFFCD; }
.form-D .custom-accordian-card-header,
#jpa_createApprovedJpa_page.form-D .card-header
{ color: #212529; background-color: #FCFFCD; }
.form-E .custom-accordian-card-header,
#jpa_createApprovedJpa_page.form-E .card-header
{ color: #212529; background-color: #F1CDB5; }
/*{ color: #ffffff; background-color:#212529 ; }*/


.custom-input-file-table{
    
}

.custom-duration-input{
    display: inline-block;
    width: auto;
}

/*.btn-checkbox{
    background-color: white;
    border: none;
}*/

.bootstrap-select > .dropdown-toggle {
    z-index: auto;
}

.dropdown-item:active,
.dropdown-modal-link:active{
    color: initial;
    background-color: initial;
}

.dropdown-item:hover,
.dropdown-modal-link:hover{
    background-color: initial;    
}

.dropdown-item,
.dropdown-modal-link{
    padding: 0.75rem 1.5rem;
}

.dropdown-item:hover,
.dropdown-modal-link:hover{
    color: #fff;
    background-color: #007bff;
}

.dropdown-divider{
    margin: 0;
}

.show .overflow-show{
    overflow: visible;
}

.dropdown-item.dropdown-subcontainer,
.dropdown-modal-link.dropdown-subcontainer{
    padding: 0;
}

.dropdown-item.dropdown-subcontainer:hover,
.dropdown-modal-link.dropdown-subcontainer:hover{
    background-color: initial;
    color: #007bff;
    cursor: pointer;
}

.dropdown-item.dropdown-subcontainer .dropdown-submenu,
.dropdown-modal-link.dropdown-subcontainer .dropdown-submenu{
    margin: 0.75rem 2rem 0.75rem 1.5rem;
}

.charsRemainingAlert{
    color: #6c757d;;
    float: right;
}

.jpa_error_page {
    
}
.jpa_error_page .custom-error-icon {
    margin-bottom: 1rem;
}

.jpa_error_page .custom-error-body {
    margin: 0 auto;
}

@media (min-width: 768px) {
    .jpa_error_page .custom-error-icon {
        margin: 0;
        padding: 1rem 3rem;    
    }
    .jpa_error_page .custom-error-body {
        margin: auto;
        padding: 1rem 3rem;
    }
}

.modal.custom-post-update-modal{}
.modal.custom-post-update-modal .modal-header{
    background-color: #ffbb33;
    color: #ffffff;
}
.modal.custom-post-update-modal .modal-body{
    padding: 1rem 1.5rem;
}
/*.modal.custom-post-update-modal .text-current-post{
    line-height: 1.2;
  text-decoration: none;
  color: inherit;
  width: calc(2em);
  hoverWidth: 90%;
  position: relative;
}*/
/*.modal.custom-post-update-modal*/ 
.text-current-post{
    display: block;
    font-size: 1.25rem;
    color: #CC0000;
    margin-left: 1rem;
}

/*.modal.custom-post-update-modal*/ 
.text-new-post{
    display: block;
    font-size: 1.25rem;
    color: #0099CC;
    margin-left: 1rem;
}

@media (max-width: 767px) {
    .modal.custom-post-update-modal .modal-body{
        font-size: 0.8rem;
    }
    
    /*.modal.custom-post-update-modal*/ 
    .text-current-post,
    /*.modal.custom-post-update-modal*/ 
    .text-new-post{
        font-size: 1rem;
    }
}

.breadcrumb-container .container {
    position: relative;
}

.breadcrumb-icon-container{
    position: absolute;
    right: 0;
    /*float: right;*/    
    margin: -1rem 15px;
    
    display: flex;    
    justify-content: center;
    flex-direction: row;
    /*height: 100%;*/
}

.breadcrumb-icon-container .breadcrumb-icon i{
    font-size: 1.4rem;
}
.breadcrumb-icon-container .breadcrumb-icon{
    cursor: pointer;
    padding: 1rem 1.5rem;
    color: #8c8c8c !important;
    
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.breadcrumb-icon-container .breadcrumb-icon:hover{
    /*background-color: #f3f3f3;*/
    color: #303030 !important;
}

.legends-label{
    padding: 0.5rem 1rem;
}

.legends-label .legends-color{ 
    border: 1px solid #dee2e6;
    padding: 0 1rem; 
    border-radius: 0.25rem;
}
.legends-label .legends-desc{ margin-left: 1rem; }

#account-page {}

#account-page .card-header,
#dynamic-search-page .card-header,
#account-access-edit-page  .card-header{
    font-size: 1.25rem;
    color: white;
    background-color: #5F9EA0;
    
/*    background: rgb(95,158,160);
    background: linear-gradient(90deg, rgba(95,158,160,1) 68%, rgba(196,237,239,1) 100%, rgba(255,255,255,1) 100%); */
}

#account-page .card-subheader,
#dynamic-search-page .card-subheader,
#account-access-edit-page  .card-subheader{
    color: lightcyan;
}

#account-page .row{
    margin-bottom: 0.25rem;
}

#account-access-edit-page .table thead tr th,
#dynamic-search-page .table thead tr th,
#account-page .table thead tr th{
    padding: 0.3rem 0.5rem;
} 

#account-access-edit-page table tr th,
#dynamic-search-page table tr th,
#account-page table tr th{
    background-color: #5F9EA0;    
}

#account-page .custom-text{ 
    border: none !important;
    color: #6c757d;
    
    -webkit-transition: all 0.15s ease-in-out;
    -o-transition: all 0.15s ease-in-out;
    -moz-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
}
#account-page .custom-text:hover{
    text-decoration: underline;
}
.pp-mark-input-container.is-invalid{
    color: red;
}
.pp-mark-input-container + .invalid-feedback.is-invalid{
    display: block;
}

#moderation-page .form-control {
    width: 100%;
}

#moderation-page .table td {
    font-size: 0.875rem;
}

.select-container .invalid-feedback.is-invalid {
    display: block;
}



/*==================== general style =========================*/

.card-title{
    padding-bottom: 0.75rem;
    border-bottom: 5px solid #808080;
}

#extend-selectPpp {
    width: max-content;
    margin: -1rem auto 0;
    padding: 0.5rem 0;
    border-top: 1px solid #ced4da;
    border-bottom: 1px solid #ced4da;
    
    cursor: pointer;
    opacity: 0.5;
    
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

#extend-selectPpp:hover {
    padding: 0.5rem 1rem;
    opacity: 1;
    background-color:  #fbfcfc ;
}

#new-ppp-selector{
    height: 0;
    overflow: hidden;
    margin-bottom: 0;

    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

#new-ppp-selector.show{
    height: max-content;
    overflow: visible;

}

#new-ppp-selector label{
    padding-top: 0.75rem;
}

/*spinner strt*/

.modal-xs {
    max-width: 200px;
}

#spinnerModal .modal-content{
    border-radius: 0;
}

#spinnerModal .modal-body{
    padding: 3rem 0;
}

.spinner {
    margin: 0 auto 1rem;
    animation: rotator 1.4s linear infinite;
}

@keyframes rotator {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(270deg); }
}

.path {
  stroke-dasharray: 187;
  stroke-dashoffset: 0;
  transform-origin: center;
  animation:
    dash 1.4s ease-in-out infinite, 
    colors 6s ease-in-out infinite;
}

@keyframes colors {
	0% { stroke: #4285F4; }
	25% { stroke: #DE3E35; }
	50% { stroke: #F7C223; }
	75% { stroke: #1B9A59; }
  100% { stroke: #4285F4; }
}

@keyframes dash {
 0% { stroke-dashoffset: 187; }
 50% {
   stroke-dashoffset: 48;
   transform:rotate(135deg);
 }
 100% {
   stroke-dashoffset: 187;
   transform:rotate(450deg);
 }
}
/*spinner end*/

/*loading strt*/
.loading-animation .dot{
  animation:showHideDot 2s ease-in-out infinite;
  font-weight: bold;
}

.loading-animation .dot.one { animation-delay: 0.2s; }
.loading-animation .dot.two { animation-delay: 0.4s; }
.loading-animation .dot.three { animation-delay: 0.6s; }

@keyframes showHideDot {
  10% { opacity: 1; }
  50% { opacity: 0; }
  60% { opacity: 0; }
  90% { opacity: 1; }
}

/*loading end*/

#account-access-edit-page .custom-btn-container{
    padding-top: 5px;
    border-top: 1px solid #e6e6e6;
}

@media (max-width: 767px) {
    #account-access-edit-page .custom-btn-container .btn{
        display: block;
        width: 100%;
        margin-bottom: 5px;
    }
    
    #account-access-edit-page {
        padding: 0;
    }
    
    #account-access-edit-page .card .card-body{
        margin: 0;
    }
    
}

/*dynamic search page custom style strt*/

#dynamic-search-page .btn {
    margin-bottom: 3px;
}

/*dynamic search page custom style end*/

/*style for moderation table strt*/
.custom-mod-th{
    background-color: #4FC3A1 !important;
    border-color: #4FC3A1 !important;
    border-left: 1px solid #f8f8f8 !important;   
    border-right: 1px solid #f8f8f8 !important;   
}
.custom-mod-td{
    background-color: #f8f8f8 !important;    
}
/*style for moderation table end*/

/*style for dropdown strt*/
/*.list-group-item a:hover{
    color: #ffffff;
}*/
/*.custom-dropdown-container .list-group-item a:hover{
    background-color: #4FC3A1
}
.custom-dropdown-container .list-group-item a.active{
    
}
/*style for dropdown end*/

/*custom file input strt*/
.custom-input-file-container .custom-input-file{
    display: none;
}

.custom-input-file-container label{
    margin: 0;
}
.custom-input-file-container label .label-sub{
    font-size: 0.75rem;
}

@media (max-width: 767.5px) {
    .custom-input-file-container div{
        padding: 0;
    }
}


.custom-btn-swipe::before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background-color: #5c415b;
    -webkit-transform: translateX(-100%);
    transform: translateX(100%);
    
    transition: 0.5s ease-in-out;
}

.custom-btn-swipe{
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    max-width: 250px;
    margin: 1rem auto;
    text-align: center;
    text-transform: uppercase;
    border: 1px solid currentColor;
    color: #a983a7;
    z-index:1;
    
    font-size: 1rem;
    padding: 0.5rem;
    
    transition: 0.5s ease-in-out;
}

/*.custom-btn-swipe:before {
    content: '';
    background-color: #5c415b;
    transform: translateX(-100%);
  }*/

.custom-btn-swipe:hover {
    color: #ffffff !important;
    cursor: pointer;
}

.custom-btn-swipe:hover:before {
    transform: translateX(0);
}

.btn-pdf{
    background-color: #e74c3c;
    color: #ffffff;
    padding: 0.8rem;
}  
.btn-pdf:hover{
    background-color: #a8110d;
}

#notice-card{
    margin-top: 1rem;
    font-size: 0.9rem;
}

.modal-footer.custom-modal-footer{
    padding: 0;
    border-top: none;    
    flex-wrap: wrap;
}

.custom-modal-border-primary    { border-top: 2px solid #007bff; }
.custom-modal-border-success    { border-top: 2px solid #28a745; }
.custom-modal-border-danger     { border-top: 2px solid #dc3546; }
.custom-modal-border-info       { border-top: 2px solid #17a2b8; }
.custom-modal-border-warning    { border-top: 2px solid #ffc107; }
.custom-modal-content {
    padding: 1.5rem 1rem;
    margin: 1rem 0;
}

.switchPostPopup_body{
    background-color: #ffffff;
    min-height: 100%;
}

.switchPostPopup_footer{
    width: 100%;
}

.hrc-action-card{    
    justify-content: center;
    border-radius: 0;
}

.hrc-action-card-content{
    display: flex;
    flex-wrap: wrap;
}

.hrc-action-card .hrc-action-card-title{
    width: 100%;
    font-size: 1.25rem;
    font-weight: bold;
    text-align: center;
}

.hrc-action-card .btn{
    margin: 4px 4px;
}

.approve-date-display {
    border-top: 1px solid #dee2e6;
    padding : 1rem 20px 0;
}

@media (min-width: 992px) {    
    .border-lg-left{
        border-left: 1px solid #D3D3D3;
    }
}

#dept-page {
    font-size: 14px;
}
#dept-page #select-all-checkbox{
    font-size: 1rem;    
}
    
#dept-page .card-control-option{
    border-bottom: 1px solid #dee2e6;
}

#dept-page .card-search-content-container{
    display: flex;
    flex-direction: column; 
    height: 70vh;
    margin: 0;
}

#dept-page .card-search-content{
    margin-top: 1rem;
    overflow: auto;
}

#dept-page .custom-card-item{
    padding: 1rem;
    padding-left: 3rem;
    border: 1px solid #dee2e6;
    position: relative;
}

#dept-page .custom-card-item .checkbox-container{
    position: absolute;
    left:0;
    top:0;
    /*left: 1rem;*/
    /*top: 28px;*/
    padding: 28px 1rem;
}

#dept-page .custom-card-container{
  list-style-type: none;
  padding: 0;
  margin: 0;    
}

#closeDeptModal .custom-modal-content,
#closeDeptModal .form-control{
    font-size: 14px;
}

#dept-page .closedAccessItem-container {
    padding-top: 0.75rem 1.25rem;
}

#dept-page .custom-padding-card-search{
    padding-top: 0.75rem;
    padding-right: 1.25rem;
}

#dept-page .card-control-option .card-search-bar{
    margin-bottom: 0.25rem;
}

#dept-page .search-filter{
    cursor:pointer;
    padding: 6px 3rem;
    text-align: center;
    width: 100%;
}

@media (min-width: 992px) {
    #dept-page .search-filter{
        width: auto;
    }
}

#dept-page .search-filter-radio .form-check-label{
    padding: 0rem 3rem 0rem 1rem;
    margin-left: -1rem;
}

#guide-page .card-title{
    padding-bottom: 0;
    border-bottom: none;
}

#guide-page .card{
    margin-bottom: 1rem;
}

.btn-outline-secondary:hover {
  color: #6c757d;
}

.custom-background{
    /*background-image: linear-gradient(to bottom right, #bfe9e4, #008489);*/
    background-image: radial-gradient(circle at center, #FFFFFF 10%, #00FFFF 100%);

    width: 100%;
    height:100vh;   
}

.custom-org-label {
    color: #4169E1 !important;
    font-weight: bold;
}