/*=========================================================================================
    File Name: mod.css
    Description: mod.css is css that is modified to beautify the appearance and 
    customization that clients expect.
    ----------------------------------------------------------------------------------------
    Author: Mr.Kei
    Last Modified: June 9, 2022
==========================================================================================*/

:root{
    --base-color-1  : rgba(148, 172, 63, 1);
    --base-color-2  : rgba(0, 82, 103, 1);
}

/*css opacity*/
    .opacity-0 {
        opacity: 0;
    }

    .opacity-1 {
        opacity: .2;
    }

    .opacity-2 {
        opacity: .4;
    }

    .opacity-3 {
        opacity: .6;
    }

    .opacity-4 {
        opacity: .8;
    }

    .opacity-5 {
        opacity: 1;
    }
/*end css opacity*/

/*css button*/
    .btn.btn-default-blue {
        background-color: var(--base-color-2);
        color: #fff;
        border-color: #f0f8ffb3;
    }

    .btn.btn-default-blue:hover {
        background-color: var(--base-color-1);
        color: #fff;
    }

    .btn.btn-default-red {
        background-color: rgba(133,16,16,1);
        color: #fff;
        border-color: #f0f8ffb3;
    }

    .btn.btn-default-red:hover {
        background-color: rgba(2,0,82,1);
        color: #fff;
    }
/*end css button*/

/*css gradient*/
    .bg-gradient {
        background-image: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(211,47,47,1) 100%, rgba(133,16,16,1) 100%);
    }
/*end css gradient*/

/*css background*/
    .bg-base-1 {
        background-color: var(--base-color-1);
        color: white;
    }
    .bg-base-2 {
        background-color: var(--base-color-2);
        color: white;
    }
/*end css background*/

/*css background login page*/
    .bg-full-screen {
        /*background: linear-gradient(90deg, rgba(148, 172, 63, 0.5) 0%, rgba(0, 82, 103, 1) 100%, rgba(148, 172, 63, 1) 100%), url(../../assets/images/img/bg-1.jpg) no-repeat center center fixed;*/
                background: url(../../images/bg-1.png) no-repeat center center fixed;
        background-size: cover;
        opacity:  0.8;
    }

    .bg-full-screen .card {
        background: #ffffffc7;
    }

    .bg-full-screen .card-header,
    .bg-full-screen .line-on-side span {
        background: transparent;
    }

      .wrapper {
        height: 100%;
        width: 100%;
        /*background: linear-gradient(180deg, #04fafd, 5%, #119dff, 50%, #030423);*/
        position: absolute;
      }
      .wrapper h1 {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        position: absolute;
        font-family: sans-serif;
        letter-spacing: 1px;
        word-spacing: 2px;
        color: #fff;
        font-size: 40px;
        font-weight: 888;
        text-transform: uppercase;
      }
      .wrapper div {
        height: 60px;
        width: 60px;
        border: 2px solid rgba(255, 255, 255, 0.7);
        border-radius: 50px;
        position: absolute;
        top: 10%;
        left: 10%;
        animation: 4s linear infinite;
      }
      div .dot {
        height: 10px;
        width: 10px;
        border-radius: 50px;
        background: rgba(255, 255, 255, 0.5);
        position: absolute;
        top: 20%;
        right: 20%;
      }
      .wrapper div:nth-child(1) {
        top: 20%;
        left: 20%;
        animation: animate 8s linear infinite;
      }
      .wrapper div:nth-child(2) {
        top: 60%;
        left: 80%;
        animation: animate 10s linear infinite;
      }
      .wrapper div:nth-child(3) {
        top: 40%;
        left: 40%;
        animation: animate 3s linear infinite;
      }
      .wrapper div:nth-child(4) {
        top: 66%;
        left: 30%;
        animation: animate 7s linear infinite;
      }
      .wrapper div:nth-child(5) {
        top: 90%;
        left: 10%;
        animation: animate 9s linear infinite;
      }
      .wrapper div:nth-child(6) {
        top: 30%;
        left: 60%;
        animation: animate 5s linear infinite;
      }
      .wrapper div:nth-child(7) {
        top: 70%;
        left: 20%;
        animation: animate 8s linear infinite;
      }
      .wrapper div:nth-child(8) {
        top: 75%;
        left: 60%;
        animation: animate 10s linear infinite;
      }
      .wrapper div:nth-child(9) {
        top: 50%;
        left: 50%;
        animation: animate 6s linear infinite;
      }
      .wrapper div:nth-child(10) {
        top: 45%;
        left: 20%;
        animation: animate 10s linear infinite;
      }
      .wrapper div:nth-child(11) {
        top: 10%;
        left: 90%;
        animation: animate 9s linear infinite;
      }
      .wrapper div:nth-child(12) {
        top: 20%;
        left: 70%;
        animation: animate 7s linear infinite;
      }
      .wrapper div:nth-child(13) {
        top: 20%;
        left: 20%;
        animation: animate 8s linear infinite;
      }
      .wrapper div:nth-child(14) {
        top: 60%;
        left: 5%;
        animation: animate 6s linear infinite;
      }
      .wrapper div:nth-child(15) {
        top: 90%;
        left: 80%;
        animation: animate 9s linear infinite;
      }
      @keyframes animate {
        0% {
          transform: scale(0) translateY(0) rotate(70deg);
        }
        100% {
          transform: scale(1.3) translateY(-100px) rotate(360deg);
        }
      }
      
