/**
 * NukeViet Content Management System
 * @version 4.x
 * @author VINADES.,JSC <contact@vinades.vn>
 * @copyright (C) 2009-2021 VINADES.,JSC. All rights reserved
 * @license GNU/GPL version 2 or any later version
 * @see https://github.com/nukeviet The NukeViet CMS GitHub project
 */

/* Upload, crop avatar */
.usravt-upload-wraper .picker-zone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 32px 24px 28px;
    transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
    -webkit-tap-highlight-color: transparent;
    border: 2px dashed #dcdcdc;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
}

.usravt-upload-wraper .picker-zone [type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
}

.usravt-upload-wraper .picker-zone.is-dragging {
    border-color: var(--nv-primary);
    border-style: solid;
}

.usravt-upload-wraper .picker-zone .ic {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background-color: var(--nv-border-color-light);
    font-size: 24px;
}

.usravt-upload-wraper .picker-zone .hint {
    font-weight: 700;
}

.usravt-upload-wraper .picker-zone .overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: var(--nv-border-color-light);
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
}

.usravt-upload-wraper .picker-zone.is-dragging .overlay {
    opacity: 1;
}

.usravt-upload-wraper .cropper-zone .stage {
    display: flex;
    justify-content: center;
}

.usravt-upload-wraper .cropper-zone .stage-frame {
    position: relative;
    width: 100%;
    max-width: 300px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 10px;
    background: repeating-conic-gradient(#E8E8F0 0 25%, #F0F0F8 0 50%) 50% / 18px 18px;
    cursor: grab;
    touch-action: none;
}

.usravt-upload-wraper .cropper-zone .stage-frame:focus-visible {
    outline: 3px solid var(--nv-primary);
    outline-offset: 3px;
}

.usravt-upload-wraper .cropper-zone .stage-frame img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform-origin: 50% 50%;
    transition: opacity .2s ease;
    -webkit-user-drag: none;
    pointer-events: none;
}

.usravt-upload-wraper .cropper-zone .frame-mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: 0 0 0 9999px rgb(247 247 247 / 62%);
    pointer-events: none;
}

.usravt-upload-wraper .cropper-zone .frame-ring {
    position: absolute;
    inset: 0;
    border: 2px solid rgb(200 200 200 / 90%);
    border-radius: 50%;
    pointer-events: none;
}

.usravt-upload-wraper .cropper-zone .frame-ring::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -1px;
    width: 2px;
    height: 9px;
    margin-left: -1px;
    background: rgb(200 200 200 / 90%);
    border-radius: 1px;
}

.usravt-upload-wraper .cropper-zone .frame-ring::after {
    content: "";
    position: absolute;
    inset: -2px;
    border: 2px dashed rgb(200 200 200 / 35%);
    border-radius: 10px;
}

.usravt-upload-wraper .cropper-zone .controls {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 300px;
    margin: 16px auto 0;
}

.usravt-upload-wraper .cropper-zone .controls .control-btn {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: #333;
    background: var(--nv-border-color-light);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color .15s ease;
}

.usravt-upload-wraper .cropper-zone .controls .control-btn:hover {
    background: var(--nv-primary);
    color: var(--nv-white);
}

.usravt-upload-wraper .cropper-zone .controls .control-btn:active {
    transform: scale(.94);
}

.usravt-upload-wraper .cropper-zone .controls svg {
    width: 17px;
    height: 17px;
}

.usravt-upload-wraper .cropper-zone .controls .control-slider {
    flex: 1 1 auto;
    min-width: 0;
    height: 4px;
    margin: 0;
    padding: 0;
    background: var(--nv-border-color-light);
    border-radius: 999px;
    cursor: pointer;
    appearance: none;
}

.usravt-upload-wraper .cropper-zone .controls .control-slider:focus-visible {
    outline: 3px solid var(--nv-primary);
    outline-offset: 6px;
}

.usravt-upload-wraper .cropper-zone .controls .control-slider::-webkit-slider-thumb {
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--nv-primary);
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgb(0 0 0 / 35%);
    cursor: grab;
}

.usravt-upload-wraper .cropper-zone .controls .control-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: var(--nv-primary);
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgb(0 0 0 / 35%);
    cursor: grab;
}

.usravt-upload-wraper .cropper-zone .controls .control-slider::-moz-range-track {
    height: 4px;
    background: var(--nv-border-color-light);
    border-radius: 999px;
}

.usravt-upload-wraper .cropper-zone .actions {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
    touch-action: manipulation;
}

.usravt-upload-wraper .cropper-zone .actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.usravt-upload-wraper .cropper-zone .actions .btn svg {
    width: 16px;
    height: 16px;
}

.usravt-upload-wraper .cropper-zone .frame-angle {
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #fff;
    background: rgb(10 10 22 / 70%);
    border-radius: 999px;
    opacity: 0;
    transition: opacity .15s ease;
    pointer-events: none;
}

.usravt-upload-wraper .cropper-zone .frame-angle.is-on {
    opacity: 1;
}

/* EDIT INFO */
#change-photo {
    display: none;
}

.users-menu > li > a {
    padding: 8px 10px !important;
}

/* LOGIN, REGISTER FORM BOX */
.login-box {
    width: 334px;
}

@media (max-width: 399px) {
    .login-box {
        width: 100%;
    }
}

.user-reg-form .form-detail .form-group > label {
    font-weight: 500;
}

.login-box img.logo {
    max-width: 100%;
    height: auto;
}

.openid-btns {
    border-top: 1px #fff solid;
    padding-top: 15px;
}

.openid-btns .btn-group {
    display: flex;
    width: 100%;
}

.openid-btns .btn-group button.btn {
    width: 40px;
    text-align: center;
}

