/* CSS STYLE SKYBRIDGE 2.0 */




/* MAIN */
    a, a:hover, a:active {
        color: #fff;
    }

    a:focus-visible {
        outline: none !important;
    }

    body {
        background: 0 0;
        color: #a8b6bc;
        font-family: Chakra Petch;
        font-weight: 300;
        letter-spacing: .05rem;
        position: relative;
        min-height: 100vh;
        width: 100%;
        z-index: 9999;
    }

    body::before {
        background-attachment: initial;
        background-color: transparent;
        background-image: url(../images/main/pattern.png);
        background-repeat: repeat;
        background-size: 4.6875rem;
        content: "";
        height: 100%;
        left: 0;
        position: fixed;
        right: 0;
        top: 0;
        z-index: -5;
    }

    button.main {
        background-color: transparent;
        border: 1px solid #3cd2a5;
        border-radius: 8px;
        color: #3cd2a5;
        cursor: pointer;
        font-size: 1.2rem;
        font-weight: 600;
        margin: 1.75px;
        padding: 10.5px 15px;
        transition: .2s all;
        width: 100%;
    }

    button.main .icon {
        font-size: 1.2rem;
        margin-bottom: 3.75px;
    }

    button.main.small {
        font-size: 1rem;
        padding: 7.5px 30px;
        width: auto;
    }

    button.main.xs {
        font-size: .8rem;
        padding: 3.75px 7.5px;
        width: auto;
    }

    button.main:hover {
        background-color: #3cd2a5;
        color: #000;
    }

    html::after {
        background-attachment: initial;
        background-color: #273136;
        background-image: linear-gradient(180deg,rgba(64, 73, 98, .85) 0,#0d0808 100%);
        background-image: url(../images/main/cover.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        content: "";
        height: 100%;
        left: 0;
        position: fixed;
        transition: background .2s linear;
        right: 0;
        top: 0;
        z-index: -10;
    }

    html::before {
        background: linear-gradient(180deg,rgba(64, 73, 98, .85) 0,#0d0808 100%);
        content: "";
        height: 100%;
        left: 0;
        position: fixed;
        right: 0;
        top: 0;
        z-index: -5;
    }

    html {
        overflow: hidden;
    }

    input:focus-visible {
        outline: none;
    }

    input.pagination {
        padding: 4px 7.5px;
        width: 60px;
    }

    input.prompt {
        padding: 8px 7.5px;
        width: 240px;
    }

    .cover {
        background-color: rgba(64, 73, 98, .90);
        display: none;
        height: 100vh;
        left: 0;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 10000;
    }

    .cover.show {
        display: block;
    }

    .cover .loading {
        align-items: center;
        display: flex;
        justify-content: center;
        min-height: 100vh;
    }

    .cover .loading .loading-icon {
        font-size: 3rem;
    }

    .cover .loading .loading-text {
        font-size: 1.3rem;
        font-weight: 500;
        margin-left: 15px;
    }

    .form-input.error {
        border: 1px solid #ff6060 !important;
    }
/* END MAIN */




/* LOGIN */
    .login-container {
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        max-width: 100%;
        min-height: 100vh;
        text-align: center;
    }

    .login-container .login-box {
        max-width: 100%;
        width: 400px;
    }

    .login-container .title {
        color: #fff;
        font-size: 2.5rem;
        font-weight: bold;
        margin-bottom: 15px;
    }
/* END LOGIN */




/* NAVIGATION */
    .sidebar {
        height: calc(100vh - 37.5px);
        left: 0;
        padding: 15px;
        position: fixed;
        top: 37.5px;
        width: 240px;
        z-index: 900;
    }

    .sidebar .heading {
        font-size: .9rem;
        font-weight: 600;
        margin-top: 22.5px;
    }

    .sidebar .menu-item {
        align-items: center;
        display: flex;
        padding: 10.5px 0 0;
    }

    .sidebar .menu-item .icon {
        margin-right: 7.5px;
    }

    .sidebar .menu-item:hover .icon,
    .sidebar .menu-item.active .icon {
        color: #3cd2a5;
    }

    .topbar {
        align-items: center;
        background-color: rgba(64, 73, 98, 1);
        border-bottom: 2px solid #3cd2a5;
        display: flex;
        left: 0;
        padding: 7.5px 15px;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1000;
    }

    .topbar .brand {
        margin-left: 30px;
    }

    .topbar .brand .logo img {
        display: block;
        width: 150px;
    }

    .topbar .menu-toggler {
        align-items: center;
        background: 0 0;
        border: none;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: center;
        padding: .5rem 0;
    }

    .topbar .menu-toggler .bar {
        background: rgba(255, 255, 255, .4);
        display: block;
        height: 1px;
        margin: 2.5px 0;
        transition: all .2s linear;
        width: 2rem;
    }

    .topbar .menu-toggler:hover .bar {
        background: rgba(255, 255, 255, 1);
    }

    .topbar .right-menu {
        align-items: center;
        display: flex;
        flex: 1;
        justify-content: flex-end;
        width: 100%;
    }

    .topbar .right-menu .user-icon {
        align-items: center;
        cursor: pointer;
        display: flex;
        position: relative;
    }

    .topbar .right-menu .user-icon .user-float {
        background-color: #404962;
        border: 1px solid #a8b6bc;
        display: none;
        padding: 7.5px 0;
        position: absolute;
        right: 0;
        top: 50px;
        transition: .3s all;
    }

    .topbar .right-menu .user-icon .user-float.show {
        display: block;
    }

    .topbar .right-menu .user-icon .user-float .float-menu {
        align-items: center;
        display: flex;
        padding: 7.5px 15px;
    }

    .topbar .right-menu .user-icon .user-float .float-menu:hover {
        background-color: #282E3E;
    }

    .topbar .right-menu .user-icon .user-float .float-menu .icon {
        text-align: left;
        width: 30px;
    }

    .topbar .right-menu .user-icon .user-float .float-menu .menu {
        width: 90px;
    }

    .topbar .right-menu .user-icon .user-float .separator {
        border-top: 1px solid #fff;
        margin-top: 7.5px;
        padding-top: 7.5px;
    }

    .topbar .right-menu .user-icon .icon img {
        display: block;
        width: 35px;
    }

    .topbar .right-menu .user-icon .name {
        font-weight: 500;
        margin-right: 7.5px;
    }
/* END NAVIGATION */




/* CONTENT */
    .main-content {
        margin-top: 75px;
        margin-left: 240px;
        padding: 0 30px;
    }

    .search-content {
        width: 400px;
    }
/* END CONTENT */




/* QUOTES */
    .quotes-container {
        bottom: 15px;
        max-width: 100%;
        position: absolute;
        right: 15px;
        text-align: right;
        width: 600px;
    }

    .quotes-container .quote {
        font-family: Glory-SemiBold;
        font-size: 22px;
    }

    .quotes-container .author {
        font-size: 12px;
        margin-top: 3.75px;
    }
/* END QUOTES */




/* NOTIFICATION BOARD */
    .notification-board {
        border: 1px solid rgba(255, 255, 255, .4);
        border-radius: 5px;
        padding: 7.5px;
        text-align: left;
    }

    .notification-board .title {
        font-weight: 500;
        padding-bottom: 7.5px;
    }

    .notification-board textarea#notification,
    textarea#notification-edit {
        background-color: rgba(64, 73, 98, .25);
        border: 1px solid rgba(255, 255, 255, .4);
        border-radius: 5px;
        color: #fff;
        height: 250px;
        padding: 7.5px;
        resize: none;
        width: 100%;
    }

    .notification-board textarea#notification:focus-visible,
    textarea#notification-edit:focus-visible {
        outline: none;
    }
/* END NOTIFICATION BOARD */




/* UTILITIES */
    .align-items-center {
        align-items: center;
    }

    .align-items-end {
        align-items: flex-end;
    }

    .color-red {
        color: #ff6060;
    }

    .cursor-pointer {
        cursor: pointer !important;
    }

    .display-flex {
        display: flex;
    }

    .font-semibold {
        font-weight: 500;
    }

    .fs-big {
        font-size: 1.5rem;
        margin-top: 7.5px;
    }

    .fs-medium {
        font-size: 1.2rem;
    }

    .justify-space-between {
        justify-content: space-between;
    }

    .hidden {
        display: none !important;
    }

    .mt-7-5 {
        margin-top: 7.5px;
    }

    .ml-15 {
        margin-left: 15px;
    }

    .mt-15 {
        margin-top: 15px;
    }

    .mt-30 {
        margin-top: 30px;
    }

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

    .w-100 {
        width: 100%;
    }
/* END UTILITIES */




/* OVERRIDE */
.daterangepicker,
.daterangepicker .calendar-table {
    background-color: #404962;
}

.daterangepicker .calendar-table .next span,
.daterangepicker .calendar-table .prev span {
    border-color: #fff;
}

.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
    background-color: rgba(64, 73, 98, .40);
}

