@font-face {
    font-family: 'pt_sansregular';
    src: url('../fonts/PTS55F-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html {
    min-height: 100%;
    padding-bottom: 54px;
    position: relative;
    overflow-x: hidden;
}

body {
    font-family: 'Roboto';
    background-image: url('../img/background.png');
    height: 100%;
    padding-bottom: 25px;
}

.welcome-section {
    width          : 100%;
    padding-top    : 40px;
    padding-bottom : 40px;

    text-align     : center;
}

.welcome-section {
    position    : absolute;
    top         : 50%;
    left        : 50%;

    transform   : translateY(-50%) translateX(-50%);
}

.welcome-text span {
    font-size   : 18px;
    display: block;
}

.welcome-text h3 {
    font-size   : 30px;
    font-weight : bold;
}

.login-container {
    margin-right  : auto;
    margin-left   : auto;
    padding-right : 60px;
    padding-left  : 60px;
}

.title-text {
    font-weight : bold;
}

.login-note {
    margin-bottom : 40px;
}

.border-separator {
    border-left : 1px solid #333;
}

.card {
    border        : 1px solid #12244A;
    border-radius : 0;
}

.card-header {
    background-color : #12244A;
    color            : #fff;
}

.card-header:first-child {
    border-radius : 0;
}

.card-body {
    padding: 0;
}

.input-search {
    width : 260px;
}

.employee-datalist {
    padding-left : 0;
}

.employee-datalist li {
    list-style : none;
}

.employee-datalist li label {
    display      : inline-block;
    width        : 130px;
    font-style   : normal;
    font-weight  : bold;
}

.employee-photo {
    position      : relative;

    overflow      : hidden;
    height        : 250px;
    width         : 200px;
    margin        : auto;
    margin-bottom : 10px;
    padding       : 5px;

    cursor        : pointer;
    border        : 2px solid #dbdbdb;
}

.employee-photo img {
    position  : absolute;
    top       : 50%;
    left      : 50%;

    width     : 100%;

    transform : translateX(-50%) translateY(-50%);
}

.employee-photo-input {
    position : relative;

    overflow : hidden;
    width    : 100%;
}

.k-upload-files .k-upload-status .k-button.k-upload-action {
    min-width : auto;
}

.image-preview {
    position       : relative;
    vertical-align : top;

    height         : 45px;
}

.input-hint {
    padding-top : 1em;

    font-size   : .9em;
    font-style  : italic;
    color       : #aaa;
    line-height : 22px;
}

.k-grid-norecords-template {
    width  : 100%;
    margin : 0;

    border : none;
}

.input-width-modal {
    width : 90%;
}

.input-minute-modal {
    width: 70px;
}

.detail-description {
    margin-bottom : 20px;
    padding-top   : 15px;
}

#chart g g path:hover {
    cursor : pointer;
}

.bold {
    font-weight : bolder;
}

.k-tabstrip > .k-content {
    position : relative;
    display  : none;
    top      : -1px;

    overflow : auto;
}

.my-user-dropdown:hover {
    background-color : transparent;
    color            : #787878;
}

.my-user-dropdown-header {
    position                : relative;

    height                  : 125px;

    background              : url('/img/office.jpg') no-repeat center;
    background-size         : cover;

    -moz-background-size    : cover;
    -o-background-size      : cover;
    -webkit-background-size : cover;
}

