* {
    box-sizing: border-box;
}

@font-face {
    font-family: 'MyriadPro';
    src        : url("/theme/font/myp.eot");
    src        : url("/theme/font/myp.woff") format("woff"), url("/theme/font/myp.ttf") format("truetype"), url("/theme/font/myp.svg") format("svg");
}

body {
    margin     : 0;
    font-family: MyriadPro;
    color      : #482e00;
    font-size  : 14px;
    line-height: 1.5;
}

input[type=text],
input[type=password],
select,
textarea {
    line-height: 1.5;
    font-size  : 1em;
    font-family: MyriadPro;
    padding: 4px;
    border-radius: 3px;
    border: 1px solid #797979;
    filter: blur(0);
    backface-visibility: hidden;
}

:root {
    --plgreen: #12656b;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #cacaca;
}

::-webkit-scrollbar-thumb:hover {
    background: #aaaaaa;
}

@media (max-width: 768px) {
    body {
        font-size: 16px;
    }
}

/* -------------------------------------------------------------------------------------------- */

#top-header {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: darkcyan;
    padding: 8px 5px;
}

#top-header #main-logo {
    margin-left: 20px;
    width: auto;
}

#top-header #main-logo img {
    height: 30px;
    display: block;
}

#menu-button {
    background-image: url("../img/menu.png");
    background-size: cover;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

#menu-button:hover {
    background-position: -30.5px;
}

#user-menu {
    justify-self: right;
    margin-left: auto;
    width: auto;
}

#user-menu .display-item {
    cursor: pointer;
    display: flex;
    align-items: center;
}

#user-menu .display-item .text {
    line-height: 30px;
    font-size: 16px;
    color: white;
}

#user-menu .display-item .image {
    background-color: white;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid #d09c3eff;
    margin-left: 10px;
}

#user-menu .list-item {
    font-size: 18px;
}

#langbar {
    padding-left: 10px;
    display: flex;
    align-items: center;
}

#langbar .lang {
    padding-left: 24px;
    background-size: 21px;
    background-repeat: no-repeat;
    background-position: 0 2px;
    margin-left: 10px;
    cursor: pointer;
    font-size: 14px;
    line-height: 27px;
}

#langbar .lang.selected {
    color: white;
}

#langbar .lang.vi {
    background-image: url("/theme/img/lang-vi.png");
}

#langbar .lang.en {
    background-image: url("/theme/img/lang-en.png");
}


@media (max-width:1050px) {
    #top-header {
        flex-direction: column;
    }

    #top-panel {
        height: 50px;
        background-color: darkcyan;
        z-index: 1;
    }

    #menu-panel {
        flex-direction: column;
        display: none;
        background-color: rgba(255,255,255, 0.95);
        position: fixed;
        top: 0;
        left: 0;
        padding: 60px 10px 10px;
        box-shadow: 0 0 3px #dddddd;
        font-size: 20px;
    }

    #nav-bar {
        display: flex;
        flex-direction: column;
    }

    #nav-bar .item {
        text-align : center;
        margin: 0;
        line-height: 40px;
    }

    #nav-bar .item.selected {
        color: deepskyblue;
    }

    #nav-bar .item:hover {
        color: deepskyblue;
    }

    #menu-button {
        display: block;
    }

    #main-menu {
        display: none;
    }

    #user .display-item {
        display: none;
    }

    #user .list-item {
        display: block;
        position: static;
    }

    #user .list-item .panel {
        border: none;
    }

    #user .list-item .panel .item {
        border: none;
        text-align: center;
    }

    #langbar {
        padding: 0;
        justify-content: center;
    }

    #langbar .lang.selected {
        color: deepskyblue;
    }
}
/* ----------------------------------------------------------------------------------------------------------------- */

#scroll-top {
    position       : fixed;
    right          : 40px;
    bottom         : 65px;
    z-index        : 10;
    cursor         : pointer;
    background     : url(/theme/img/scroll_top.png) no-repeat;
    background-size: contain;
    width          : 32px;
    height         : 29px;
    display        : none;
}

#loading {
    width              : 100px;
    height             : 100px;
    background         : url(/theme/img/loading.gif), rgba(0, 0, 0, 0.5);
    background-size    : 60%;
    background-position: center;
    background-repeat  : no-repeat;
    border-radius      : 20px;
    position           : fixed;
    top                : 50%;
    left               : 50%;
    transform          : translate(-50%, -50%);
    display            : none;
    z-index            : 99;
}

