/*
    Created on : Oct 02, 2015, 4:18:27 AM
    Author     : phamtrong204
*/

.view-form-item {
    font-size: 14px;
    margin-bottom: 10px;
}

.form-text {
    display: block;
}

.show_on_edit {
    display: none;
}

.is_edit_form .show_on_edit {
    display: initial;
}

.main-content .main-content-inner {
    margin-bottom: 1px;
}

.footer .footer-inner .footer-content {
    border: none;
}

.data-table-title {
    margin-top: 2.5rem;
}

.full-view {
    width: 100vw;
    height: calc(100vh - 45px);
}

.flex-vertical-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.error-404-image {
    margin-top: 3rem;
    max-width: 600px;
    width: 100%;
    height: auto;
    display: block;
}

.navbar-brand .badge {
    background-color: #fff;
    color: #438eb9;
}

.divider.topbar-divider + li > a {
    border-top: none;
}

img.img-cell {
    height: 85px;
    width: 85px;
}

.bold {
    font-weight: 700;
}

.text-large {
    font-size: large;
}

img.brand-image {
    max-height: 40px;
}

.margin-center,
.margin-horizontal-auto {
    margin-left: auto;
    margin-right: auto;
}

.text-role-developer {
    color: #6A1B9A;
    font-weight: bold;
}

.text-role-admin {
    color: #B71C1C;
    font-weight: bold;
}

.text-role-subadmin {
    color: #F57F17;
    font-weight: bold;
}

.form-divider {
    margin-top: 20px;
    margin-bottom: 20px;
}

.form-divider:first-child {
    margin-top: 0;
}

.form-horizontal .control-label.form-divider {
    margin-bottom: 20px;
}

.form-control.text-lowercase::placeholder {
    text-transform: initial;
}

.form-control-height {
    height: 34px;
}

.btn.btn-form-submit {
    width: 72px;
    transition: background-color 700ms;
}

/* region colors */

.color, .bg-color {
    --color: #212121;
    --background-color: #fff;

    color: var(--color) !important;
    background-color: var(--background-color);
}

.color.grey {
    --color: #9e9e9e;
}

.bg-color.grey {
    --color: #212121;
    --background-color: #f0f0f0;
}

/* endregion */

/* region inner-loader */

.inner-loader {
    border-radius: 100%;
    position: relative;
    margin: 0 auto;
    --color: #fff;
    --dot-size: 8px;
    --padding-vertical: 0;
    --half-spacing: 2px;
}

.inner-loader span {
    display: inline-block;
    width: var(--dot-size, 8px);
    height: var(--dot-size, 8px);
    border-radius: 100%;
    background-color: var(--color, #fff);
    margin: var(--padding-vertical) var(--half-spacing);
    opacity: 0;
}

.inner-loader span:nth-child(1) {
    animation: opacityChange 1s ease-in-out infinite;
}

.inner-loader span:nth-child(2) {
    animation: opacityChange 1s ease-in-out 0.33s infinite;
}

.inner-loader span:nth-child(3) {
    animation: opacityChange 1s ease-in-out 0.66s infinite;
}

@keyframes opacityChange {
    0%, 100% {
        opacity: 0;
    }

    60% {
        opacity: 1;
    }
}

/* endregion */

/* region REALM-OBDVIET */

body.realm-obdviet {
    --color-primary: #0071bb;
    --color-primary-rgb: 0, 113, 187;
    --color-primary-contrast: #ffffff;
    --color-primary-contrast-rgb: 255, 255, 255;
    --color-primary-shade: #0063a5;
    --color-primary-tint: #1a7fc2;
}

.realm-obdviet .navbar .navbar-brand > img {
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1);
}

/* endregion */

/* region REALM-HANOI */

.realm-hanoi img.brand-image {
    background-color: #fff;
    border-radius: 50%;
}

.realm-hanoi.login-layout img.brand-image {
    max-height: 100px;
}

/* endregion */

/* region REALM-LOCAL */

body.realm-local {
    --color-primary: #9C27B0;
    --color-primary-rgb: 156, 39, 176;
    --color-primary-contrast: #ffffff;
    --color-primary-contrast-rgb: 255, 255, 255;
    --color-primary-shade: #89229b;
    --color-primary-tint: #a63db8;
}

/* endregion */

.nav-list li.active > a:after {
    top: 7px;
}


.nav-list li.active > a:after {
    top: 7px;
}

.dropdown-navbar {
    max-height: calc(100vh - 75px);
    overflow: auto;
}

@media only screen and (min-width: 1200px) {
    .ace-nav > li {
        line-height: 34px;
        height: 34px;
        margin-top: 4px;
        margin-bottom: 4px;
    }

    .navbar .navbar-brand > img,
    .navbar .navbar-brand > svg {
        height: 22px;
    }

    .dropdown-menu.dropdown-navbar {
        --dropdown-spacing: 4px;
    }

    .dropdown-navbar > li, .dropdown-navbar > li > a {
        border-radius: 9px;
    }

    .dropdown-navbar > li > a {
        padding-top: 8px;
        padding-bottom: 8px;
    }
}