/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
.Table-TuyenSinh .Edit_text {
    font-size: 13px;
    width: 100% !important;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #949494;
    padding: 8px 5px 8px 5px !important;
    background-color: white !important;
    color: black !important;
    margin-bottom: 6px;
}
.ts-1
{
    
        background: #2980b9 !important;
    border: 1px solid #2980b9 !important;
    font-weight: 500;
    color: #fff;
    /* text-transform: uppercase; */
    /* height: 30px; */
    padding: 0px 20px;
    height: 30px;
    font-size: 14px;
    border-radius: 3px;}
body {
    margin: 0
}

details,main {
    display: block
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

hr {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

code,kbd,pre,samp {
    font-family: monospace,monospace;
    font-size: 1em
}

a {
    background-color: transparent
}

abbr[title] {
    border-bottom: none;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

b,strong {
    font-weight: bolder
}

small {
    font-size: 80%
}

sub,sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

img {
    border-style: none
}

button,input,optgroup,select,textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button,input {
    overflow: visible
}

button,select {
    text-transform: none
}

[type=button],[type=reset],[type=submit],button {
    -webkit-appearance: button
}

[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner {
    border-style: none;
    padding: 0
}

[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    padding: .35em .75em .625em
}

legend {
    color: inherit;
    display: table;
    max-width: 100%;
    white-space: normal
}

progress {
    vertical-align: baseline
}

textarea {
    overflow: auto
}

[type=checkbox],[type=radio],legend {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0
}

[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

summary {
    display: list-item
}

[hidden],template {
    display: none
}

/*!
 * Bootstrap Grid v4.1.3 (https://getbootstrap.com/)
 * Copyright 2011-2018 The Bootstrap Authors
 * Copyright 2011-2018 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
@-ms-viewport {
    width: device-width
}

*,html {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

html {
    -ms-overflow-style: scrollbar
}

::after,::before {
    -webkit-box-sizing: inherit;
    box-sizing: inherit
}

.container,.container-fluid {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}

.row 
{
    /*
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px
*/
}

.no-gutters {
    margin-right: 0;
    margin-left: 0
}

.no-gutters>.col,.no-gutters>[class*=col-] {
    padding-right: 0;
    padding-left: 0
}

.col,.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9 {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px
}

.col-auto {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px
}

.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-auto,.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-auto,.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-auto,.col-xl,.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-auto,.col-xxl,.col-xxl-1,.col-xxl-10,.col-xxl-11,.col-xxl-12,.col-xxl-2,.col-xxl-3,.col-xxl-4,.col-xxl-5,.col-xxl-6,.col-xxl-7,.col-xxl-8,.col-xxl-9,.col-xxl-auto {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px
}

.col {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%
}

.col-auto {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: none
}

.col-1,.col-2,.col-3 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 8.33333%;
    flex: 0 0 8.33333%;
    max-width: 8.33333%
}

.col-2,.col-3 {
    -ms-flex: 0 0 16.66667%;
    flex: 0 0 16.66667%;
    max-width: 16.66667%
}

.col-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%
}

.col-4,.col-5,.col-6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.33333%;
    flex: 0 0 33.33333%;
    max-width: 33.33333%
}

.col-5,.col-6 {
    -ms-flex: 0 0 41.66667%;
    flex: 0 0 41.66667%;
    max-width: 41.66667%
}

.col-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%
}

.col-7,.col-8,.col-9 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 58.33333%;
    flex: 0 0 58.33333%;
    max-width: 58.33333%
}

.col-8,.col-9 {
    -ms-flex: 0 0 66.66667%;
    flex: 0 0 66.66667%;
    max-width: 66.66667%
}

.col-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%
}

.col-10 {
    -ms-flex: 0 0 83.33333%;
    flex: 0 0 83.33333%;
    max-width: 83.33333%
}

.col-10,.col-11,.col-12 {
    -webkit-box-flex: 0
}

.col-11 {
    -ms-flex: 0 0 91.66667%;
    flex: 0 0 91.66667%;
    max-width: 91.66667%
}

.col-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%
}

* {
    -webkit-tap-highlight-color: transparent;
    /* -webkit-transition: .3s all; */
    -o-transition: .3s all;
    /* transition: .3s all; */
}

body,html {
    font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto, Oxygen-Sans,    Ubuntu, Cantarell, helvetica neue, sans-serif !important;
}

a,button,h1,h2,h3,h4,h5,h6,p,ul {
    margin: 0;
    padding: 0;
    line-height: 1
}

a {
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s
}

a,a:hover {
    color: inherit;
    text-decoration: none
}

ol,ul {
    list-style-type: none
}

.col-12,img {
    max-width: 100%
}

:focus {
    outline-width: 0
}

.me-11 {
    margin-right: 11px
}

.me-10,.sidebar-body-menu a>.icon {
    margin-right: 10px
}

.ms-20 {
    margin-left: 20px
}

.mb-20 {
    margin-bottom: 20px
}

.p-relative,.sidebar-body-menu li {
    position: relative
}

.resize-none {
    resize: none
}

.white-block,.white-block.checkboxes label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.white-block {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px
}

.white-block__title {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: #171717;
    margin-bottom: 20px
}

.white-block .select {
    width: 100%;
    background-color: #eff0f6
}

.white-block.checkboxes label {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 15px
}

.white-block.checkboxes label:last-child {
    margin-bottom: 0
}

.white-block.checkboxes input {
    margin-right: 12px;
    width: 16px;
    height: 16px
}

.white-block.checkboxes span {
    font-size: 14px;
    line-height: 1.71
}

.skip-link.sr-only,.sr-only {
    border: 0;
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    width: 1px
}

.sr-only {
    position: absolute;
    white-space: nowrap;
    clip: rect(0 0 0 0)
}

.skip-link {
    background-color: #eee;
    clip: auto!important;
    -webkit-clip-path: none;
    clip-path: none;
    color: #444;
    display: block;
    font-size: 1em;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000
}

.skip-link.sr-only {
    clip: rect(1px,1px,1px,1px);
    position: absolute!important;
    word-wrap: normal!important
}

.skip-link.sr-only:focus {
    background-color: #fff;
    clip: auto!important;
    -webkit-clip-path: none;
    clip-path: none;
    color: #3e4095;
    display: block;
    font-size: 1em;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000
}

::-webkit-scrollbar {
    width: 6px
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    border-radius: 10px
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(255,255,255,.4);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.5);
    box-shadow: inset 0 0 6px rgba(0,0,0,.5)
}

::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(253,253,253,.4)
}

body {
    background-color: #f0f2fa
}

.library-table-name span,.page-center,.page-flex,.sidebar-user-img picture,.users-table picture {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.library-table-name span,.page-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.page-center {
    min-height: 100vh;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: center;
    padding: 30px 15px
}

.main-wrapper {
    position: relative;
    width: 100%
}

.footer,.layer {
    width: 100%;
    left: 0
}

.footer {
    position: absolute;
    bottom: 0
}

.layer {
    display: none;
    position: fixed;
    height: 100%;
    top: 0;
    z-index: 2
}

.layer.active {
    display: block
}

@font-face {
    font-family: "demo";
    font-display: swap;
    src: url(../fonts/demo.woff) format("woff"),url(../fonts/demo.woff2) format("woff2");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: "Inter-Black";
    font-display: swap;
    src: url(../fonts/Inter-Black.woff) format("woff"),url(../fonts/Inter-Black.woff2) format("woff2");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: "Inter-ExtraBold";
    font-display: swap;
    src: url(../fonts/Inter-ExtraBold.woff) format("woff"),url(../fonts/Inter-ExtraBold.woff2) format("woff2");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: "Inter-Bold";
    font-display: swap;
    src: url(../fonts/Inter-Bold.woff) format("woff"),url(../fonts/Inter-Bold.woff2) format("woff2");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: "Inter-Light";
    font-display: swap;
    src: url(../fonts/Inter-Light.woff) format("woff"),url(../fonts/Inter-Light.woff2) format("woff2");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: "Inter-ExtraLight";
    font-display: swap;
    src: url(../fonts/Inter-ExtraLight.woff) format("woff"),url(../fonts/Inter-ExtraLight.woff2) format("woff2");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: "Inter-Regular";
    font-display: swap;
    src: url(../fonts/Inter-Regular.woff) format("woff"),url(../fonts/Inter-Regular.woff2) format("woff2");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: "Inter-Medium";
    font-display: swap;
    src: url(../fonts/Inter-Medium.woff) format("woff"),url(../fonts/Inter-Medium.woff2) format("woff2");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: "Inter-SemiBold";
    font-display: swap;
    src: url(../fonts/Inter-SemiBold.woff) format("woff"),url(../fonts/Inter-SemiBold.woff2) format("woff2");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: "stylesheet";
    font-display: swap;
    src: url(../fonts/stylesheet.woff) format("woff"),url(../fonts/stylesheet.woff2) format("woff2");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: "Inter-Thin";
    font-display: swap;
    src: url(../fonts/Inter-Thin.woff) format("woff"),url(../fonts/Inter-Thin.woff2) format("woff2");
    font-weight: 400;
    font-style: normal
}

.icon {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center center
}

.logo {
    /* background-image: url(../img/svg/Logo.svg); */
    /* width: 35px; */
    height: 49px;
}

.menu-toggle {
    background-image: url(../img/svg/Bulk/Menu-toggle-white.svg);
    width: 24px;
    height: 24px
}

.home,.menu-toggle--gray {
    background-image: url(../img/svg/Bulk/Menu-toggle-gray.svg);
    width: 24px;
    height: 24px
}

.home {
    background-image: url(../img/svg/Bulk/Home-white.svg);
    /* filter: invert(14%) sepia(47%) saturate(3071%) hue-rotate(344deg) brightness(98%) contrast(103%); */
}

.arrow-down,.document,.folder {
    background-image: url(../img/svg/Bulk/Document-white.svg);
    width: 24px;
    height: 24px
}

.arrow-down,.folder {
    background-image: url(../img/svg/Bulk/Folder-white.svg)
}

.arrow-down {
    background-image: url(../img/svg/Bulk/Arrow-DownCircle.svg)
}

.image,.message,.paper {
    background-image: url(../img/svg/Bulk/Image-white.svg);
    width: 24px;
    height: 24px
}

.message,.paper {
    background-image: url(../img/svg/Bulk/Paper-white.svg)
}

.message {
    background-image: url(../img/svg/Bulk/Message-white.svg)
}

.category,.edit,.user-3 {
    background-image: url(../img/svg/Bulk/Edit-white.svg);
    /* width: 24px; */
    /* height: 24px; */
}

.category,.user-3 {
    background-image: url(../img/svg/Bulk/Category-white.svg)
}

.user-3 {
    background-image: url(../img/svg/Bulk/3-User-white.svg)
}

.setting,.settings-line {
    background-image: url(../img/svg/Bulk/Setting-white.svg);
    width: 24px;
    height: 24px
}

.settings-line {
    background-image: url(../img/svg/Bulk/Settings-line.svg)
}

.avatar {
    background-image: url(../img/avatar/Avatar.svg);
    width: 56px;
    height: 56px
}

.avatar-2 {
    background-image: url(../img/avatar/avatar-2.svg);
    width: 40px;
    height: 40px
}

.notification {
    background-image: url(../img/svg/Bulk/Notification-gray.svg);
    width: 24px;
    height: 24px
}

.arrows-up-down {
    background-image: url(../img/svg/Bulk/Arrows-up-down.svg);
    width: 10px;
    height: 17px;
    margin-left: 10px
}

.move,.radio {
    background-image: url(../img/svg/move.svg);
    width: 24px;
    height: 24px
}

.radio {
    background-image: url(../img/svg/radio.svg)
}

.thumbnail {
    background-image: url(../img/svg/thumbnail.svg);
    width: 60px;
    height: 60px
}

.google-drive,.time-circle {
    background-image: url(../img/svg/Bulk/TimeCircle.svg);
    width: 24px;
    height: 24px
}

.google-drive {
    background-image: url(../img/svg/GoogleDrive.svg)
}

.delete,.dropbox,.star {
    background-image: url(../img/svg/dropbox.svg);
    width: 24px;
    height: 24px
}

.delete,.star {
    background-image: url(../img/svg/Bulk/Star.svg)
}

.delete {
    background-image: url(../img/svg/Bulk/Delete.svg)
}

.search-wrapper svg {
    stroke: #d6d7e3;
    position: absolute;
    left: 11px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    z-index: 1
}

.lang-switcher svg {
    stroke: #b9b9b9
}

.theme-switcher svg {
    width: 24px;
    height: 24px
}

.theme-switcher circle {
    fill: #d6d7e3;
    stroke: #d6d7e3
}

.theme-switcher line {
    stroke: #d6d7e3
}

.users .primary-white-btn svg {
    margin-right: 5px
}

.folder-list svg {
    color: #ffb648;
    fill: #ffb648
}

.files-item__img svg {
    color: #fff;
    width: 27px;
    height: 27px
}

.library-table-name span {
    width: 20px;
    height: 20px;
    padding: 2px 3px;
    margin-right: 5px;
    border-radius: 3px;
    color: #fff
}

.library-table-name span.info {
    background-color: #5887ff
}

.library-table-name span.danger {
    background-color: #f26464
}

.library-table-name span.warning {
    background-color: #ffb648
}

.library-table-name span.success {
    background-color: #4bde97
}

.library-table-name span.purple {
    background-color: #5f2eea
}

.dropzone-start svg {
    width: 60px;
    height: 60px;
    color: #d6d7e3;
    stroke-width: 1px
}

h1,h2,h3 {
    letter-spacing: 1px;
    color: #171717
}

.h-1 {
    font-size: 64px;
    line-height: 1.03
}

.h-2 {
    font-size: 48px;
    line-height: 1.04
}

.h-3 {
    font-size: 32px;
    line-height: 1.06
}

.main-title {
    font-weight: 700;
    font-size: 18px;
    line-height: 1.42;
    color: #3e4095;
    margin-bottom: 20px
}

button {
    cursor: pointer;
    -webkit-transition: .3s all;
    -o-transition: .3s all;
    transition: .3s all;
    border: 2px solid transparent
}

.transparent-btn:focus,button:focus {
    outline: 0;
    /* border: 2px solid #afbcff!important; */
}

button.disabled {
    cursor: default;
    color: #d6d7e3
}

button.disabled:hover {
    color: #d6d7e3
}

button.disabled:focus {
    border-color: transparent!important;
    outline: 0
}

.main-btns-wrapper button,.main-btns-wrapper select {
    min-height: 48px;
    line-height: 1.5
}

.transparent-btn {
    background-color: transparent;
    border: 2px solid transparent!important
}

.primary-default-btn,.primary-white-btn,.secondary-default-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    border-radius: 4px;
    padding: 10px 20px
}