/* ----------------------------------------------------------------------------------------------------------------- */

.table-container {
    width: 100%;
    overflow: auto;
}

/* ----------------------------------------------------------------------------------------------------------------- */

#page-content {
    padding : 10px;
    overflow: auto;
}

#datalist {
    width          : 100%;
    border-collapse: collapse;
}

#datalist th,
#datalist td {
    padding: 8px 4px;
}

#datalist thead tr {
    background-color: #e4e4e4;
}

#datalist tbody tr:nth-child(odd) {
    background-color: #fbfbfb;
}

#datalist tbody tr:hover {
    background-color: #efefef;
}

#datalist tbody tr.dtf0 {
    background-color: #ff7a7a;
}

#datalist tbody tr.dtf1 {
    background-color: #ffa377;
}

#datalist tbody tr.dtf2 {
    background-color: #ffcf94;
}

#datalist tbody tr.dtf3 {
    background-color: #fff4c0;
}

#datalist .quick-command {
    padding-right: 34px;
    position     : relative;
}

#datalist .group-title {
    background: linear-gradient(to right, #3bb439, #63da61, #97f896) !important;
    font-size: 18px;
    font-weight: bold;
}

#datalist .group-title td {
    padding-left: 15px;
}

#datalist .quick-button {
    display         : block;
    width           : 30px;
    height          : 30px;
    border          : 1px solid #b6b6b6;
    border-radius   : 3px;
    cursor          : pointer;
    text-align      : center;
    background-color: #fafafa;
    position        : absolute;
    right           : 0;
    top             : 50%;
    line-height     : 30px;
    transform       : translate(0, -50%);
}

#datalist .quick-button:hover {
    background-color: #eeeeee;
}

#datalist .fx-command {
    padding: 4px;
}

#datalist .limit-width-200 {
    max-width: 200px;
}

#datalist .limit-width-150 {
    max-width: 150px;
}

#datalist .limit-width-100 {
    max-width: 100px;
}

#datalist .result {
    width: 30px;
    height: 30px;
    background-size: 80%;
    background-position: center;
    background-repeat: no-repeat;
}

#datalist .success {
    background-image: url('/theme/img/success.png');
}

#datalist .failure {
    background-image: url('/theme/img/failure.png');
}

#datalist .task {
    display: flex;
    gap: 5px;
}

.fx-button {
    display            : inline-block;
    vertical-align: middle;
    width              : 30px;
    height             : 30px;
    cursor             : pointer;
    background-size    : 80%;
    background-position: center;
    background-repeat  : no-repeat;
    background-color   : #FAFAFA;
    border-radius      : 3px;
    border-top         : 1px solid #E0E0E0;
    border-left        : 1px solid #E0E0E0;
    border-right       : 1px solid #BBB;
    border-bottom      : 1px solid #BBB;
}

.fx-button:hover {
    background-color: #eeeeee;
}

.fx-button.edit {
    background-image: url('/theme/img/fx-edit.png');
}

.fx-button.delete {
    background-image: url('/theme/img/fx-delete.png');
}

.fx-button.back {
    background-image: url('/theme/img/fx-back.png');
}

.fx-button.view {
    background-image: url('/theme/img/fx-view.png');
}

.fx-button.user-edit {
    background-image: url('/theme/img/fx-user-edit.png');
}

.fx-button.item-approve {
    background-image: url('/theme/img/fx-approve.png');
}

.fx-button.send {
    background-image: url('/theme/img/fx-send.png');
}

.fx-command {
    padding: 10px 0;
}

.fx-command .fx-button.addnew {
    background-image   : url('/theme/img/fx-addnew.png');
    background-size    : 30px;
    background-position: 5px center;
    width              : auto;
    height             : auto;
    line-height        : 30px;
    padding            : 5px 10px 2px 40px;
    margin-right: 5px;
}

.fx-command .fx-button.download {
    background-image: url('/theme/img/fx-download.png');
    background-size    : 30px;
    background-position: 5px center;
    width              : auto;
    height             : auto;
    line-height        : 30px;
    padding            : 5px 10px 2px 40px;
    margin-right: 5px;
}