/*css background login page*/

/*css galeri*/
    #photo-gallery .card-deck .card-body {
        display: none;
    }

    #photo-gallery .pswp__caption {
        display: block;
    }

    #photo-gallery .effect-bubba {
        background: var(--base-color-2);
    }

    #photo-gallery .grid-hover {
        margin: unset;
        padding: unset;
    }

    #photo-gallery .grid-hover figure p {
        font-size: small;
    }

    #photo-gallery figure .action-button {
        position: absolute;
        width: 100%;
        bottom: 0;
    }

    #photo-gallery figure .action-button a {
        margin: 5px;
    }

    #photo-gallery .grid-hover figure.effect-sarah h2 span {
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        display: -webkit-box;
    }

    #photo-gallery .grid-hover figure.effect-sarah h2 p {
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        padding-bottom: 0;
    }
/*end css galeri*/

/*css arsip*/
    section[name="archives"] figure.effect-milo p,
    section[name="archives-details"] figure.effect-milo p {
        width: 100%;
        font-size: smaller;
    }

    section[name="archives"] .card-body p,
    section[name="archives-details"] .card-body p {
        margin-bottom: 0;
    }

    section[name="archives-details"] .card-content p{
        text-align: justify;
    }
/*end css arsip*/

/*css home-dashboard*/
    .sub-menu-dashboard {
        max-height: 0;
        transition: max-height .5s ease-out;
        overflow: hidden;
    }

    .sub-menu-dashboard.show {
        max-height: 400px;
        transition: max-height .5s ease-in;
    }

    .sub-menu-dashboard ul {
        padding: 10px 0;
        margin-bottom: 0;
    }

    .sub-menu-dashboard li {
        list-style: none;
    }

    .sub-menu-dashboard .border-top,
    .sub-menu-dashboard .border-bottom {
        border-color: #626e828c !important;
    }

    .item-sub-menu-dashboard {
        padding: 5px;
        display: block;
        margin-bottom: 5px;
        color: var(--base-color-2);
        background-color: rgba(133,16,16,.1)
    }

    .item-sub-menu-dashboard:hover,
    .item-sub-menu-dashboard.active {
        color: white;
        background-color: rgba(2,0,36,.5);
    }

    .item-sub-menu-dashboard span {
        transition: all 0.2s ease;
        display: inline-block;
    }

    .item-sub-menu-dashboard:hover span {
        transform: translateX(4px);
    }

    .item-sub-menu-dashboard i {
        font-size: large;
        font-weight: 600;
    }

    .filter-dashboard {
        max-height: 0;
        transition: max-height .5s ease-out;
        overflow: hidden;
    }

    .filter-dashboard > .row {
        padding: 10px 0;
    }

    .filter-dashboard.show {
        max-height: 400px;
        transition: max-height .5s ease-in;
    }

    .filter-dashboard .item-filter {
        padding: 10px 0;
        margin-bottom: 0;
    }

    .filter-dashboard .border-top,
    .filter-dashboard .border-bottom {
        border-color: #626e828c !important;
    }

    .filter-dashboard .item-filter .form-group {
        margin-bottom: 0;
    }

    .sub-menu-dashboard .title,
    .filter-dashboard .title {
        padding-top: 5px;
    }
