/* *** Fonts *** */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

/* *** Variables *** */
:root {
    --poppins: 'poppins', sans-serif;
    --theme-color: #2B6CB5;
    --text-theme-color: #2B6CB5;
    --secondary-theme-color: #D9D9D9;
    --tertiary-theme-color: #ECECEC;
}

/* *** Utilities *** */
.font-poppins {
    font-family: var(--poppins);
}

.bg-theme-color {
    background-color: var(--theme-color);
}

.text-theme-color {
    color: var(--text-theme-color);
}

.bg-secondary-theme {
    background-color: var(--secondary-theme-color);
}

.color-theme {
    color: var(--theme-color);
}

.color-theme:hover, .color-theme:focus, .color-theme:active {
    color: var(--theme-color);
}

.bg-tertiary-theme {
    background-color: var(--tertiary-theme-color);
}

.btn-sectheme:hover {
    background-color: var(--secondary-theme-color) !important;
    color: var(--text-theme-color);
}

.btn-pritheme {
    background: var(--theme-color);
    color: #fff;
}

.btn-pritheme:hover {
    background: var(--theme-color);
    color: #fff;
}

.btn-outline-theme:hover {
    background: none !important;
    color: var(--theme-color);
}

.rotate-up {
    transform: rotate(-180deg);
}

.main-logo > img {
    width: 150px;
  }

  @media screen and (min-width: 720px) {
    .main-logo > img {
      width: 50%;
    }
  }

/* *** Do to all *** */
* {
    font-family: var(--poppins);
}

#app {
    max-width: 360px;
    margin: auto;
}

#app.bilik-suara-2 {
    max-width: 100%;
}

.overflow-hidden-bar::-webkit-scrollbar {
    display: none;
}

/* *** Login Form *** */
#username:focus, #kata_sandi:focus {
    border: 1px solid black;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

/* *** Bilik suara 1 *** */
#iconMinus {
    display: none;
}

/* *** bilik suara 2 *** */
.bilik-2.collapse:not(.show) {
    display: block;
    height: 45px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis !important;
}

.bilik-2.collapsing {
    height: 45px;
}

.accordion-body {
    white-space: wrap;
    overflow: hidden;
    text-overflow: ellipsis !important;
}
.accordion-button:not(.collapsed)::after {
    background-image: var(--bs-accordion-btn-active-icon);
    transform: rotate(180deg) !important;
  }