.fx-command .fx-button.copy {
    background-image: url('/theme/img/fx-copy.png');
    background-size    : 30px;
    background-position: 5px center;
    width              : auto;
    height             : auto;
    line-height        : 30px;
    padding            : 5px 10px 2px 40px;
}

.fx-command .fx-button.send {
    background-image   : url('/theme/img/fx-send.png');
    background-size    : 30px;
    background-position: 5px center;
    width              : auto;
    height             : auto;
    line-height        : 30px;
    padding            : 5px 10px 2px 40px;
}

.fx-command .fx-button.sendback {
    background-image   : url('/theme/img/fx-back.png');
    background-size    : 30px;
    background-position: 5px center;
    width              : auto;
    height             : auto;
    line-height        : 30px;
    padding            : 5px 10px 2px 40px;
    margin-right: 5px;
}

.fx-command .fx-button.approve {
    background-image   : url('/theme/img/fx-approve.png');
    background-size    : 30px;
    background-position: 5px center;
    width              : auto;
    height             : auto;
    line-height        : 30px;
    padding            : 5px 10px 2px 40px;
    margin-right: 5px;
}


.fx-command .fx-button.duplicate {
    background-image   : url('/theme/img/fx-duplicate.png');
    background-size    : 30px;
    background-position: 5px center;
    width              : auto;
    height             : auto;
    line-height        : 30px;
    padding            : 5px 10px 2px 40px;
    margin-right: 5px;
}

.fx-command .fx-button.viewall {
    background-image   : url('/theme/img/fx-view.png');
    background-size    : 30px;
    background-position: 5px center;
    width              : auto;
    height             : auto;
    line-height        : 30px;
    padding            : 5px 10px 2px 40px;
    margin-right: 5px;
}

.fx-command .fx-button.export-word {
    background-image   : url('/theme/img/export-msword.jfif');
    background-size    : 30px;
    background-position: 5px center;
    width              : auto;
    height             : auto;
    line-height        : 30px;
    padding            : 5px 10px 2px 40px;
    margin-right: 5px;
}

.fx-command .fx-button.export-excel {
    background-image   : url('/theme/img/export-msexcel.jfif');
    background-size    : 30px;
    background-position: 5px center;
    width              : auto;
    height             : auto;
    line-height        : 30px;
    padding            : 5px 10px 2px 40px;
    margin-right: 5px;
}
/* ----------------------------------------------------------------------------------------------------------------- */

.modal-form .name {
    margin-bottom: 20px;
    font-weight  : bold;
}

.modal-form .checklist .item {
    padding: 8px 0;
}

.modal-form .checklist .item:hover {
    background-color: #eeeeee;
}

.modal-form .checklist .item [type=radio],
.modal-form .checklist .item [type=checkbox]
{
    vertical-align: text-bottom;
}

.modal-form .left-col {
    padding-right: 10px
}

.modal-form .right-col {
    padding-left: 10px
}

.modal-form .range {
    margin-bottom: 20px;
}

.modal-form .range input[type=text] {
    margin: 0;
    text-align: center;
    width: 50px;
}

.modal-form .range input[type=range] {
    width: 100%;
    margin: 0;
    display: none;
}

.modal-form .range .right-col {
    flex-grow: 1;
    display: flex;
}

#duplicate-task-form .form-content {
    width: 80%;
}

#behavior-form .form-content {
    width: 80%;
}

.score {
    width: 50px;
    text-align: center;
}

@media (max-width: 768px) {
    #task-form,
    #my-rating-task-form,
    #my-rating-behavior-form,
    #rating-task-form,
    #rating-behavior-form,
    #employee-edit-form,
    #user-info-form,
    #distribution-percent-form,
    #development-plan-activity-form,
    #development-plan-adviser-form,
    #employee-form {
        padding: 0;
    }

    #task-form .form-content,
    #my-rating-task-form .form-content,
    #my-rating-behavior-form .form-content,
    #rating-task-form .form-content,
    #rating-behavior-form .form-content,
    #employee-edit-form .form-content,
    #user-info-form .form-content,
    #distribution-percent-form .form-content,
    #development-plan-activity-form .form-content,
    #development-plan-adviser-form .form-content,
    #employee-form .form-content {
        width: 100%;
        border-radius: 0;
    }

    .modal-form .left-col,
    .modal-form .right-col {
        padding: 0;
    }

    .modal-form .range {
        flex-direction: row;
    }

    .modal-form .range .left-col {
        width: auto;
        padding-right: 20px;
    }
}

