.upload-avatar {
    width   : 80px;
    height  : 80px;
    position: relative;
    margin  : auto;
}

.upload-avatar img {
    width : 80px;
    height: 80px;
}

.upload-avatar input {
    position: absolute;
    z-index : 1;
    width   : 100%;
    height  : 100%;
    top     : 0;
    left    : 0;
    opacity : 0;
}

.notifyCount {
    min-width    : 18px;
    height       : 18px;
    background   : red;
    color        : #fff;
    display      : inline-block;
    text-align   : center;
    border-radius: 20px;
    padding      : 0;
    line-height  : 18px;
}

.noteLichHenBox {}

.noteLichHenInput {
    resize: none;
    width : 100%;
    height: 100px;
}

.saveNoteBtn {
    background   : #3b8dbc;
    color        : #fff;
    border-radius: 3px;
    padding      : 3px 0px;
    cursor       : pointer;
    display      : none;
}

#qrcode {
    margin       : auto;
    width        : 300px;
    margin-bottom: 200px;
    margin-top   : 50px;
}

.refreshtoken {
    margin : auto;
    width  : 150px;
    display: block;
}

.avatar-user {
    width     : 100px;
    height    : 100px;
    object-fit: contain;
}

#exam {
    width: 100% !important;
}

.dienDanPicture {
    width : 100px;
    height: 100px;
}

.dienDanColor {
    width        : 30px;
    height       : 30px;
    border-radius: 15px;
    margin       : auto;
}

.tableLich {
    width: 100% !important;

}

.tableLich thead {
    width: 100%;
}

.tableLich thead tr {
    height: 70px;
    width : 100%;
}

.tableLich thead tr td {
    text-transform: uppercase;
    font-size     : 17px;
    background    : #3b8dbc;
}

.tableLich tr {
    color     : #fff;
    text-align: center;
}

.tableLich tbody {}

.tableLich tbody tr td {
    min-height    : 500px;
    padding-top   : 10px;
    padding-bottom: 10px;
    vertical-align: top;
}

.tableLich td {
    border: 1px solid gray;
    width : 14.2%;
}

.userWorking {
    background   : orange;
    border-radius: 10px;
    display      : inline-block;
    padding-top  : 5px;
    margin-bottom: 5px;
    width        : 95%;
}

.userWorking>img {
    width        : 30px;
    height       : 30px;
    object-fit   : contain;
    background   : #ccc;
    border-radius: 15px;
}

.info {
    text-align: center;
    padding   : 5px;
}

.info h3 {
    font-size: 14px;
    margin   : 5px 0 0;
}

.info .fullName {
    font-size : 12px;
    margin-top: 3px;
}

.info .actions {
    border-top : 1px solid #ccc;
    padding-top: 8px;
}

.info .actions a {
    width        : 20px;
    height       : 20px;
    background   : #ccc;
    border-radius: 25px;
    padding      : 0px;
    display      : inline-block;
    text-align   : center;
    margin-left  : 7px;
    margin-right : 7px;
}

.info .actions img {
    width     : 10px;
    height    : 10px;
    object-fit: contain;
}

.info .actions .edit {
    background: gray;
}

.info .actions .remove {
    background: darkred;
}

#timetableInfo {
    position  : absolute;
    z-index   : 9999;
    background: #cacaca6b;
    right     : 0;
    top       : 0;
    left      : 0;
    bottom    : 0;
    display   : none;
}

.timeTableBox {
    min-width    : 500px;
    width        : 800px;
    background   : #fff;
    margin       : 73px auto auto;
    border-radius: 10px;
}

.content-wrapper {
    position: relative;
}


.bg-white {
    background-color: #fff !important;
    text-align      : center;
}

.bg-white .icon .fa {
    font-size: 40px;
}

.bg-white .icon {
    height     : 60px;
    line-height: 40px;
}

.small-box h3,
.small-box p {
    z-index    : 5;
    text-align : center !important;
    font-size  : 50px !important;
    font-weight: 500 !important;
}


.small-box-footer {
    position       : relative !important;
    text-align     : center !important;
    padding        : 3px 0 !important;
    color          : #3b8dbc !important;
    display        : block !important;
    z-index        : 10 !important;
    background     : #fff !important;
    text-decoration: none !important;
    border-top     : 1px solid #ccc;
}

.small-box .icon {
    -webkit-transition: none !important;
    -o-transition     : none !important;
    transition        : none !important;
    position          : relative !important;
    top               : 0px !important;
    right             : 0px !important;
    font-size         : 90px;
    color             : rgba(0, 0, 0, 0.15);
}

.small-box:hover {
    text-decoration: none;
    color          : #000 !important;
}

.fa {
    width : 10px;
    height: 10px;
}

#exam a.btn,
#exam button.btn {
    border-radius: 5px;
    margin       : 1px;
}

body {
    min-width: 900px !important;
    overflow : auto !important;
}

.itemTestType {
    background   : #d2d6de;
    padding      : 15px;
    border-radius: 7px;
    margin-bottom: 15px;
}

.childTypeTest {
    flex-direction : row;
    justify-content: center;
    align-items    : center;
    border-bottom  : 1px solid white;
    margin-left    : 20px;
    padding-top    : 10px;
}

.tenLoaiTest {
    flex        : 1;
    display     : inline-block;
    margin-right: 100px;
    min-width   : 400px;
    font-style  : italic;
}

.xemKetQuaTest {
    width        : 100px;
    background   : #3b8dbc;
    color        : #fff;
    padding      : 5px 10px;
    border-radius: 3px;
}

.tenLoaiTestMain {
    font-weight   : bold;
    font-size     : 15px;
    text-transform: uppercase;
}

.rowUserInfo {
    flex-direction : row;
    justify-content: center;
    align-items    : center;
}

.userPictureTestList {
    width         : 100px;
    height        : 100px;
    border-radius : 10px;
    vertical-align: baseline
}

.userInfoTestList {
    display     : inline-block;
    flex        : 1;
    padding-left: 30px;
}

.userInfoTestList p {
    min-width: 100px;
}

.userInfoTestList b {}

.scoreTest {
    color      : red;
    font-weight: bold;
}

pre {
    white-space: break-spaces;
    line-height: 25px;
}

.imgXepKhoi {
    width     : 200px;
    background: #ccc;
    padding   : 10px;
}

.traLoiXemKhoiImg {
    width     : 80px;
    height    : 80px;
    background: #ccc;
    display   : inline-block;
    padding   : 0;
    margin    : 0;
    object-fit: fill;
    box-sizing: border-box;
    float     : left;
}

.answerBoxXepKhoi2 {
    width: 160px;
}

.answerBoxXepKhoi4 {
    width: 160px;
}

.answerBoxXepKhoi9 {
    width: 240px;
}

.right {
    float: right;
}

.iconcategory {
    width     : 40px;
    height    : 40px;
    object-fit: contain;
}

#boxChangePassword {
    display: none;
}

.small-circle-avatar {
    width        : 50px;
    height       : 50px;
    border-radius: 25px;
}


.btn-info {
    background: #C02425;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #F0CB35, #C02425);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #F0CB35, #C02425);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.online-account {
    width: 10px;
    height: 10px;
    border-radius   : 50%;
    background-color: green;
    display         : inline-block;
    margin-right    : 5px;
}

.offline-account {}