.daterangepicker td.available:hover,
.daterangepicker th.available:hover{
    background-color: #fff;
    color: #404962;
}

.daterangepicker td.active, .daterangepicker td.active:hover {
    background-color: #fff;
    color: #404962;
}

.ui.breadcrumb a,
.ui.breadcrumb a:hover,
.ui.breadcrumb a:active {
    color: #fff;
}

.ui.breadcrumb .active.section {
    color: #3cd2a5;
}

.ui.breadcrumb .divider {
    color: #fff;
}

.ui.card, .ui.cards > .card {
    background-color: transparent !important;
    border: 1px solid #7d7d7d;
    border-radius: 7.5px !important;
    box-shadow: unset !important;
    width: 100%;
}

.ui.dimmer {
    background-color: rgba(64, 73, 98, .90) !important;
}

.ui.dropdown .menu {
    background-color: rgba(64, 73, 98, .8) !important;
    color: rgb(168, 182, 188);
}

.ui.form .field > label {
    color: #a8b6bc !important;
    font-weight: unset !important;
    letter-spacing: .075rem;
    text-align: left;
}

.ui.form input:not([type]),
.ui.form input[type="date"],
.ui.form input[type="datetime-local"],
.ui.form input[type="email"],
.ui.form input[type="file"],
.ui.form input[type="number"],
.ui.form input[type="password"],
.ui.form input[type="search"],
.ui.form input[type="tel"],
.ui.form input[type="text"],
.ui.form input[type="time"],
.ui.form input[type="url"],
input,
.ui.selection.dropdown {
    background-color: rgba(255, 255, 255, .05) !important;
    border: 1px solid #7d7d7d;
    border-radius: 7.5px !important;
    color: #a8b6bc !important;
    font-family: Chakra Petch !important;
    font-weight: unset !important;
    letter-spacing: .1rem;
}