@media (max-width: 1000px) {
    #duplicate-task-form {
        padding: 0;
    }

    #duplicate-task-form .form-content {
        width: 100%;
        border-radius: 0;
    }

    #behavior-form {
        padding: 0;
    }

    #behavior-form .form-content {
        width: 100%;
        border-radius: 0;
    }
}

#history-list {
    max-height: 100%;
    overflow-y: auto;
    margin    : 0;
    list-style: none;
}

#history-list li {
    border-bottom: 1px solid #ccc;
    padding      : 10px 0;
}

#history-list .fx-command {
    padding: 10px 0 0 0;
}

#history-list .fx-command .fx-button {
    margin-right: 10px;
}


#add-contact {
    text-align      : center;
    border          : 1px solid;
    background      : white;
    border-radius   : 3px;
    cursor          : pointer;
    background-color: #eeeeee;
    margin-left     : 20px;
    float           : right;
    padding         : 0px 10px;
}

#select-employee {
    min-height: 50px;
    border: 1px solid;
    margin-bottom: 20px;
    padding: 5px;
    overflow-y: auto;
}

#employee-form {
    z-index: 99;
}

#employee-form .form-body > * {
    cursor: pointer;
}

#employee-form .form-body > *:hover {
    background-color: #eeeeee;
}


/* ----------------------------------------------------------------------------------------------------------------- */


#chart-board {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

#chart-board .chart {
    padding: 10px;
}

#chart-board .chart .title {
    font-weight: bold;
}

#chart-board .chart .body {
    position: relative;
    border: 1px solid #ccc;
    background-color: rgba(255,255,255,0.95);  
    min-width: 250px;
    height: 100%;
    box-shadow: 0 0 3px #dddddd;
    border-radius: 5px;
    padding: 10px;
}

@media (max-width: 768px) {
    #chart-board {
        font-size: 18px;
        width: 100%;
        flex-direction: column;
    }

    #chart-board .chart {
        margin: 0 0 20px 0;
        min-width: auto;
        width: 100% !important;
    }
    
}




#widget-board {
    display: flex;
    z-index: 1;
}

#widget-bgr {
    background-image     : url(/media/5k.jpg);
    background-attachment: fixed;
    background-position  : right 10px center;
    width                : 100%;
    height               : 100%;
    background-size      : contain;
    background-repeat    : no-repeat;
    position             : fixed;
    left                 : 0;
    top                  : 0;
    z-index: -1;
}

#widget-board .widget {
    border: 1px solid #ccc;
    background-color: rgba(255,255,255,0.95);
    padding: 10px;
    min-width: 250px;
    box-shadow: 0 0 3px #dddddd;
    border-radius: 5px;
    margin: 10px;
}

#widget-board .widget .title {
    font-weight: bold;
}

#widget-board .widget .body {
    max-height: 200px;
    overflow-y: auto;
}

#widget-board .widget .row:hover {
    background-color: #f0f0f0;
}

#widget-board .widget .cell-list {
    display: flex;
}

#widget-board .widget .cell-list > * {
    padding: 2px;
}

#widget-board .widget .cell-list .align-right {
    justify-self: right;
    margin-left: auto;
}

#widget-board .widget .cell-list .label {
    padding-right: 10px;
}


@media (max-width: 768px) {
    #widget-board {
        font-size: 18px;
        width: 100%;
    }

    #widget-board .widget {
        margin: 0 0 20px 0;
        min-width: auto;
    }

    #widget-bgr {
        background-position: center;
    }
}


.report-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 20px;
    line-height: 42px;
    margin-right: 20px;
}

.report-list li {
    background-image: url('/theme/img/report.png');
    background-repeat: no-repeat;
    background-size: 50px;
    background-position: left center;
    padding-left: 60px;
    margin-bottom: 10px;
}

@media (max-width: 768px) {
    .report-list {
        margin: 0 0 20px 0;
    }
}