.openid-btns .btn-group a.btn {
    flex-grow: 1;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.openid-google {
    color: #ffffff !important;
    background-color: #d9534f;
    border-color: #d43f3a;
}

.openid-google:focus {
    color: #ffffff;
    background-color: #c9302c;
    border-color: #761c19;
}

.openid-google:hover {
    color: #ffffff;
    background-color: #c9302c;
    border-color: #ac2925;
}

.openid-google:active {
    color: #ffffff;
    background-color: #c9302c;
    border-color: #ac2925;
}

.openid-google:active:hover,
.openid-google:active:focus {
    color: #ffffff;
    background-color: #ac2925;
    border-color: #761c19;
}

.openid-google:active {
    background-image: none;
}

.openid-google.disabled:hover,
.openid-google[disabled]:hover,
fieldset[disabled] .openid-google:hover,
.openid-google.disabled:focus,
.openid-google[disabled]:focus,
fieldset[disabled] .openid-google:focus {
    background-color: #d9534f;
    border-color: #d43f3a;
    cursor: inherit;
}

.openid-zalo {
    color: #ffffff !important;
    background-color: #0067ff;
    border-color: #0067ff;
}

.openid-zalo:focus,
.openid-zalo:hover,
.openid-zalo:active {
    color: #ffffff;
    background-color: #035adb;
    border-color: #035adb;
}

.openid-zalo:active {
    background-image: none;
}

.openid-zalo.disabled:hover,
.openid-zalo[disabled]:hover,
fieldset[disabled] .openid-zalo:hover,
.openid-zalo.disabled:focus,
.openid-zalo[disabled]:focus,
fieldset[disabled] .openid-zalo:focus {
    background-color: #035adb;
    border-color: #035adb;
    cursor: inherit;
}

.fa-zalo::before {
    font: normal normal bold 15px/1 Arial;
    content: "Z";
}

.openid-facebook {
    color: #ffffff !important;
    background-color: #428bca;
    border-color: #357ebd;
}

.openid-facebook:focus {
    color: #ffffff;
    background-color: #3071a9;
    border-color: #193c5a;
}

.openid-facebook:hover {
    color: #ffffff;
    background-color: #3071a9;
    border-color: #285e8e;
}

.openid-facebook:active {
    color: #ffffff;
    background-color: #3071a9;
    border-color: #285e8e;
}

.openid-facebook:active:hover,
.openid-facebook:active:focus {
    color: #ffffff;
    background-color: #285e8e;
    border-color: #193c5a;
}

.openid-facebook:active {
    background-image: none;
}

.openid-facebook.disabled:hover,
.openid-facebook[disabled]:hover,
.openid-facebook.disabled:focus,
.openid-facebook[disabled]:focus,
fieldset[disabled] .openid-facebook:focus {
    background-color: #428bca;
    border-color: #357ebd;
    cursor: inherit;
}

.openid-single-sign-on {
    color: #ffffff !important;
    background-color: #5cb85c;
    border-color: #4cae4c;
}

.openid-single-sign-on:focus {
    color: #ffffff;
    background-color: #449d44;
    border-color: #255625;
}

.openid-single-sign-on:hover {
    color: #ffffff;
    background-color: #449d44;
    border-color: #398439;
}

.openid-single-sign-on:active {
    color: #ffffff;
    background-color: #449d44;
    border-color: #398439;
}

.openid-single-sign-on:active:hover,
.openid-single-sign-on:active:focus {
    color: #ffffff;
    background-color: #398439;
    border-color: #255625;
}

.openid-single-sign-on:active {
    background-image: none;
}

.openid-single-sign-on.disabled:hover,
.openid-single-sign-on[disabled]:hover,
.openid-single-sign-on.disabled:focus,
.openid-single-sign-on[disabled]:focus,
fieldset[disabled] .openid-single-sign-on:focus {
    background-color: #5cb85c;
    border-color: #4cae4c;
    cursor: inherit;
}

.changepass-cont {
    display: flex;
    justify-content: center;
    width: 100%;
    padding-top: 30px;
}

.changepass {
    background-color: #fff;
    padding: 15px;
    min-height: 300px !important;
    min-width: 300px !important;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
    border: 1px #dcdcdc solid;
    border-radius: 5px;
    width: 500px;
}

.changepass .form-detail {
    padding: 20px 30px;
}

@media (max-width: 499.98px) {
    .changepass-cont {
        padding-top: 0;
    }
    .changepass {
        width: 100%;
    }
}

.filelist li {
    display: flex;
    align-items: center;
    margin-bottom: 7px;
}

.btn-file {
    width: 140px;
    text-align: left;
    padding: 5px 5px 5px 30px;
}

.btn-file::before {
    font-family: FontAwesome;
    font-size: 24px;
    position: absolute;
    margin-left: -28px;
    margin-top: -8px;
}

.type-doc::before {
    content: "\f0f6";
}

.type-pdf::before {
    content: "\f1c1";
}

.type-image::before {
    content: "\f1c5";
}

.type-file::before {
    content: "\f016";
}

.usr-flex-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.usr-flex {
    display: flex;
}

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

.usr-align-center {
    align-items: center;
}

.usr-gap-1 {
    gap: 5px;
}

.usr-gap-2 {
    gap: 10px;
}

.usr-ml-auto {
    margin-left: auto;
}

.usr-hr-space {
    margin-top: 40px;
    margin-bottom: 40px;
}

.usr-login-platform {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--nv-border-color-light);
    border: 1px solid var(--nv-white);
}

.usr-login-platform.browser {
    margin-left: -8px;
}

.box-security {
    border: 1px solid rgb(229, 231, 235);
    border-radius: 7px;
    padding: 20px;
}

.user-delete-account .input-confirm-code {
    max-width: 250px;
    margin: 0 auto;
}