.ui.loading.form::after {
    border-color: #fff rgba(255, 255, 2555,.3) rgba(255, 255, 2555,.3) rgba(255, 255, 2555,.3);
}

.ui.loading.form::before {
    background-color: rgba(64, 73, 98, .8) !important;
}

.ui.selection.dropdown,
.ui.selection.dropdown:hover {
    border: 1px solid #7d7d7d;
}

.ui.selection.dropdown.active,
.ui.selection.dropdown.visible,
.ui.selection.visible.dropdown > .text:not(.default),
.ui.selection.dropdown .menu > .item {
    background-color: #404962;
    color: #a8b6bc !important;
}

.ui.selection.dropdown .menu > .item {
    border-top: none;
}

.ui.selection.dropdown .menu > .item:hover {
    background-color: #282e3e;
}

.ui.modal {
    background-color: transparent !important;
    box-shadow: none !important;
}

.ui.modal > .actions,
.ui.modal > .content,
.ui.modal > .header {
    background-color: rgba(64, 73, 98, 1) !important;
    border: 1px solid #a8b6bc !important;
    color: #a8b6bc !important;
}

.ui.table {
    background-color: rgba(64, 73, 98, .25);
    border: none;
    border-left: 1px solid rgba(255, 255, 255, .4);
}

.ui.table tfoot th,
.ui.table thead th,
.ui.table tbody td {
    background-color: rgba(64, 73, 98, .25);
    border: 1px solid rgba(255, 255, 255, .4);
    color: #fff;
}

.ui.table thead tr:first-child > th:first-child,
.ui.table thead tr:first-child > th:last-child,
.ui.table tfoot tr:first-child > th:first-child,
.ui.table tfoot tr:first-child > th:last-child {
    border-radius: unset;
}
/* END OVERRIDE */