.form-rating-title {
    font-size: 22px;
    font-weight: bold;
    margin: 40px 0 10px 0;
    text-transform: uppercase;
    text-align: center;
}

.rating-title {
    font-weight: bold;
    font-size: 18px;
    margin: 40px 0 10px 0;
    text-transform: uppercase;
}

#summary {
    width: 100%;
    border-spacing: 0;
    border: solid #797979;
    border-width: 1px 0 0 1px;
    margin-bottom: 40px;
}

#summary th {
    background-color: #e4e4e4;
}
#summary th,
#summary td {
    border: 0px solid #797979;
    border-width: 0 1px 1px 0;
    padding: 5px;
}

.overall-result {
    font-weight: bold;
    text-transform: uppercase;
}






#employee_info .row {
    margin-bottom: 20px;
}

#employee_info .info-box {
    border: 1px solid #797979;
}

#employee_info .info-box .title {
    background-color: #e4e4e4;
    padding: 5px;
    font-weight: bold;
}

#employee_info .info-box .content {
    padding: 5px;
}

@media (max-width: 768px) {

    #employee_info .info-box {
        margin-bottom: 20px;
        width: 50%;
    }

    #employee_info .row {
        margin-bottom: 0;
        flex-direction: row;
        flex-wrap: wrap;
    }
}


.rating-note {
    justify-content: space-between;
    margin-bottom: 20px;
}

.rating-note > * {
    width: 32%;
}

.rating-note .rating-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rating-note textarea {
    resize: none;
    width: 100%;
}

@media (max-width: 768px) {
    .rating-note > * {
        width: 100%;
    }
}


#report-table {
    width: 100%;
    border-spacing: 0;
    margin-bottom: 40px;
}

#report-table th {
    background-color: #e4e4e4;
}

#report-table th,
#report-table td {
    border: 0px solid #797979;
    border-width: 0 1px 1px 0;
    padding: 5px;
}

#report-table td {
    word-break: break-word;
}

#report-table thead tr th:first-child,
#report-table tbody tr td:first-child {
    border-width: 0 1px 1px 1px;
}

#report-table #report-title {
    border-width: 0 0 1px 0;
}

#report-table .group-title {
    background-color: #fff4c0;
    font-weight: bold;
    font-size: 16px;
}

#report-table thead tr.subrow th:first-child,
#report-table tbody tr.subrow td:first-child {
    border-width: 0 1px 1px 0;
}

#report-table .min-100 {
    min-width: 100px;
}

#report-table .min-70 {
    min-width: 70px;
}

@media (max-width: 900px) {
    #report-table [class^="min-"] {
        min-width: auto;
    }

    #report-table tbody td {
        word-break: normal;
    }
}



#user-editing-form #create-user {
    margin-bottom: 20px;
}

#user-editing-form #create-user input {
    margin-bottom: 0;
    flex-grow: 1;
}

#user-editing-form #create-user .button {
    cursor: pointer;
    background-color: #FAFAFA;
    border-radius: 3px;
    border-top: 1px solid #E0E0E0;
    border-left: 1px solid #E0E0E0;
    border-right: 1px solid #BBB;
    border-bottom: 1px solid #BBB;
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    margin-left: 10px;
    padding: 0 10px;
}

#user-editing-form #create-user .button:hover {
    background-color: #eeeeee;
}


.page-development-plan .row {
    margin-bottom: 50px;
}

.page-development-plan .subtitle {
    margin-bottom: 10px;
}

.page-development-plan textarea {
    width: 100%;
    resize: vertical;
}

.page-development-plan #plan-table td {
    line-height: 32px;
}

.page-development-plan #select-adviser:hover {
    background-color: #eeeeee;
}


.input-selector {
    display: flex;
    margin-bottom: 20px;
}

.input-selector .input {
    flex-grow: 1;
    margin-right: 5px;
    margin-bottom: 0 !important;
}

.input-selector .selector {
    display: block;
    width: 30px;
    height: 34px;
    border: 1px solid #b6b6b6;
    border-radius: 3px;
    cursor: pointer;
    text-align: center;
    background-color: #fafafa;
    line-height: 34px;
}

#penalty-point-form table td {
    padding: 5px 0;
}


#additional_task_result_note {
    margin-top: 10px;
    color: red;
}

.note {
    color: lightblue;
}