.primary-default-btn {
    background-color: #2f49d1;
    color: #fff
}

.primary-default-btn:hover {
    background-color: #4661f0;
    color: #fff
}

.primary-white-btn,.secondary-default-btn {
    color: #2f49d1
}

.primary-white-btn {
    background-color: #fff;
    font-weight: 500;
    font-size: 14px;
    line-height: 2.43
}

.primary-white-btn:hover {
    color: #4661f0
}

.secondary-default-btn {
    border: 2px solid #2f49d1;
    background-color: transparent
}

.flat-btn,.secondary-default-btn:hover,.users-table tbody tr.active td {
    background-color: rgba(47,73,209,.1)
}

.flat-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 16px;
    line-height: 1.5;
    color: #2f49d1
}

.sidebar-toggle {
    /* opacity: .6; */
    -webkit-transition: .3s all;
    -o-transition: .3s all;
    transition: .3s all;
    /* background: #73190F; */
    /* border: 1px solid #fff !important; */
}

.sidebar-toggle:hover {
    opacity: 1
}

.category__btn.rotated .icon,.sidebar-toggle.rotated {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.category__btn,.gray-circle-btn,.ligt-circle-btn {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 50%
}

.category__btn {
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    right: 0;
    top: 13px;
    z-index: 1
}

.gray-circle-btn,.ligt-circle-btn {
    width: 40px;
    height: 40px;
    border-width: 0
}

.gray-circle-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #eff0f6
}

.ligt-circle-btn {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    background-color: #f5efff
}

.lang-switcher,.ligt-circle-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.extentions-btn,.nav-user-btn {
    background-color: transparent
}

.extentions-btn {
    border: 1px solid #eee!important;
    border-radius: 4px;
    padding: 5px 20px;
    color: #f26464
}

.extentions-btn.disabled {
    color: #d6d7e3
}

.filter-btn svg {
    margin-right: 6px
}

.sort-btn {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.folder-btn,.sort-btn,.tag-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.tag-btn {
    font-weight: 600;
    font-size: 12px;
    line-height: 1.67;
    color: #d6d7e3;
    padding: 2px 8px;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 4px
}

.tag-btn svg {
    margin-left: 8px;
    width: 16px;
    height: 16px
}

.folder-btn {
    width: 30px;
    height: 30px;
    background-color: #eff0f6;
    border-radius: 5px
}

.folder-btn svg {
    width: 16px;
    height: 16px;
    color: #b9b9b9
}

.media-table-btn,.upgrade-btn {
    border-radius: 4px;
    font-size: 16px;
    line-height: 1.5
}

.upgrade-btn {
    padding: 10px 17px;
    background: rgba(0,97,247,.1);
    font-style: normal;
    font-weight: 500;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    color: #5f2eea
}

.upgrade-btn:hover {
    color: #5f2eea;
    background: rgba(0,97,247,.15)
}

.upgrade-btn svg {
    margin-left: 10px
}

.media-table-btn {
    padding: 10px 20px;
    background-color: transparent;
    border: 2px solid #eee;
    color: #b9b9b9
}

.view-sort-btn {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background-color: #eff0f6;
    color: #d6d7e3
}

.view-sort-btn:hover {
    color: #fff;
    background-color: #e0e3f1
}

.dropdown-btn {
    color: #b9b9b9
}

.link-info {
    color: #5887ff;
    border-bottom: dashed 1px transparent
}

.link-info:hover {
    color: #5887ff;
    border-bottom-color: #5887ff
}

.dropdown {
    position: absolute;
    padding: 5px 10px;
    background-color: #fff;
    -webkit-box-shadow: 0 -2px 24px rgba(160,163,189,.25);
    box-shadow: 0 -2px 24px rgba(160,163,189,.25);
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: .3s all;
    -o-transition: .3s all;
    transition: .3s all;
    z-index: 3
}

.dropdown::before {
    content: '';
    position: absolute;
    right: 6px;
    top: -10px;
    border-style: solid;
    border-width: 0 15px 15px;
    border-color: transparent transparent #fff
}

.dropdown li:last-child a {
    border-width: 0
}

.dropdown a {
    display: inline-block;
    width: 100%;
    font-weight: 500;
    font-size: 14px;
    line-height: 2.43;
    color: #3e4095;
    border-bottom: 1px solid #eee;
    text-align: left
}

.dropdown a:hover {
    color: #2f49d1
}

.badge-active,.badge-disabled,.badge-pending,.badge-success,.badge-trashed {
    padding: 1px;
    width: 85px;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.67;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    border-radius: 100px;
    text-align: center
}

.badge-active {
    color: #5887ff;
    background-color: rgba(88,135,255,.1)
}

.badge-pending {
    color: #ffb648;
    background-color: rgba(255,172,50,.1)
}

.badge-disabled {
    color: #fff;
    background-color: #ffb648
}

.badge-trashed {
    color: #f26464;
    background-color: rgba(245,91,93,.1)
}

.badge-success {
    color: #4bde97;
    background-color: rgba(75,222,151,.1)
}

input {
    
 border: 1px solid #3e409554;
  
}

input[type=checkbox],input[type=radio] {
    min-height: auto
}

input[type=radio] {
    width: 24px;
    height: 24px;
    margin-right: 19px
}

input[type=radio]:focus {
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none
}

.form-input::-webkit-input-placeholder,input::-webkit-input-placeholder {
    font-weight: 500;
    font-size: 14px;
    line-height: 2.43;
    color: #d6d7e3
}

.form-input::-moz-placeholder,input::-moz-placeholder {
    font-weight: 500;
    font-size: 14px;
    line-height: 2.43;
    color: #d6d7e3
}

input:-ms-input-placeholder,input::-ms-input-placeholder {
    font-weight: 500;
    font-size: 14px;
    line-height: 2.43;
    color: #d6d7e3
}

input::placeholder {
    font-weight: 500;
    font-size: 14px;
    line-height: 2.43;
    color: #d6d7e3
}

input:focus {
    /* outline: 0; */
    /* border: rgba(134,182,254,.5) solid!important; */
    /* -webkit-box-shadow: 0 0 0 2px rgba(134,182,254,.5); */
    /* box-shadow: 0 0 0 2px rgba(134,182,254,.5); */
}

input:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-calendar-picker-indicator {
    display: none!important
}

.check {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

label {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    cursor: pointer
}

.new-page-content input {
    padding: 5px 16px
}

.users-table table,.users-table-info {
    line-height: 1.4;
    letter-spacing: -.3px;
    color: #3e4095
}

.users-table table {
    width: 100%;
    text-align: left;
    border-collapse: collapse;
    -webkit-transition: none;
    -o-transition: none;
    transition: none
}

.users-table-info {
    height: 48px;
    border-bottom: 1.2px solid #dadbe4;
    font-size: 14px
}

.users-table-info th {
    font-weight: 500
}

.users-table__checkbox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    cursor: pointer;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content
}

.footer-end li,.users-table__checkbox input {
    margin-right: 20px
}

.users-table td {
    background-color: #fff;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding-top: 10px;
    padding-bottom: 10px;
}

.users-table td:first-child {
    padding-left: 20px
}

.users-table tbody {
    font-size: 14px
}

.users-table tbody tr:last-child .users-item-dropdown {
    bottom: 250%;
    top: auto
}

.users-table tbody tr:last-child .users-item-dropdown::before {
    bottom: -10px;
    top: auto;
    border-width: 15px 15px 0;
    border-color: #fff transparent transparent
}

.users-table .users-item-dropdown {
    right: -9px;
    top: 150%
}

.users-table img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 7px
}

.table-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    margin-bottom: 20px
}

.table-wrapper table {
    /* min-width: 850px; */
}

.table-wrapper table.posts-table {
    /* min-width: 944px; */
}

.table-wrapper table.library-table {
    min-width: 483px
}

.sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    background-color: #fff !important;
    min-width: 220px;
    padding: 0px 15px 37px 20px;
    /* -webkit-transition: .5s all; */
    -o-transition: .5s all;
    /* transition: .5s all; */
    min-height: 100vh;
    /* background-image: url(https://cdhue.phanmemdaotao.edu.vn/App_Themes/Default/images/Header/navbar-bg.png) !important; */
    /* background-image: url(../img/navbar-bg.png) !important; */
    /* background-image: url(/Media/NewImage/navbar-bg.png) !important; */
    box-shadow: 0 15px 50px 0 rgba(160, 163, 189, .1);
}

.sidebar a:focus {
    outline: 0
}

.sidebar-head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,.1);
    border-bottom: 1px solid #3e4095;
}

.sidebar-body {
    padding-top: 20px;
}