/*end css home-dashboard*/

/*css custom button*/
    .btn-hover-danger:hover {
        color: var(--white);
        background-color: var(--danger);
        border-color:  var(--danger);
    }
/*end css custom button*/

/*css comingsoon page*/
    .comingsoonOne {
        background-image: unset;
        background: linear-gradient(90deg, rgb(2, 0, 36, 0.5) 0%, rgb(211, 47, 47, 0.5) 100%, rgb(133, 16, 16) 100%), url(../../assets/images/img/cs-bg.jpg);
        background-size: cover;
    }

    .clockCard {
        background-image: linear-gradient(90deg, rgba(2,0,36,.5) 0%, rgba(2,0,36,.5) 100%);
    }
/*end css comingsoon page*/

/*cutom swiper (berita-home) css*/
    .grid-hover figure {
        max-width: unset;
    }

    .grid-hover figure p {
        font-size: unset;
    }

    figure.effect-sarah {
        background-color: rgb(2, 0, 36);
    }

    figure.effect-milo p {
        width: 90%
    }

    figure.effect-milo {
        background-color: rgb(2, 0, 36);
    }

    figure.effect-milo figcaption h2 {
        width: 100%;
        text-align: right;
        background: rgba(2, 0, 36, .5);
    }

    .swiper-button-prev {
        left: 0;
        top: 50%;
        height: 50px;
        width: unset;
        background: #fff3;
    }

    .swiper-button-next {
        right: 0;
        top: 50%;
        height: 50px;
        width: unset;
        background: #fff3;
    }

    .swiper-button-prev::after,
    .swiper-button-next::after {
        font-size: 2.5rem;
        padding: 0;
        height: unset;
    }

    .swiper-button-prev:hover,
    .swiper-button-next:hover {
        background-color: #ffffff80;
    }
/*end cutom swiper css*/

/*css announcement*/
    section[name="announcement"] {
        background: url(../../assets/images/img/anouncement-bg.jpg);
        background-attachment: fixed;
        background-size: cover;
    }

    section[name="announcement"] .section-title {
        color: #fff;
    }

    section[name="announcement"] .section-title::after {
        background: #fff;
    }

    section[name="announcement"] .card {
        background: #ffffff57;
    }

    section[name="announcement"] .card-footer {
        background: transparent;
    }

    section[name="announcement"] .media-object {
        width: 64px;
        height: 64px;
        display: block;
        text-align: center;
        background: rgba(133, 16, 16, 1);
    }

    section[name="announcement"] .media-object i {
        font-size: 3rem;
        padding-top: 10px;
        color: #fff;
    }

    section[name="announcement"] .media-body:not(:hover) .media-heading a {
        color: #fff;
    }

    section[name="announcement"] .media-body:hover .media-heading a {
        color: #c1c1c1;
    }

    .animated-bounce {
        -webkit-animation-duration: 2s;
        animation-duration: 2s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
    }

    @-webkit-keyframes bounce {
        0%, 100% {
            -webkit-transform: translateY(0);
        }
        50% {
            -webkit-transform: translateY(-20px);
        }
    }

    @keyframes bounce {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-20px);
        }
    }

    .bounce {
        -webkit-animation-name: bounce;
        animation-name: bounce;
    }