.my-user-dropdown-header:after {
    content    : "";

    display    : block;

    height     : 100%;
    width      : 100%;

    opacity    : .6;
    background-image: -webkit-linear-gradient(top left, #1a3b7f, #006ab0, #009cd6, #00cdf0, #00ffff);
    background-image: -o-linear-gradient(top left, #1a3b7f, #006ab0, #009cd6, #00cdf0, #00ffff);
    background-image: linear-gradient(to bottom right, #1a3b7f, #006ab0, #009cd6, #00cdf0, #00ffff);
}

.my-user-dropdown-footer {
    padding          : 15px;
    padding-top      : 40px;

    background-color : #fff;
}

.my-user-name {
    font-size   : 18px;
    font-weight : bolder;
    color: #787878;
}

.my-user-image {
    position                : absolute;
    top                     : 50%;
    left                    : 50%;
    z-index                 : 1;

    height                  : 100px;
    width                   : 100px;
    margin                  : 0 auto;

    background              : url('/img/user.jpg') no-repeat center;
    background-size         : cover;
    border                  : 3px solid #ddd;
    border-radius           : 50%;

    transform               : translateX(-50%);

    -webkit-background-size : cover;
    -moz-background-size    : cover;
    -o-background-size      : cover;
}

.my-user-description {
    margin-bottom : 15px;
    text-align    : center;
}

.k-button.btn-logout:hover {
    background-color : #dc3545;
    border-color     : #dc3545;
}

.k-grid tbody tr td {
    vertical-align : top;
}

.k-grid tbody tr td.k-hierarchy-cell {
    vertical-align: middle;
}

.custom-edit-buttons {
    padding    : 16px;
    border-top : 1px solid #dbdbdb;
}

.lds-ripple {
    position  : absolute;
    display   : inline-block;
    top       : 50%;
    left      : 50%;
    z-index   : 99999;

    height    : 64px;
    width     : 64px;

    transform : translateX(-50%) translateY(-50%);
}

.lds-ripple div {
    position      : absolute;

    opacity       : 1;
    border        : 4px solid #1a3b7f;
    border-radius : 50%;

    animation     : lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.lds-ripple div:nth-child(2) {
    animation-delay : -0.5s;
}

@keyframes lds-ripple {
    0% {
        top     : 28px;
        left    : 28px;

        height  : 0;
        width   : 0;

        opacity : 1;
    }
    100% {
        top     : -1px;
        left    : -1px;

        height  : 58px;
        width   : 58px;

        opacity : 0;
    }
}

.clock-wrapper {
    margin-bottom : 20px;
    text-align    : center;
}

.hour, .minute, .seconds, .point {
    display     : inline-block;

    font-size   : 65px;
    font-weight : bolder;
}

.precences-form {
    margin-bottom : 35px;
    text-align    : center;
}

.clock-wrapper-date {
    font-size   : 15px;
    font-weight : bolder;
    color       : #007cc3;
}

button.custom-btn {
    position      : relative;

    overflow      : hidden;
    padding       : 10px 30px 10px 30px;

    cursor        : pointer;
    font-size     : 15px;
    color         : #fff;
    border        : none;
    border-radius : 4px;
    box-shadow    : 0px 5px 5px #ddd;
    outline       : none;
}

.custom-btn-green {
    background-image: -webkit-linear-gradient(bottom left, #1a3b7f, #006ab0, #009cd6, #00cdf0, #00ffff);
    background-image: -o-linear-gradient(bottom left, #1a3b7f, #006ab0, #009cd6, #00cdf0, #00ffff);
    background-image: linear-gradient(to top right, #1a3b7f, #006ab0, #009cd6, #00cdf0, #00ffff);
}

.custom-btn-red {
    background-image : -webkit-linear-gradient(bottom left, #dc3545, #e9493c, #f45d30, #fb7221, #ff8806);
    background-image : -o-linear-gradient(bottom left, #dc3545, #e9493c, #f45d30, #fb7221, #ff8806);
    background-image : linear-gradient(to top right, #dc3545, #e9493c, #f45d30, #fb7221, #ff8806);
}

.custom-btn:after {
    content                           : "";

    position                          : absolute;
    display                           : block;

    height                            : 195px;
    width                             : 195px;
    margin                            : auto;

    opacity                           : .3;
    background-color                  : #fff;
    border-radius                     : 50%;

    transform                         : scale(0);
    transform-origin                  : center;
    transform-origin                  : center;

    top: 0; left: 0; bottom: 0; right : 0;
}

.custom-btn:focus:not(:active):after {
    animation : ripple 450ms ease-out;
}

.custom-btn:after {
    content                           : "";

    position                          : absolute;
    display                           : block;

    height                            : 195px;
    width                             : 195px;
    margin                            : auto;

    opacity                           : .3;
    background-color                  : #fff;
    border-radius                     : 50%;

    transform                         : scale(0);
    transform-origin                  : center;
    transform-origin                  : center;

    top: 0; left: 0; bottom: 0; right : 0;
}

.custom-btn:hover:not(:active):after {
    animation : ripple 450ms ease-out;
}

.login-card {
    position         : relative;
    display          : flex;
    width            : 430px;
    min-width        : 0;
    margin           : 0 auto;
    background-color : #fff;
    background-clip  : border-box;
    word-wrap        : break-word;
    flex-direction   : column;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.login-card-body {
    padding : 50px 60px 50px 60px;
    flex    : 1 1 auto;
}

.login-input {
    padding       : 12px 0px 12px 0px;

    font-size     : 14px;
    border        : transparent;
    border-radius : 0;
    border-bottom : 2px solid #ced4da;
}

.login-input:focus {
    border-bottom-color : #1a3b7f;
    box-shadow          : none;
}

.login-input.is-invalid:focus {
    box-shadow : none;
}

.navbar-dark .navbar-nav .nav-link, .navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
    color: #fff;
}

.dropdown-item {
    color: #fff;
}

.institution-logo-container {
    position: absolute;
    height: 100%;
    background-color: #12244A;
    margin-left: 30px;
    padding: 5px;
    width: 98px;
}

.institution-logo {
    height: 100%;
}

.page-title {
    background-color: #1a3b7f;
    color: #fff;
    width: 100%;
    font-size: 26px;
    padding-left: 145px;
    padding-top: 10px;
    padding-bottom: 10px;
    text-transform: uppercase;
}

.bg-green {
    background-color: #12244A;
}

.navbar {
    padding: 0;
}

.navbar-nav {
    margin-right: 30px;
}

.nav-link {
    padding: 20px 15px 20px 15px !important;
}

.dropdown-menu {
    border-radius: 0;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.dropdown-item {
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: .8rem;
}

.dropdown-item:hover {
    background-color: rgba(0,0,0,0.2);
    color: #fff;
}

.dropdown-item:active {
    background-color: rgba(0,0,0,0.2);
    color: #fff;
}

.dropdown-item:focus {
    background-color: rgba(0,0,0,0.2);
    color: #fff;
}

.footer {
    background-color: #12244A;
    color: #fff;
    text-align: center;
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: .8rem;
    position: absolute;
    bottom: 0;
    width: 100%;
}

.user-dropdown-menu {
    padding: 0 !important;
}

.user-dropdown-menu .dropdown-item {
    margin: 0;
}

.welcome-logo {
    margin-bottom: 1.5rem;
    width: 200px;
}

.welcome-container {
    width: 100%;
}

.my-user-dropdown {
    min-width        : 280px;
    padding          : 0;

    background-color : #fff;
    font-size        : 0.92rem;
    color            : #787878;
}

th.k-header {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    background-color: rgb(26, 59, 128, 0.1);
    white-space: normal;
}

.k-grid-header th.k-header {
    vertical-align: middle;
    text-align: center;
}

.k-grid .k-grid-header-wrap tr:hover {
    background-color: rgb(26, 59, 128, 0.1);
}

.text-primary {
    color: #1a3b7f !important;
}

.column-list {
    padding: 0;
    list-style-position: inside;
    list-style-type: circle;
}

.k-primary {
  border-color: #f7b50d;
  background-color: #f7b50d;
}

.k-primary:hover,
.k-primary.k-state-hover {
  border-color: #f7b50d;
  background-color: #f7b50d;
}
.k-primary:active,
.k-primary.k-state-active {
  border-color: #f7b50d;
  background-color: #f7b50d;
}

button.dropdown-edit-btn {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    border: 1px solid #dbdbdb;
    background-color: #fff;
    position: absolute;
    right: 15px;
    top: 15px;
    z-index: 999;
    cursor: pointer;
    outline: none;
    color: #000;
}

button.dropdown-edit-btn:hover {
    background-color: #EFEFEF;
}

.delete-button:hover {
    background-color: #dc3545;
    border-color: #dc3545;
}

.text-danger {
    color: #dc3545;
}

button.responsive-nav-button {
    display: none;
    color: #fff;
    border: none;
    background-color: #12244A;
    font-size: 30px;
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    outline: none;
    cursor: pointer;
}

@keyframes ripple {
    0% {
        transform : scale(0);
    }

    20% {
        transform : scale(0.2);
    }

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

.alert {
    border-radius: 0;
}

.presensi-alert {
    width: 100%;
    margin: 0 auto;
    margin-bottom: 25px;
}

a.primary-alert-link {
    color: #004085;
    text-decoration: underline;
}

@media (max-width: 992px) {
    .institution-logo-container {
        position: relative;
        margin: 0 auto;
        width: 100%;
        height: 80px;
        text-align: center;
        display: block;
    }

    .page-title {
        padding-left: 0;
        padding-right: 0;
        text-align: center;
    }

    .navbar-nav {
        width: 100%;
        margin: 0;
    }

    li.nav-item {
        text-align: center;
    }

    .responsive-nav {
        display: none;
    }

    button.responsive-nav-button {
        display: inline-block;
    }

    .container-fluid .container-fluid {
        padding-left: 0;
        padding-right: 0;
    }

    .dropdown-item {
        font-size: .9rem;
    }

    .welcome-text-container {
        height: 100px;
    }

    .presensi-alert {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .login-container {
        padding-left: 0;
        padding-right: 0;
    }

    .login-card {
        display: block;
        width: 100%;
        margin-top: 20px;
    }

    .login-card-body {
        padding: 50px 40px 50px 40px;
    }

    .welcome-text span {
        font-size: 14px;
    }

    .welcome-text h3 {
        font-size: 26px;
    }
}

.k-edit-form-container .k-tabstrip-wrapper {
    margin: 0;
}

.k-tabstrip-wrapper {
    display: block;
}

.private-content {
    word-break: break-all;
}

.presence_disabled {
    background: #ddd !important;
    color: #000 !important;
}

.private-separator {
    border-bottom: 1px solid #ddd;
}

.middle-cv-table{
     text-align: center;
     padding-left: 5px;
     padding-right: 5px;
}