.sidebar-body-menu a,.sidebar-user {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.sidebar-body-menu a {
    position: relative;
    padding: 5px 0;
    /* opacity: .6; */
    color: #3e4095;
    font-weight: 500;
    font-size: 14px;
    line-height: 2.43
}

.sidebar-body-menu a::after {
    position: absolute;
    content: '';
    height: 22px;
    width: 3px;
    right: -11px;
    border-radius: 10px;
    background-color: #3e4095;
    opacity: 0;
    -webkit-transition: .3s all;
    -o-transition: .3s all;
    transition: .3s all
}

.cat-sub-menu.visible a:hover,.sidebar-body-menu a.active,.sidebar-body-menu a.active::after,.sidebar-body-menu a:hover,.sidebar-body-menu a:hover::after {
    opacity: 1
}

.sidebar-user {
    border-radius: 10px;
    padding: 5px;
    background-color: rgba(255,255,255,.1)
}

.sidebar-body-menu a,.sidebar-user,.sidebar-user-img,.sidebar-user-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.sidebar-user-img {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    margin-right: 8px;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    overflow: hidden;
    background-color: #fff
}

.sidebar-user-info {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.sidebar-user__title {
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .75px;
    color: #fff
}

.sidebar-user__subtitle {
    font-weight: 500;
    font-size: 10px;
    line-height: 1.5;
    letter-spacing: .86px;
    color: rgba(255,255,255,.5)
}

.logo {
    /* margin-right: 9px; */
    /* color: #73190F; */
}

.logo-text,.logo-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
}

.logo-wrapper {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.logo-text {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    color: #3e4095;
}

.logo-subtitle,.logo-title {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.4;
    /* letter-spacing: .86px; */
    color: #73190F;
    color: #fff;
    color: #3e4095;
}

.logo-subtitle {
    font-size: 12px;
    font-weight: 500;
    line-height: 2.42
}

.msg-counter,.system-menu__title {
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: .75px
}

.msg-counter {
    position: absolute;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 20px;
    height: 20px;
    background-color: #f26464;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 12px!important;
    color: #fff
}

.system-menu__title {
    display: inline-block;
    margin-top: 5px;
    margin-bottom: 2px;
    text-transform: uppercase;
    font-size: 14px;
    color: rgba(255,255,255,.5);
    /* color: #73190F !important; */
    color: #ffffff;
    /* border-bottom: 3px solid #fff; */
    font-weight: 800;
    color: #132d64;
    color: #3e4095;
}

.cat-sub-menu {
    padding-left: 34px;
    height: 0
}

.cat-sub-menu.visible {
    height: auto
}

.cat-sub-menu.visible a {
    opacity: 1;
    visibility: visible;
}

.cat-sub-menu a {
    opacity: 0;
    visibility: hidden
}

.category__btn .icon {
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s
}

.main-nav {
    padding-top: 5px;
    padding-bottom: 5px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    background-image: url('../img/top-header.png');
    background-image: url(https://cdhue.phanmemdaotao.edu.vn/App_Themes/Default/Images/Header/header-bg.png);
    background: #07689f;
    border-left: 1px solid #eff1f9;
    background: #fff;
    border-radius: 0px 0px 5px 5px;
    box-shadow: 15px 9px 50px 3px rgb(0 0 0 / 10%);
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
    @import url(../fonts/stylesheet.css);
    html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%}
    body {
    margin: 0}
    details,main {
    display: block}
    h1 {
    font-size: 2em;
    margin: .67em 0}
    hr {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
    overflow: visible}
    code,kbd,pre,samp {
    font-family: monospace,monospace;
    font-size: 1em}
    a {
    background-color: transparent}
    abbr[title] {
    border-bottom: none;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted}
    b,strong {
    font-weight: bolder}
    small {
    font-size: 80%}
    sub,sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline}
    sub {
    bottom: -.25em}
    sup {
    top: -.5em}
    img {
    border-style: none}
    button,input,optgroup,select,textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0}
    button,input {
    overflow: visible}
    button,select {
    text-transform: none}

[
    type=button],[type=reset],[type=submit],button {
    -webkit-appearance: button}

[
    type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner {
    border-style: none;
    padding: 0}

[
    type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring {
    outline: 1px dotted ButtonText}
    fieldset {
    padding: .35em .75em .625em}
    legend {
    color: inherit;
    display: table;
    max-width: 100%;
    white-space: normal}
    progress {
    vertical-align: baseline}
    textarea {
    overflow: auto}

[
    type=checkbox],[type=radio],legend {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0}

[
    type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button {
    height: auto}

[
    type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px}

[
    type=search]::-webkit-search-decoration {
    -webkit-appearance: none}

::
    -webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit}
    summary {
    display: list-item}

[
    hidden],template {
    display: none}

/*!
 * Bootstrap Grid v4.1.3 (https://getbootstrap.com/)
 * Copyright 2011-2018 The Bootstrap Authors
 * Copyright 2011-2018 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
    @-ms-viewport {
    width: device-width}

*,
    html {
    -webkit-box-sizing: border-box;
    box-sizing: border-box}
    html {
    -ms-overflow-style: scrollbar}

::
    after,::before {
    -webkit-box-sizing: inherit;
    box-sizing: inherit}

.container,.container-fluid {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto}

.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px}

.no-gutters {
    margin-right: 0;
    margin-left: 0}

.no-gutters>.col,.no-gutters>[
    class*=col-] {
    padding-right: 0;
    padding-left: 0}

.col,.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9 {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px}

.col-auto {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px}

.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-auto,.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-auto,.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-auto,.col-xl,.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-auto,.col-xxl,.col-xxl-1,.col-xxl-10,.col-xxl-11,.col-xxl-12,.col-xxl-2,.col-xxl-3,.col-xxl-4,.col-xxl-5,.col-xxl-6,.col-xxl-7,.col-xxl-8,.col-xxl-9,.col-xxl-auto {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px}

.col {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%}

.col-auto {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: none}

.col-1,.col-2,.col-3 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 8.33333%;
    flex: 0 0 8.33333%;
    max-width: 8.33333%}

.col-2,.col-3 {
    -ms-flex: 0 0 16.66667%;
    flex: 0 0 16.66667%;
    max-width: 16.66667%}

.col-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%}

.col-4,.col-5,.col-6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.33333%;
    flex: 0 0 33.33333%;
    max-width: 33.33333%}

.col-5,.col-6 {
    -ms-flex: 0 0 41.66667%;
    flex: 0 0 41.66667%;
    max-width: 41.66667%}

.col-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%}

.col-7,.col-8,.col-9 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 58.33333%;
    flex: 0 0 58.33333%;
    max-width: 58.33333%}

.col-8,.col-9 {
    -ms-flex: 0 0 66.66667%;
    flex: 0 0 66.66667%;
    max-width: 66.66667%}

.col-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%}

.col-10 {
    -ms-flex: 0 0 83.33333%;
    flex: 0 0 83.33333%;
    max-width: 83.33333%}

.col-10,.col-11,.col-12 {
    -webkit-box-flex: 0}

.col-11 {
    -ms-flex: 0 0 91.66667%;
    flex: 0 0 91.66667%;
    max-width: 91.66667%}

.col-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%}

* {
    -webkit-tap-highlight-color: transparent;
    /* -webkit-transition: .3s all; */
    -o-transition: .3s all;
    /* transition: .3s all; */
}
    body,html {
    font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto, Oxygen-Sans,    Ubuntu, Cantarell, helvetica neue, sans-serif !important;
}
    a,button,h1,h2,h3,h4,h5,h6,p,ul {
    margin: 0;
    padding: 0;
    line-height: 1}
    a {
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s}
    a,a:hover {
    color: inherit;
    text-decoration: none}
    ol,ul {
    list-style-type: none}

.col-12,
    img {
    max-width: 100%}

:
    focus {
    outline-width: 0}

.me-11 {
    margin-right: 11px}

.me-10,.sidebar-body-menu
    a>.icon {
    margin-right: 10px}

.ms-20 {
    margin-left: 20px}

.mb-20 {
    margin-bottom: 20px}

.p-relative,.sidebar-body-menu
    li {
    position: relative}

.resize-none {
    resize: none}

.white-block,.white-block.checkboxes
    label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex}

.white-block {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px}

.white-block__title {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: #171717;
    margin-bottom: 20px}

.white-block .select {
    width: 100%;
    background-color: #eff0f6}

.white-block.checkboxes
    label {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 15px}

.white-block.checkboxes
    label:last-child {
    margin-bottom: 0}

.white-block.checkboxes
    input {
    margin-right: 12px;
    width: 16px;
    height: 16px}

.white-block.checkboxes
    span {
    font-size: 14px;
    line-height: 1.71}

.skip-link.sr-only,.sr-only {
    border: 0;
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    width: 1px}

.sr-only {
    position: absolute;
    white-space: nowrap;
    clip: rect(0 0 0 0)}

.skip-link {
    background-color: #eee;
    clip: auto!important;
    -webkit-clip-path: none;
    clip-path: none;
    color: #444;
    display: block;
    font-size: 1em;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000}

.skip-link.sr-only {
    clip: rect(1px,1px,1px,1px);
    position: absolute!important;
    word-wrap: normal!important}

.skip-link.sr-only:
    focus {
    background-color: #fff;
    clip: auto!important;
    -webkit-clip-path: none;
    clip-path: none;
    color: #3e4095;
    display: block;
    font-size: 1em;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000}

::
    -webkit-scrollbar {
    width: 6px}

::
    -webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    border-radius: 10px}

::
    -webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(255,255,255,.4);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.5);
    box-shadow: inset 0 0 6px rgba(0,0,0,.5)}

::
    -webkit-scrollbar-thumb:window-inactive {
    background: rgba(253,253,253,.4)}
    body {
    background-color: #f0f2fa}

.library-table-name
    span,.page-center,.page-flex,.sidebar-user-img picture,.users-table picture {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex}

.library-table-name
    span,.page-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center}

.page-center {
    min-height: 100vh;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: center;
    padding: 30px 15px}

.main-wrapper {
    position: relative;
    width: 100%}

.footer,.layer {
    width: 100%;
    left: 0}

.footer {
    position: absolute;
    bottom: 0}

.layer {
    display: none;
    position: fixed;
    height: 100%;
    top: 0;
    z-index: 2}

.layer.active {
    display: block}
    @font-face {
    font-family: "demo";
    font-display: swap;
    src: url(../fonts/demo.woff) format("woff"),url(../fonts/demo.woff2) format("woff2");
    font-weight: 400;
    font-style: normal}
    @font-face {
    font-family: "Inter-Black";
    font-display: swap;
    src: url(../fonts/Inter-Black.woff) format("woff"),url(../fonts/Inter-Black.woff2) format("woff2");
    font-weight: 400;
    font-style: normal}
    @font-face {
    font-family: "Inter-ExtraBold";
    font-display: swap;
    src: url(../fonts/Inter-ExtraBold.woff) format("woff"),url(../fonts/Inter-ExtraBold.woff2) format("woff2");
    font-weight: 400;
    font-style: normal}
    @font-face {
    font-family: "Inter-Bold";
    font-display: swap;
    src: url(../fonts/Inter-Bold.woff) format("woff"),url(../fonts/Inter-Bold.woff2) format("woff2");
    font-weight: 400;
    font-style: normal}
    @font-face {
    font-family: "Inter-Light";
    font-display: swap;
    src: url(../fonts/Inter-Light.woff) format("woff"),url(../fonts/Inter-Light.woff2) format("woff2");
    font-weight: 400;
    font-style: normal}
    @font-face {
    font-family: "Inter-ExtraLight";
    font-display: swap;
    src: url(../fonts/Inter-ExtraLight.woff) format("woff"),url(../fonts/Inter-ExtraLight.woff2) format("woff2");
    font-weight: 400;
    font-style: normal}
    @font-face {
    font-family: "Inter-Regular";
    font-display: swap;
    src: url(../fonts/Inter-Regular.woff) format("woff"),url(../fonts/Inter-Regular.woff2) format("woff2");
    font-weight: 400;
    font-style: normal}
    @font-face {
    font-family: "Inter-Medium";
    font-display: swap;
    src: url(../fonts/Inter-Medium.woff) format("woff"),url(../fonts/Inter-Medium.woff2) format("woff2");
    font-weight: 400;
    font-style: normal}
    @font-face {
    font-family: "Inter-SemiBold";
    font-display: swap;
    src: url(../fonts/Inter-SemiBold.woff) format("woff"),url(../fonts/Inter-SemiBold.woff2) format("woff2");
    font-weight: 400;
    font-style: normal}
    @font-face {
    font-family: "stylesheet";
    font-display: swap;
    src: url(../fonts/stylesheet.woff) format("woff"),url(../fonts/stylesheet.woff2) format("woff2");
    font-weight: 400;
    font-style: normal}
    @font-face {
    font-family: "Inter-Thin";
    font-display: swap;
    src: url(../fonts/Inter-Thin.woff) format("woff"),url(../fonts/Inter-Thin.woff2) format("woff2");
    font-weight: 400;
    font-style: normal}

.icon {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center center}

.logo {
    /* background-image: url(../img/svg/Logo.svg); */
    /* width: 35px; */
    height: 49px;
}

.menu-toggle {
    background-image: url(../img/svg/Bulk/Menu-toggle-white.svg);
    width: 24px;
    height: 24px}

.home,.menu-toggle--gray {
    background-image: url(../img/svg/Bulk/Menu-toggle-gray.svg);
    width: 24px;
    height: 24px}

.home {
    background-image: url(../img/svg/Bulk/Home-white.svg);
    /* filter: invert(14%) sepia(47%) saturate(3071%) hue-rotate(344deg) brightness(98%) contrast(103%); */
}

.arrow-down,.document,.folder {
    background-image: url(../img/svg/Bulk/Document-white.svg);
    width: 24px;
    height: 24px}

.arrow-down,.folder {
    background-image: url(../img/svg/Bulk/Folder-white.svg)}

.arrow-down {
    background-image: url(../img/svg/Bulk/Arrow-DownCircle.svg)}

.image,.message,.paper {
    background-image: url(../img/svg/Bulk/Image-white.svg);
    width: 24px;
    height: 24px}

.message,.paper {
    background-image: url(../img/svg/Bulk/Paper-white.svg)}

.message {
    background-image: url(../img/svg/Bulk/Message-white.svg)}

.category,.edit,.user-3 {
    background-image: url(../img/svg/Bulk/Edit-white.svg);
    width: 24px;
    height: 24px}

.category,.user-3 {
    background-image: url(../img/svg/Bulk/Category-white.svg)}

.user-3 {
    background-image: url(../img/svg/Bulk/3-User-white.svg)}

.setting,.settings-line {
    background-image: url(../img/svg/Bulk/Setting-white.svg);
    width: 24px;
    height: 24px}

.settings-line {
    background-image: url(../img/svg/Bulk/Settings-line.svg)}

.avatar {
    background-image: url(../img/avatar/Avatar.svg);
    width: 56px;
    height: 56px}

.avatar-2 {
    background-image: url(../img/avatar/avatar-2.svg);
    width: 40px;
    height: 40px}

.notification {
    background-image: url(../img/svg/Bulk/Notification-gray.svg);
    width: 24px;
    height: 24px}

.arrows-up-down {
    background-image: url(../img/svg/Bulk/Arrows-up-down.svg);
    width: 10px;
    height: 17px;
    margin-left: 10px}

.move,.radio {
    background-image: url(../img/svg/move.svg);
    width: 24px;
    height: 24px}

.radio {
    background-image: url(../img/svg/radio.svg)}

.thumbnail {
    background-image: url(../img/svg/thumbnail.svg);
    width: 60px;
    height: 60px}

.google-drive,.time-circle {
    background-image: url(../img/svg/Bulk/TimeCircle.svg);
    width: 24px;
    height: 24px}

.google-drive {
    background-image: url(../img/svg/GoogleDrive.svg)}

.delete,.dropbox,.star {
    background-image: url(../img/svg/dropbox.svg);
    width: 24px;
    height: 24px}

.delete,.star {
    background-image: url(../img/svg/Bulk/Star.svg)}

.delete {
    background-image: url(../img/svg/Bulk/Delete.svg)}

.search-wrapper
    svg {
    stroke: #d6d7e3;
    position: absolute;
    left: 11px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    z-index: 1}