/*end css announcement*/

/*css landing page*/
    .flexbox-container .card-title img {
        background: #ffffffbf;
        border-radius: 1.3rem;
    }
    .portal a.item-portal:not(:hover) {
        color: #fff;
        border: 3px solid;
        background: unset;
    }
    .portal a.item-portal:hover {
        color: rgb(133, 16, 16);
        border: 3px solid;
        background: #ffffff91;
    }
    .portal a.item-portal {
        border-radius: 15px !important;
    }
    .portal.bg-full-screen {
        opacity: 1;
    }
    .wow {
        opacity: 0;
    }
    .item-portal:before {
        content: '';
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, rgba(148, 172, 63, 0.5) 0%, rgba(0, 82, 103, .5) 100%);
        border-radius: 10px;
        transition: all 1s;
    }
    .item-portal .card-content {
        z-index: 1;
    }
    .portal a.item-portal:hover {
        color: white;
    }
    .item-portal:hover:before {
        background-color: rgba(0, 82, 103, .5);
        transition: all 0.25s ease;
    }

    footer {
        background-color: rgb(0, 42, 52);
        color: #ffffff8c;
    }
    footer .border-top {
        border-color: #ffffff45!important;
    }

    .portal footer {
        background-color: transparent !important;
        color: #ffffff8c;
    }

    .medSos a {
        width: 45px;
        height: 45px;
        color: #ffffff8c;
        margin-left: 5px;
        margin-right: 5px;
        display: inline-block;
        background: aliceblue;
        text-align: center;
        border: 3px solid #ffffff8c;
        background: linear-gradient(90deg, rgba(148, 172, 63, 0.3) 0%, rgba(0, 82, 103, .3) 100%);
        border-radius: 15px;
        transition: all 0.25s ease;
    }

    .medSos a:hover {
        color: #ffffff;
        border: 3px solid #ffffff;
        background-color: rgba(0, 82, 103, .5);
        transition: all 0.25s ease;
    }

    .copyright a {
        color: #ffffff8c
    }

    .copyright a:hover {
        color: #ffffff;
    }
/*end css landing page*/

/*css header*/
    .navbar-brand img {
        height: 60px;
    }
    .header-navbar > .navbar-wrapper {
        border-bottom-color: #ffffff80 !important;
    }

    .horizontal-menu .navbar-horizontal .dropdown .dropdown-menu,
    .dropdown .dropdown-menu {
        background-color: var(--base-color-2);
    }

    .horizontal-menu .navbar-horizontal .dropdown .dropdown-menu .dropdown-item,
    .header-navbar .dropdown .dropdown-item {
        color: #ffffff;
    }

    .horizontal-menu .navbar-horizontal .dropdown .dropdown-menu .dropdown-item:hover, .dropdown-item:focus,
    .header-navbar .dropdown .dropdown-item:hover, .dropdown-item:focus {
        background-color: #26367180;
    }

    .navbar-horizontal .nav-item .dropdown-menu .dropdown-menu {
        max-height: 70vh;
        overflow: auto;
    }

    .dropdown-menu .dropdown-submenu > .dropdown-menu {
        margin-left: 0;
    }

    .header-navbar,
    .navbar-dark.navbar-horizontal,
    .header-navbar.navbar-with-menu .navbar-container {
        /*background: linear-gradient(90deg, rgb(203, 223, 126) 0%, rgb(0, 82, 103) 100%, rgb(148, 172, 63) 100%);*/
        background: linear-gradient(90deg, rgb(255, 255, 255) 20%, rgb(148, 172, 63) 80%, rgb(0, 82, 103) 100%);
    }

    .toggle-menu {
        display: none;
    }

    .header-navbar.navbar-shadow {
        box-shadow: 0px 2px 20px 2px rgba(0, 0, 0, 0.53);
    }

    .horizontal-menu #main-menu-navigation ul li:hover a span,
    .horizontal-menu #main-menu-navigation ul li a span .hover {
        transform: translateX(4px);
    }

    .main-menu-content .dropdown .dropdown-menu .active a {
        background-color: var(--base-color-1);
    }

    .main-menu.menu-light .navigation > li ul .active {
        background-color: #10163c;
    }
    .main-menu.menu-light .navigation > li .active > a {
        background: transparent;
    }
    .menu-fixed #main-menu-navigation .nav-item a {
        color: #fff;
    }
    .sticky-wrapper .nav-link,
    .navbar-dark .navbar-nav .nav-link {
        color: var(--base-color-2)!important;
        font-weight: 600;
    }
    .horizontal-menu .navbar-dark .nav-item.active > a,
    .horizontal-menu .navbar-dark .nav-item:hover,
    .horizontal-menu .navbar-dark .nav-item .hover {
        background-color: rgba(148, 172, 63, .5);
        border-radius: 1.3rem;
    }
