.bg-login {
    background-size: cover;
    padding: 0px !important;
}

.center-image {
    display: block !important;
    margin: 0 auto;
}

.card.logo {
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
    border-radius: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.card.logo .version {
    position: absolute;
    bottom: -40px;
    left: 0;
    color: white;
    width: 100%;
    text-align: center;
}

.height-100 {
    height: 100% !important;
}

.bg-red {
    background: linear-gradient(
        90deg,
        rgba(218, 37, 29, 0.8) 0%,
        rgba(255, 98, 68, 0.8) 100%
    );
}

.bg-green {
    background: linear-gradient(
        42.25deg,
        rgba(188, 90, 15, 0.8) 29.81%,
        rgba(62, 180, 72, 0.8) 96.47%
    );
}

.btn-red {
    background: linear-gradient(90deg, #da251d 2.81%, #ff4c61 100%) !important;
    border-radius: 20px !important;
    font-weight: bold !important;
    line-height: 24px !important;
    color: #ffffff !important;
}

.btn-green {
    background: linear-gradient(90deg, #27ae60 2.81%, #88d592 100%) !important;
    border-radius: 20px !important;
    font-weight: bold !important;
    line-height: 24px !important;
    color: #ffffff !important;
}

.text-title {
    font-style: normal;
    font-weight: bold;
    font-size: 50px;
    line-height: 61px;
    color: rgba(0, 0, 0, 0.7);
}

.link-red {
    font-weight: 600;
    font-size: 14px;
    line-height: 17px;
    color: #da251d;
}

.link-green {
    color: #27ae60;
    font-weight: 600;
    font-size: 14px;
    line-height: 17px;
}

.label-text {
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;
    color: rgba(0, 0, 0, 0.7);
}

.toggle-password {
    pointer-events: auto !important;
}

.auth input {
    border: unset !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important;
    border-radius: 0px !important;
    padding-left: 0px !important;
    font-style: normal;
    font-weight: 500;
    font-size: 14px !important;
    line-height: 24px !important;
}

.auth .ui.checkbox input:checked ~ label:before {
    background: #27ae60 !important;
}

.auth .ui.checkbox input:checked ~ label:after {
    color: #ffffff !important;
}

.auth .field label {
    font-style: normal;
    font-weight: bold !important;
    font-size: 18px !important;
    line-height: 22px;
    color: rgba(0, 0, 0, 0.7) !important;
}

.sidebar__scroller .sidebar__accordion.ui.accordion .title {
    display: flex;
    gap: 0px 10px;
}

#actionbar {
    margin-top: 80px;
}

.layout--app header.ui.menu {
    height: 80px;
}

.ui.form .field > label {
    font-size: 1.2em !important;
    font-weight: 700 !important;
}

.ui-datepicker {
    z-index: 999 !important;
    position: absolute !important;
    display: block !important;
}

.ui.checkbox input[type="checkbox"],
.ui.checkbox input[type="radio"] {
    cursor: pointer !important;
}

.ui.borderless.menu.top.fixed > .item:nth-child(2) {
    margin-left: 0 !important;
}
.ui.borderless.menu > .item:nth-child(2) {
    margin-left: auto !important;
}

/* Widescreen Monitor */
@media only screen and (min-width: 1920px) {
    [class*="mobile only"]:not([class*="widescreen"]),
    [class*="tablet only"]:not([class*="widescreen"]),
    [class*="computer only"]:not([class*="widescreen"]),
    [class*="large screen only"]:not([class*="widescreen"]),
    [class*="widescreen hidden"],
    [class*="widescreen or lower hidden"] {
        display: none !important;
    }

    .p-3 {
        padding: 2rem !important;
    }
}
.bg-white {
    background: #ffffff !important;
}

.sidebar {
    z-index: 110 !important;
}
.sidebar .sidebar__menu .ui.menu {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.sidebar .sidebar__menu .ui.menu .sidebar__accordion.ui.accordion {
    border-radius: 0;
}
.sidebar .sidebar__menu .ui.menu .sidebar__accordion.ui.accordion .title {
    padding-left: 2em !important;
    padding-right: 2em !important;
    border-radius: 0;
    border-right: solid 3px transparent;
}

.sidebar .sidebar__scroller .ui.menu.vertical .item > .header {
    color: #ffffff !important;
}

[data-theme="red"] {
    background: #f3f5f9;
}
[data-theme="red"] [data-role="brand"] .ui.header {
    color: #ffffff;
}
[data-theme="red"] .sidebar .sidebar__wrapper {
    border-right: 0 none;
    background-color: #006129;
}
[data-theme="red"] .sidebar .sidebar__wrapper .sidebar__scroller {
    background-color: #006129;
}
[data-theme="red"] .sidebar .sidebar__wrapper .ui.header.brand {
    color: #ffffff;
    overflow: hidden;
    font-size: 1.75rem;
    text-align: center;
}
[data-theme="red"] .sidebar .sidebar__wrapper .ui.menu.vertical {
    background: transparent;
}
[data-theme="red"] .sidebar .sidebar__wrapper .ui.menu.vertical .item {
    color: #ffffff;
}
[data-theme="red"]
    .sidebar
    .sidebar__wrapper
    .ui.menu.vertical
    .item
    > .header {
    color: #ffffff;
    font-size: 0.8em;
    font-weight: 500;
}
[data-theme="red"] .sidebar .sidebar__menu .brand {
    color: #ffffff;
}
[data-theme="red"] .sidebar .sidebar__accordion.ui.accordion .title {
    color: #ffffff;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9em;
}
[data-theme="red"] .sidebar .sidebar__accordion.ui.accordion .title.selected,
[data-theme="red"] .sidebar .sidebar__accordion.ui.accordion .title:hover {
    background-color: #00481e;
    border-right-color: #00ae49 !important;
}
[data-theme="red"] .sidebar .sidebar__accordion.ui.accordion .title:hover {
    color: white;
}
[data-theme="red"]
    .sidebar
    .sidebar__accordion.ui.accordion
    .title.empty.current {
    color: #e9b92a;
}
[data-theme="red"] .sidebar .sidebar__accordion.ui.accordion .content {
    background-color: #00481e;
}
[data-theme="red"]
    .sidebar
    .sidebar__accordion.ui.accordion
    .content
    .ui.list
    .item {
    color: #e6e6e6;
    padding-left: 3.7em;
}
[data-theme="red"]
    .sidebar
    .sidebar__accordion.ui.accordion
    .content
    .ui.list
    .item:hover {
    color: white;
    background-color: #00481e;
}
[data-theme="red"]
    .sidebar
    .sidebar__accordion.ui.accordion
    .content
    .ui.list
    .item.selected {
    background-color: #00481e;
    font-weight: normal;
    color: #e9b92a;
}

[data-theme="green"] {
    background: #f3f5f9;
}
[data-theme="green"] .sidebar .ui.accordion.sidebar__accordion .title.empty {
    color: #ffffff;
}
[data-theme="green"] [data-role="brand"] .ui.header {
    color: #ffffff;
}
[data-theme="green"] .sidebar .sidebar__wrapper {
    border-right: 0 none;
    background-color: #006129;
}
[data-theme="green"] .sidebar .sidebar__wrapper .sidebar__scroller {
    background-color: #006129;
}
[data-theme="green"] .sidebar .sidebar__wrapper .ui.header.brand {
    color: #ffffff;
    overflow: hidden;
    font-size: 1.75rem;
    text-align: center;
}
[data-theme="green"] .sidebar .sidebar__wrapper .ui.menu.vertical {
    background: transparent;
}
[data-theme="green"] .sidebar .sidebar__wrapper .ui.menu.vertical .item {
    color: #ffffff;
}
[data-theme="green"]
    .sidebar
    .sidebar__wrapper
    .ui.menu.vertical
    .item
    > .header {
    color: #ffffff;
    font-size: 0.8em;
    font-weight: 500;
}
[data-theme="green"] .sidebar .sidebar__menu .brand {
    color: #ffffff;
}
[data-theme="green"] .sidebar .sidebar__accordion.ui.accordion .title {
    color: #ffffff;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9em;
}
[data-theme="green"] .sidebar .sidebar__accordion.ui.accordion .title.selected,
[data-theme="green"] .sidebar .sidebar__accordion.ui.accordion .title:hover {
    background-color: #00481e !important;
    border-right-color: #00ae49 !important;
}
[data-theme="green"] .sidebar .sidebar__accordion.ui.accordion .title:hover {
    color: white;
}
[data-theme="green"]
    .sidebar
    .sidebar__accordion.ui.accordion
    .title.empty.current {
    color: #e9b92a;
}
[data-theme="green"] .sidebar .sidebar__accordion.ui.accordion .content {
    background-color: #00481e;
}
[data-theme="green"]
    .sidebar
    .sidebar__accordion.ui.accordion
    .content
    .ui.list
    .item {
    color: #e6e6e6;
    padding-left: 3.7em;
}
[data-theme="green"]
    .sidebar
    .sidebar__accordion.ui.accordion
    .content
    .ui.list
    .item:hover {
    color: white;
    background-color: #00481e;
}
[data-theme="green"]
    .sidebar
    .sidebar__accordion.ui.accordion
    .content
    .ui.list
    .item.selected {
    background-color: #00481e;
    font-weight: normal;
    color: #e9b92a;
}

.width-full {
    width: 100% !important;
}

.profile .ui.card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    border-radius: 50px;
}
.profile .name {
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    letter-spacing: 0.01em;
    color: #000000;
    line-height: 55px;
}
.profile .email {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 0.01em;
    text-decoration-line: underline;
    color: rgba(0, 0, 0, 0.5);
}
.profile .ui.form label {
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 0.01em;
    color: #000000;
}
.profile .ui.form input {
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    border-radius: 20px;
}
.profile .ui.form .ui.dropdown {
    border: unset;
}
.profile .ui.form .ui.dropdown input {
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
}

/* .ui.dropdown.search.clearable.selection {
    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
} */

.title-kopi-large {
    font-style: normal;
    font-weight: bold;
    font-size: 28px;
    color: #b95a15;
}

.ui.form.auth input {
    border-radius: 10px !important;
    padding: 10px;
    padding-left: 10px !important;
}

.statistic-dashboard .total {
    font-style: normal;
    font-weight: normal;
    font-size: 16px !important;
    line-height: 24px;
    letter-spacing: 0.01em;
    color: rgba(0, 0, 0, 0.8);
}
.statistic-dashboard .title-chart {
    font-weight: 600;
    font-size: 19px;
    line-height: 28px;
    letter-spacing: 0.4px;
    color: #4f4f4f;
}
.statistic-dashboard .title {
    font-style: normal;
    font-weight: 600;
    font-size: 15px;
    line-height: 28px;
    letter-spacing: 0.4px;
    color: #9fa2b4;
}
.statistic-dashboard .jml {
    font-style: normal;
    font-weight: bold;
    font-size: 35px;
    line-height: 50px;
    letter-spacing: 1px;
    color: #252733;
}

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

.legend-con {
    display: inline-block;
    color: black;
}
.legend-con ul {
    list-style: none;
}
.legend-con li {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}
.legend-con li span {
    display: inline-block;
}
.legend-con li span.chart-legend {
    width: 25px;
    height: 25px;
    margin-right: 10px;
    border-radius: 30px;
}

.display-flex {
    display: flex;
}

.radius-unset {
    border-radius: unset !important;
}

.text-align-right {
    text-align: right !important;
}

.mar-t-8 {
    margin-top: 8px;
}

.mar-b-8 {
    margin-bottom: 8px;
}

.sidebar__accordion.ui.accordion .title {
    font-size: 14px !important;
}

.sidebar__accordion.ui.accordion .title span {
    text-transform: capitalize;
}

.width-50 {
    width: 50% !important;
}

.new-configuration .active.step i.icon {
    min-width: 30px;
}
.new-configuration .active.step i {
    background: #00375a !important;
}
.new-configuration .active.step i:before {
    color: #ffffff;
}
.new-configuration .active.step .header,
.new-configuration .active.step .description {
    color: #00375a !important;
}
.new-configuration .disabled.step i.icon {
    min-width: 30px;
}
.new-configuration .disabled.step i {
    background: #c4c4c4 !important;
}
.new-configuration .disabled.step i:before {
    color: #ffffff;
}
.new-configuration .disabled.step .header,
.new-configuration .disabled.step .description {
    color: #c4c4c4 !important;
}
.new-configuration .step i.icon {
    min-width: 30px !important;
}
.new-configuration .step i {
    background: #27ae60 !important;
}
.new-configuration .step i:before {
    color: #ffffff;
}
.new-configuration .step .header,
.new-configuration .step .description {
    color: #27ae60 !important;
}

.color-red {
    color: #da251d !important;
}

.negative-red {
    background: rgba(218, 37, 29, 0.2) !important;
    color: #da251d !important;
}

.radius-10 {
    border-radius: 10px !important;
}

.changelog {
    width: 50%;
}

/* Mobile */
@media only screen and (max-width: 767px) {
    [class*="mobile hidden"],
    [class*="tablet only"]:not(.mobile),
    [class*="computer only"]:not(.mobile),
    [class*="large screen only"]:not(.mobile),
    [class*="widescreen only"]:not(.mobile),
    [class*="or lower hidden"],
    [class*="just mobile"] {
        display: none !important;
    }

    .changelog .color-red {
        float: left;
    }
}

.hidden {
    display: none !important;
}