:root {
    --border-color: #d0d0d0;
    --accent-color: #29293a;
}

.login-half {
    width: 100%;
    flex: 1;
    height: 100%;
}
.login-half.half-y {
    display: none;
}
.login-half.half-x {
    background-color: #f8f8f8;
}
.login-half.half-x,
.login-half.half-y {
    position: relative;
}
.login-half.half-y {
    padding-left: 120px;
    padding-right: 120px;
}
.login-half.half-y:before,
.login-half.half-y:after {
    content: "";
    background: url(../media/art/auto-art-one.svg) repeat-y left top;
    position: absolute;
    top: 0;
    width: 120px;
    height: 100%;
}
.login-half.half-y:before {
    left: 0;
}
.login-half.half-y:after {
    right: 0;
}
.login-form-panel {
    width: 500px;
    max-width: 100%;
}
.image-circular {
    -webkit-animation: spin 100s linear infinite;
    -moz-animation: spin 100s linear infinite;
    animation: spin 100s linear infinite;
}
@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg);
    }
}
@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@media screen and (min-width: 1200px) {
    .login-half {
        width: 50%;
        flex: 1;
    }
    .login-half.half-x,
    .login-half.half-y {
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: 50%;
    }
    .login-half.half-y {
        overflow: hidden;
    }
}

.aside-logo .logo {
    max-width: 60px;
}

.topbar_icon,
.user_avatar_one,
.card_icon_one {
    width: 40px;
    height: 40px;
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.topbar_icon img {
    width: auto;
    height: auto;
    max-width: 24px;
    max-height: 24px;
}
.user_avatar_one {
    background-color: #f8f8f8;
}
.user_avatar_one img {
    width: 100%;
    height: 100%;
}
.card_icon_one {
    background-color: #d9f6f8;
    width: 42px;
    height: 42px;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card_icon_one i,
.card_icon_one svg {
    font-size: 24px;
    width: 24px;
    height: 24px;
    color: var(--accent-color);
}

table thead tr th {
    color: #666 !important;
}
td .btn.btn-light.btn-active-light-primary.btn-sm,
td .btn.btn-icon.btn-bg-light,
td .btn.btn-light.btn-active-light-danger {
    border: 1px solid #ccc !important;
}

#kt_wrapper #kt_content.content {
    padding-bottom: 20px;
}
.input-group-button {
    height: 100%;
    width: 40px;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    font-size: 18px;
}
.buttonGroupWrap {
    background-color: #b6c7cb;
    padding: 1rem;
}
.buttonGroupWrap .btn-outline-primary:not(.active) {
    background-color: #e5eaeb;
}
.buttonGroupWrap .btn-outline-primary:not(.active):hover {
    background-color: #cfd9db;
    color: #4d8995;
}

/* for Table */
table td {
    font-size: 12px !important;
}

/* Settings for Mobile Style */
@media screen and (max-width: 640px) {
    .mainPageTitle {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        width: 180px;
        max-width: 100%;
        font-size: 16px !important;
    }
    /*#kt_header_user_menu_toggle .user_avatar_one,*/
    /*.topbar_icon {*/
    /*    width: 30px;*/
    /*    height: 30px;*/
    /*}*/
}

@media screen and (max-width: 640px) {
    .mainPageTitle {
        width: 140px;
    }
    .userRoleBadgesWrap {
        height: auto;
        max-height: 260px;
        overflow: auto;
    }
}