/*end css header*/

/*css section global*/
    .color-1 {
        color: var(--base-color-1)!important;
    }

    .color-2 {
        color: var(--base-color-2)!important;
    }

    .section-title {
        font-weight: 600;
        border-bottom: 1px solid;
        position: relative;
        color: rgba(2,0,36,1);
    }

    .section-title::after {
        position: absolute;
        content: "";
        width: 30%;
        height: 2px;
        left: calc(85% - 50%);
        bottom: 0;
        background: rgba(2,0,36,1);
    }

    form .form-section {
        background: linear-gradient(90deg, rgba(135, 159, 48, 0.9) 0%, rgba(18, 125, 152, 0.9) 100%);
        color: white;
        margin-bottom: 0;
        margin-top: 20px;
        font-weight: 600;
    }

    form .form-section i {
        margin-left: 10px;
    }

    form .card-header .heading-elements.heading-form-section {
        top: 25px;
        background-color: unset;
    }

    .divider {
        position: relative;
        height: 1px;
        /*box-shadow: -10px 2px 6px 0px rgba(0, 0, 0, 0.3);*/
    }

    .div-transparent:before {
        content: "";
        position: absolute;
        top: 0;
        left: 5%;
        right: 5%;
        width: 90%;
        height: 2px;
        background-image: linear-gradient(to right, transparent, rgba(60, 60, 60, 0.5), transparent);
    }

    .card-header {
        border-bottom: 1px solid #E4E7ED;
    }

    .card .card-title {
        font-weight: 700;
    }

    .progress-anima {
        background: rgba(1, 15, 30, 0.1);
        height: 1px;
        overflow: hidden;
        position: relative;
    }

    .progress-anima::before {
        animation-duration: 2s;
        animation-timing-function: ease;
        animation-iteration-count: infinite;
        animation-name: progress;
        background: #111;
        content: "";
        display: block;
        height: 1px;
        position: absolute;
        width: 80px;
    }

    @keyframes progress {
        0% {
            transform: translateX(0px);
        }
        100% {
            transform: translateX(1440px);
        }
    }

    .back-to-top {
        position: fixed;
        color: #fff;
        width: 44px;
        height: 44px;
        text-align: center;
        line-height: 1;
        right: 15px;
        bottom: 15px;
        transition: background 0.5s;
        z-index: 9;
        background: var(--base-color-2);
        transition: all .5s;
        padding: 4px;
    }

    .back-to-top.show{
        bottom: 30px;
        transition: all .5s;
        transform: translateX(-100px);
    }

    .back-to-top:hover {
        color: #fff;
        transition: all .5s;
    }

    .back-to-top .la {
        font-size: 2.5rem;
    }

    .back-to-top {
        opacity: 0;
    }

    .come-in {
        opacity: 1;
        transform: translateY(50px);
        animation: come-in 1s ease forwards;
        -webkit-transition: opacity 1s ease-in-out;
        -moz-transition: opacity 1s ease-in-out;
        -ms-transition: opacity 1s ease-in-out;
        -o-transition: opacity 1s ease-in-out;
        transition: opacity 1s ease-in-out;
    }

    @keyframes come-in {
        to { transform: translateY(0); }
    }

    .pagination .page-item a {
        /*padding: 0.75rem 1rem;*/
        /*background-color: rgba(133,16,16,1);*/
        color: #babfc7;
    }
    .pagination .page-item a:hover,
    .pagination .page-item.active .page-link {
        background-color: var(--base-color-2);
    }

    .page-item.disabled .page-link {
        border-color: #babfc7;
    }


    .form-control-height-custom-60{
        height: 60px!important;
    }

    .form-control-width-custom-60{
        width: 60px!important;
    }

    .form-control-height-custom-95{
        height: 95px!important;
    }

    .form-control-height-custom-100{
        height: 100px!important;
    }
