.sidebar-img {
    margin: 0 auto;
    text-align: center;
    display: block;
    width: 50%;
}
.sidebar-logo {
    display: block;
    background: #1874b9;
    padding: 20px;
    box-sizing: border-box;
}
.sidebar-title {
    font-size: 18px;
    text-align: center;
    color: white;
    font-weight: bold;
    line-height: 20px;
}
.app-grid {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
    margin: 1em 0 2em;
}

.app-grid:after {
    content: "";
    flex: auto;
}

.card {
    flex-wrap: wrap;
    background: #4285f4;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    justify-content: unset;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(119, 144, 175, 0.125);
    border-radius: 0.25rem;
    -webkit-transition: 0.2s ease-in;
    -o-transition: 0.2s ease-in;
    transition: 0.2s ease-in;
    height: 100%;
}
a.app-link:hover .card {
    -webkit-box-shadow: 0px 5px 50px rgba(203, 216, 230, 0.6);
    box-shadow: 0px 12px 50px rgba(209, 214, 220, 0.66);
}

.card-1 .card-header {
    padding: 1.4em;
    display: flex;
    flex-grow: 2;
    position: relative;
    overflow: hidden;
}
.card-1 .card-header .icon {
    font-size: 2.5em;
    font-weight: normal;
    margin-right: 16px;
}
.card-1 .card-footer {
    padding: 0.7em 1em;
    background: #ebeff3;
    background-image: linear-gradient(to right, #f7fbff 0%, #e8edf3 100%);
}
.card-1 .icon:after {
    font-family: "Simple-line-icons";
}
.card-1.SIMP2M .icon:after {
    content: "\e02d";
}
.card-1.SIMPEG .icon:after {
    content: "\e001";
}
.card-1.SIREMUN .icon:after {
    content: "\e003";
}
.card-1.SIAKAD .icon:after {
    content: "\e04c";
}
.card-1.WSFEEDER .icon:after {
    content: "\e03b";
}
.card-1.KUESIONER .icon:after {
    content: "\e060";
}
.card-1.BEASISWA .icon:after {
    content: "\e028";
}
.card-1.SKKM .icon:after {
    content: "\e013";
}
.card-1.NETWORK .icon:after {
    content: "\e034";
}
.card-1.ALUMNI .icon:after {
    content: "\e019";
}
.card-1.SIMFONI .icon:after {
    content: "\e019";
}
.card-1.DASBOR .icon:after {
    content: "\e06a";
}
.card-1.PAYROLL .icon:after {
    content: "\e003";
}

.card-2 {
    text-align: center;
}

.card-2 .card-header {
    padding: 1.3em;
    flex-grow: 2;
    position: relative;
    overflow: hidden;
}
.card-2 .card-header .icon {
    font-size: 3em;
    margin-bottom: 10px;
}

.card-2 .card-header h3 {
    font-size: 1.7em;
    font-weight: 400;
    margin: 20px 0 10px;
}
.card-2 .card-footer {
    padding: 0.7em 1em;
    background: #ebeff3;
    background-image: linear-gradient(to right, #f7fbff 0%, #e8edf3 100%);
}

.card-2 .icon:after {
    background-repeat: no-repeat;
    display: block;
    width: 95px;
    height: 95px;
    content: "";
    margin: 0 auto;
    z-index: 99;
    position: relative;
}

.card-2 .icon:before {
    background: #fff5e6;
    background: linear-gradient(180deg, #ffffff 10%, #e1efff 100%);
    display: block;
    width: 95px;
    height: 95px;
    content: "";
    margin: 0 auto;
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
    background-size: cover !important;
}
.card-2.SIMP2M .icon:after {
    background: url(../icons/undraw_filter_4kje.svg);
    background-size: contain !important;
    background-repeat: no-repeat;
    background-position: center center !important;
}
.card-2.SIMPEG .icon:after {
    background: url(../icons/undraw_resume_folder.svg);
    background-size: contain !important;
    background-repeat: no-repeat;
    background-position: center center !important;
}
.card-2.SIREMUN .icon:after {
    background: url(../icons/undraw_files_6b3d.svg);
    background-size: contain !important;
    background-repeat: no-repeat;
    background-position: center center !important;
}
.card-2.SIAKAD .icon:after {
    background: url(../icons/undraw_swipe_profiles1_i6mr.svg);
    background-size: contain !important;
    background-repeat: no-repeat;
    background-position: center center !important;
}
.card-2.SIPRES .icon:after {
    background: url(../icons/undraw_fingerprint_dutt.svg);
    background-size: contain !important;
    background-repeat: no-repeat;
    background-position: center center !important;
}
.card-2.PUSKOM .icon:after {
    background: url(../icons/undraw_secure_server_s9u8.svg);
    background-size: contain !important;
    background-repeat: no-repeat;
    background-position: center center !important;
}
.card-2.SIMKEU .icon:after {
    background: url(../icons/undraw_charts_jj6t.svg);
    background-size: contain !important;
    background-repeat: no-repeat;
    background-position: center center !important;
}
.card-2.SIMKEU2 .icon:after {
    background: url(../icons/undraw_charts_jj6t.svg);
    background-size: contain !important;
    background-repeat: no-repeat;
    background-position: center center !important;
}
.card-2.WSFEEDER .icon:after {
    background: url(../icons/undraw_real-time_sync_o57k.svg);
    background-size: contain !important;
    background-repeat: no-repeat;
    background-position: center center !important;
}
.card-2.KUESIONER .icon:after {
    background: url(../icons/undraw_customer_survey_f9ur.svg);
    background-size: contain !important;
    background-repeat: no-repeat;
    background-position: center center !important;
}
.card-2.BEASISWA .icon:after {
    background: url(../icons/undraw_hiring_cyhs.svg);
    background-size: contain !important;
    background-repeat: no-repeat;
    background-position: center center !important;
}
.card-2.SKKM .icon:after {
    background: url(../icons/undraw_collaboration2_8og0.svg);
    background-size: contain !important;
    background-repeat: no-repeat;
    background-position: center center !important;
}
.card-2.NETWORK .icon:after {
    background: url(../icons/undraw_secure_server_s9u8.svg);
    background-size: contain !important;
    background-repeat: no-repeat;
    background-position: center center !important;
}
.card-2.ALUMNI .icon:after {
    background: url(../icons/undraw_graduation_9x4i.svg);
    background-size: contain !important;
    background-repeat: no-repeat;
    background-position: center center !important;
}
.card-2.SIMFONI .icon:after {
    background: url(../icons/undraw_graduation_9x4i.svg);
    background-size: contain!importan t;
    background-repeat: no-repeat;
    background-position: center center !important;
}
.card-2.ADMISI .icon:after {
    background: url(../icons/undraw_invite_i6u7.svg);
    background-size: contain !important;
    background-repeat: no-repeat;
    background-position: center center !important;
}
.card-2.DASBOR .icon:after {
    background: url(../icons/undraw_analytics_5pgy.svg);
    background-size: contain !important;
    background-repeat: no-repeat;
    background-position: center center !important;
}
.card-2.Dashboard .icon:after {
    background: url(../icons/undraw_portfolio_essv.svg);
    background-size: contain !important;
    background-repeat: no-repeat;
    background-position: center center !important;
}
.card-2.PERPUSTAKAAN .icon:after {
    background: url(../icons/undraw_notebook_g9x9.svg);
    background-size: contain !important;
    background-repeat: no-repeat;
    background-position: center center !important;
}
.card-2.SABMN .icon:after {
    background: url(../icons/undraw_secure_data_0rwp.svg);
    background-size: contain !important;
    background-repeat: no-repeat;
    background-position: center center !important;
}
.card-2.SIPUSKOM .icon:after {
    background: url(../icons/undraw_secure_server_s9u8.svg);
    background-size: contain !important;
    background-repeat: no-repeat;
    background-position: center center !important;
}
.card-2.SIMPEFAS .icon:after {
    background: url(../icons/charts_xmfy.svg);
    background-size: contain !important;
    background-repeat: no-repeat;
    background-position: center center !important;
}
.card-2.SIKURIKULUM .icon:after {
    background: url(../icons/lectures_1hqp.svg);
    background-size: contain !important;
    background-repeat: no-repeat;
    background-position: center center !important;
}
.card-2.PAYROLL .icon:after {
    background: url(../icons/undraw_select_13cv.svg);
    background-size: contain !important;
    background-repeat: no-repeat;
    background-position: center center !important;
}
.card-2.SLC .icon:after {
    background: url(../icons/setup_obqo.svg);
    background-size: contain !important;
    background-repeat: no-repeat;
    background-position: center center !important;
}
.card-2.SIPMMB .icon:after {
    background: url(../icons/live_collaboration_2r4y.svg);
    background-size: contain !important;
    background-repeat: no-repeat;
    background-position: center center !important;
}
.card-2.SIBMN .icon:after {
    background: url(../icons/safe_bnk7.svg);
    background-size: contain !important;
    background-repeat: no-repeat;
    background-position: center center !important;
}
.card-2.PERSEDIAAN .icon:after {
    background: url(../icons/box_49e8.svg);
    background-size: contain !important;
    background-repeat: no-repeat;
    background-position: center center !important;
}
.card-footer .status {
    text-transform: uppercase;
    font-size: 12px;
    color: #7a96af;
    letter-spacing: 0.6px;
}

.card-desc {
}
.card-desc small {
    color: #8badcc;
}

.card-header h3 {
    margin: 0 0 10px;
    font-size: 2em;
    color: #103a5f;
}

.card-header small {
    text-transform: uppercase;
    line-height: 10px;
    letter-spacing: 0.2px;
}

a.app-link:hover .card-1 .card-footer {
    background: #fff5d5;
}

.app-link {
    width: calc(100% * (1 / 5));
    padding: 0 0.5em;
    margin-bottom: 1em;
}

a.app-link:last-child {
}

a.app-link:hover,
a.app-link:active,
a.app-link:focus {
    text-decoration: none;
}

a.app-link:hover .status {
    color: #fff;
}
a.app-link .card-header .icon {
    color: #5aa4e4;
    position: relative;
}
a.app-link:hover .card {
    -webkit-transform: translateY(-4px);

    transform: translateY(-4px);

    -webkit-transition-property: all;

    transition-property: all;

    -webkit-transition-duration: 0.3s;

    transition-duration: 0.3s;

    -webkit-transition-timing-function: ease-out;

    transition-timing-function: ease-out;

    border: solid 1px#2991d9;
}
a.app-link:hover .card-header .icon {
    color: #8fcbff;
}

a.app-link:hover .card-header h3 {
    color: #2296f3;
}
a.app-link:hover .card-header small {
    color: #507a9c;
}
a.app-link:hover .card-2 .card-footer {
    background: #2196f3;
}
a.app-link.fade-in-up {
}

.delay-1 {
    -webkit-animation-delay: 0.7s;
    -moz-animation-delay: 0.7s;
    animation-delay: 0.7s;
}

.delay-2 {
    -webkit-animation-delay: 0.9s;
    -moz-animation-delay: 0.9s;
    animation-delay: 0.9s;
}

.delay-3 {
    -webkit-animation-delay: 1.2s;
    -moz-animation-delay: 1.2s;
    animation-delay: 1.2s;
}
.delay-4 {
    -webkit-animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
    animation-delay: 1.5s;
}

.delay-5 {
    -webkit-animation-delay: 1.7s;
    -moz-animation-delay: 1.7s;
    animation-delay: 1.7s;
}

.delay-6 {
    -webkit-animation-delay: 1.9s;
    -moz-animation-delay: 1.9s;
    animation-delay: 1.9s;
}

@media (max-width: 479px) {
    .app-link {
        width: 95%;
        margin: 0 auto 1em;
        padding: 0;
    }

    .app-grid:after {
        display: none;
    }

    a.app-link .card-2 {
        flex-direction: row;
    }

    a.app-link .card-2 .card-header {
        display: flex;
        padding: 0.5em 1.5em 1em;
    }

    a.app-link .card-2 .card-footer {
        width: 100%;
    }

    a.app-link .card-header .icon {
        margin-right: 0.6em;
        margin-bottom: 0;
    }

    a.app-link .card-header .card-desc {
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    a.app-link .card-header .card-desc h3 {
        margin-top: 0.5em;
    }

    a.app-link .card-header .card-desc small {
        line-height: 1.4em;
    }

    a.app-link .card-2 .icon:after {
        background-size: 1.8em !important;
    }

    a.app-link .card-2 .icon:before {
        background-size: 1.2em !important;
    }

    .v-center {
        display: none;
    }
}
@media all and (min-width: 480px) and (max-width: 767px) {
    .app-link {
        width: calc(100% * (1 / 2));
    }
}
@media all and (min-width: 768px) and (max-width: 992px) {
    .app-link {
        width: calc(100% * (1 / 4));
    }
}
@media (min-width: 1200px) {
    .app-link {
        width: calc(100% * (1 / 5));
    }
}
@media (max-width: 992px) {
    .sidebar-img {
        width: 100px;
    }
    .card-2 .card-header {
    }
}

table th.th_action,
td.td_action {
    text-align: center;
    width: 15px;
}
table th.th_action2,
td.td_action2 {
    text-align: center;
    width: 20%;
}

table .table_child_inside {
    border: 0px;
    width: auto;
}

.table thead th,
.table th {
    font-size: 12px;
    border: 0px;
}

.table tbody td,
.table td {
    border: 0px;
    padding: 2px 3px;
}
.table td.td_noPeg img {
    object-fit: cover;
    width: 50px !important;
    height: 50px !important;
    object-position: 50% 0;
    border-radius: 50%;
}

.table_child_inside thead th,
.table_child_inside th {
    font-size: 11px;
    border: 0px;
}

.table_child_inside tbody td,
.table_child_inside td {
    font-size: 11px;
    border: 0px;
    padding: 2px 3px;
}

.table-small-padding tr th {
    padding: 2px 3px;
    font-size: 12px;
}

.table-small-padding tr td {
    padding: 2px 3px;
}

@media (max-width: 768px) {
    table td.td_action {
        text-align: left;
    }
    table th.th_action {
        text-align: left;
    }
    table th.th_group {
        text-align: left;
    }

    table td.td_action2 {
        text-align: left;
    }
    table th.th_action2 {
        text-align: left;
    }
}

.up-1px {
    margin-top: -1px;
}
.down-1px {
    margin-top: -1px;
}

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

.recom-data-ajax {
    position: relative;
    background: rgb(250, 250, 250);
    border-radius: 2px !important;
    box-shadow: 0px 2px 9px;
}

#breadcrumb_title {
    float: left;
    color: #666;
    font-size: 14px;
    font-family: verdana;
}

.button-add-delete {
    margin: 2px 0 3px 0;
}

.page-sidebar .page-sidebar-menu > li > a > .title {
    padding: 5px 0px;
    font-weight: 600;
}

.page-sidebar-closed.page-sidebar-fixed
    .page-sidebar:hover
    .page-sidebar-menu
    > li
    > a
    > .title {
    font-size: 11px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.page-sidebar .page-sidebar-menu .sub-menu li {
    border-bottom: 1px solid #253242;
}

.input-xxlarge {
    width: 530px;
}

#button-add-delete-all {
    margin-bottom: 5px;
}

label {
    font-size: 13px;
}

.form-control {
    font-size: 13px;
}

.page-content {
    background-color: #f8f8f8;
    font-family: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#portlet-page {
    min-height: 430px;
}

.btn {
    border-radius: 2px !important;
}

@media (min-width: 992px) {
    .page-sidebar {
    }

    .page-content-wrapper {
        float: left;
        width: 100%;
    }
    .page-content-wrapper .page-content {
    }
    .page-content-wrapper .page-content.no-min-height {
        min-height: auto;
    }
    .page-sidebar-fixed.page-sidebar-hover-on
        .page-content-wrapper
        .page-content {
        margin-left: 45px;
    }
    .page-sidebar-reversed .page-content-wrapper .page-content {
        margin-left: 0 !important;
        margin-right: 235px !important;
    }
    .page-sidebar-reversed.page-sidebar-fixed.page-sidebar-hover-on
        .page-content-wrapper
        .page-content {
        margin-left: 0;
        margin-right: 45px;
    }
    .page-sidebar-reversed.page-sidebar-closed
        .page-content-wrapper
        .page-content {
        margin-left: 0 !important;
        margin-right: 45px !important;
    }
    .page-sidebar-closed .page-content-wrapper .page-content {
        margin-left: 54px !important;
    }
    .page-sidebar-closed.page-sidebar-hide .page-content-wrapper .page-content {
        margin-left: 0 !important;
    }
    .page-sidebar-closed.page-sidebar-reversed.page-sidebar-hide
        .page-content-wrapper
        .page-content {
        margin-right: 0 !important;
    }
    .page-full-width .page-content-wrapper .page-content {
        margin-left: 0px !important;
    }
}

.page-title {
    padding: 0px;
    font-size: 24px;
    letter-spacing: -1px;
    display: block;
    color: #25993c;
    margin: 0px 0px 5px 0px;
    font-weight: 300;
    font-family: "Open Sans", sans-serif;
}

.page-breadcrumb {
    width: 100%;
    background-color: #fff;
}

#portlet-page,
#portlet-sub-page {
    border-radius: 3px !important;
}

.portlet.light .form .form-actions {
    background-color: #f8f8f8;
    margin-left: -15px !important;
    margin-right: -15px !important;
    margin-bottom: -10px !important;

    padding-left: 15px !important;
    padding-right: 15px !important;
}

#portlet-sub-page > .portlet-title {
    min-height: 28px;
}

.page-sidebar-closed.page-sidebar-fixed
    .page-sidebar:hover
    .page-sidebar-menu
    > li.active.open
    > a,
.page-sidebar .page-sidebar-menu > li.active > a,
.page-sidebar .page-sidebar-menu:hover > li.active > a,
.page-sidebar .page-sidebar-menu:hover > li.active.open > a,
.page-sidebar .page-sidebar-menu > li.active.open > a {
    background: #e26a6a;
}
*/ #resultAjax {
    min-height: 50px;
}

