/* FONTS */
@font-face {
    font-family: "Poppins-Light";
    src: url('http://182.253.69.94:999/tatawisata/cifms/assets/fonts/Poppins-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'Poppins-Regular';
    src: url('http://182.253.69.94:999/tatawisata/cifms/assets/fonts/Poppins-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Poppins-Medium';
    src: url('http://182.253.69.94:999/tatawisata/cifms/assets/fonts/Poppins-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Poppins-SemiBold';
    src: url('http://182.253.69.94:999/tatawisata/cifms/assets/fonts/Poppins-SemiBold.ttf') format('truetype');
}

/* FONTS */

.container-app {
    width: 100%;
    height: 100vh;
}

.container-app .box-app {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 50px 60px auto;
    grid-template-areas:
        'header'
        'nav'
        'main';
}

/* HEADER */
.container-app .box-app header.header-app {
    width: 100%;
    grid-area: header;
    border-bottom: 0.5px solid rgba(51, 51, 51, 0.3);
    box-sizing: border-box;
    /* background-color: lightcoral; */
}

.container-app .box-app header.header-app .box-header {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: calc(100% - 3em);
    height: 100%;
    /* max-width: 1050px; */
    margin: auto;
    /* background-color: yellowgreen; */
}

.container-app .box-app header.header-app .box-header .left {
    display: flex;
    align-items: center;
    /* background-color: red; */
}

.container-app .box-app header.header-app .box-header .left h3 {
    font-family: 'Poppins-SemiBold';
    font-size: 0.9rem;
    color: #333;
    line-height: 1.35em;
}

.container-app .box-app header.header-app .box-header .right {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 1em;
    /* background-color: lightsalmon; */
}

.container-app .box-app header.header-app .box-header .right .menu-master a.nav-link {
    font-family: 'Poppins-Regular';
    font-size: 0.85rem;
    color: #333;
}

.container-app .box-app header.header-app .box-header .right .menu-master .dropdown-menu li a.dropdown-item {
    font-family: 'Poppins-Regular';
    font-size: 0.85rem;
    color: #333;
}

.container-app .box-app header.header-app .box-header .right .icons-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5em;
    /* background-color: violet; */
}

.container-app .box-app header.header-app .box-header .right .icons-header .description-profile {
    display: flex;
    flex-direction: column;
    gap: 1.5px;
}

.container-app .box-app header.header-app .box-header .right .icons-header .description-profile p:first-of-type {
    font-family: 'Poppins-Light';
    font-size: 0.7rem;
    color: #333;
    text-transform: capitalize;
}

.container-app .box-app header.header-app .box-header .right .icons-header .description-profile p:last-of-type {
    font-family: 'Poppins-Light';
    font-size: 0.65rem;
    color: #333;
    line-height: 1.3em;
}

.container-app .box-app header.header-app .box-header .right .notification-header a.box-notif i {
    /* box-shadow: inset 0px 0px 20px rgb(0, 0, 0); */
    background-color: yellowgreen;
}

/* HEADER */

/* NAV */
.container-app .box-app nav.nav-app {
    width: 100%;
    height: 100vh;
    border-right: none;
    border-right: 0.5px solid rgba(51, 51, 51, 0.3);
    box-sizing: border-box;
}

.container-app .box-app nav.nav-app .box-nav {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 60px auto;
    grid-area: nav;
    /* background-color: ##218838; */
}

.container-app .box-app nav.nav-app .top-sidebar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1em;
}

/* .container-app .box-app nav.nav-app .top-sidebar .left {
    background-color: lightcyan;
} */

.container-app .box-app nav.nav-app .top-sidebar .left img.logo {
    width: 35px;
    height: 35px;
}

/* .container-app .box-app nav.nav-app .top-sidebar .right {
    background-color: lightseagreen;
} */

.container-app .box-app nav.nav-app .top-sidebar .right h1 {
    font-family: "Poppins-SemiBold";
}

.container-app .box-app nav.nav-app .bottom-sidebar {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(8, 50px) auto;
    gap: 1em;
    overflow-y: auto;
    padding: 1em;
    box-sizing: border-box;
    position: relative;
    /* background-color: yellowgreen; */
}

.container-app .box-app nav.nav-app .bottom-sidebar .menu {
    /* display: grid;
    grid-template-columns: 0.5fr 1fr;
    grid-template-rows: 1fr; */
    display: flex;
    flex-direction: row;
    gap: 1em;
    text-decoration: none;
    border-radius: 7px;
    padding: 1em;
    box-sizing: border-box;
    /* background-color: yellow; */
}

/* .container-app .box-app nav.nav-app .bottom-sidebar a.menu:hover {
    background-color: #009dff;
    box-sizing: border-box;
} */

.container-app .box-app nav.nav-app .bottom-sidebar .menu svg.icon-tabler-stack {
    stroke: #333;
    /* warna default */
}

.container-app .box-app nav.nav-app .bottom-sidebar .menu:hover svg.icon-tabler-stack {
    stroke: #08CB00;
    /* warna hijau Adaro saat hover */
}

.container-app .box-app nav.nav-app .bottom-sidebar .menu .icon {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    /* background-color: chartreuse; */
}

.container-app .box-app nav.nav-app .bottom-sidebar .menu .text {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* background-color: lightcoral; */
}

.container-app .box-app nav.nav-app .bottom-sidebar .menu .text h3 {
    font-family: "Poppins-Medium";
    font-size: 0.825rem;
    color: #333;
}

.container-app .box-app nav.nav-app .bottom-sidebar a.menu:hover .text h3 {
    color: #08CB00;
}

.container-app .box-app nav.nav-app .bottom-sidebar a.menu:hover .icon i {
    color: #fff !important;
}

.container-app .box-app nav.nav-app .bottom-sidebar .menu .text h3 span.admin-profile {
    display: inline;
}

.container-app .box-app nav.nav-app .bottom-sidebar .box-logout {
    padding-top: 1em;
    box-sizing: border-box;
    background-color: transparent !important;
    margin-top: auto;
}

.container-app .box-app nav.nav-app .bottom-sidebar .box-logout .logout {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 1em;
    text-decoration: none;
    padding: 1em;
    box-sizing: border-box;
}

.container-app .box-app nav.nav-app .bottom-sidebar .box-logout .logout:hover {
    border-top: 0.5px solid #FF6347;
    border-bottom: 0.5px solid #FF6347;
    box-sizing: border-box;
}

.container-app .box-app nav.nav-app .bottom-sidebar .box-logout .logout .icon {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    /* background-color: lightblue; */
}

.container-app .box-app nav.nav-app .bottom-sidebar .box-logout .logout svg.icon-tabler-logout {
    stroke: #FF6347;
}

.container-app .box-app nav.nav-app .bottom-sidebar .box-logout .logout .text {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.container-app .box-app nav.nav-app .bottom-sidebar .box-logout .logout .text h3 {
    font-family: "Poppins-Regular";
    font-size: 0.8rem;
    color: #FF6347 !important;
}

/* NAV */

.dropdown-integrasi {
    margin: 0;
    padding: 0;
}

.dropdown {
    width: 100%;
}

button.button-integrasi {
    width: 100%;
    font-family: "Poppins-Medium" !important;
    font-size: 0.85rem !important;
    color: #333;
    background-color: transparent;
    border: none;
    box-shadow: none;
    box-sizing: border-box;
    border-radius: 0;
    border-bottom: 0.5px solid #ccc !important;
}

button.button-integrasi:active,
button.button-integrasi:focus,
button.button-integrasi:hover {
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}


ul.dropdown-menu.dropdown-menu-integrasi {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    border-top-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
    margin-top: -3px !important;
    overflow: hidden !important;
}

ul.dropdown-menu.dropdown-menu-integrasi .dropdown-item {
    padding: 6px 12px !important;
    text-align: center;
    margin: 0 !important;
}

ul.dropdown-menu.dropdown-menu-integrasi li a {
    font-family: "Poppins-Medium" !important;
    font-size: 0.65rem !important;
    color: red;
}

ul.dropdown-menu.dropdown-menu-integrasi li a:hover {
    color: #fff;
    background-color: red;
}