/*end css section*/

/*css vertical tab*/
    .nav-vertical .nav-left.nav-tabs.nav-border-left li.nav-item a.nav-link:not(.active) {
        color: var(--base-color-2)!important;
    }
    .nav-vertical .nav-left.nav-tabs.nav-border-left li.nav-item a.nav-link.active {
        font-weight: 700;
    }
    .nav-vertical .nav-left.nav-tabs.nav-border-left li.nav-item:hover a.nav-link {
        background: #f4f5fa;
        border-radius: .25rem;
    }
    .nav.nav-tabs.nav-topline .nav-item a.nav-link.active {
        box-shadow: inset 3px 0px 0 var(--base-color-1);
        border-top-color: unset;
        border-radius: 5px;
        border: solid 1px #ddd;
    }
    .nav.nav-tabs.nav-topline .nav-item {
        padding-right: 3px;
        width: 100%;
    }
    .nav.nav-tabs.nav-topline .nav-item a.nav-link {
        border-radius: 5px;
        border: solid 1px #ddd;
        width: 100%;
    }
/*end css vertical tab*/

/*css modal*/
    .modal-content {
        border: unset;
        background-color: unset;
    }

    .modal-header {
        background: linear-gradient(90deg, rgba(148, 172, 63, 1) 0%, rgba(0, 82, 103, 1) 100%);
    }

    .modal-header h5,
    .modal-header button {
        color: white;
    }

    .modal-body {
        background-color: white;
    }

    .modal-body fieldset:nth-child(odd) {
        background-color: #f4f5fa;
    }

    .modal-footer {
        background-color: white;
    }
/*end css modal*/

/*css table default*/
    .table-responsive {
        border: 1px solid #626e8252 !important;
    }
    .table-responsive-border-0 {
        border: 0!important; }

    table.table-striped {
        margin-bottom: 0;
    }

    table.table-striped th {
        background-color: var(--base-color-2);
        color: white;
        padding: 10px 15px;
    }

    table.table-striped tbody th {
        background: linear-gradient(90deg, rgba(0, 82, 103, .4) 0%, rgba(0, 82, 103, 0.06) 100%);
        color: #1b1b1b;
    }

    .table th, .table td {
        padding: 0.7rem;
    }
/*end css table default*/

/*css footer*/
    footer.footer-dark {
        background: rgba(2, 0, 36, 1);
    }
/*end css footer*/

/*css wizard*/
    .app-content .wizard > .steps > ul > li.current .step {
        border-color: var(--base-color-2);
        color: var(--base-color-2);
    }

    .app-content .wizard > .steps > ul > li.done .step {
        border-color: var(--base-color-2);
        background-color: var(--base-color-2);
    }

    .app-content .wizard.wizard-circle > .steps > ul > li::before,
    .app-content .wizard.wizard-circle > .steps > ul > li::after {
        background-color: var(--base-color-2);
    }
/*end css wizard*/