.lang-switcher
    svg {
    stroke: #b9b9b9}

.theme-switcher
    svg {
    width: 24px;
    height: 24px}

.theme-switcher
    circle {
    fill: #d6d7e3;
    stroke: #d6d7e3}

.theme-switcher
    line {
    stroke: #d6d7e3}

.users .primary-white-btn
    svg {
    margin-right: 5px}

.folder-list
    svg {
    color: #ffb648;
    fill: #ffb648}

.files-item__img
    svg {
    color: #fff;
    width: 27px;
    height: 27px}

.library-table-name
    span {
    width: 20px;
    height: 20px;
    padding: 2px 3px;
    margin-right: 5px;
    border-radius: 3px;
    color: #fff}

.library-table-name
    span.info {
    background-color: #5887ff}

.library-table-name
    span.danger {
    background-color: #f26464}

.library-table-name
    span.warning {
    background-color: #ffb648}

.library-table-name
    span.success {
    background-color: #4bde97}

.library-table-name
    span.purple {
    background-color: #5f2eea}

.dropzone-start
    svg {
    width: 60px;
    height: 60px;
    color: #d6d7e3;
    stroke-width: 1px}
    h1,h2,h3 {
    letter-spacing: 1px;
    color: #171717}

.h-1 {
    font-size: 64px;
    line-height: 1.03}

.h-2 {
    font-size: 48px;
    line-height: 1.04}

.h-3 {
    font-size: 32px;
    line-height: 1.06}

.main-title {
    font-weight: 700;
    font-size: 18px;
    line-height: 1.42;
    color: #132d64;
    margin-bottom: 20px}
    button {
    cursor: pointer;
    -webkit-transition: .3s all;
    -o-transition: .3s all;
    transition: .3s all;
    border: 2px solid transparent;
    }

.transparent-btn:
    focus,button:focus {
    outline: 0;
    /* border: 2px solid #afbcff!important; */
}
    button.disabled {
    cursor: default;
    color: #d6d7e3}
    button.disabled:hover {
    color: #d6d7e3}
    button.disabled:focus {
    border-color: transparent!important;
    outline: 0}

.main-btns-wrapper
    button,.main-btns-wrapper select {
    min-height: 48px;
    line-height: 1.5}

.transparent-btn {
    background-color: transparent;
    border: 2px solid transparent!important}

.primary-default-btn,.primary-white-btn,.secondary-default-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    border-radius: 4px;
    padding: 10px 20px}

.primary-default-btn {
    background-color: #2f49d1;
    color: #fff}

.primary-default-btn:
    hover {
    background-color: #4661f0;
    color: #fff}

.primary-white-btn,.secondary-default-btn {
    color: #2f49d1}

.primary-white-btn {
    background-color: #fff;
    font-weight: 500;
    font-size: 14px;
    line-height: 2.43}

.primary-white-btn:
    hover {
    color: #4661f0}

.secondary-default-btn {
    border: 2px solid #2f49d1;
    background-color: transparent}

.flat-btn,.secondary-default-btn:
    hover,.users-table tbody tr.active td {
    background-color: rgba(47,73,209,.1)}

.flat-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 16px;
    line-height: 1.5;
    color: #2f49d1}

.sidebar-toggle {
    /* opacity: .6; */
    -webkit-transition: .3s all;
    -o-transition: .3s all;
    transition: .3s all;
    /* background: #73190F; */
    /* border: 1px solid #fff !important; */
}

.sidebar-toggle:
    hover {
    opacity: 1}

.category__btn.rotated .icon,.sidebar-toggle.rotated {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)}

.category__btn,.gray-circle-btn,.ligt-circle-btn {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 50%}

.category__btn {
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    right: 0;
    top: 13px;
    z-index: 1}

.gray-circle-btn,.ligt-circle-btn {
    width: 40px;
    height: 40px;
    border-width: 0}

.gray-circle-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #eff0f6}

.ligt-circle-btn {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    background-color: #f5efff}

.lang-switcher,.ligt-circle-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center}

.extentions-btn,.nav-user-btn {
    background-color: transparent;
    }

.extentions-btn {
    border: 1px solid #eee!important;
    border-radius: 4px;
    padding: 5px 20px;
    color: #f26464}

.extentions-btn.disabled {
    color: #d6d7e3}

.filter-btn
    svg {
    margin-right: 6px}

.sort-btn {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap}

.folder-btn,.sort-btn,.tag-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center}

.tag-btn {
    font-weight: 600;
    font-size: 12px;
    line-height: 1.67;
    color: #d6d7e3;
    padding: 2px 8px;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 4px}

.tag-btn
    svg {
    margin-left: 8px;
    width: 16px;
    height: 16px}

.folder-btn {
    width: 30px;
    height: 30px;
    background-color: #eff0f6;
    border-radius: 5px}

.folder-btn
    svg {
    width: 16px;
    height: 16px;
    color: #b9b9b9}

.media-table-btn,.upgrade-btn {
    border-radius: 4px;
    font-size: 16px;
    line-height: 1.5}

.upgrade-btn {
    padding: 10px 17px;
    background: rgba(0,97,247,.1);
    font-style: normal;
    font-weight: 500;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    color: #5f2eea}

.upgrade-btn:
    hover {
    color: #5f2eea;
    background: rgba(0,97,247,.15)}

.upgrade-btn
    svg {
    margin-left: 10px}

.media-table-btn {
    padding: 10px 20px;
    background-color: transparent;
    border: 2px solid #eee;
    color: #b9b9b9}

.view-sort-btn {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background-color: #eff0f6;
    color: #d6d7e3}

.view-sort-btn:
    hover {
    color: #fff;
    background-color: #e0e3f1}

.dropdown-btn {
    color: #b9b9b9}

.link-info {
    color: #5887ff;
    border-bottom: dashed 1px transparent}

.link-info:
    hover {
    color: #5887ff;
    border-bottom-color: #5887ff}

.dropdown {
    position: absolute;
    padding: 5px 10px;
    background-color: #fff;
    -webkit-box-shadow: 0 -2px 24px rgba(160,163,189,.25);
    box-shadow: 0 -2px 24px rgba(160,163,189,.25);
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: .3s all;
    -o-transition: .3s all;
    transition: .3s all;
    z-index: 3}

.dropdown::
    before {
    content: '';
    position: absolute;
    right: 6px;
    top: -10px;
    border-style: solid;
    border-width: 0 15px 15px;
    border-color: transparent transparent #fff}

.dropdown
    li:last-child a {
    border-width: 0}

.dropdown
    a {
    display: inline-block;
    width: 100%;
    font-weight: 500;
    font-size: 14px;
    line-height: 2.43;
    color: #3e4095;
    border-bottom: 1px solid #eee;
    text-align: left}

.dropdown
    a:hover {
    color: #2f49d1}

.badge-active,.badge-disabled,.badge-pending,.badge-success,.badge-trashed {
    padding: 1px;
    width: 85px;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.67;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    border-radius: 100px;
    text-align: center}

.badge-active {
    color: #5887ff;
    background-color: rgba(88,135,255,.1)}

.badge-pending {
    color: #ffb648;
    background-color: rgba(255,172,50,.1)}

.badge-disabled {
    color: #fff;
    background-color: #ffb648}

.badge-trashed {
    color: #f26464;
    background-color: rgba(245,91,93,.1)}

.badge-success {
    color: #4bde97;
    background-color: rgba(75,222,151,.1)}
    input {
    border-radius: 6px;
    background-color: #eff0f6;
    min-height: 40px;
    border: solid transparent 2px!important}
    input[type=checkbox],input[type=radio] {
    min-height: auto}
    input[type=radio] {
    width: 24px;
    height: 24px;
    margin-right: 19px}
    input[type=radio]:focus {
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none}

.form-input::
    -webkit-input-placeholder,input::-webkit-input-placeholder {
    font-weight: 500;
    font-size: 14px;
    line-height: 2.43;
    color: #d6d7e3}

.form-input::
    -moz-placeholder,input::-moz-placeholder {
    font-weight: 500;
    font-size: 14px;
    line-height: 2.43;
    color: #d6d7e3}
    input:-ms-input-placeholder,input::-ms-input-placeholder {
    font-weight: 500;
    font-size: 14px;
    line-height: 2.43;
    color: #d6d7e3}
    input::placeholder {
    font-weight: 500;
    font-size: 14px;
    line-height: 2.43;
    color: #d6d7e3}
    input:focus {
    outline: 0;
    border: rgba(134,182,254,.5) solid!important;
    -webkit-box-shadow: 0 0 0 2px rgba(134,182,254,.5);
    box-shadow: 0 0 0 2px rgba(134,182,254,.5)}
    input:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-calendar-picker-indicator {
    display: none!important}

.check {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap}
    label {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    cursor: pointer}

.new-page-content
    input {
    padding: 5px 16px}

.users-table
    table,.users-table-info {
    line-height: 1.4;
    letter-spacing: -.3px;
    color: #3e4095}

.users-table
    table {
    width: 100%;
    text-align: left;
    border-collapse: collapse;
    -webkit-transition: none;
    -o-transition: none;
    transition: none}

.users-table-info {
    height: 48px;
    border-bottom: 1.2px solid #dadbe4;
    font-size: 14px}

.users-table-info
    th {
    font-weight: 500}

.users-table__checkbox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    cursor: pointer;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content}

.footer-end
    li,.users-table__checkbox input {
    margin-right: 20px}

.users-table
    td {
    background-color: #fff;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding-top: 15px;
    padding-bottom: 15px}

.users-table
    td:first-child {
    padding-left: 20px}

.users-table
    tbody {
    font-size: 14px}

.users-table
    tbody tr:last-child .users-item-dropdown {
    bottom: 250%;
    top: auto}

.users-table
    tbody tr:last-child .users-item-dropdown::before {
    bottom: -10px;
    top: auto;
    border-width: 15px 15px 0;
    border-color: #fff transparent transparent}

.users-table .users-item-dropdown {
    right: -9px;
    top: 150%}

.users-table
    img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 7px}

.table-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    margin-bottom: 20px}

.table-wrapper
    table {
    min-width: 850px}

.table-wrapper
    table.posts-table {
    min-width: 944px}

.table-wrapper
    table.library-table {
    min-width: 483px}

.sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    background-color: #fff !important;
    width: 253px;
    padding: 0px 15px 37px 20px;
    /* -webkit-transition: .5s all; */
    -o-transition: .5s all;
    /* transition: .5s all; */
    min-height: 100vh;
    /* background-image: url(https://cdhue.phanmemdaotao.edu.vn/App_Themes/Default/images/Header/navbar-bg.png) !important; */
    /* background-image: url(../img/navbar-bg.png) !important; */
    /* background-image: url(/Media/NewImage/navbar-bg.png) !important; */
}

.sidebar
    a:focus {
    outline: 0}

.sidebar-head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,.1);
    border-bottom: 1px solid #3e4095;
}

.sidebar-body {
    padding-top: 20px;
}

.sidebar-body-menu
    a,.sidebar-user {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap}

.sidebar-body-menu
    a {
    position: relative;
    padding: 5px 0;
    /* opacity: .6; */
    color: #3e4095;
    font-weight: 500;
    font-size: 14px;
    line-height: 2.43}

.sidebar-body-menu
    a::after {
    position: absolute;
    content: '';
    height: 22px;
    width: 3px;
    right: -11px;
    border-radius: 10px;
    background-color: #3e4095;
    opacity: 0;
    -webkit-transition: .3s all;
    -o-transition: .3s all;
    transition: .3s all}

.cat-sub-menu.visible
    a:hover,.sidebar-body-menu a.active,.sidebar-body-menu a.active::after,.sidebar-body-menu a:hover,.sidebar-body-menu a:hover::after {
    opacity: 1}

.sidebar-user {
    border-radius: 10px;
    padding: 5px;
    background-color: rgba(255,255,255,.1)}

.sidebar-body-menu
    a,.sidebar-user,.sidebar-user-img,.sidebar-user-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex}

.sidebar-user-img {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    margin-right: 8px;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    overflow: hidden;
    background-color: #fff}

.sidebar-user-info {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column}

.sidebar-user__title {
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .75px;
    color: #fff}

.sidebar-user__subtitle {
    font-weight: 500;
    font-size: 10px;
    line-height: 1.5;
    letter-spacing: .86px;
    color: rgba(255,255,255,.5)}

.logo {
    /* margin-right: 9px; */
    /* color: #73190F; */
}

.logo-text,.logo-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
}

.logo-wrapper {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap}

.logo-text {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    color: #3e4095;
}

.logo-subtitle,.logo-title {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.4;
    /* letter-spacing: .86px; */
    color: #73190F;
    color: #fff;
    color: #3e4095;
}

.logo-subtitle {
    font-size: 12px;
    font-weight: 500;
    line-height: 2.42}

.msg-counter,.system-menu__title {
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: .75px}

.msg-counter {
    position: absolute;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 20px;
    height: 20px;
    background-color: #f26464;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 12px!important;
    color: #fff}

.system-menu__title {
    display: inline-block;
    margin-top: 13px;
    margin-bottom: 2px;
    text-transform: uppercase;
    font-size: 14px;
    color: rgba(255,255,255,.5);
    /* color: #73190F !important; */
    color: #ffffff;
    /* border-bottom: 3px solid #fff; */
    font-weight: 800;
    color: #132d64;
    color: #3e4095;
}

.cat-sub-menu {
    padding-left: 34px;
    height: 0}

.cat-sub-menu.visible {
    height: auto}

.cat-sub-menu.visible
    a {
    opacity: .6;
    visibility: visible}

.cat-sub-menu
    a {
    opacity: 0;
    visibility: hidden}

.category__btn .icon {
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s}

.main-nav {
    padding-top: 10px;
    padding-bottom: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    background-image: url('../img/top-header.png');
    background-image: url(https://cdhue.phanmemdaotao.edu.vn/App_Themes/Default/Images/Header/header-bg.png);
    background: #07689f;
    border-left: 1px solid #eff1f9;
    background: #fff;
}

.main-nav
    a:focus {
    outline: 0}

.main-nav--bg {
    -webkit-transition: .3s all;
    -o-transition: .3s all;
    transition: .3s all;
    /* background-color: #fff; */
    /* border-radius: 10px; */
}

.main-nav-end {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center}

.main-nav-end>* {
    margin-right: 15px}

.footer-end
    li:last-child,.main-btns-wrapper button:last-child,.main-nav-end>:last-child,.sort-bar .select-wrapper:last-child .select {
    margin-right: 0}

.main-nav .notification,.main-nav .notification-wrapper {
    position: relative}

.main-nav .notification::
    after {
    display: none;
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    border-radius: 50%;
    height: 9px;
    width: 9px;
    border: 1px solid #fff;
    background-color: #f26464}

.main-nav .notification.active::
    after {
    display: initial}

.main-nav .notification-dropdown {
    right: 0;
    width: 236px;
    padding: 10px}

.main-nav .notification-dropdown-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 167px}

.main-nav .notification-dropdown__title {
    font-weight: 500;
    font-size: 14px;
    line-height: 1.22;
    color: #171717;
    margin-bottom: 5px}

.main-nav .notification-dropdown__subtitle {
    font-size: 10px;
    line-height: 1.2;
    color: #3e4095}

.main-nav .notification-dropdown-icon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%}

.main-nav .notification-dropdown-icon.info {
    background-color: rgba(88,135,255,.1);
    color: #5887ff}

.main-nav .notification-dropdown-icon.danger {
    background-color: rgba(242,100,100,.1);
    color: #f26464}

.main-nav .notification-dropdown
    a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-bottom: 10px;
    padding-top: 15px}

.main-nav .notification-dropdown
    a.link-to-page {
    padding-top: 17px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-weight: 500;
    font-size: 12px;
    line-height: 15px;
    color: #5887ff}

.main-nav .nav-user-wrapper,.search-wrapper {
    position: relative}

.main-nav .nav-user-wrapper .users-item-dropdown {
    width: 171px;
    right: 0}

.main-nav .nav-user-wrapper .users-item-dropdown
    svg {
    margin-right: 13px}

.main-nav .nav-user-img,.main-nav .nav-user-img
    picture,.main-nav .nav-user-wrapper .users-item-dropdown a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center}

.main-nav .nav-user-wrapper .users-item-dropdown
    a.danger {
    color: #f26464}

.main-nav .nav-user-img {
    border-radius: 50%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: hidden;
    width: 40px;
    height: 40px;
    background-color: #f5efff}

.main-nav .nav-user-img
    picture {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end}

.search-wrapper
    input {
    width: 271px;
    border-radius: 6px;
    background-color: #eff0f6;
    padding: 3px 8px 3px 42px;
    height: 40px;
    border-width: 0}

.search-wrapper
    input::-webkit-input-placeholder {
    background-color: #eff0f6;
    font-size: 14px;
    line-height: 2.43;
    color: #d6d7e3;
    -webkit-transition: .3s all;
    transition: .3s all}

.search-wrapper
    input::-moz-placeholder {
    background-color: #eff0f6;
    font-size: 14px;
    line-height: 2.43;
    color: #d6d7e3;
    -moz-transition: .3s all;
    transition: .3s all}

.search-wrapper
    input:-ms-input-placeholder,.search-wrapper input::-ms-input-placeholder {
    background-color: #eff0f6;
    font-size: 14px;
    line-height: 2.43;
    color: #d6d7e3;
    -ms-transition: .3s all;
    transition: .3s all}

.search-wrapper
    input::placeholder {
    background-color: #eff0f6;
    font-size: 14px;
    line-height: 2.43;
    color: #d6d7e3;
    -webkit-transition: .3s all;
    -o-transition: .3s all;
    transition: .3s all}

.lang-switcher {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.1875;
    letter-spacing: .75px;
    color: #3e4095}

.lang-switcher-wrapper {
    position: relative}

.lang-menu {
    top: 40px;
    right: 0;
    width: 125px}

.lang-menu.active {
    opacity: 1;
    visibility: visible}

.sort-bar {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 20px 36px 20px 20px;
    background-color: #fff;
    -webkit-box-shadow: 0 1px 0 #dadbe4;
    box-shadow: 0 1px 0 #dadbe4;
    border-radius: 10px 10px 0 0}

.sort-bar .search-wrapper {
    position: relative;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content}

.sort-bar .search-wrapper
    input {
    padding: 5px 42px 5px 16px}

.sort-bar .search-wrapper
    svg {
    left: auto;
    right: 16px}

.sort-bar .select {
    min-width: 185px;
    margin-right: 20px}

.sort-bar .select.small {
    min-width: 142px}

.sort-bar .filter-btn {
    min-width: 106px}

.sort-bar,.sort-bar-end {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap}

.categories-sort-bar .sort-bar-end {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end}

.stat-cards {
    margin-right: -10px;
    margin-left: -10px}

.stat-cards>
    div {
    padding-left: 10px;
    padding-right: 10px}

.stat-cards-icon,.stat-cards-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap}

.stat-cards-item {
    padding: 24px 19px;
    background-color: #fff;
    -webkit-box-shadow: 0 15px 50px rgba(160,163,189,.1);
    box-shadow: 0 15px 50px rgba(160,163,189,.1);
    border-radius: 10px;
    height: 100%}

.stat-cards-icon {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 9px}

.stat-cards-icon.primary {
    background-color: rgba(47,73,209,.1);
    color: #2f49d1}

.stat-cards-icon.warning {
    background-color: rgba(255,182,72,.1);
    color: #ffb648}

.stat-cards-icon.purple {
    background-color: rgba(95,46,234,.1);
    color: #5f2eea}

.stat-cards-icon.success {
    background-color: rgba(75,222,151,.1);
    color: #4bde97}

.stat-cards-info__num {
    font-weight: 600;
    font-size: 18px;
    line-height: 1.22;
    color: #171717;
    margin-bottom: 4px}

.stat-cards-info__title {
    font-weight: 500;
    font-size: 14px;
    line-height: 1.22;
    color: #b9b9b9;
    margin-bottom: 6px}

.stat-cards-info__profit,.stat-cards-info__progress {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 14px;
    line-height: 1.22}

.stat-cards-info__progress {
    color: #b9b9b9}

.stat-cards-info__profit {
    margin-right: 10px}

.stat-cards-info__profit.success {
    color: #4bde97}

.stat-cards-info__profit.danger {
    color: #f26464}

.stat-cards-info__profit.warning {
    color: #ffb648}

.stat-cards-info__profit
    svg {
    width: 16px;
    height: 16px;
    margin-right: 5px}

.chart #myChart,.customers-wrapper {
    -webkit-box-shadow: 0 15px 50px rgba(160,163,189,.1);
    box-shadow: 0 15px 50px rgba(160,163,189,.1)}

.customers-wrapper {
    height: 256px;
    background-color: #5f2eea;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    margin-bottom: 20px}

.customers-wrapper
    img {
    position: absolute;
    max-width: none;
    bottom: 0;
    left: -10px}

.customers__title,.top-cat-title
    h3 {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 4px}

.customers__date,.customers__title {
    line-height: 1.4;
    letter-spacing: -.5px;
    color: #fff}

.customers__title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center}

.customers__date {
    font-weight: 500;
    font-size: 14px;
    opacity: .5}

.top-cat-title {
    margin-bottom: 10px}

.top-cat-title
    h3 {
    font-style: normal;
    line-height: 1.2;
    letter-spacing: -.4px;
    color: #171717}

.top-cat-list__subtitle
    span,.top-cat-title p {
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.4px}

.top-cat-title
    p {
    font-size: 12px;
    color: #b9b9b9}

.top-cat-list
    a {
    display: block;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee}

.top-cat-list__subtitle,.top-cat-list__title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: -.4px}

.top-cat-list__title {
    font-weight: 600;
    color: #171717;
    margin-bottom: 4px}

.top-cat-list__subtitle {
    color: #b9b9b9}

.top-cat-list__subtitle
    span {
    font-size: 10px;
    padding: 2px 4px;
    border-radius: 3px}

.top-cat-list__subtitle .blue,.top-cat-list__subtitle .purple {
    color: #5f2eea;
    background-color: rgba(116,51,255,.1)}

.top-cat-list__subtitle .blue {
    color: #0061f7}

.top-cat-list__subtitle .danger {
    color: #f26464;
    background-color: rgba(245,91,93,.1)}

.top-cat-list__subtitle .success {
    color: #4bde97;
    background-color: rgba(75,222,151,.1)}

.top-cat-list__subtitle .warning {
    color: #ffb648;
    background-color: rgba(255,172,50,.1)}

.top-cat-list__subtitle .primary {
    color: #2f49d1;
    background-color: rgba(47,73,209,.1)}

.chart {
    width: 100%;
    height: 370px;
    margin-bottom: 20px;
    -webkit-box-shadow: 0 15px 50px 0 rgba(160,163,189,.1);
    box-shadow: 0 15px 50px 0 rgba(160,163,189,.1)}

.chart #myChart {
    max-height: 100%!important;
    max-width: 100%!important}

.main {
    padding-top: 20px;
    padding-bottom: 20px;
    margin-bottom: 60px}

.chart #myChart,.main-content {
    background-color: #fff;
    border-radius: 10px;
    padding: 20px}

.main-content {
    margin-top: 20px;
    margin-bottom: 20px;
    min-height: 65vh}

.main-title-wrapper {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 34px}

.main-title-wrapper
    h2 {
    margin-bottom: 0}

.main-title-wrapper .primary-default-btn
    svg {
    margin-right: 9px}

.main-btns-wrapper,.main-title-wrapper,.users-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex}

.main-btns-wrapper {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap}

.main-btns-wrapper
    button {
    margin-right: 10px}

.users .col-xl-3 {
    margin-bottom: 20px}

.users-item {
    position: relative;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 100%;
    border-radius: 10px;
    background-color: #fff;
    text-align: center}

.users-item
    a:focus {
    outline: 0}

.users-item-body {
    padding: 20px 20px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center}

.users-item__img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 10px}

.users-item__name {
    font-weight: 600;
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: -.3px;
    color: #171717}

.users-item__desc,.users-item__role {
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: -.3px;
    color: #3e4095}

.users-item__desc {
    max-width: 231px;
    font-size: 12px;
    margin-bottom: 15px}

.users-item__more {
    position: absolute;
    top: 20px;
    right: 20px;
    opacity: .5}

.users-item-dropdown {
    right: 20px;
    top: 60px;
    width: 125px;
    padding: 5px 10px;
    background-color: #fff;
    -webkit-box-shadow: 0 -2px 24px rgba(160, 163, 189, .25);
    box-shadow: 0 -2px 24px rgba(160, 163, 189, .25);
    border-radius: 4px;
    box-shadow: 0 15px 50px 0 rgba(160, 163, 189, .1);
    border: 1px solid #c5cbe5;
    }

.users-item-dropdown.active {
    opacity: 1;
    visibility: visible}

.users-item .primary-white-btn {
    border-top: 1px solid #eee;
    width: 100%}

.footer {
    border-top: 1px solid #e0e1ea;
    padding-top: 14px;
    padding-bottom: 14px;
    color: #b9b9b9;
    font-size: 12px}

.footer--flex {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between}

.footer
    a,.footer-start p {
    font-weight: 500;
    line-height: 2.83}

.footer--flex,.footer-end {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center}

.footer
    a {
    border-bottom: 1px transparent dashed}

.footer
    a:hover {
    color: #2f49d1;
    border-color: #2f49d1}

.form {
    -webkit-box-shadow: 0 5px 10px rgba(160,163,189,.1);
    box-shadow: 0 5px 10px rgba(160,163,189,.1);
    border-radius: 10px;
    padding: 40px 40px 56px;
    background-color: #fff;
    text-align: left}

.form-label {
    font-weight: 500;
    font-size: 14px;
    line-height: 2.43;
    color: #171717;
    cursor: pointer;
    margin-bottom: 5px;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content}

.form-label-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%}

.form-input {
    border-radius: 8px;
    border-width: 0;
    margin-bottom: 15px;
    padding: 5px 16px;
    height: 44px;
    background: #eff0f6}

.form-input:
    -ms-input-placeholder,.form-input::-ms-input-placeholder {
    font-weight: 500;
    font-size: 14px;
    line-height: 2.43;
    color: #d6d7e3}

.form-input::
    placeholder {
    font-weight: 500;
    font-size: 14px;
    line-height: 2.43;
    color: #d6d7e3}

.form-checkbox {
    margin-right: 12px}

.form-checkbox-label {
    font-family: Inter;
    font-size: 14px;
    line-height: 1.71;
    color: #3e4095}

.form-checkbox-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    cursor: pointer;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    margin-bottom: 20px}

.form-btn {
    width: 100%}

.forget-link {
    font-weight: 500;
    font-size: 14px;
    line-height: 2.43;
    border-bottom: dashed 1px transparent}

.forget-link:
    hover {
    color: #2f49d1;
    border-color: #2f49d1}

.sign-up__subtitle,.sign-up__title {
    text-align: center;
    margin-bottom: 20px}

.sign-up__title {
    font-size: 32px;
    line-height: 1.06;
    letter-spacing: 1px;
    color: #171717}

.sign-up__subtitle {
    max-width: 424px;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2;
    color: #3e4095}

.categories-table-img {
    margin-right: 26px}

.categories-table-img
    img {
    width: 71px;
    height: 47px;
    border-radius: 6px}

.darkmode {
    background-color: #11111d}

.darkmode .main-nav--bg {
    background-color: #161624}

.darkmode .search-wrapper
    input {
    color: #d6d7e3;
    background-color: #222235}

.darkmode .search-wrapper
    input::-webkit-input-placeholder {
    background-color: #222235}

.darkmode .search-wrapper
    input::-moz-placeholder {
    background-color: #222235}

.darkmode .search-wrapper
    input:-ms-input-placeholder,.darkmode .search-wrapper input::-ms-input-placeholder {
    background-color: #222235}

.darkmode .search-wrapper
    input::placeholder {
    background-color: #222235}

.darkmode .gray-circle-btn {
    background-color: #222235}

.darkmode .sun-icon,.moon-icon {
    display: none}

.darkmode .moon-icon {
    display: initial;
    fill: #fff}

.darkmode .sidebar {
    background-color: #161624!important}

.darkmode .dropdown {
    background-color: #11111d;
    -webkit-box-shadow: none;
    box-shadow: none}

.darkmode .dropdown::
    before {
    border-color: transparent transparent #11111d}

.darkmode .dropdown
    a {
    border-bottom-color: #2c2c42;
    color: #d6d7e3}

.darkmode .dropdown-btn {
    color: #b9b9b9}

.darkmode .notification-dropdown__title {
    color: #d6d7e3}

.darkmode .main-title {
    color: #eff0f6}

.darkmode #myChart,.darkmode .stat-cards-item {
    background-color: #222235;
    -webkit-box-shadow: none;
    box-shadow: none}

.darkmode .stat-cards-info__num {
    color: #eff0f6}

.darkmode .chart {
    -webkit-box-shadow: none;
    box-shadow: none}

.darkmode .sort-bar,.darkmode .users-table
    thead {
    background-color: #161624}

.darkmode .users-table {
    color: #eff0f6}

.darkmode .users-table-info {
    border-bottom-color: transparent;
    color: #eff0f6}

.darkmode .users-table
    td {
    background-color: #222235;
    border-color: transparent}

.darkmode .users-table
    tbody tr:last-child .users-item-dropdown::before {
    border-color: #11111d transparent transparent}

.darkmode .users-table.active
    td {
    background-color: #2c2c42}

.darkmode .sort-btn {
    color: #d6d7e3}

.darkmode .form {
    background-color: #161624}

.darkmode .form-label {
    color: #d6d7e3}

.darkmode .form-input {
    background-color: #222235;
    color: #d6d7e3}

.darkmode .sign-up__title,.darkmode .top-cat-title
    h3 {
    color: #eff0f6}

.darkmode .sign-up__subtitle {
    color: #d6d7e3}

.darkmode .new-page-content .ql-toolbar,.darkmode .new-page-content
    input {
    background-color: #363648;
    color: #d6d7e3}

.darkmode .white-block {
    background-color: #222235;
    color: #d6d7e3}

.darkmode .white-block__title {
    color: #d6d7e3}

.darkmode .white-block .radio {
    background-color: #37374b}

.darkmode .main-content {
    background-color: #161624}

.darkmode .top-cat-list
    a {
    border-color: #37374f}

.darkmode .top-cat-list__title {
    color: #eff0f6}

.darkmode .pagination
    a {
    opacity: .5;
    color: #fff}

.darkmode .pagination
    a.active {
    opacity: 1}

.darkmode .badge-disabled {
    background-color: rgba(255,182,72,.1);
    color: #ffb648}

.darkmode .primary-white-btn {
    border: 1px solid #222235!important;
    background-color: #161624}

.darkmode .footer {
    border-top-color: #222235}

.darkmode .menu-toggle--gray {
    background-image: url(../img/svg/Bulk/Menu-toggle-white.svg)}
    @media (min-width: 576px) {
    .container {
        max-width:540px}

    .col-sm {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%}

    .col-sm-auto {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: none}

    .col-sm-1,.col-sm-2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 8.33333%;
    flex: 0 0 8.33333%;
    max-width: 8.33333%}

    .col-sm-2 {
    -ms-flex: 0 0 16.66667%;
    flex: 0 0 16.66667%;
    max-width: 16.66667%}

    .col-sm-3,.col-sm-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%}

    .col-sm-4 {
    -ms-flex: 0 0 33.33333%;
    flex: 0 0 33.33333%;
    max-width: 33.33333%}

    .col-sm-5,.col-sm-6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 41.66667%;
    flex: 0 0 41.66667%;
    max-width: 41.66667%}

    .col-sm-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%}

    .col-sm-7,.col-sm-8 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 58.33333%;
    flex: 0 0 58.33333%;
    max-width: 58.33333%}

    .col-sm-8 {
    -ms-flex: 0 0 66.66667%;
    flex: 0 0 66.66667%;
    max-width: 66.66667%}

    .col-sm-10,.col-sm-9 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%}

    .col-sm-10 {
    -ms-flex: 0 0 83.33333%;
    flex: 0 0 83.33333%;
    max-width: 83.33333%}

    .col-sm-11,.col-sm-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 91.66667%;
    flex: 0 0 91.66667%;
    max-width: 91.66667%}

    .col-sm-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%}
}
    @media (min-width: 768px) {
    .container {
        max-width:720px}

    .col-md {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%}

    .col-md-auto {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: none}

    .col-md-1,.col-md-2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 8.33333%;
    flex: 0 0 8.33333%;
    max-width: 8.33333%}

    .col-md-2 {
    -ms-flex: 0 0 16.66667%;
    flex: 0 0 16.66667%;
    max-width: 16.66667%}

    .col-md-3,.col-md-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%}

    .col-md-4 {
    -ms-flex: 0 0 33.33333%;
    flex: 0 0 33.33333%;
    max-width: 33.33333%}

    .col-md-5,.col-md-6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 41.66667%;
    flex: 0 0 41.66667%;
    max-width: 41.66667%}

    .col-md-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%}

    .col-md-7,.col-md-8 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 58.33333%;
    flex: 0 0 58.33333%;
    max-width: 58.33333%}

    .col-md-8 {
    -ms-flex: 0 0 66.66667%;
    flex: 0 0 66.66667%;
    max-width: 66.66667%}

    .col-md-10,.col-md-9 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%}

    .col-md-10 {
    -ms-flex: 0 0 83.33333%;
    flex: 0 0 83.33333%;
    max-width: 83.33333%}

    .col-md-11,.col-md-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 91.66667%;
    flex: 0 0 91.66667%;
    max-width: 91.66667%}

    .col-md-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%}
}
    @media (min-width: 992px) {
    .container {
        max-width:960px}

    .col-lg {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%}

    .col-lg-auto {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: none}

    .col-lg-1,.col-lg-2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 8.33333%;
    flex: 0 0 8.33333%;
    max-width: 8.33333%}

    .col-lg-2 {
    -ms-flex: 0 0 16.66667%;
    flex: 0 0 16.66667%;
    max-width: 16.66667%}

    .col-lg-3,.col-lg-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%}

    .col-lg-4 {
    -ms-flex: 0 0 33.33333%;
    flex: 0 0 33.33333%;
    max-width: 33.33333%}

    .col-lg-5,.col-lg-6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 41.66667%;
    flex: 0 0 41.66667%;
    max-width: 41.66667%}

    .col-lg-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%}

    .col-lg-7,.col-lg-8 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 58.33333%;
    flex: 0 0 58.33333%;
    max-width: 58.33333%}

    .col-lg-8 {
    -ms-flex: 0 0 66.66667%;
    flex: 0 0 66.66667%;
    max-width: 66.66667%}

    .col-lg-10,.col-lg-9 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%}

    .col-lg-10 {
    -ms-flex: 0 0 83.33333%;
    flex: 0 0 83.33333%;
    max-width: 83.33333%}

    .col-lg-11,.col-lg-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 91.66667%;
    flex: 0 0 91.66667%;
    max-width: 91.66667%}

    .col-lg-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%}
}
    @media (min-width: 1200px) {
    .container {
        max-width:1140px}

    .col-xl {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%}

    .col-xl-auto {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: none}

    .col-xl-1,.col-xl-2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 8.33333%;
    flex: 0 0 8.33333%;
    max-width: 8.33333%}

    .col-xl-2 {
    -ms-flex: 0 0 16.66667%;
    flex: 0 0 16.66667%;
    max-width: 16.66667%}

    .col-xl-3,.col-xl-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%}

    .col-xl-4 {
    -ms-flex: 0 0 33.33333%;
    flex: 0 0 33.33333%;
    max-width: 33.33333%}

    .col-xl-5,.col-xl-6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 41.66667%;
    flex: 0 0 41.66667%;
    max-width: 41.66667%}

    .col-xl-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%}

    .col-xl-7,.col-xl-8 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 58.33333%;
    flex: 0 0 58.33333%;
    max-width: 58.33333%}

    .col-xl-8 {
    -ms-flex: 0 0 66.66667%;
    flex: 0 0 66.66667%;
    max-width: 66.66667%}

    .col-xl-10,.col-xl-9 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%}

    .col-xl-10 {
    -ms-flex: 0 0 83.33333%;
    flex: 0 0 83.33333%;
    max-width: 83.33333%}

    .col-xl-11,.col-xl-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 91.66667%;
    flex: 0 0 91.66667%;
    max-width: 91.66667%}

    .col-xl-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%}

    .sidebar.hidden {
    width: 64px;
    padding-right: 4px;
    padding-left: 4px}

    .sidebar.hidden .logo-wrapper {
    display: none}

    .sidebar.hidden * {
    font-size: 0}

    .sidebar.hidden .sidebar-head {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: 20px;
    padding-bottom: 40px;
    border-bottom: 1px solid #fff;
    }

    .main-nav .sidebar-toggle,.sidebar.hidden .category__btn {
    display: none}

    .sidebar.hidden .sidebar-body-menu a {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding-top: 15px;
    padding-bottom: 15px}

    .sidebar.hidden .sidebar-body-menu a::
    after {
        right: -4px}

    .sidebar.hidden .sidebar-body-menu a>.icon {
    margin-right: 0}

    .sidebar.hidden .msg-counter {
    right: 10px;
    top: 30%}

    .sidebar.hidden .sidebar-user {
    width: 52px;
    height: 53px;
    margin-right: auto;
    margin-left: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center}

    .sidebar.hidden .sidebar-user-img {
    width: 40px;
    height: 40px;
    margin-right: 0}

    .sidebar.hidden .sidebar-user-img img {
    height: 100%;
    width: 100%}
}
    @media (min-width: 1520px) {
    .container {
        max-width:1480px}

    .col-xxl {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%}

    .col-xxl-auto {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: none}

    .col-xxl-1,.col-xxl-2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 8.33333%;
    flex: 0 0 8.33333%;
    max-width: 8.33333%}

    .col-xxl-2 {
    -ms-flex: 0 0 16.66667%;
    flex: 0 0 16.66667%;
    max-width: 16.66667%}

    .col-xxl-3,.col-xxl-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%}

    .col-xxl-4 {
    -ms-flex: 0 0 33.33333%;
    flex: 0 0 33.33333%;
    max-width: 33.33333%}

    .col-xxl-5,.col-xxl-6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 41.66667%;
    flex: 0 0 41.66667%;
    max-width: 41.66667%}

    .col-xxl-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%}

    .col-xxl-7,.col-xxl-8 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 58.33333%;
    flex: 0 0 58.33333%;
    max-width: 58.33333%}

    .col-xxl-8 {
    -ms-flex: 0 0 66.66667%;
    flex: 0 0 66.66667%;
    max-width: 66.66667%}

    .col-xxl-10,.col-xxl-9 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%}

    .col-xxl-10 {
    -ms-flex: 0 0 83.33333%;
    flex: 0 0 83.33333%;
    max-width: 83.33333%}

    .col-xxl-11,.col-xxl-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 91.66667%;
    flex: 0 0 91.66667%;
    max-width: 91.66667%}

    .col-xxl-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%}

    .customers-wrapper {
    height: auto}

    .customers-wrapper img {
    display: none}
}
    @media (max-width: 1300px) {
    .upgrade-btn {
        padding:10px 7px}

    .upgrade-btn svg {
    margin-left: 5px}

    .sort-bar .search-wrapper input {
    width: 174px}

    .categories-sort-bar .search-wrapper input {
    width: 271px}

    .chart {
    height: auto;
    max-height: 370px}
}
    @media (max-width: 1199.98px) {
    .sidebar {
        position:fixed;
    z-index: 2;
    overflow-y: auto;
    left: -1000px}

    .sidebar.hidden {
    left: 0}

    .main-nav {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse}

    .sort-bar {
    padding: 20px}

    .sort-bar .select {
    margin-right: 10px}
}
    @media (max-width: 991.98px) {
    .sort-bar-start {
        width:100%;
    margin-bottom: 10px}

    .sort-bar .search-wrapper,.sort-bar .search-wrapper input {
    width: 100%}

    .sort-bar .select {
    margin-right: 0;
    min-width: auto;
    width: 100%}

    .sort-bar-end {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%}

    .sort-bar-end .select-wrapper {
    width: 24%}

    .customers-wrapper {
    height: auto}

    .customers-wrapper img {
    display: none}
}
    @media (max-width: 767.98px) {
    .main-nav {
        -webkit-box-orient:vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse}

    .main-nav-start,.main-nav-start input {
    width: 100%}

    .main-nav-end {
    margin-bottom: 20px;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%}

    .sort-bar {
    padding-bottom: 10px}

    .sort-bar-end .select-wrapper {
    width: 48%;
    margin-bottom: 10px}
}
    @media (max-width: 575.98px) {
    .footer {
        position:relative}

    .main-btns-wrapper {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between}

    .main-btns-wrapper button,.main-btns-wrapper select {
    width: 48%;
    margin-right: 0;
    margin-bottom: 15px;
    font-size: 14px}

    .sort-bar {
    padding: 10px 10px 5px}

    .main {
    margin-bottom: 0}

    .footer--flex {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: center}
}
    @media (max-width: 480.98px) {
    .main-title {
        font-size:20px}

    .primary-default-btn {
    padding: 8px 15px}

    .sort-bar-end .select-wrapper {
    width: 49%}

    .footer-start p {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column}
}

/*# sourceMappingURL=style.min.css.map */;
}

.main-nav a:focus {
    outline: 0
}

.main-nav--bg {
    -webkit-transition: .3s all;
    -o-transition: .3s all;
    transition: .3s all;
    /* background-color: #fff; */
    /* border-radius: 10px; */
}

.main-nav-end {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.main-nav-end>* {
    margin-right: 15px
}

.footer-end li:last-child,.main-btns-wrapper button:last-child,.main-nav-end>:last-child,.sort-bar .select-wrapper:last-child .select {
    margin-right: 0
}

.main-nav .notification,.main-nav .notification-wrapper {
    position: relative
}

.main-nav .notification::after {
    display: none;
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    border-radius: 50%;
    height: 9px;
    width: 9px;
    border: 1px solid #fff;
    background-color: #f26464
}

.main-nav .notification.active::after {
    display: initial
}

.main-nav .notification-dropdown {
    right: 0;
    width: 236px;
    padding: 10px
}

.main-nav .notification-dropdown-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 167px
}

.main-nav .notification-dropdown__title {
    font-weight: 500;
    font-size: 14px;
    line-height: 1.22;
    color: #171717;
    margin-bottom: 5px
}

.main-nav .notification-dropdown__subtitle {
    font-size: 10px;
    line-height: 1.2;
    color: #3e4095
}

.main-nav .notification-dropdown-icon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%
}

.main-nav .notification-dropdown-icon.info {
    background-color: rgba(88,135,255,.1);
    color: #5887ff
}

.main-nav .notification-dropdown-icon.danger {
    background-color: rgba(242,100,100,.1);
    color: #f26464
}

.main-nav .notification-dropdown a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-bottom: 10px;
    padding-top: 15px
}

.main-nav .notification-dropdown a.link-to-page {
    padding-top: 17px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-weight: 500;
    font-size: 12px;
    line-height: 15px;
    color: #5887ff
}

.main-nav .nav-user-wrapper,.search-wrapper {
    position: relative
}

.main-nav .nav-user-wrapper .users-item-dropdown {
    width: 171px;
    right: 0
}

.main-nav .nav-user-wrapper .users-item-dropdown svg {
    margin-right: 13px
}

.main-nav .nav-user-img,.main-nav .nav-user-img picture,.main-nav .nav-user-wrapper .users-item-dropdown a {
    /* display: -webkit-box; */
    display: -ms-flexbox;
    /* display: flex; */
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: inline-block;
    width: 100%;
    /* font-weight: 500; */
    /* font-size: 14px; */
    /* line-height: 2.43; */
    /* color: #3e4095; */
    border-bottom: 1px solid #eee;
    text-align: left;
    color: #3e4095;
    font-weight: 500;
    font-size: 14px;
    line-height: 2.43;
}

.main-nav .nav-user-wrapper .users-item-dropdown a.danger {
    color: #f26464
}

.main-nav .nav-user-img {
    border-radius: 50%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: hidden;
    width: 40px;
    height: 40px;
    background-color: #f5efff
}

.main-nav .nav-user-img picture {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end
}

.search-wrapper input {
    width: 271px;
    border-radius: 6px;
    background-color: #eff0f6;
    padding: 3px 8px 3px 42px;
    height: 40px;
    border-width: 0
}

.search-wrapper input::-webkit-input-placeholder {
    background-color: #eff0f6;
    font-size: 14px;
    line-height: 2.43;
    color: #d6d7e3;
    -webkit-transition: .3s all;
    transition: .3s all
}

.search-wrapper input::-moz-placeholder {
    background-color: #eff0f6;
    font-size: 14px;
    line-height: 2.43;
    color: #d6d7e3;
    -moz-transition: .3s all;
    transition: .3s all
}

.search-wrapper input:-ms-input-placeholder,.search-wrapper input::-ms-input-placeholder {
    background-color: #eff0f6;
    font-size: 14px;
    line-height: 2.43;
    color: #d6d7e3;
    -ms-transition: .3s all;
    transition: .3s all
}

.search-wrapper input::placeholder {
    background-color: #eff0f6;
    font-size: 14px;
    line-height: 2.43;
    color: #d6d7e3;
    -webkit-transition: .3s all;
    -o-transition: .3s all;
    transition: .3s all
}

.lang-switcher {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.1875;
    letter-spacing: .75px;
    color: #3e4095
}

.lang-switcher-wrapper {
    position: relative
}

.lang-menu {
    top: 40px;
    right: 0;
    width: 125px
}

.lang-menu.active {
    opacity: 1;
    visibility: visible
}

.sort-bar {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 20px 36px 20px 20px;
    background-color: #fff;
    -webkit-box-shadow: 0 1px 0 #dadbe4;
    box-shadow: 0 1px 0 #dadbe4;
    border-radius: 10px 10px 0 0
}

.sort-bar .search-wrapper {
    position: relative;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content
}

.sort-bar .search-wrapper input {
    padding: 5px 42px 5px 16px
}

.sort-bar .search-wrapper svg {
    left: auto;
    right: 16px
}

.sort-bar .select {
    min-width: 185px;
    margin-right: 20px
}

.sort-bar .select.small {
    min-width: 142px
}

.sort-bar .filter-btn {
    min-width: 106px
}

.sort-bar,.sort-bar-end {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.categories-sort-bar .sort-bar-end {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end
}

.stat-cards {
    margin-right: -10px;
    margin-left: -10px
}

.stat-cards>div {
    padding-left: 10px;
    padding-right: 10px
}

.stat-cards-icon,.stat-cards-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.stat-cards-item {
    padding: 24px 19px;
    background-color: #fff;
    -webkit-box-shadow: 0 15px 50px rgba(160,163,189,.1);
    box-shadow: 0 15px 50px rgba(160,163,189,.1);
    border-radius: 10px;
    height: 100%
}

.stat-cards-icon {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 9px
}

.stat-cards-icon.primary {
    background-color: rgba(47,73,209,.1);
    color: #2f49d1
}

.stat-cards-icon.warning {
    background-color: rgba(255,182,72,.1);
    color: #ffb648
}

.stat-cards-icon.purple {
    background-color: rgba(95,46,234,.1);
    color: #5f2eea
}

.stat-cards-icon.success {
    background-color: rgba(75,222,151,.1);
    color: #4bde97
}

.stat-cards-info__num {
    font-weight: 600;
    font-size: 18px;
    line-height: 1.22;
    color: #171717;
    margin-bottom: 4px
}

.stat-cards-info__title {
    font-weight: 500;
    font-size: 14px;
    line-height: 1.22;
    color: #b9b9b9;
    margin-bottom: 6px
}

.stat-cards-info__profit,.stat-cards-info__progress {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 14px;
    line-height: 1.22
}

.stat-cards-info__progress {
    color: #b9b9b9
}

.stat-cards-info__profit {
    margin-right: 10px
}

.stat-cards-info__profit.success {
    color: #4bde97
}

.stat-cards-info__profit.danger {
    color: #f26464
}

.stat-cards-info__profit.warning {
    color: #ffb648
}

.stat-cards-info__profit svg {
    width: 16px;
    height: 16px;
    margin-right: 5px
}

.chart #myChart,.customers-wrapper {
    -webkit-box-shadow: 0 15px 50px rgba(160,163,189,.1);
    box-shadow: 0 15px 50px rgba(160,163,189,.1)
}

.customers-wrapper {
    height: 256px;
    background-color: #5f2eea;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    margin-bottom: 20px
}

.customers-wrapper img {
    position: absolute;
    max-width: none;
    bottom: 0;
    left: -10px
}

.customers__title,.top-cat-title h3 {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 4px
}

.customers__date,.customers__title {
    line-height: 1.4;
    letter-spacing: -.5px;
    color: #fff
}

.customers__title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.customers__date {
    font-weight: 500;
    font-size: 14px;
    opacity: .5
}

.top-cat-title {
    margin-bottom: 10px
}

.top-cat-title h3 {
    font-style: normal;
    line-height: 1.2;
    letter-spacing: -.4px;
    color: #171717
}

.top-cat-list__subtitle span,.top-cat-title p {
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.4px
}

.top-cat-title p {
    font-size: 12px;
    color: #b9b9b9
}

.top-cat-list a {
    display: block;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee
}

.top-cat-list__subtitle,.top-cat-list__title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: -.4px
}

.top-cat-list__title {
    font-weight: 600;
    color: #171717;
    margin-bottom: 4px
}

.top-cat-list__subtitle {
    color: #b9b9b9
}

.top-cat-list__subtitle span {
    font-size: 10px;
    padding: 2px 4px;
    border-radius: 3px
}

.top-cat-list__subtitle .blue,.top-cat-list__subtitle .purple {
    color: #5f2eea;
    background-color: rgba(116,51,255,.1)
}

.top-cat-list__subtitle .blue {
    color: #0061f7
}

.top-cat-list__subtitle .danger {
    color: #f26464;
    background-color: rgba(245,91,93,.1)
}

.top-cat-list__subtitle .success {
    color: #4bde97;
    background-color: rgba(75,222,151,.1)
}

.top-cat-list__subtitle .warning {
    color: #ffb648;
    background-color: rgba(255,172,50,.1)
}

.top-cat-list__subtitle .primary {
    color: #2f49d1;
    background-color: rgba(47,73,209,.1)
}

.chart {
    width: 100%;
    height: 370px;
    margin-bottom: 20px;
    -webkit-box-shadow: 0 15px 50px 0 rgba(160,163,189,.1);
    box-shadow: 0 15px 50px 0 rgba(160,163,189,.1)
}

.chart #myChart {
    max-height: 100%!important;
    max-width: 100%!important
}

.main {
    padding-top: 20px;
    padding-bottom: 20px;
    margin-bottom: 60px
}

.chart #myChart,.main-content {
    background-color: #fff;
    border-radius: 10px;
    padding: 20px
}

.main-content {
    margin-top: 20px;
    margin-bottom: 20px;
    min-height: 65vh
}

.main-title-wrapper {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 34px
}

.main-title-wrapper h2 {
    margin-bottom: 0
}

.main-title-wrapper .primary-default-btn svg {
    margin-right: 9px
}

.main-btns-wrapper,.main-title-wrapper,.users-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.main-btns-wrapper {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.main-btns-wrapper button {
    margin-right: 10px
}

.users .col-xl-3 {
    margin-bottom: 20px
}

.users-item {
    position: relative;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 100%;
    border-radius: 10px;
    background-color: #fff;
    text-align: center
}

.users-item a:focus {
    outline: 0
}

.users-item-body {
    padding: 20px 20px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.users-item__img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 10px
}

.users-item__name {
    font-weight: 600;
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: -.3px;
    color: #171717
}

.users-item__desc,.users-item__role {
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: -.3px;
    color: #3e4095
}

.users-item__desc {
    max-width: 231px;
    font-size: 12px;
    margin-bottom: 15px
}

.users-item__more {
    position: absolute;
    top: 20px;
    right: 20px;
    opacity: .5
}

.users-item-dropdown {
    right: 20px;
    top: 60px;
    width: 125px
}

.users-item-dropdown.active {
    opacity: 1;
    visibility: visible
}

.users-item .primary-white-btn {
    border-top: 1px solid #eee;
    width: 100%
}

.footer {
    border-top: 1px solid #e0e1ea;
    padding-top: 14px;
    padding-bottom: 14px;
    color: #b9b9b9;
    font-size: 12px
}

.footer--flex {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.footer a,.footer-start p {
    font-weight: 500;
    line-height: 2.83
}

.footer--flex,.footer-end {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.footer a {
    border-bottom: 1px transparent dashed
}

.footer a:hover {
    color: #2f49d1;
    border-color: #2f49d1
}

.form {
    -webkit-box-shadow: 0 5px 10px rgba(160,163,189,.1);
    box-shadow: 0 5px 10px rgba(160,163,189,.1);
    border-radius: 10px;
    padding: 40px 40px 56px;
    background-color: #fff;
    text-align: left
}

.form-label {
    font-weight: 500;
    font-size: 14px;
    line-height: 2.43;
    color: #171717;
    cursor: pointer;
    margin-bottom: 0px;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content
}

.form-label-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%
}

.form-input {
    border-radius: 8px;
    border-width: 0;
    margin-bottom: 15px;
    padding: 5px 16px;
    height: 44px;
    background: #eff0f6
}

.form-input:-ms-input-placeholder,.form-input::-ms-input-placeholder {
    font-weight: 500;
    font-size: 14px;
    line-height: 2.43;
    color: #d6d7e3
}

.form-input::placeholder {
    font-weight: 500;
    font-size: 14px;
    line-height: 2.43;
    color: #d6d7e3
}

.form-checkbox {
    margin-right: 12px
}

.form-checkbox-label {
    font-family: Inter;
    font-size: 14px;
    line-height: 1.71;
    color: #3e4095
}

.form-checkbox-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    cursor: pointer;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    margin-bottom: 20px
}

.form-btn {
    width: 100%
}

.forget-link {
    font-weight: 500;
    font-size: 14px;
    line-height: 2.43;
    border-bottom: dashed 1px transparent
}

.forget-link:hover {
    color: #2f49d1;
    border-color: #2f49d1
}

.sign-up__subtitle,.sign-up__title {
    text-align: center;
    margin-bottom: 20px
}

.sign-up__title {
    font-size: 32px;
    line-height: 1.06;
    letter-spacing: 1px;
    color: #171717
}

.sign-up__subtitle {
    max-width: 424px;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2;
    color: #3e4095
}

.categories-table-img {
    margin-right: 26px
}

.categories-table-img img {
    width: 71px;
    height: 47px;
    border-radius: 6px
}

.darkmode {
    background-color: #11111d
}

.darkmode .main-nav--bg {
    background-color: #161624
}

.darkmode .search-wrapper input {
    color: #d6d7e3;
    background-color: #222235
}

.darkmode .search-wrapper input::-webkit-input-placeholder {
    background-color: #222235
}

.darkmode .search-wrapper input::-moz-placeholder {
    background-color: #222235
}

.darkmode .search-wrapper input:-ms-input-placeholder,.darkmode .search-wrapper input::-ms-input-placeholder {
    background-color: #222235
}

.darkmode .search-wrapper input::placeholder {
    background-color: #222235
}

.darkmode .gray-circle-btn {
    background-color: #222235
}

.darkmode .sun-icon,.moon-icon {
    display: none
}

.darkmode .moon-icon {
    display: initial;
    fill: #fff
}

.darkmode .sidebar {
    background-color: #161624!important
}

.darkmode .dropdown {
    background-color: #11111d;
    -webkit-box-shadow: none;
    box-shadow: none
}

.darkmode .dropdown::before {
    border-color: transparent transparent #11111d
}

.darkmode .dropdown a {
    border-bottom-color: #2c2c42;
    color: #d6d7e3
}

.darkmode .dropdown-btn {
    color: #b9b9b9
}

.darkmode .notification-dropdown__title {
    color: #d6d7e3
}

.darkmode .main-title {
    color: #eff0f6
}

.darkmode #myChart,.darkmode .stat-cards-item {
    background-color: #222235;
    -webkit-box-shadow: none;
    box-shadow: none
}

.darkmode .stat-cards-info__num {
    color: #eff0f6
}

.darkmode .chart {
    -webkit-box-shadow: none;
    box-shadow: none
}

.darkmode .sort-bar,.darkmode .users-table thead {
    background-color: #161624
}

.darkmode .users-table {
    color: #eff0f6
}

.darkmode .users-table-info {
    border-bottom-color: transparent;
    color: #eff0f6
}

.darkmode .users-table td {
    background-color: #222235;
    border-color: transparent
}

.darkmode .users-table tbody tr:last-child .users-item-dropdown::before {
    border-color: #11111d transparent transparent
}

.darkmode .users-table.active td {
    background-color: #2c2c42
}

.darkmode .sort-btn {
    color: #d6d7e3
}

.darkmode .form {
    background-color: #161624
}

.darkmode .form-label {
    color: #d6d7e3
}

.darkmode .form-input {
    background-color: #222235;
    color: #d6d7e3
}

.darkmode .sign-up__title,.darkmode .top-cat-title h3 {
    color: #eff0f6
}

.darkmode .sign-up__subtitle {
    color: #d6d7e3
}

.darkmode .new-page-content .ql-toolbar,.darkmode .new-page-content input {
    background-color: #363648;
    color: #d6d7e3
}

.darkmode .white-block {
    background-color: #222235;
    color: #d6d7e3
}

.darkmode .white-block__title {
    color: #d6d7e3
}

.darkmode .white-block .radio {
    background-color: #37374b
}

.darkmode .main-content {
    background-color: #161624
}

.darkmode .top-cat-list a {
    border-color: #37374f
}

.darkmode .top-cat-list__title {
    color: #eff0f6
}

.darkmode .pagination a {
    opacity: .5;
    color: #fff
}

.darkmode .pagination a.active {
    opacity: 1
}

.darkmode .badge-disabled {
    background-color: rgba(255,182,72,.1);
    color: #ffb648
}

.darkmode .primary-white-btn {
    border: 1px solid #222235!important;
    background-color: #161624
}

.darkmode .footer {
    border-top-color: #222235
}

.darkmode .menu-toggle--gray {
    background-image: url(../img/svg/Bulk/Menu-toggle-white.svg)
}

@media (min-width: 576px) {
    .container {
        max-width:540px
    }

    .col-sm {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%
    }

    .col-sm-auto {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: none
    }

    .col-sm-1,.col-sm-2 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 8.33333%;
        flex: 0 0 8.33333%;
        max-width: 8.33333%
    }

    .col-sm-2 {
        -ms-flex: 0 0 16.66667%;
        flex: 0 0 16.66667%;
        max-width: 16.66667%
    }

    .col-sm-3,.col-sm-4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%
    }

    .col-sm-4 {
        -ms-flex: 0 0 33.33333%;
        flex: 0 0 33.33333%;
        max-width: 33.33333%
    }

    .col-sm-5,.col-sm-6 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 41.66667%;
        flex: 0 0 41.66667%;
        max-width: 41.66667%
    }

    .col-sm-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%
    }

    .col-sm-7,.col-sm-8 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 58.33333%;
        flex: 0 0 58.33333%;
        max-width: 58.33333%
    }

    .col-sm-8 {
        -ms-flex: 0 0 66.66667%;
        flex: 0 0 66.66667%;
        max-width: 66.66667%
    }

    .col-sm-10,.col-sm-9 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%
    }

    .col-sm-10 {
        -ms-flex: 0 0 83.33333%;
        flex: 0 0 83.33333%;
        max-width: 83.33333%
    }

    .col-sm-11,.col-sm-12 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 91.66667%;
        flex: 0 0 91.66667%;
        max-width: 91.66667%
    }

    .col-sm-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%
    }
}

@media (min-width: 768px) {
    .container {
        max-width:720px
    }

    .col-md {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%
    }

    .col-md-auto {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: none
    }

    .col-md-1,.col-md-2 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 8.33333%;
        flex: 0 0 8.33333%;
        max-width: 8.33333%
    }

    .col-md-2 {
        -ms-flex: 0 0 16.66667%;
        flex: 0 0 16.66667%;
        max-width: 16.66667%
    }

    .col-md-3,.col-md-4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%
    }

    .col-md-4 {
        -ms-flex: 0 0 33.33333%;
        flex: 0 0 33.33333%;
        max-width: 33.33333%
    }

    .col-md-5,.col-md-6 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 41.66667%;
        flex: 0 0 41.66667%;
        max-width: 41.66667%
    }

    .col-md-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%
    }

    .col-md-7,.col-md-8 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 58.33333%;
        flex: 0 0 58.33333%;
        max-width: 58.33333%
    }

    .col-md-8 {
        -ms-flex: 0 0 66.66667%;
        flex: 0 0 66.66667%;
        max-width: 66.66667%
    }

    .col-md-10,.col-md-9 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%
    }

    .col-md-10 {
        -ms-flex: 0 0 83.33333%;
        flex: 0 0 83.33333%;
        max-width: 83.33333%
    }

    .col-md-11,.col-md-12 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 91.66667%;
        flex: 0 0 91.66667%;
        max-width: 91.66667%
    }

    .col-md-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%
    }
}

@media (min-width: 992px) {
    .container {
        max-width:960px
    }

    .col-lg {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%
    }

    .col-lg-auto {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: none
    }

    .col-lg-1,.col-lg-2 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 8.33333%;
        flex: 0 0 8.33333%;
        max-width: 8.33333%
    }

    .col-lg-2 {
        -ms-flex: 0 0 16.66667%;
        flex: 0 0 16.66667%;
        max-width: 16.66667%
    }

    .col-lg-3,.col-lg-4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%
    }

    .col-lg-4 {
        -ms-flex: 0 0 33.33333%;
        flex: 0 0 33.33333%;
        max-width: 33.33333%
    }

    .col-lg-5,.col-lg-6 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 41.66667%;
        flex: 0 0 41.66667%;
        max-width: 41.66667%
    }

    .col-lg-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%
    }

    .col-lg-7,.col-lg-8 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 58.33333%;
        flex: 0 0 58.33333%;
        max-width: 58.33333%
    }

    .col-lg-8 {
        -ms-flex: 0 0 66.66667%;
        flex: 0 0 66.66667%;
        max-width: 66.66667%
    }

    .col-lg-10,.col-lg-9 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%
    }

    .col-lg-10 {
        -ms-flex: 0 0 83.33333%;
        flex: 0 0 83.33333%;
        max-width: 83.33333%
    }

    .col-lg-11,.col-lg-12 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 91.66667%;
        flex: 0 0 91.66667%;
        max-width: 91.66667%
    }

    .col-lg-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%
    }
}

@media (min-width: 1200px) {
    .container {
        max-width:1140px
    }

    .col-xl {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%
    }

    .col-xl-auto {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: none
    }

    .col-xl-1,.col-xl-2 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 8.33333%;
        flex: 0 0 8.33333%;
        max-width: 8.33333%
    }

    .col-xl-2 {
        -ms-flex: 0 0 16.66667%;
        flex: 0 0 16.66667%;
        max-width: 16.66667%
    }

    .col-xl-3,.col-xl-4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%
    }

    .col-xl-4 {
        -ms-flex: 0 0 33.33333%;
        flex: 0 0 33.33333%;
        max-width: 33.33333%
    }

    .col-xl-5,.col-xl-6 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 41.66667%;
        flex: 0 0 41.66667%;
        max-width: 41.66667%
    }

    .col-xl-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%
    }

    .col-xl-7,.col-xl-8 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 58.33333%;
        flex: 0 0 58.33333%;
        max-width: 58.33333%
    }

    .col-xl-8 {
        -ms-flex: 0 0 66.66667%;
        flex: 0 0 66.66667%;
        max-width: 66.66667%
    }

    .col-xl-10,.col-xl-9 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%
    }

    .col-xl-10 {
        -ms-flex: 0 0 83.33333%;
        flex: 0 0 83.33333%;
        max-width: 83.33333%
    }

    .col-xl-11,.col-xl-12 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 91.66667%;
        flex: 0 0 91.66667%;
        max-width: 91.66667%
    }

    .col-xl-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%
    }

    .sidebar.hidden {
        width: 64px;
        padding-right: 4px;
        padding-left: 4px;
        min-width: 64px;
    }

    .sidebar.hidden .logo-wrapper {
        display: none
    }

    .sidebar.hidden * {
        font-size: 0
    }

    .sidebar.hidden .sidebar-head {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        margin-top: 20px;
        padding-bottom: 40px;
        border-bottom: 1px solid #fff;
    }

    .main-nav .sidebar-toggle,.sidebar.hidden .category__btn {
        display: none
    }

    .sidebar.hidden .sidebar-body-menu a {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        padding-top: 15px;
        padding-bottom: 15px
    }

    .sidebar.hidden .sidebar-body-menu a::after {
        right: -4px
    }

    .sidebar.hidden .sidebar-body-menu a>.icon {
        margin-right: 0
    }

    .sidebar.hidden .msg-counter {
        right: 10px;
        top: 30%
    }

    .sidebar.hidden .sidebar-user {
        width: 52px;
        height: 53px;
        margin-right: auto;
        margin-left: auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .sidebar.hidden .sidebar-user-img {
        width: 40px;
        height: 40px;
        margin-right: 0
    }

    .sidebar.hidden .sidebar-user-img img {
        height: 100%;
        width: 100%
    }
}

@media (min-width: 1520px) {
    .container {
        max-width:1480px
    }

    .col-xxl {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%
    }

    .col-xxl-auto {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: none
    }

    .col-xxl-1,.col-xxl-2 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 8.33333%;
        flex: 0 0 8.33333%;
        max-width: 8.33333%
    }

    .col-xxl-2 {
        -ms-flex: 0 0 16.66667%;
        flex: 0 0 16.66667%;
        max-width: 16.66667%
    }

    .col-xxl-3,.col-xxl-4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%
    }

    .col-xxl-4 {
        -ms-flex: 0 0 33.33333%;
        flex: 0 0 33.33333%;
        max-width: 33.33333%
    }

    .col-xxl-5,.col-xxl-6 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 41.66667%;
        flex: 0 0 41.66667%;
        max-width: 41.66667%
    }

    .col-xxl-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%
    }

    .col-xxl-7,.col-xxl-8 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 58.33333%;
        flex: 0 0 58.33333%;
        max-width: 58.33333%
    }

    .col-xxl-8 {
        -ms-flex: 0 0 66.66667%;
        flex: 0 0 66.66667%;
        max-width: 66.66667%
    }

    .col-xxl-10,.col-xxl-9 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%
    }

    .col-xxl-10 {
        -ms-flex: 0 0 83.33333%;
        flex: 0 0 83.33333%;
        max-width: 83.33333%
    }

    .col-xxl-11,.col-xxl-12 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 91.66667%;
        flex: 0 0 91.66667%;
        max-width: 91.66667%
    }

    .col-xxl-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%
    }

    .customers-wrapper {
        height: auto
    }

    .customers-wrapper img {
        display: none
    }
}