.wrapper-display-html form {
    background: #fff;
    padding: 15px;
    margin-bottom: 3em;
    box-shadow: 0 3px 10px #cdd4da;
    -webkit-animation: fadeInUp 0.5s;
    animation: fadeInUp 0.5s;
}

.wrapper-display-html .tab-content form {
    box-shadow: none;
    margin-bottom: 0;
}

.wrapper-display-html form .form-actions {
    background: #e1e5ec;
    padding: 2em;
    margin-left: -15px;
    margin-right: -15px;
    margin-bottom: -15px;
    margin-top: 2em;
}
.form-control-cloned {
    border-top: solid 1px #eef1f5;
    padding-top: 1em;
    margin-top: 1em;
}
.tab-content fieldset {
    margin-top: 2em;
}
.tab-content legend {
    background: #f0f8fe;
    border: none;
    padding: 10px;
}

@media (max-width: 768px) {
    table td.td_action {
        text-align: left;
    }
    table th.th_action {
        text-align: left;
    }
    table th.th_group {
        text-align: left;
    }

    table td.td_action2 {
        text-align: left;
    }
    table th.th_action2 {
        text-align: left;
    }
}

.table-condensed > tbody > tr > td > .month,
.table-condensed > tbody > tr > th > .month,
.table-condensed > tfoot > tr > td > .month,
.table-condensed > tfoot > tr > th > .month,
.table-condensed > thead > tr > td > .month,
.table-condensed > thead > tr > th > .month,
.table-condensed > tbody > tr > td > .year,
.table-condensed > tbody > tr > th > .year,
.table-condensed > tfoot > tr > td > .year,
.table-condensed > tfoot > tr > th > .year,
.table-condensed > thead > tr > td > .year,
.table-condensed > thead > tr > th > .year {
    padding-left: 2px;
    padding-right: 2px;
    cursor: pointer;
}

.table-condensed > thead > tr > th > .datepicker-switch,
.table-condensed > thead > tr > td > .datepicker-switch {
    text-align: center;
}
.table-condensed > thead > tr > th > .next,
.table-condensed > thead > tr > td > .next {
    text-align: right;
    cursor: pointer;
}
.table-condensed > thead > tr > th > .prev,
.table-condensed > thead > tr > td > .prev {
    cursor: pointer;
}

@media only screen and (max-width: 480px) {
    .table-presence thead tr th {
    }
    .table-presence tr td:before {
        content: attr(data-title);
        font-weight: 400;
        font-size: 12px;
        width: 8em;
        display: inline-block;
        text-align: left;
        float: left;
        color: #1874b9;
    }
    .table-presence tr td:last-child {
        border-bottom: 3px solid;
    }
    .table-presence th {
        display: none;
    }
    .table-presence td {
        width: 100%;
        display: block;
    }
    .table-presence td .btn {
        padding: 0px;
    }
    .text-center {
        text-align: left;
    }
}