/*css specific screen*/
    @media (max-width: 767px) {
        .app-content .wizard > .content > .body {
            padding: 0;
        }
        #myTabContent .tab-pane {
            border-left: unset!important;
        }
        .nav-tabs .nav-item {
            margin-bottom: 2px;
        }
        .nav.nav-tabs.nav-topline {
            border-bottom: none;
        }
        .nav.nav-tabs.nav-topline {
            margin-top: 5px;
        }
        .header-navbar,
        .navbar-dark.navbar-horizontal,
        .header-navbar.navbar-with-menu .navbar-container {
            background: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(148, 172, 63) 70%, rgb(0, 82, 103) 100%);
        }
    }

    @media (min-width: 768px) {
        .navbar-nav li:first-child {
            margin-left:auto;
        }

        .navbar-nav li:last-child {
            margin-right:auto;
        }
    }

    @media (max-width: 992px) {  
        .menu-fixed #main-menu-navigation .nav-item a {
            color: unset!important;
        }
    }

    @media (max-width: 1199px) {
        .toggle-menu {
            display: block;
        }

        .main-menu.menu-light,
        .main-menu.menu-light .navigation li,
        .main-menu.menu-light .navigation > li ul li {
            background: rgb(0, 42, 52);;
            text-align: left;
        }
        .main-menu.menu-light .navigation li, a, span, i {
            /*color: #fff;*/
        }

        .horizontal-layout.vertical-layout.vertical-overlay-menu .main-menu .navigation li.nav-item.menu-collapsed-open > a {
            background: #26367180;
        }

    }

    @media (min-width: 1200px) {
        .horizontal-menu .navbar-horizontal .nav-item a span {
            display: grid;
            text-align:  center;
        }

        .horizontal-menu .navbar-horizontal .nav-item > a > i {
            margin-right: 0;
            margin-bottom: 5px;
            display: grid;
        }

        .horizontal-menu .navbar-horizontal ul#main-menu-navigation > li > a {
            padding: .8rem 1rem;
            min-width: 130px;
            border-radius: 1.3rem;
        }
    }
/*end css specific screen*/

/*css toggle tab*/
    .btn-hideTab span {
        opacity: 1;
        transition: all 1s;
    }
    .hideTab.btn-hideTab span {
        opacity: 0;
        max-width: 0;
        max-height: 0;
        overflow: hidden;
        display: block;
    }
    .hideTab .btn-hideTab i {
        transform: rotate(180deg);
    }
    .hideTab .nav-tabs .nav-link span {
        opacity: 0;
        max-width: 0;
        max-height: 0;
        overflow: hidden;
    }
    .hideTab .nav-tabs a.nav-link {
        min-width: unset!important;
        width: unset;
    }
    .nav.nav-tabs.nav-topline .nav-item a.nav-link i,
    .nav.nav-tabs.nav-topline .nav-item a.nav-link span {
        color: var(--base-color-2);
    }
/*end css toggle tab*/

/*css block ui scrollable table*/
    .scrollWarning {
        position: absolute;
        background-color: #00000096;
        color: white;
        padding: 5px 10px;
        z-index: 1;
    }

    .table-responsive > span.scrollWarning {
        display: none;
    }

    .table-responsive > span.scrollWarning:first-child {
        display: grid;
    }
/*end css block ui scrollable table*/

/*css input file (upload)*/
    .custom-file-label {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
/*end css input file (upload)*/

.top-content.app-content {
    background: linear-gradient(90deg, rgba(148, 172, 63, 0.5) 0%, rgba(11, 176, 218, 0.5) 100%, rgba(148, 172, 63, 1) 100%), url(../../assets/images/img/bg-2.jpg);
    background-position: 50% 50%;
    background-size: cover;
    opacity: 0.8;
}

#myTabContent .tab-pane {
    border-left: 1px solid #ddd;
}

.nav-vertical .nav-left.nav-tabs li.nav-item a.nav-link {
    border-right: unset;
}

.nav-vertical .nav-left.nav-tabs.nav-border-left li.nav-item a.nav-link.active {
    border-left: 3px solid var(--base-color-1);
}

.card .card.timeline-card {
    box-shadow: 0 2px 18px 1px rgba(49, 53, 72, 0.18) !important;
}

.actions.clearfix {
    display: none!important;
}