@media (max-width: 1300px) {
    .upgrade-btn {
        padding:10px 7px
    }

    .upgrade-btn svg {
        margin-left: 5px
    }

    .sort-bar .search-wrapper input {
        width: 174px
    }

    .categories-sort-bar .search-wrapper input {
        width: 271px
    }

    .chart {
        height: auto;
        max-height: 370px
    }
}

@media (max-width: 1199.98px) {
    .sidebar {
        position:fixed;
        z-index: 2;
        overflow-y: auto;
        left: -1000px
    }

    .sidebar.hidden {
        left: 0
    }

    .main-nav {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse
    }

    .sort-bar {
        padding: 20px
    }

    .sort-bar .select {
        margin-right: 10px
    }
}

@media (max-width: 991.98px) {
    .sort-bar-start {
        width:100%;
        margin-bottom: 10px
    }

    .sort-bar .search-wrapper,.sort-bar .search-wrapper input {
        width: 100%
    }

    .sort-bar .select {
        margin-right: 0;
        min-width: auto;
        width: 100%
    }

    .sort-bar-end {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        width: 100%
    }

    .sort-bar-end .select-wrapper {
        width: 24%
    }

    .customers-wrapper {
        height: auto
    }

    .customers-wrapper img {
        display: none
    }
}

@media (max-width: 767.98px) {
    .main-nav {
        -webkit-box-orient:vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse
    }

    .main-nav-start,.main-nav-start input {
        width: 100%
    }

    .main-nav-end {
        margin-bottom: 20px;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        width: 100%
    }

    .sort-bar {
        padding-bottom: 10px
    }

    .sort-bar-end .select-wrapper {
        width: 48%;
        margin-bottom: 10px
    }
}

@media (max-width: 575.98px) {
    .footer {
        position:relative
    }

    .main-btns-wrapper {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }

    .main-btns-wrapper button,.main-btns-wrapper select {
        width: 48%;
        margin-right: 0;
        margin-bottom: 15px;
        font-size: 14px
    }

    .sort-bar {
        padding: 10px 10px 5px
    }

    .main {
        margin-bottom: 0
    }

    .footer--flex {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        text-align: center
    }
}

@media (max-width: 480.98px) {
    .main-title {
        font-size:20px
    }

    .primary-default-btn {
        padding: 8px 15px
    }

    .sort-bar-end .select-wrapper {
        width: 49%
    }

    .footer-start p {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }
}

/*# sourceMappingURL=style.min.css.map */