/* ######## :: SETUP :: ######## */
@import url(../css/font.css);

:root {
    --color-primary: #0D6732;
    --color-primary-hover: #55a27e;
    --color-secondary: #d6be58;
    --color-secondary-hover: #f4ecc6;

    --color-danger: #ff4961;
    --color-info: #1e9ff2;
    --color-success: #28d094;
    --color-warning: #ff9149;

    --color-gray: #666687;
    --color-light: #fff;
    --color-dark: #000;
    --color-default: ##333;

    --color-border: #dcdce4;

    /* --fw-normal: normal;
    --fw-medium: 500;
    --fw-bold: bold; */

    /* --typo-xs: 18px; 
    --typo-sm: 20px; 
    --typo-md: 22px; 
    --typo-lg: 34px; 
    --typo-xl: 40px; 
    --typo-xxl: 64px; 
    --typo-default: 22px; */

    --border-radius: 4px;

    --box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

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

.gutters-20 {
    margin: 0 -10px;
}

.gutters-20>div {
    padding: 0 10px;
}

/* fallback */
@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v160/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOej.woff2) format('woff2');
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

/* .icon-10k:before { content: "\e951"; } */

body {
    margin: 0px;
    padding: 0;
    color: #000000;
    font-family: "tahoma";
    /* font-family: "IBM Plex Sans Thai", sans-serif; */
    font-size: 14px;
    line-height: 1.35em;
    background: #ffffff;
    overflow-x: hidden;
}

.login-body,
.mLeftBackOffice,
.footerBackOffice,
.divRightInnerHome-topic .title,
.divRightInnerTopBoxHome,
.divRightNavTb,
.divRightHeadSearch,
.fontHeadRight,
.formFontSubjectTxt,
.tbBoxViewBorderBottom .formFontTileTxt,
.fontTitlTbRight,
.fontTitlTbHome,
.divRightInnerBigBoxHome>table tr:first-child td,
.divRightTitleHome,
.divRightMain .tbBoxListwBorder tbody>tr:last-child td span {
    /* font-family: "IBM Plex Sans Thai", sans-serif;  */
    font-family: 'db_helvethaica';
}

/*
div, ul, ol, li {
        margin:0px;
        padding:0px;
        list-style:none;
}
*/

img {
    border: none;
}

/*
::-webkit-input-placeholder { color:#e1e0e1;}
:-moz-placeholder {  color:#e1e0e1;}
::-moz-placeholder {   color:#e1e0e1;}
:-ms-input-placeholder { color:#e1e0e1;}
::-moz-selection { text-shadow:none;}
*/

a:link,
a:visited {
    text-decoration: none;
    color: #000000;
}

a:hover {
    text-decoration: none;
    color: #1a1a1a;
}

.borderLeft {
    border-left: #c8c7cc solid 1px;
}

.borderBottom {
    border-bottom: #c8c7cc solid 1px;
}

.fontContantB {
    font-weight: bold;
}

.fontContantSubMenu:link,
.fontContantSubMenu:visited {
    font-size: 14px;
    text-decoration: none;
    color: #1a1a1a;
}

.fontContantSubMenu:hover {
    text-decoration: none;
    color: #1a1a1a;
    font-size: 14px;
}

.fontContantSub:link,
.fontContantSub:visited {
    font-size: 14px;
    text-decoration: none;
    color: #000000;
}

.fontContantSub:hover {
    text-decoration: none;
    color: #1a1a1a;
    font-size: 14px;
}

.fontHeadRight {
    font-size: 28px;
    line-height: normal;
    color: #333333;
}

.fontTitlTbRight {
    font-size: 16px;
    font-weight: bold;
}

.fontContantTbupdate {
    color: #616161;
}

.fontContantTbNav {
    color: #f3f4f4;
    font-size: 14px;
}

.fontContantTbNav a {
    color: #fff;
    font-size: 14px;
}

.fontContantTbNavPage {
    color: #000000;
    font-size: 14px;
}

.fontContantTbNavPage b {
    font-weight: 500;
}

.fontContantTbNavPage a {
    color: #000000;
    font-size: 14px;
}

.fontContantAlert {
    color: #ff3300;
    font-size: 14px;
}

.fontContantTbTime {
    color: #616161;
    font-size: 13px;
    line-height: 25px;
}

.fontContantTbManage {
    color: #616161;
    font-size: 12px;
    line-height: 25px;
}

.fontContantTbDisable {
    color: var(--color-danger);
}

.fontContantTbEnable {
    color: var(--color-success);
}

.fontContantTbHomeSt {
    color: var(--color-warning);
}

.fontContantTbNew {
    color: var(--color-info);
}

.fontContantTbReport {
    color: rgb(0, 56, 88);
}

.fontContantTbComplete {
    color: #2ee034;
}

.fontContantTbReject {
    color: #f5391c;
}

.fontContantTbRead {
    color: #000000;
}

.fontContantTbRead {
    color: #000000;
}

input {
    background-color: #fefefe;
    border: #c8c7cc solid 1px;
    height: 25px;
    padding: 3px;
    font-size: 14px;
}

input[type="text"]:disabled {
    background-color: #eeeeee;
    color: #b9b9b9;
}

textarea {
    background-color: #fefefe;
    border: #c8c7cc solid 1px;
    height: 50px;
    padding: 3px;
    font-size: 14px;
}

.hasDatepicker[type="text"],
#sdateInput[type="text"] {
    background-image: url(../img/icon/icon-calendar.png);
    background-repeat: no-repeat;
    /* background-position: left center;
    background-position-x: 10px; */
    background-size: 14px;
    background-position: center right 10px;
}

.select2-container--default.select2-container--disabled {
    width: 90% !important;
    background-repeat: no-repeat;
}

.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__rendered,
.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__arrow b {
    background-color: #eeeeee;
    color: #b9b9b9;
}

.inputContantTb {
    background-color: #fefefe;
    border: #c8c7cc solid 1px;
    height: 22px;
    width: 200px;
}

.btn-export {
    padding: 5px;
    width: 25px;
    height: 25px;
    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;
    background-color: #fff;
    border-radius: 4px;
}

.btn-export img {
    width: 20px;
}

.btnAdd {
    width: 52px;
    height: 52px;
    background: url(../img/btn/add.png) center no-repeat;
    margin-left: 15px;
    text-align: center;
    padding-top: 10px;
    float: left;
    cursor: pointer;
}

.btnAdd2 {
    width: 22px;
    height: 22px;
    background: url(../img/btn/add2.png) center no-repeat;
    margin-left: 15px;
    text-align: center;
    padding-top: 10px;
    float: left;
    cursor: pointer;
}

.btnDel2 {
    width: 22px;
    height: 22px;
    background: url(../img/btn/delete.png) center no-repeat;
    margin-left: 15px;
    text-align: center;
    padding-top: 10px;
    float: left;
    cursor: pointer;
}

.btnAdd3 {
    width: 22px;
    height: 22px;
    background: url(../img/btn/add2.png) center no-repeat;
    margin: 0 auto;
    text-align: center;
    padding-top: 10px;
    cursor: pointer;
}

.btnDel {
    width: 52px;
    height: 52px;
    background: url(../img/btn/del.png) center no-repeat;
    margin-left: 15px;
    text-align: center;
    padding-top: 10px;
    float: left;
    cursor: pointer;
}

.btnApprove {
    width: 52px;
    height: 52px;
    border-radius: 5px;
    background: url(../img/btn/approve.png) center no-repeat;
    margin-left: 15px;
    text-align: center;
    padding-top: 10px;
    float: left;
    cursor: pointer;
}

.btnCopy {
    width: 52px;
    height: 52px;
    border-radius: 5px;
    background: url(../img/btn/copy.png) center no-repeat;
    margin-left: 15px;
    text-align: center;
    padding-top: 10px;
    float: left;
    cursor: pointer;
}

.btnSend {
    width: 52px;
    height: 52px;
    border-radius: 5px;
    background: url(../img/btn/sendPop.png) center no-repeat;
    margin-left: 15px;
    text-align: center;
    padding-top: 10px;
    float: left;
    cursor: pointer;
}

.btnSort {
    width: 52px;
    height: 52px;
    border-radius: 5px;
    background: url(../img/btn/sort.png) center no-repeat;
    margin-left: 15px;
    text-align: center;
    padding-top: 10px;
    float: left;
    cursor: pointer;
}

.btnSync {
    width: 52px;
    height: 52px;
    border-radius: 5px;
    background: url(../img/btn/sync.png) center no-repeat;
    margin-left: 15px;
    text-align: center;
    padding-top: 10px;
    float: left;
    cursor: pointer;
}

.btnSortH {
    width: 52px;
    height: 52px;
    border-radius: 5px;
    background: url(../img/btn/sortH.png) center no-repeat;
    margin-left: 15px;
    text-align: center;
    padding-top: 10px;
    float: left;
    cursor: pointer;
}

.btnExport {
    width: 52px;
    height: 52px;
    border-radius: 5px;
    background: url(../img/btn/export.png) center no-repeat;
    background-color: #1e7145;
    margin-left: 15px;
    text-align: center;
    padding-top: 10px;
    float: left;
    cursor: pointer;
}

.btnExportPdf {
    width: 52px;
    height: 52px;
    border-radius: 5px;
    background: url(../img/btn/pdfPop.png) center no-repeat;
    margin-left: 15px;
    text-align: center;
    padding-top: 10px;
    float: left;
    cursor: pointer;
}

.btnPdf {
    width: 52px;
    height: 52px;
    border-radius: 5px;
    background: url(../img/btn/pdfPop.png) center no-repeat;
    margin-left: 15px;
    text-align: center;
    padding-top: 10px;
    float: left;
    cursor: pointer;
}

.btnSave {
    width: 52px;
    height: 52px;
    border-radius: 5px;
    background: url(../img/btn/save.png) center no-repeat;
    margin-left: 15px;
    text-align: center;
    padding-top: 10px;
    float: left;
    cursor: pointer;
}

.btnEditView {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    background: url(../img/btn/edit1.png) center no-repeat;
    margin-left: 15px;
    text-align: center;
    padding-top: 10px;
    float: left;
    cursor: pointer;
}

.btnCancel {
    width: 52px;
    height: 52px;
    border-radius: 5px;
    background: url(../img/btn/cancel2.png) center no-repeat;
    margin-left: 15px;
    text-align: center;
    padding-top: 10px;
    float: left;
    cursor: pointer;
}

.btnBack {
    width: 52px;
    height: 52px;
    border-radius: 5px;
    background: url(../img/btn/back.png) center no-repeat;
    margin-left: 15px;
    text-align: center;
    padding-top: 10px;
    float: left;
    cursor: pointer;
}

.btnSearch {
    width: 32px;
    height: 32px;
    background: url(../img/btn/search.png) center no-repeat;
    cursor: pointer;
    border: none;
    padding: 0;
    margin: 0;
    border-left: none;
    border-top: none;
    border: 0px;
}

.clearAll {
    display: block;
    height: 0px;
    clear: both;
}

.allBackOffice {
    width: 100%;
    min-width: 1024px;
    height: auto;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
}

/*############################## Login ##############################*/
.headLogin {
    width: 100%;
    min-width: 1024px;
    min-height: 560px;
    margin: 0;
    padding: 0;
    background-color: #f6f6f6;
    border-bottom: #c8c7cc solid 1px;
    border-top: #aaaaaa solid 1px;
    background: url(../img/logo/login-bg.jpg) top no-repeat;
}

.mainLogin {
    width: 100%;
    min-width: 1024px;
    height: auto;
    min-height: 180px;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
}

.mLeftLogin {
    float: left;
    width: 33.3%;
    height: auto;
    min-height: 180px;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
}

.mCenterLogin {
    float: left;
    width: 33.4%;
    height: auto;
    min-height: 180px;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
}

.mRightLogin {
    float: left;
    width: 33.3%;
    height: auto;
    min-height: 180px;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
}

.lBoxContantLogin {
    float: right;
    width: 344px;
    height: 150px;
    margin-top: 15px;
}

.cBoxContantLogin {
    width: 344px;
    height: 150px;
    margin: 0 auto;
    margin-top: 15px;
}

.rBoxContantLogin {
    float: left;
    width: 344px;
    height: 150px;
    margin-top: 15px;
}



.cycle1Login {
    width: 45px;
    height: 45px;
    /* background:url(../img/login/cycle1.png) center no-repeat; */
    background-color: var(--color-primary);
    border-radius: 5px;
    float: left;
    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;
    font-size: 24px;
    color: #fff;
}

.cycle1Login span {
    font-size: 24px;
}

.cycle2Login {
    width: 50px;
    height: 50px;
    /* background:url(../img/login/cycle2.png) center no-repeat; */
    background-color: var(--color-primary);
    border-radius: 5px;
    float: left;
    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;
    font-size: 24px;
    color: #fff;
}

.cycle3Login {
    width: 50px;
    height: 50px;
    /* background:url(../img/login/cycle3.png) center no-repeat; */
    background-color: var(--color-primary);
    border-radius: 5px;
    float: left;
    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;
    font-size: 24px;
    color: #fff;
}

.cycle4Login {
    width: 45px;
    height: 45px;
    /* background:url(../img/login/cycle4.png) center no-repeat; */
    background-color: var(--color-primary);
    border-radius: 5px;
    float: left;
    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;
    font-size: 24px;
    color: #fff;
}

.cycle4Login span {
    font-size: 24px;
}

.cycleTContantLogin {
    float: left;
    font-size: 16px;
    margin-left: 15px;
    margin-top: 17px;
    color: #666666;
}

.cycleBContantLogin {
    float: left;
    font-size: 14px;
    margin-top: 15px;
    line-height: 20px;
}

.cycle-bg-2 {
    background-color: #17C653;
}

.cycle-bg-3 {
    background-color: #F6C000;
}

/*############################## CORE ##############################*/

.headBackOffice {
    width: 100%;
    min-width: 1024px;
    height: 58px;
    margin: 0;
    padding: 0;
    background-color: #fefefe;
    border-bottom: #25c3f3 solid 1px;
    border-top: #aaaaaa solid 1px;
}

.imgLogo {
    float: left;
    /*width:230px;*/
    margin-left: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 15px;
    position: relative;
}

.menuSub {
    width: 100%;
    min-width: 1024px;
    height: 0px;
    margin: 0;
    padding: 0;
    background-color: #fff;
    border-bottom: #c8c7cc solid 1px;
    border-top: #c8c7cc solid 1px;
    display: none;
}

.menuSubManage {
    float: right;
    width: 650px;
    height: 20px;
    margin-top: 10px;
    margin-bottom: 5px;
    margin-right: 20px;
    position: relative;
    text-align: right;
}

.divLogin {
    float: right;
    width: 450px;
    margin-left: 15px;
    margin-top: 16px;
    margin-bottom: 10px;
    margin-right: 20px;
    position: relative;
    text-align: right;
}

.mainBackOffice {
    width: 100%;
    min-width: 1024px;
    height: auto;
    min-height: calc(100dvh - 71px);
    margin: 0;
    padding: 0;
    background-color: #ecf2f3;
    /* background: url("../img/bg-dashboard.jpg") center no-repeat; */
    background-size: cover;
    background-attachment: fixed;
}

.mLeftBackOffice {
    float: left;
    width: 225px;

    height: auto;

    margin: 0;
    padding: 0;
    background-color: #616161;
    position: fixed;
    z-index: 1000;
    top: 60px;
    bottom: 50px;
}

.overflow-y {
    overflow-y: auto;overflow-x: hidden;
    max-height: 460px;

}

.navControl {
    /* width: 225px; */
    position: fixed;
    z-index: 9000;
    width: 280px;
    height: 100%;
    top: 0px;
    right: 0;
    background-color: #fcfcfc;
    /* background-color: rgba(255,255,255,0.5);
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px); */
    border-radius: 5px 0 0 5px;
    padding: 60px 0;
    -webkit-transform: translate(100%, 0);
    -ms-transform: translate(100%, 0);
    transform: translate(100%, 0);
    -webkit-transition: all 400ms ease;
    -o-transition: all 400ms ease;
    transition: all 400ms ease;
    -webkit-box-shadow: 0 5px 8px 0 rgba(24, 28, 33, 0.04);
    box-shadow: 0 5px 8px 0 rgba(24, 28, 33, 0.04);
}

.navControl .overflow-y {
    max-height: calc(100vh - 120px);
}

.navControl.open {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
}

.tbLeftMenu {
    width: 225px;
    background-color: #616161;
}

.divLeftMenu {
    border-radius: 5px;
    margin-bottom: 0 !important;
}

.divLeftMenuOverNew {
    float: left;
    width: 100%;
    max-width: 225px;
    min-width: 225px;
    height: auto;
    min-height: 35px;
    margin: 0;
    background-color: #393836;
    border-bottom: #616161 solid 1px;
}

.divLeftMenuTb {
    padding-left: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 15px;
}

.divLeftMenuTb a {
    color: #fff;
}

.boxLeftSubMenu {
    display: none;
}

.divLeftSubMenu {
    float: left;
    width: 100%;
    /* max-width: 225px;
  min-width: 225px; */
    height: auto;
    margin: 0;
    background-color: #ffffff;
    border-bottom: #bbbbba solid 1px;
}

.divLeftSubMenuOver {
    float: left;
    width: 100%;
    margin: 0;
}

.divLeftSubMenuOver a {
    color: var(--color-dark);
}

.divLeftSubMenuEnd {
    float: left;
    width: 100%;
    /* max-width: 225px;
  min-width: 225px; */
    height: auto;
    margin: 0;
    background-color: #616161;
    border-bottom: #616161 solid 1px;
}

.divLeftSubMenu a {
    color: #000;
}

.divmenu:before,
.divmenu:after {
    content: " ";
    display: table;
}

.divmenu:after {
    clear: both;
}

.divLeftSubMenu:hover {
    background-color: #fff;
    font-weight: bold;
}

.divLeftSubMenuTb {
    padding-left: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 15px;
}

.divLeftMenuOver {
    float: left;
    width: 100%;
    /* max-width:195px; */
    /* min-width:195px; */

    margin: 0;
    padding: 15px;
    color: #ffffff;
}

.divLeftMenuOver a {
    color: #ffffff;
}

.mRightBackOffice {
    /* float:left; */
    width: 100%;
    /* max-width: 1180px; */
    min-height: 700px;
    margin: 0 auto;
    padding: 100px 0 0 0;
}

.mRightBackOffice .divRightMain>table:not(:last-child) {
    margin-bottom: 20px;
}

.mRightBackOffice>form {
    width: auto;
    min-width: 1180px;
    padding: 0 25px;
    margin: 0 auto;
}

.divRightNav {
    float: left;
    width: 100%;
    margin: 0 auto;
    height: 38px;
    background-color: #fff;
    border-bottom: #c8c7cc solid 1px;
}

.divRightHead {
    float: left;
    width: 100%;
    margin: 0 auto;
    height: 80px;
}

.divRightMain {
    float: left;
    width: 100%;
    margin: 0;
    padding: 0;
    margin-top: -2px;
    height: auto;
}

.divRightNavTb {
    height: 38px;
    color: #ffffff;
}

.divRightTitleTb {
    height: 57px;
    border-bottom: #c8c7cc solid 2px;
    /*border-left:#c8c7cc solid 1px;*/
    background: #011e2e;
    color: #ffffff;
}

.divRightTitleTbFr {
    height: 37px;
    border-bottom: #c8c7cc solid 2px;
    /*border-left:#c8c7cc solid 1px;*/
    padding-left: 10px;
}

.divRightTitleTbL {
    height: 37px;
    border-bottom: #c8c7cc solid 2px;
    /*border-left:#c8c7cc solid 1px;*/
    background: #011e2e;
    color: #ffffff;
}

.divRightTitleTbR {
    height: 37px;
    border-bottom: #c8c7cc solid 2px;
    /*border-right:#c8c7cc solid 1px;*/
    background: #011e2e;
    color: #ffffff;
    /*border-left:#c8c7cc solid 1px;*/
}

.divRightContantTb {
    height: 37px;
    border-bottom: #c8c7cc solid 1px;
    /*border-left:#c8c7cc solid 1px;*/
    /*background-color:#ffffff;
    padding-left:10px;*/
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.divRightContantTbL {
    height: 37px;
    border-bottom: #c8c7cc solid 1px;
    /*border-left:#c8c7cc solid 1px;*/
    /*background-color:#ffffff;*/
    padding-top: 8px;
}

.divRightContantTbR {
    height: 37px;
    border-bottom: #c8c7cc solid 1px;
    /*border-right:#c8c7cc solid 1px;*/
    /*border-left:#c8c7cc solid 1px;*/
    /*background-color:#ffffff;*/
    padding-top: 8px;
}

.divRightContantTbRL {
    height: 37px;
    /*	border-bottom:#c8c7cc solid 1px;
            border-left:#c8c7cc solid 1px;
            border-right:#c8c7cc solid 1px;
    */
    /*background-color:#ffffff;*/
}

.divRightContantTbRLT {
    border: #c8c7cc solid 1px;
    /*background-color:#ffffff;*/
}

.divRightContantOverTb {
    height: 37px;
    border-bottom: #c8c7cc solid 1px;
    /*border-left:#c8c7cc solid 1px;*/
    /*background-color:#f9f9f9;
    padding-left:10px;*/
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.divRightContantOverTb a {
    font-weight: 500;
    font-size: 16px;
    color: #4c4b49;
}

.divRightContantOverTb a span {
    font-size: 14px;
    font-weight: 500;
}

.divRightContantOverTbL {
    height: 37px;
    border-bottom: #c8c7cc solid 1px;
    /*border-left:#c8c7cc solid 1px;*/
    /*background-color:#f9f9f9;*/
    padding-top: 8px;
}

.divOverTb {
    background-color: #ffffff;
}

.divOverTb:hover {
    background-color: #f1f2f2;
}

.divSubOverTb {
    background-color: #eaeaea;
}

.divSubOverTb:hover {
    background-color: #e1e0e0;
}

.divRightContantOverTbR {
    height: 37px;
    border-bottom: #c8c7cc solid 1px;
    /*border-right:#c8c7cc solid 1px;*/
    /*border-left:#c8c7cc solid 1px;*/
    /*background-color:#f9f9f9;*/
    padding-top: 8px;
}

.divRightManage {
    padding-left: 5px;
    padding-right: 5px;
    cursor: pointer;
}

.divRightContantEnd {
    height: 50px;
    display: none;
}

.footerBackOffice {
    width: 100%;
    min-width: 1024px;
    height: 50px;
    margin: 0;
    padding: 0;
    background-color: #616161;
    border-top: #4c4b49 solid 1px;
    color: #fff;
}

.footerBackOffice.f-main br:nth-child(2) {
    display: none;
}

/*###################### Form Add ################################*/
.viewEditorTileTxt {
    line-height: normal;
    margin-top: -10px;
    list-style-type: auto;
    padding: 20px;
}

.formTileTxt {
    height: auto;
    padding: 10px 15px 8px 15px;
}

.formFontSubjectTxt {
    font-size: 18px;
}

.formFontTileTxt {
    font-size: 14px;
    color: #616161;
    line-height: 25px;
}

.formFontNoteTxt {
    font-size: 12px;
    color: #616161;
    line-height: 25px;
}

.formInputContantTb {
    background-color: #fefefe;
    border: #c8c7cc solid 1px;
    height: 30px;
    width: 90%;
}

.formSelectContantTbShort {
    background-color: #fefefe;
    border: #c8c7cc solid 1px;
    height: 37px;
    width: 100%;
    font-size: 14px;
    line-height: 31px;
}

.formSelectContantPage {
    background-color: #fefefe;
    border: #c8c7cc solid 1px;
    height: 25px;
    width: 50px;
    font-size: 14px;
    border-radius: 5px;
    margin: 0 5px;
}

.formInputContantTbShot {
    /* background-color:#fefefe;
    border:#c8c7cc solid 1px;
    height:30px;
    width:39%;
    min-width:350px; */
    background-color: #fff;
    border: var(--color-border) solid 1px;
    height: 40px;
    width: 39%;
    min-width: 350px;
    border-radius: 5px;
    padding: 0 12px;
}

.formInputContantTbShot2 {
    background-color: #fefefe;
    border: #c8c7cc solid 1px;
    height: 30px;
    width: 19%;
    min-width: 150px;
}

.formInputContantTbShotBD {
    background-color: #fefefe;
    border: #c8c7cc solid 1px;
    height: 30px;
    width: 100%;
    min-width: 50px;
}

.formInputContantTbAlertY {
    border: #ff0000 solid 1px;
}

.formInputContantTbAlertYcheck {
    color: #ff0000;
}

.formInputContantTbAlertN {
    border: #c8c7cc solid 1px;
}

.formTextareaContantTb {
    background-color: #fefefe;
    border: #c8c7cc solid 1px;
    height: 130px;
    width: 90%;
    font-size: 14px;
}

.formRadioContantTb {
    background: none;
    border: none;
    height: 20px;
    margin-top: 10px;
}

.formCheckBoxContantTb {
    background: none;
    border: none;
    height: 20px;
    margin-top: 10px;
}

.equipment {
    background: none;
    border: none;
    height: 20px;
    margin-top: 10px;
}

.software {
    background: none;
    border: none;
    height: 20px;
    margin-top: 10px;
}

.hardware {
    background: none;
    border: none;
    height: 20px;
    margin-top: 10px;
}

.manageEdit {
    background: none;
    border: none;
    height: 20px;
    margin-top: 10px;
}

.formCheckboxList {
    background: none;
    border: none;
    height: 20px;
    margin-top: -3px;
}

.formCheckboxHead {
    background: none;
    border: none;
    height: 20px;
    margin-top: 5px;
}

.formDivRadioL {
    float: left;
    margin-right: 5px;
}

.formDivRadioR {
    float: left;
    margin-top: 11px;
    margin-right: 15px;
}

.formDivRadioJob {
    float: left;
    margin-top: 10px;
    margin-right: 15px;
    width: 80px;
}

.formDivView {
    margin-top: 10px;
    color: var(--color-dark);
}

.formDivViewColor {
    margin-top: 10px;
}

.formLeftContantTb {
    height: 37px;
    background-color: transparent;
    padding-right: 15px;
    padding-top: 10px;
    color: var(--color-dark);
}

.formEndContantTb {
    height: 20px;
    background-color: #ffffff;
    padding-right: 15px;
    padding-top: 20px;
    padding-bottom: 20px;
    border-top: #c8c7cc solid 1px;
}

.formRightContantTb {
    height: 37px;
    background-color: transparent;
    padding-bottom: 15px;
}

.formRightContantTbEditor {
    height: 37px;
    background-color: #ffffff;
    padding-bottom: 0px;
}

.divRightContantTbnoBL {
    height: 37px;
    border-left: #c8c7cc solid 1px;

    background-color: #ffffff;
}

.divRightContantTbnoBR {
    height: 37px;
    border-right: #c8c7cc solid 1px;
    background-color: #ffffff;
}

.divSortDrop {
    margin: 0px;
    height: 37px;
    border-left: #c8c7cc solid 1px;
    border-right: #c8c7cc solid 1px;
    border-bottom: #c8c7cc solid 1px;
    background-color: #f9f9f9;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    cursor: move;
    list-style: none;
}

.boxPermissionSort .divSortDrop {
    margin: 0;
    padding: 0;
}

#boxPermissionSort {
    float: left;
    width: 100%;
    margin: 0;
    padding: 0;
    height: auto;
}

.tbRightTitleTb {
    height: 37px;
    border-bottom: #c8c7cc solid 2px;
    /*	border-top:#c8c7cc solid 1px;
    */
}

.tbRightTitleTbFr {
    height: 37px;
    border-bottom: #c8c7cc solid 2px;
    border-top: #c8c7cc solid 1px;
    padding-left: 10px;
}

.tbRightTitleTbL {
    height: 37px;
    border-bottom: #c8c7cc solid 2px;
    /*	border-left:#c8c7cc solid 1px;
            border-top:#c8c7cc solid 1px;
    */
    padding-left: 15px;
}

.tbRightTitleTbR {
    height: 37px;
    border-bottom: #c8c7cc solid 2px;
    /*border-right:#c8c7cc solid 1px;
    border-top:#c8c7cc solid 1px;*/
}

.formSelectSearch {
    background-color: #fefefe;
    border: #c8c7cc solid 1px;
    height: 30px;
    width: 300px;
    font-size: 13px;
    margin-right: 5px;
    line-height: 24px;
    border-radius: 15px;
    padding-left: 15px;
}

.formSelectSearch2 {
    background-color: #fefefe;
    border: #c8c7cc solid 1px;
    height: 30px;
    width: 100%;
    min-width: 255px;
    font-size: 13px;
    margin-right: 5px;
    line-height: 24px;
    margin-bottom: 5px;
    border-radius: 15px;
    padding-left: 15px;
}

.formInputSearchdate {
    background-color: #fefefe;
    border: #c8c7cc solid 1px;
    height: 22px;
    width: 98%;
    min-width: 255px;
}

.formSelectSearchL {
    background-color: #fefefe;
    border: #c8c7cc solid 1px;
    height: 30px;
    width: 100%;
    min-width: 235px;
    font-size: 14px;
    margin-right: 5px;
    line-height: 24px;
}

.formSelectSearchR {
    background-color: #fefefe;
    border: #c8c7cc solid 1px;
    height: 30px;
    width: 100%;
    min-width: 205px;
    font-size: 14px;
    line-height: 24px;
}

.formInputSearchI {
    background-color: #fefefe;
    border: #c8c7cc solid 1px;
    height: 22px;
    width: 100%;
    min-width: 205px;
}

.formInputSearch {
    background-color: #fefefe;
    border: #c8c7cc solid 1px;
    height: 22px;
    width: 100%;
    min-width: 255px;
}

.file-input-wrapper {
    width: 350px;
    height: 40px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.file-input-wrapper>input[type="file"] {
    font-size: 200px;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
    cursor: pointer;
    width: 350px;
    height: 40px;
}

.file-input-wrapper>.btn-file-input {
    display: inline-block;
    width: 340px;
    height: 40px;
    border: #c8c7cc solid 1px;
    color: #000000;
    vertical-align: middle;
    text-align: center;
    background-color: #fefefe;
    font-size: 14px;
    cursor: pointer;
    border-radius: 5px;
    background-image: none;
}

.file-input-wrapper:hover>.btn-file-input {
    background-color: #dddddd;
    color: #000000;
    cursor: pointer;
}

.ajax-file-upload {
    width: 350px;
    height: 40px !important;
    padding-top: 10px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    border: #c8c7cc solid 1px;
    color: var(--color-dark) !important;
    vertical-align: middle;
    text-align: center;
    background-color: #fefefe;
    font-size: 14px;
    cursor: pointer;
    border-radius: 5px;
}

.divRightHome {
    float: left;
    width: 100%;
    margin: 0;
    padding: 0px;
    height: auto;
}

.divRightInnerHome {
    min-width: 1180px;
    padding: 0 25px;
    margin: 0 auto;
    margin-top: 0;
    margin-bottom: 20px;
    height: auto;
}

.divRightInnerTopBoxHome {
    float: left;
    width: calc(100% / 3);
    padding: 0;
    margin: 0 auto;
    height: 160px;
    /* margin-right: 20px; */
    margin-bottom: 20px;
    /* margin-left:1.7%; */
    /* margin-bottom:1.7%; */
    border-bottom: #e9e9ea solid 1px;
    overflow: hidden;

}

.divRightInnerTopBoxHome:nth-child(1) {
    border-left: 3px solid #0058c6;
}

.divRightInnerTopBoxHome:nth-child(2) {
    border-left: 3px solid #17C653;
}

.divRightInnerTopBoxHome:nth-child(3) {
    border-left: 3px solid #F6C000;
}

.divRightInnerTopBoxHome img {
    width: 50px;
}

/* .divRightInnerTopBoxHome.-last{
    margin-right: 0;
} */

.divRightInnerBoxHome {
    float: left;
    width: 31%;
    padding: 0;
    margin: 0 auto;
    height: auto;
    margin-left: 1.7%;
    margin-bottom: 1.7%;
}

.divRightInnerBigBoxHome {
    float: left;
    width: 100%;
    padding: 0;
    margin: 0 auto;
    height: auto;
    margin-left: 0;
    margin-bottom: 20px;
}

.divRightTitleHome {
    height: 38px;
    border-bottom: #c8c7cc solid 2px;
    color: #ffffff;
}

.divRightTitleHomeBoxAll {
    height: 38px;
    border: #c8c7cc solid 1px;
    border-radius: 3px;
    box-shadow: 0px 2px 3px #d4d4d4;
    -moz-box-shadow: 0px 2px 3px #d4d4d4;
    -webkit-box-shadow: 0px 2px 3px #d4d4d4;
    background: #011e2e;
}

.divRightTrHome {
    height: 180px;
    padding-top: 8px;
    overflow: hidden;
    background-color: #ffffff;
}

.boxViewAllHome {
    margin: 10px;
    height: 20px;
    padding: 5px;
    background: #cccccc;
    border: #c8c7cc solid 1px;
    border-radius: 3px;
    box-shadow: 0px 2px 3px #d4d4d4;
    -moz-box-shadow: 0px 2px 3px #d4d4d4;
    -webkit-box-shadow: 0px 2px 3px #d4d4d4;
}

.boxViewAllHomeTable {
    height: 125px;
}

.fontTitlTbHome {
    font-size: 16px;
}

.fontContantTbHome {
    font-size: 14px;
    color: #333;
}

.divRightTrHomeLog {
    border-bottom: #c8c7cc solid 1px;
}

#boxHomeSort {
    /* float: left;
  width: 100%; */
    padding: 0;
    margin: 0 auto;
    height: auto;
    /* margin-left: 0px;
  margin-bottom: 1.7%; */
    margin: -7.5px;
}

.ui-sortable::before,
.ui-sortable::after {
    content: "";
    display: table;
}

.boxHomeSortli {
    float: left;
    width: calc(100% / 3);
    padding: 0;
    margin: 0 auto;
    height: auto;
    padding: 7.5px;
    /* margin-left: 1.7%;
  margin-bottom: 1.7%; */
    list-style: none;

}

.boxHomeSortli .divRightTrHome table {
    margin-top: 10px;
}

.boxHomeSortli .divRightTrHome table tr:first-child td {
    background-color: transparent;
}

.boxHomeSortli .divRightTrHome table tr td:first-child {
    color: var(--color-primary);
}

/* .boxHomeSortli .divRightTrHome table tr td:first-child::before {
  content: '';
  position: absolute;
  left: 10px;
  width: 2px;
  height: 100%;
  background-color: var(--color-primary);
} */

.boxHomeSortli .divRightTrHome table tr {
    border-bottom: 5px solid transparent;
}

.boxHomeSortli .divRightTitleHome {
    background: -o-linear-gradient(337.86deg, #3A7BD5 0%, #04ccf7 100%);
    background: linear-gradient(112.14deg, #3A7BD5 0%, #04ccf7 100%);
}

.boxHomeSortli .divRightTitleHomeBoxAll {
    border-radius: 5px;
    overflow: hidden;
    background-color: transparent;
    border: 1px solid #eee;
    -webkit-box-shadow: 0 5px 8px 0 rgba(24, 28, 33, 0.04);
    box-shadow: 0 5px 8px 0 rgba(24, 28, 33, 0.04);
}

.boxHomeSortli .divRightTitleHome a {
    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: 18px;
    height: 18px;
    /* background-color: rgba(255, 255, 255, 0.5); */
    border: 1px solid #fff;
    border-radius: 3px;
}

.boxHomeSortli .divRightTitleHome a span {
    color: #fff;
    font-weight: bold;
    font-size: 12px;
}

.boxHomeSortPic {
    float: left;
    padding: 0;
    margin: 0 auto;
    height: auto;
    list-style: none;
    cursor: move;
}

.divRightInnerBoxHome {
    float: left;
    width: 100%;
    padding: 0;
    margin: 0 auto;
    height: auto;
}

.ui-datepicker {
    font-family: tahoma;
    font-size: 14px;
    text-align: center;
    min-width: 350px;
}

.divRightHeadSearch {
    padding-bottom: 20px;
    width: 100%;
    margin: 0 auto;
    height: auto;
    border-bottom: #c8c7cc solid 1px;
}

.divRightHeadSearch>table {
    width: 100%;
}

.divRightHeadSearch .select2-container {
    width: 100% !important;
}

.haedEnews {
    width: 100%;
    height: 38px;
    background-color: #f6f6f6;
    border-bottom: #c8c7cc solid 1px;
}

.fontHeadEnews {
    font-size: 16px;
    padding-left: 14px;
}

.formSelectStatus {
    background-color: #fefefe;
    border: #c8c7cc solid 1px;
    height: 30px;
    width: 100px;
    font-size: 14px;
    line-height: 24px;
}

.formSelectStatusSn {
    background-color: #fefefe;
    border: #c8c7cc solid 1px;
    height: 30px;
    width: 160px;
    font-size: 14px;
    line-height: 24px;
}

.selectTheme {
    width: 300px;
    /*height: 50px;*/
    list-style: none;
    /*margin: 0;*/
    margin: 0;
    padding: 0;
    overflow: auto;
}

.parentTheme {
    position: relative;
    width: 50px;
    height: 50px;
    float: left;
    margin-right: 3px;
    margin-bottom: 3px;
}

.themeActive {
    margin: 1px;
    border: 3px #fff solid;
    width: 42px;
    height: 42px;
    background-image: url(../img/controlpage/correct.png);
    background-position: top right;
    background-repeat: no-repeat;
}

.tbBoxViewBorder {
    border: #cccccc solid 1px;
    border-radius: 3px;
    box-shadow: 0px 2px 3px #d4d4d4;
    -moz-box-shadow: 0px 2px 3px #d4d4d4;
    -webkit-box-shadow: 0px 2px 3px #d4d4d4;
    background: #ffffff;
}

.tbBoxViewBorderBottom {
    border-bottom: #cccccc solid 1px;
    padding-left: 20px;
    line-height: 1.4em;
    background: #011e2e;
    color: #ffffff;
}

.tbBoxViewBorderBottom span {
    color: #ffffff;
}

.tbBoxListwBorder {
    border: #c8c7cc solid 1px;
    border-radius: 3px;
    box-shadow: 0px 2px 3px #d4d4d4;
    -moz-box-shadow: 0px 2px 3px #d4d4d4;
    -webkit-box-shadow: 0px 2px 3px #d4d4d4;
    background: #ffffff;
}

/*################## 2016 Login ################33*/

.headBackOfficeLogin {
    width: 100%;
    min-width: 1024px;
    height: 108px;
    margin: 0;
    padding: 0;
    background-color: #fefefe;
    /*border-bottom:#c8c7cc solid 1px;
    border-top:#aaaaaa solid 1px;*/
    padding-top: 2px;
    padding-bottom: 3px;
}

.imgLogoLogin {
    float: left;
    position: relative;
    margin: 0;
    padding: 0;
}

.headLoginNew {
    width: 100%;
    min-width: 1024px;
    min-height: 560px;
    margin: 0;
    padding: 0;
    background: url(../img/logo/login-bg.jpg) top no-repeat;
}

/* ####################### Start Login ######### */
.boxLogin {
    width: 394px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 30px;
    color: #fff;
    height: 320px;
    background: #011e2e;
    float: right;
    -webkit-box-shadow: inset -20px 20px 80px rgba(0, 0, 0, 0.1);
    box-shadow: inset -20px 20px 80px rgba(0, 0, 0, 0.1);
}

.boxInput {
    border: 2px solid #fff;
    padding: 0;
    margin: 0;
    height: 35px;
    width: 100%;
}

.styleInput {
    border: none;
    width: 299px;
    height: 35px;
    background-color: #ffffff;
    font-size: 16px;
    text-indent: 12px;
    margin: 0;
    padding: 0;
}

.login-btn {
    width: 100%;
    display: block;
    padding: 0;
    text-decoration: none;
    height: 50px;
    text-align: center;
    margin-top: 15px;
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    background: #616161;
    color: #fff;
    font: 400 normal 24px/50px "Helvethaica Mon";
    border: none;
    cursor: pointer;
}

.login-btn:hover {
    background: #4f4e4e;
}

.login-title {
    padding: 100px 60px;
    float: left;
}

.login-title .title {
    font: 700 normal 52px "Helvethaica Mon";
    margin: 0;
    line-height: 1;
    color: #333333;
    text-align: left;
}

.login-title .subtitle {
    font: 600 normal 39px "Helvethaica Mon";
    margin: 0;
    text-align: left;
}

.txtLogoLogin {
    float: left;
    position: relative;
    margin: 0;
    padding: 0;
}

.txtLogoLogin .title {
    font: 700 normal 40px "Helvethaica Mon";
    margin: 0;
    line-height: 1;
    color: #011e2e;
    text-align: left;
    margin-top: 25px;
}

.txtLogoLogin .subtitle {
    font: 600 normal 26px "Helvethaica Mon";
    margin: 0;
    text-align: left;
    margin-top: -5px;
}

.txtLogoLogin .titleInner {
    font: 700 normal 30px "Helvethaica Mon";
    margin: 0;
    line-height: 1;
    color: #011e2e;
    text-align: left;
    margin-top: 7px;
}

.txtLogoLogin .subtitleInner {
    font: 600 normal 16px "Helvethaica Mon";
    margin: 0;
    text-align: left;
    margin-top: -3px;
}

/* ####################### End Login ######### */

/* ###################### Star New Menu Sub #####################*/
.menuSubMod {
    float: right;
    width: auto;
    text-align: center;
    background-color: transparent;
    border-radius: 5px;
    /* color: var(--color-dark); */
    margin-left: 10px;
    background-color: #fff;
    /* border: 1px solid var(--color-border); */
}

.menuSubMod a {
    display: block;
    min-width: 100px;
    padding: 10px 15px;
    color: #a8a8b9 !important;
    font-weight: 500;
}

.menuSubMod.active {
    background-color: var(--color-primary);
    border-color: transparent;
}

.menuSubMod.active a {
    color: #fff !important;
}

.btnNewComment {
    border: #cccccc solid 1px;
    border-radius: 3px;
    box-shadow: 0px 2px 3px #d4d4d4;
    -moz-box-shadow: 0px 2px 3px #d4d4d4;
    -webkit-box-shadow: 0px 2px 3px #d4d4d4;
    background: #ffffff;
    width: 200px;
    padding: 12px;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 20px;
    cursor: pointer;
}

.btnNewComment:hover {
    border: #cccccc solid 1px;
    border-radius: 3px;
    box-shadow: 0px 2px 3px #d4d4d4;
    -moz-box-shadow: 0px 2px 3px #d4d4d4;
    -webkit-box-shadow: 0px 2px 3px #d4d4d4;
    background: #cccccc;
    width: 200px;
    padding: 12px;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 20px;
    cursor: pointer;
}

/* ###################### End New Menu Sub #####################*/

.listper {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

.listper input {
    height: auto;
}

.listper li {
    float: left;
    margin: 5px;
}

.listper li span {
    line-height: 40px;
}

.listper label {
    background: #eaeaea;
    border: 1px solid #333;
    padding: 5px;
    margin: 5px;
    display: block;
}

.tabchart {
    padding: 8px;
    background: #ecfbf8;
    text-align: right;
}

.tabchart select {
    padding: 3px;
    border: 1px solid #333;
    background: #fff;
}

#viewChartImage {
    padding: 8px;
    text-align: right;
}

#viewChartImage img {
    width: 100%;
}

/* .divmenu {
  width: 225px;
} */

.listImggallery {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

.listImggallery li {
    display: block;
    float: left;
    padding: 15px;
    border: 1px solid #d4d4d4;
    margin-bottom: 4px;
    margin-right: 4px;
}

.listImggallery li label {
    margin-left: 5px;
    float: left;
    font-size: 11px;
}

.listImggallery li .delimgal {
    float: left;
    cursor: pointer;
}

.btnHistory {
    width: 52px;
    height: 52px;
    background: url(../img/btn/history.png) center no-repeat;
    margin-left: 15px;
    text-align: center;
    padding-top: 10px;
    float: left;
    cursor: pointer;
}

/*---------- j10 editor ----------*/
html {
    height: 100%;
}

body {
    /* min-height: 100vh;  */
    height: 100%;
    background-color: #f6f6f9;
    color: var(--color-default);
    -moz-osx-font-smoothing: grayscale;
    /*font-family: Arial,Helvetica Neue,Helvetica,sans-serif;*/
    /* font-family: Arial,sans-serif; */
    /*-webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;*/
}

/*---------- main color ----------*/
.headBackOffice {
    background-color: #ffffff;
    border-bottom: solid #231f20 2px;
}

.divRightTitleHomeBoxAll {
    background-color: #011e2e;
}

.divRightInnerBigBoxHome .divRightTitleHomeBoxAll>tbody>tr:first-child>td {
    border-bottom: 2px solid #011e2e;
}

.login-form .btn {
    background: var(--color-primary);
    /* border: 1px solid transparent; */
    border: 1px solid var(--color-primary) !important;
    border-radius: 4px;
    -webkit-transition: All 200ms ease;
    -moz-transition: All 200ms ease;
    -o-transition: All 200ms ease;
    transition: All 200ms ease;
}

.login-form .btn:hover {
    background: #fff;
    color: var(--color-primary);
}

.divLogin a {
    color: #fff;
}

.divLogin-btn .fa {
    color: #231f20;
}

.divLeftMenuTb a {
    color: var(--color-dark);
}

.divLeftMenuTb a .angle {
    color: var(--color-dark);
}

.menuSubManage a {
    color: var(--color-dark);
}

.fontContantTbNav {
    color: var(--color-dark);
}

.divRightNavTb {
    color: var(--color-dark);
}

.fontHeadRight {
    color: var(--color-dark);
}

.fontContantTbHome {
    color: var(--color-dark);
}

.divRightInnerTopBoxHome a {
    color: var(--color-dark);
}

a:link,
a:visited {
    color: var(--color-dark);
}

.fontTitlTbHome {
    color: var(--color-dark);
}

.fontContantTbNavPage {
    color: var(--color-dark);
    font-size: 13px;
}

.fontContantTbNavPage .select2-container {
    width: 50px !important;
    margin: 0 4px;
}

.fontContantTbNavPage .select2-container--default .select2-selection--single {
    border-radius: 5px;
    height: 30px;
}

.fontContantTbNavPage .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 30px;
}

.fontContantTbNavPage .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 30px;
    /* top: -1.5px;
  right: -3px; */
}

.footerBackOffice img {
    width: 39px;
    height: 39px;
    border-radius: 50%;
    margin-right: 15px;
}

.footerBackOffice {
    height: auto;
    /* padding: 1.25rem 0; */
    border: none;
    /* background: url("../img/static/bg-kanok.svg") center; */
    background-size: cover;
    background-color: #ecf2f3;
    color: var(--color-default);
    text-align: center;
    /* display: flex; */
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 16px;
}

.footerBackOffice .d-flex {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.footerBackOffice>div {
    display: table;
    width: 100%;
}

.footerBackOffice>div>div {
    padding: 15px 25px;
    float: none;
    margin: 0;
    display: table-cell;
    vertical-align: middle;
}

.footerBackOffice .imgLogo,
.footerBackOffice .divLogin {
    color: #333;
    margin: 15px 15px;
    font-size: 12px;
    line-height: 1.4em;
}

.footerBackOffice .imgLogo {
    text-align: left;
}

.footerBackOffice .divLogin {
    text-align: right;
    font-size: 11px;
    font-weight: bold;
    color: #bbb;
    /* padding-right: 75px; */
}

.mainBackOffice td.borderLeft {
    border: none;
}

.imgLogo {
    margin: 5px 15px 5px 15px;
}

.imgLogo img {
    height: 50px;
}

.tbLeftMenu,
.mLeftBackOffice {
    background-color: #fff;
}

.divLeftMenu {
    /* background-color: #fff; */
    border: none;
    margin: 0;
    width: auto !important;
    float: none;
}

.divLeftMenuOver {
    font-size: 16px;
    margin-bottom: 3px !important;
    float: none;
    width: auto !important;
    /* margin: 0 12px; */
    border: none !important;
}

.divLeftMenuOver a {
    display: block;
    /* line-height: 1.2em; */
    /* padding: 10px; */
    /* border-radius: 4px; */
    font-weight: normal;
    color: #fff;
    /* width: 205px; */
}

.divLeftMenu-header {
    border-bottom: 1px solid var(--color-border);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 15px 12px;
    margin-bottom: 12px;
}

.divLeftMenu-header .logo a {
    display: block;
    width: 40px;
    height: 40px;
    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;
}

.divLeftMenu-header .logo img {
    width: 100%;
    height: auto;
}

.divLeftMenu-header .inner {
    padding-left: 8px;
}

.divLeftMenu-header .inner .title {
    font-size: 14px;
    font-weight: bold;
    margin: 0;
}

.divLeftMenu-header .inner .desc {
    font-size: 11px;
    font-weight: normal;
    color: var(--color-dark);
    margin: 1px 0 0 0;
    line-height: 1.4em;
}

.divLeftMenu-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 229px;
    background-color: #fff;
    z-index: 1000;
    border-top: 1px solid var(--color-border);
    height: 55px;
}

.mLeftBackOffice {
    width: 100% !important;
    top: 0;
    bottom: auto;
    padding: 14px 25px 17px 25px;
    background-color: var(--color-primary);
    border-bottom: 3px solid #ccc;
}

.mLeftBackOffice .logo a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #0058c6;
    font-size: 28px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}

.mLeftBackOffice .logo a .title {
    font-size: 18px;
    font-weight: bold;
    line-height: 1.5em;
    color: #fff;
    margin-top: -4px;
}

.mLeftBackOffice .logo img {
    height: 50px;
    margin-right: 10px;
    margin-bottom: 0;
}

.mLeftBackOffice .logo a small {
    display: block;
    font-size: 13px;
    font-weight: 500;
    margin-top: 2px;
    line-height: 1em;
}

.tbLeftMenu {
    width: 0 !important;
}

.divLeftMenu a,
.divLeftMenuOver a {
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    line-height: 1.4em;
    font-weight: 500;
}

.divLeftMenu .icon-chevron-down,
.divLeftMenuOver .icon-chevron-down {
    position: absolute !important;
    top: 11px !important;
    right: 6px;
    margin: 0 !important;
    color: var(--color-dark);
}

.divLeftMenuOver {
    padding: 0;
}

.divLeftMenuTb,
.divLeftMenuOver {
    padding: 0;
    position: relative;
    margin-bottom: 0;
}

.divLeftMenuTb a,
.divLeftMenuOver a {
    font-size: 16px;
    display: block;
    position: relative;
    height: auto;
    line-height: 1.3em;
    color: #646464;
    padding: 10px 20px;
    padding-left: 35px;
    /* margin: 0 25px; */
    border: 1px solid transparent;
    border-radius: 5px;
    font-size: 16px;
}

.divLeftMenuTb td,
.divLeftMenuOver td {
    position: relative;
    padding: 0 25px;
}

.divLeftMenuOver a {
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    background-color: #267ce808;
}

.divLeftMenuOver td::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 4px;
    height: 30px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    background-color: var(--color-primary);
    border-radius: 0 10px 10px 0;
}

.divLeftMenuTb a .material-symbols-outlined,
.divLeftMenuOver a .material-symbols-outlined {
    position: absolute;
    top: 50%;
    left: 5px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 22px;
}

.divLeftMenuTb a:hover,
.divLeftMenuOver a:hover {
    color: var(--color-primary);
}

.divLeftMenu.-LogOut {
    border-top: 2px solid #f4f4f4;
    position: absolute;
    bottom: 0;
    width: 100% !important;
}

.divLeftMenu.-LogOut a {
    border-bottom: 1px solid transparent;
    color: var(--color-danger);
}

.divLeftMenu.-LogOut a:hover {
    color: var(--color-danger);
}

.divLeftMenuTb a .feather {
    position: relative;
    top: 1px;
    margin: 0 4px 0 0;
    font-size: 16px;
}

.divLeftMenuTb a .fa {
    margin-right: 5px;
    position: absolute;
    /* top: 12.5px; */
    left: 15px;
    font-size: 14px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.divLeftMenuTb a .fa.angle {
    font-size: 18px;
    position: absolute;
    top: 50%;
    left: auto;
    right: 0;
    margin: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.divLeftMenuTb a img {
    position: relative;
    margin-left: -10px;
    width: 14px;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.divLeftMenuOverNew {
    min-width: inherit;
    max-width: inherit;
    width: 100%;
    background-color: #54667a;
}

.divLeftMenuOverNew a {
    color: #fff;
    font-weight: normal;
}

.divLeftMenuOverNew a .fa {
    /* color: #fff; */
    color: var(--color-dark);
}

.divLeftMenuOverNew .divLeftMenuTb a img {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

.divLeftSubMenuOver {
    min-width: inherit;
    max-width: inherit;
    width: 100%;
    background-color: transparent;
    color: var(--color-dark);
}

.divLeftSubMenuOver a,
.fontContantSubMenu:link,
.fontContantSubMenu:visited {
    color: var(--color-dark);
    font-weight: normal;
    font-size: 14px;
}

.divLeftSubMenuTb a:hover {
    background-color: #000;
}

.divLeftSubMenuOver {
    border-bottom: none;
}

.divLeftSubMenuOver a {
    background-color: var(--color-primary-hover);
    color: var(--color-primary);
}

.divLeftSubMenuOver a:hover {
    background-color: var(--color-primary-hover);
    color: var(--color-primary);
}

.divLeftSubMenu,
.divLeftSubMenuOver {
    margin-bottom: 3px;
}

.divLeftMenuTb td>div {
    position: absolute;
    top: 16px;
    right: 12px;
}

.divLeftSubMenuTb {
    padding: 0;
}

.divLeftSubMenuTb a {
    position: relative;
    padding: 10px 10px 10px 50px;
    display: block;
}

.divLeftSubMenuTb a:before {
    content: "";
    display: block;
    width: 4px;
    height: 4px;
    border: 1px solid #54667a;
    position: absolute;
    left: 35px;
    top: 17px;
    border-radius: 50%;
}

.divLeftSubMenuTb a:hover {
    font-weight: normal;
    background-color: #54667a;
    color: #fff;
}

.divLeftSubMenuTb a:hover:before {
    border-color: #fff;
}

.divLeftSubMenu a,
.divLeftSubMenuTb a {
    /* padding: 10px 10px 10px 34px; */
    padding: 10px;
    line-height: 1.2em;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    margin: 0 25px;
    margin-left: 34px;
    border-radius: 5px;
    color: var(--color-dark);
    font-size: 14px;
}

.divLeftSubMenu a:hover,
.divLeftSubMenuTb a:hover {
    background-color: #f6f6f9;
    color: var(--color-dark);
}

.divLeftSubMenu a:before,
.divLeftSubMenuTb a:before {
    display: none;
}

.divLeftMenuOverNew {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 3px;
    float: none;
    width: auto !important;
    border-radius: 4px;
    background-color: transparent;
    border: none;
}

.divLeftMenuOverNew:hover {
    background-color: #f6f6f9;
    color: var(--color-dark);
}

.divLeftMenuOverNew a {
    color: var(--color-dark);
}

.divLeftMenuOverNew a .icon-chevron-down {
    position: absolute !important;
    top: 11px !important;
    right: 6px;
    margin: 0 !important;
    color: var(--color-dark);
}

.divLeftMenuOverNew a .fa.angle {
    color: var(--color-dark);
}

.divLeftMenuOverNew a:hover {
    color: var(--color-dark);
}

.divLeftMenuOverNew[onclick*="clickOutSubMenuLeft"] a .fa.angle {
    -webkit-transform: rotate(180deg) translateY(50%);
    -ms-transform: rotate(180deg) translateY(50%);
    transform: rotate(180deg) translateY(50%);
}

.divLeftSubMenu {
    border: none;
    background: transparent;
}


.borderLeft {
    border-color: #d1d1d1;
}

.headBackOffice {
    position: fixed;
    border: none;
    height: 60px;
    border-bottom: solid #011e2e 2px;
}

.mRightBackOffice {
    height: auto;
}

.navControl>.divLeftMenu:first-child a:before {
    content: "";
    width: 4px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.divRightNavTb {
    background-color: #fff;
    height: 50px;
    border: none;
}

.divRightNav>table {
    width: 100% !important;
}

.divLogin {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: auto;
    margin: 0;
    float: none;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.divLogin-img {
    overflow: hidden;
    border-radius: 5px;
}

.divLogin-img div {
    width: 40px;
    height: 40px;
}

.divLogin-name {
    padding: 0 10px 0 0;
    line-height: 1.2em;
    font-size: 14px;
    color: var(--color-light);
    font-weight: 500;
}

.divLogin-user {
    margin-top: 5px;
}

.divLogin-btn .fa {
    font-size: 20px;
    position: relative;
    top: 4px;
}

.divLogin>a {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 54px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 10px;
    /* width: 100%; */
    padding-left: 0;
}

.divLogin-btn {
    position: absolute;
    top: 15px;
    right: 12px;
    width: 16px;
    height: 24px;
    border-radius: 3px;
    border: 1px solid var(--color-border);
    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;
}

.divLogin .dropdown-menu {
    width: 204px;
    margin: 8px 10px 4px 0;
    padding: 5px;
    border: none;
    border-radius: 5px;
    -webkit-box-shadow: 0 5px 8px 0 rgba(24, 28, 33, 0.04);
    box-shadow: 0 5px 8px 0 rgba(24, 28, 33, 0.04);
}

.divLogin .dropdown-menu a {
    line-height: 1.3em;
    display: block;
    padding: 10px;
    font-size: 14px;
    color: var(--color-dark);
    border-radius: 6px;
    font-weight: 500;
}

.divLogin .dropdown-menu a:hover {
    background-color: #f2f2f2;
}

.divLogin .logout a {
    color: var(--color-danger);
}

.divLogin .logout a:hover {
    color: #fff;
    background-color: var(--color-danger);
}

.menuSub {
    background-color: transparent;
    position: absolute;
    top: 60px;
    border: none;
    height: auto !important;
}

.menuSubManage {
    width: 200px;
    height: auto;
    margin: 0;
    padding: 8px 0;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.08);
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.08);
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.08);
}

.menuSubManage ul {
    padding-left: 0;
    margin: 0;
}

.menuSubManage li {
    list-style: none;
    text-align: left;
}

.menuSubManage a {
    font-size: 13px;
    display: block;
    padding: 8px 15px;
}

.menuSubManage a:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

.menuSubManage a img {
    margin-right: 4px;
}

.menuSubManage a .fa {
    font-size: 14px;
    position: relative;
    top: 1px;
    margin-right: 6px;
}

.divRightNav {
    height: auto;
    border: none;
    padding: 0 15px;
    background-color: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.fontContantTbNav,
.divRightNavTb {
    font-size: 13px;
}

.fontContantTbNav {
    font-size: 14px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.fontContantTbNav img {
    margin: 0 5px;
    top: 0 !important;
}


.fontHeadRight {
    font-size: 20px;
    font-weight: bold;
    color: var(--color-primary);
}

.btnAdd,
.btnDel,
.btnSort,
.btnBack,
.btnSave,
.btnExport,
.btnExportPdf,
.btnHistory {
    padding: 0;
    width: 40px;
    height: 40px;
    background-size: 100%;
    margin-left: 10px;
    padding-top: 10px;
    border-radius: 5px;
}

.divRightInnerTopBoxHome {
    background-color: #fff;
    border: none;
    padding: 15px;
    height: 160px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 5px;
    -webkit-box-shadow: 0 5px 8px 0 rgba(24, 28, 33, 0.04);
    box-shadow: 0 5px 8px 0 rgba(24, 28, 33, 0.04);
}

.divRightTitleHomeBoxAll {
    border: none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    border-radius: 0;
}

.divRightTitleHome {
    border-bottom: none;
}

.borderBottom {
    border-color: #d3d7db;
}

.formEndContantTb {
    background-color: transparent;
    border-top-color: #d3d7db;
}

.divRightTrHomeLog {
    border-color: #eee;
}

.divRightInnerBigBoxHome {
    border: 1px solid #eee;
}

.divRightInnerBigBoxHome .divRightTitleHomeBoxAll {
    background-color: #fff;
}

.divRightInnerBigBoxHome .divRightTitleHomeBoxAll .divRightTitleHome {
    padding: 0;
}

.divRightTrHome {
    padding-top: 12px;
}

.divRightNavTb .inputContantTb {
    border-color: #d1d1d1;
    color: #54667a;
    font-size: 13px;
    padding: 0 15px;
    height: 30px;
    border-radius: 15px;
}

.btnSearch {
    width: 40px;
    height: 40px;
    border: 1px solid #d1d1d1;
    background-color: #fff;
    background-size: 14px;
    background-position: center;
    margin-left: 6px;
    border-radius: 50%;
}

.tbBoxListwBorder {
    border: none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

.divRightTitleTbL,
.divRightTitleTb,
.divRightTitleTbR {
    height: 46px;
}

.divRightContantOverTbL,
.divRightContantOverTb,
.divRightContantOverTbR {
    border-bottom: 1px solid var(--color-border);
    padding-top: 10px;
    padding-bottom: 10px;
    vertical-align: middle;
}

.divRightContantOverTb {
    padding-left: 10px;
}

.divRightContantOverTb a {
    font-size: 14px;
    font-weight: 500;
}

.fontTitlTbRight {
    font-size: 14px;
    font-weight: bold;
}

.divOverTb {
    background-color: #fff;
}

.divOverTb:hover {
    background-color: #f6f6f9;
}

.divSubOverTb {
    background-color: #fff;
}

.divSubOverTb:hover {
    background-color: #f6f6f9;
}

.formCheckboxList {
    height: auto;
    margin-top: 0;
}

.fontContantTbEnable {
    color: var(--color-success);
}

.divRightTitleTbL,
.divRightTitleTb,
.divRightTitleTbR {
    background-color: #2e3192;
    border-bottom: 2px solid;
}

.fontTitlTbRight {
    color: #fff;
}

.divRightTitleTb_L {
    text-align: left;
}

.tbBoxListwBorder {
    border-radius: 0;
}

.tbBoxViewBorder {
    border: none;
    border-radius: 5px;
    -webkit-box-shadow: 0 5px 8px 0 rgba(24, 28, 33, 0.04);
    box-shadow: 0 5px 8px 0 rgba(24, 28, 33, 0.04);
}

.tbBoxViewBorderBottom {
    background-color: transparent;
    line-height: 1.6em;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 20px;
}

.tbBoxViewBorderBottom .formFontSubjectTxt {
    color: var(--color-dark);
    font-weight: 600;
    font-size: 16px;
}

.tbBoxViewBorderBottom .formFontTileTxt {
    color: var(--color-dark);
    font-size: 12px;
    opacity: 1;
}

.formInputContantTb {
    padding: 6px 10px;
    height: 40px;
    border-radius: 5px;
    border: 1px solid var(--color-border);
}

.formTextareaContantTb {
    padding: 10px 10px;
    border-radius: 5px;
    border: 1px solid var(--color-border);
}

.formFontNoteTxt {
    color: var(--color-dark);
    padding-top: 4px;
    display: block;
}

.divRightMain {
    margin-top: -3px;
}

.formInputSearch {
    height: 40px;
    padding: 0 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 5px;
}

.divRightHeadSearch .btnSearch {
    margin-left: 0;
}

.formSelectSearch2 {
    height: 40px;
    margin-bottom: 0;
    padding: 0 5px;
}

#loadAlertLogin {
    margin-top: 15px;
}

.loginBack {
    margin: 0 0 auto 0;
    padding: 0 15px;
    background-color: transparent;
    background-size: cover;
}

.loginBack-wrapper {
    width: 500px;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: auto;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    -webkit-box-shadow: 0 0 60px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.2);
    margin-top: -40px;
}

.loginNew-wrapper .login-form {
    background-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 0;
}

.loginNew-wrapper .login-form .body {
    padding: 0;
    background-color: transparent;
    width: 400px;
}

.loginNew-wrapper .login-form .body .brand {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    margin: auto;
    margin-bottom: 20px;
}

.loginNew-wrapper .login-form .body .brand img {
    width: 140px;
}

.loginNew-wrapper .login-form .form-control {
    -webkit-box-shadow: none;
    box-shadow: none;
    height: 46px;
    font-size: 16px;
    padding-left: 40px;
}

.loginNew-wrapper .login-form .control-group>span {
    font-size: 16px;
}

.loginNew-wrapper .login-form .control-label {
    font-size: 16px;
}

.loginNew-wrapper .login-form .body .title {
    font-size: 28px;
}

.loginNew-wrapper .login-form .body .title small {
    font-size: 18px;
    margin-top: 8px;
}

.loginNew-wrapper .login-form .form-btn .btn-primary {
    height: 50px;
    line-height: 48px;
    font-size: 18px;
}

.loginNew-wrapper .collumn {
    position: relative;
    height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
}

.loginNew-wrapper .col-left {
    /* background-image: url(../img/bg-new-login.jpg); */
    background-size: cover;
    width: 65%;
}

.loginNew-wrapper .col-right {
    /* background-image: url(../img/bg-obj-login.jpg); */
    /* width: 35%; */
    /* background-size: cover; */
    background: var(--color-light);
}

.loginNew-wrapper .col-left>address {
    font-family: 'db_helvethaica';
    padding: 1.25rem;
    position: absolute;
    bottom: 0;
    width: 100%;
    margin: 0;
    font-size: 13px;
    color: #fff;
    background: transparent;
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    --webkit-backdrop-filter: blur(30px);
    background-color: rgb(0, 0, 0, 0.25);
    text-align: center;
}

.loginNew-wrapper .col-left>address br:nth-child(2) {
    display: none;
}

.loginNew-wrapper .col-right .copy-rights {
    font-family: 'db_helvethaica';
    font-size: 13px;
    margin-top: 15px;
    text-align: center;
    opacity: 0.7;
}

.loginNew-wrapper .col-right .versionsmall {
    font-family: 'db_helvethaica';
    position: absolute;
    bottom: 16px;
    font-size: 13px;
    font-weight: bold;
    color: #bbb;
}


.d-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.flex-lg-row-fluid {
    -webkit-box-flex: 1;
    -ms-flex: 1 auto;
    flex: 1 auto;
    min-width: 0;
}

.flex-center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.flex-column {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
}

.w-50 {
    width: 50% !important;
}

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

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

.login-side {
    width: 600px;
    height: 100%;
    background-color: #b6a04a;
    color: #fff;
    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;
}

.login-header {
    padding: 30px 20px 10px 20px;
    text-align: center;
}

.login-header img {
    max-width: 120px;
    height: auto;
}

.login-body {
    padding: 0;
}

.login-body .title {
    font-size: 30px;
    font-weight: bold;
    color: var(--color-primary);
    line-height: 1.5;
    margin-bottom: 30px;
    text-align: center;
}

.login-body .title small {
    display: block;
    font-size: 18px;
    font-weight: 500;
    margin-top: 2px;
}

.login-body .title div {
    padding: 0 30px 15px 30px;
    font-size: 36px;
    border-bottom: 4px solid var(--color-primary);
    line-height: 1.2em;
}

.login-footer {
    text-align: center;
    color: var(--color-dark);
    font-size: 11px;
    margin-top: 30px;
    padding: 15px 30px;
    border-top: 1px solid var(--color-border);
    line-height: 1.4em;
}

.login-form {
    -webkit-box-shadow: 5px 5px 90px rgba(0, 0, 0, 0.2);
    box-shadow: 5px 5px 90px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    overflow: hidden;
    background-color: #fff;
}

.login-form .body {
    padding: 30px;
}

.login-form * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.login-form .form-group {
    margin-bottom: 20px;
}

.login-form .form-btn {
    margin-top: 20px;
}

.login-form .control-label {
    color: var(--color-dark);
    font-weight: 500;
    font-size: 16px;
    padding-bottom: 3px;
    text-align: left;
    display: block;
}

.login-form .form-control {
    position: relative;
    width: 100%;
    height: 46px;
    border: 1px solid transparent;
    padding: 0 15px;
    color: var(--color-default);
    border: 1px solid #EAEAEA;
    font-size: 16px;
    background-color: #fff;
    border-radius: 5px;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding-left: 45px;
    -webkit-transition: All 200ms ease;
    -moz-transition: All 200ms ease;
    -o-transition: All 200ms ease;
    transition: All 200ms ease;
    -webkit-box-shadow: rgba(2, 1, 1, 0.2) 0px 2px 8px 0px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.login-form .control-group>span {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 15px;
    z-index: 1;
    font-weight: 500;
    font-size: 20px;
    color: var(--color-dark);
}

.login-form .control-group {
    position: relative;
}

.login-form .form-control:focus {
    outline: none;
    border-color: var(--color-primary);
}

.login-form .control-group button {
    background-color: transparent;
    border: none;
    border-radius: 0;
    width: 30px;
    height: 30px;
    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;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 10px;
    font-size: 16px;
    color: var(--color-dark);
    cursor: pointer;
}

.login-form .form-control::-webkit-input-placeholder {
    color: var(--color-default);
    opacity: 0.7;
}

.login-form .form-control::-moz-placeholder {
    color: var(--color-default);
    opacity: 0.7;
}

.login-form .form-control:-ms-input-placeholder {
    color: var(--color-default);
    opacity: 0.7;
}

.login-form .form-control:-moz-placeholder {
    color: var(--color-default);
    opacity: 0.7;
}

.login-form .btn {
    cursor: pointer;
    color: #fff;
    height: 46px;
    line-height: 44px;
    font-size: 16px;
    padding: 0 20px;
    border: none;
    width: 100%;
    border-radius: 5px;
    font-family: 'db_helvethaica';
    font-weight: bold;
}

.login-form .action {
    margin-top: 20px;
    text-align: center;
}

.login-form .action a {
    color: var(--color-dark);
    font-size: 16px;
    line-height: 1.2em;
}

.login-form .action a:hover {
    text-decoration: underline;
}

.login-form .form-btn .btn-primary {
    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;
}

.login-form .form-btn .btn-primary .icon {
    width: 40px;
    margin-right: 10px;
}

.login-form .form-btn .btn-primary .icon img {
    width: 100%;
}

.login-form .regis {
    font-size: 13px;
    color: var(--color-dark);
    text-align: center;
    margin-top: 15px;
}

.login-form .regis a {
    color: var(--color-secondary);
}

.login-form .regis a:hover {
    text-decoration: underline;
}

.login-form .form-btn.-regis {
    display: none;
}

.login-form .form-btn.-regis .btn {
    display: block;
}

.login-form .form-btn.-regis .btn {
    padding: 0 20px;
    height: 50px;
    min-width: 120px;
    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;
    border-radius: 5px;
    font-size: 16px;
    border: 1px solid #dfcb68;
    font-weight: 500;
    color: #411521;
    background: -webkit-gradient(linear, left top, left bottom, from(#e8da7a), to(#be982a));
    background: -o-linear-gradient(#e8da7a 0%, #be982a 100%);
    background: linear-gradient(#e8da7a 0%, #be982a 100%);
}

.login-form .form-btn.-regis .btn .icon {
    width: 34px;
    margin-right: 5px;
}

.login-form .form-btn.-regis .btn .icon img {
    width: 100%;
}

.formRightContantTb [class*=" flaticon-"]:before {
    margin-left: 0px;
}

.cursor {
    cursor: pointer;
}

.txtLogoLogin .titleInner {
    color: #231f20;
    font-size: 18px;
    font-weight: normal;
    padding-left: 15px;
    border-left: 1px solid #231f20;
    line-height: 1em;
    margin-top: 25px;
}

.txtLogoLogin .subtitleInner {
    display: none;
}


.divRightHeadSearch table {
    margin: 0 !important;
}

.divRightHeadSearch tr:nth-child(2) td,
.divRightHeadSearch tr:nth-child(2) td:last-child {
    padding-bottom: 0 !important;
}

.divRightHeadSearch tr>td.selectSearch1,
.divRightHeadSearch tr>td.selectSearch2,
.divRightHeadSearch tr>td.selectSearch2~td {
    padding-bottom: 0 !important;
}

.divRightHeadSearch tr>td#boxSelectTest,
.divRightHeadSearch tr>td#boxSelectTest~td {
    padding-bottom: 0 !important;
}

.divRightHeadSearch tr>td {
    padding: 0 10px 10px 0 !important;
}

.divRightHeadSearch tr>td:last-child {
    padding: 0 0 10px 0 !important;
}

.divRightHeadSearch tr>td table tr td {
    padding-bottom: 0 !important;
}

.divRightHeadSearch tr>td table tr td:last-child {
    padding-bottom: 0 !important;
}

.divRightHeadSearch .colTd01 {
    padding: 0 10px 10px 0 !important;
    width: 90% !important;
}

.divRightHeadSearch .colTd02 {
    padding: 0 10px 10px 0 !important;
    width: 42.5% !important;
}

.divRightHeadSearch .colTd04 {
    padding: 0 10px 10px 0 !important;
    width: 5% !important;
}


.divRightTitleTbL,
.divRightTitleTb,
.divRightTitleTbR {
    border-bottom: 1px solid var(--color-border);
    background-color: #fff;
}

.fontTitlTbRight {
    color: var(--color-dark);
}

.btnPlan {
    background-color: #011e2e;
    /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

.displayClickSubject {
    height: 50px;
    overflow: hidden;
}

.displayClickImg {
    width: 25px;
    height: 25px;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 50%;
}

.displayTdImg {
    width: 25px;
    padding-right: 10px;
}

.formInputSearchStyle {
    background-color: #fefefe;
    border: #c8c7cc solid 1px;
    height: 22px;
    width: 100%;
    min-width: 205px;
    border-radius: 15px;
    padding-left: 10px;
    padding-right: 10px;
}

.formInputSearchStyle:focus-visible {
    outline: none;
}

.formSelectContantTb,
.formSelectSearchStyle {
    background-color: #fefefe;
    border: var(--color-border) solid 1px;
    height: 40px;
    width: 100%;
    min-width: 235px;
    font-size: 14px;
    margin-right: 5px;
    line-height: 1px;
    border-radius: 4px;
    padding-left: 10px;
    padding-right: 10px;
}

.formSelectSearchStyle~.select2-container {
    width: 100% !important;
}

.formSelectSearchStyle30p {
    background-color: #fefefe;
    border: #c8c7cc solid 1px;
    height: 30px;
    width: 30%;
    min-width: 235px;
    font-size: 14px;
    margin-right: 5px;
    line-height: 24px;
    border-radius: 15px;
    padding-left: 10px;
    padding-right: 10px;
}

.formSelectHomeStyle {
    background-color: #fefefe;
    border: #c8c7cc solid 1px;
    height: 30px;
    width: 100%;
    font-size: 14px;
    margin-right: 5px;
    line-height: 24px;
    border-radius: 15px;
    padding-left: 10px;
    padding-right: 10px;
}

.formInputSearchStyle97p {
    background-color: #fefefe;
    border: #c8c7cc solid 1px;
    height: 22px;
    width: 97%;
    min-width: 205px;
    border-radius: 15px;
    padding-left: 10px;
    padding-right: 10px;
}

.formInputSearchStyle30p {
    background-color: #fefefe;
    border: #c8c7cc solid 1px;
    height: 22px;
    width: 30%;
    min-width: 205px;
    border-radius: 15px;
    padding-left: 10px;
    padding-right: 10px;
}

.formEndContantTb {
    border: none;
}

#scrollToTopBtn {
    position: fixed;
    z-index: 500;
    bottom: 60px;
    /* bottom: 15px; */
    right: 25px;
    width: 40px;
    height: 40px;
    background-color: var(--color-primary);
    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;
    border-radius: 5px;
    font-size: 0;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

#scrollToTopBtn.show {
    opacity: 0.8;
    visibility: visible;
}

#scrollToTopBtn.show:hover {
    opacity: 1;
}

#scrollToTopBtn:before {
    font-family: "feather";
    content: "\e82d";
    font-size: 18px;
    color: #fff;
    font-weight: normal;
}

#scrollToTopBtn img {
    display: none;
}

.formInputTransfer .block-control {
    position: relative;
}

.formInputTransfer .block-control span {
    position: absolute;
    top: 50%;
    left: 10px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    color: #b9b9b9;
    margin-top: -1px;
}

.formInputTransfer .block-control .formInputContantTb {
    padding-left: 30px;
}

.divRightNav {
    padding: 0;
    margin: 0 auto 0;
    background-color: transparent;
}

.divRightNav>table {
    width: 100% !important;
}

.divRightNav .divRightNavTb {
    background-color: transparent;
}

.divRightNavTb {
    height: auto;
}

.divRightHead {
    height: auto;
    padding-bottom: 15px;
}

.divRightHead>table {
    border-bottom: none !important;
    width: 100% !important;
}

.divRightHead>table td {
    height: 40px !important;
}

.divRightNavTb img {
    width: 14px;
    position: relative;
    top: -1px;
}

.divRightHeadSearch {
    margin-bottom: 15px;
    margin-top: 10px;
    border-bottom: none;
    float: left;
    width: 100%;
    background-color: #fff;
    border-radius: 5px;
    padding: 20px 20px 20px 20px;
    -webkit-box-shadow: 0 5px 8px 0 rgba(24, 28, 33, 0.04);
    box-shadow: 0 5px 8px 0 rgba(24, 28, 33, 0.04);
}

.divRightMain {
    /* margin-top: 10px; */
    margin-top: 0;
    margin-bottom: 30px;
}

.divRightMain .tbBoxListwBorder {
    border-radius: 5px;
    overflow: hidden;
    -webkit-box-shadow: 0 5px 8px 0 rgba(24, 28, 33, 0.04);
    box-shadow: 0 5px 8px 0 rgba(24, 28, 33, 0.04);
}

.divRightMain .tbBoxListwBorder tbody>tr:first-child td {
    background-color: var(--color-primary);
}

.divRightMain .tbBoxListwBorder tbody>tr:first-child td.divRightTitleTb {
    padding: 15px 10px !important;
}

.divRightMain .tbBoxListwBorder tbody>tr:first-child td.divRightTitleTbL,
.divRightMain .tbBoxListwBorder tbody>tr:first-child td.divRightTitleTbR {
    padding: 15px 0;
}

.divRightMain .tbBoxListwBorder tbody>tr:first-child td span {
    font-size: 16px;
    color: #fff;
}

.divRightMain .tbBoxListwBorder tbody>tr:first-child td .widthDivM {
    margin-bottom: 5px;
}

.divRightMain .tbBoxListwBorder tbody>tr:first-child td .fontContantTbTime {
    font-family: unset !important;
}

.divRightMain .tbBoxListwBorder tbody>tr:not(:first-child) tr td:first-child .widthDivM a {
    font-weight: 600;
}

.divRightMain .tbBoxListwBorder tbody>tr.divOverTb td,
.divRightMain .tbBoxListwBorder tbody>tr.divSubOverTb td,
.divRightMain .tbBoxListwBorder tbody>tr:last-child td {
    background-color: transparent;
}

.divRightMain .tbBoxListwBorder tbody>tr:last-child td span {
    font-size: 13px;
    color: #000;
}

.formInputSearchStyle {
    border: 1px solid var(--color-border);
    height: 40px;
    border-radius: 5px;
}

.btnSearch {
    border-radius: 5px;
}

.divRightTitleTbL {
    padding: 20px 0;
}

.divRightTitleTb {
    padding: 20px 10px;
}

.divRightTitleTbR {
    padding: 20px 15px;
}

.formCheckboxHead {
    margin-top: 0;
}

.displayTdImg .displayClickImg {
    width: 40px;
    height: 40px;
    border-radius: 3px;
    -o-object-fit: cover;
    object-fit: cover;
}

.divRightContantOverTb a {
    font-weight: 600;
}

.fontContantTbupdate {
    color: var(--color-dark);
    font-size: 12px;
}

.fontContantTbTime {
    color: var(--color-dark);
    display: block;
    margin-top: 0px;
    line-height: 1em;
    font-size: 12px;
}

.divRightManage {
    padding: 0 3px;
}

.divRightManage img {
    width: 24px;
    border-radius: 3px;
}


.divRightMain>br {
    display: none;
}

.divRightMain>.tbBoxViewBorder {
    margin-bottom: 20px;
    width: 100% !important;
    overflow: hidden;
}

.divRightMain>.tbBoxViewBorder .formInputContantTb,
.divRightMain>.tbBoxViewBorder .formInputContantTbShot,
.divRightMain>.tbBoxViewBorder .formTextareaContantTb,
.divRightMain>.tbBoxViewBorder .select2-container,
.divRightMain>.tbBoxViewBorder .control-group-password,
.divRightMain>.tbBoxViewBorder .formSelectContantTb {
    width: 78% !important;
}

.divRightMain>.tbBoxViewBorder .control-group-password>.formInputContantTbShot {
    width: 100% !important;
}


.divRightMain>.tbBoxViewBorder .formTileTxt tr .tbRightTitleTbL {
    border-top-left-radius: 5px;
}

.divRightMain>.tbBoxViewBorder .formTileTxt tr .tbRightTitleTbL .fontTitlTbRight {
    color: #000 !important;
}

.divRightMain>.tbBoxViewBorder .formTileTxt tr .tbRightTitleTbR {
    border-top-right-radius: 5px;
}

.divRightMain>.tbBoxViewBorder .formTileTxt tr .tbRightTitleTbL,
.divRightMain>.tbBoxViewBorder .formTileTxt tr .tbRightTitleTbL~td {
    padding-top: 15px;
    padding-bottom: 15px;
    background-color: #e2e2e2;
}

.divRightMain>.tbBoxViewBorder .control-group-password~br {
    display: none;
}


.divRightMain>table {
    border: none !important;
    width: 100% !important;
}

.divRightMain>table td.formTileTxt {
    padding: 0;
}

.divRightMain>table.tbBoxViewBorder td.formTileTxt {
    /* color: var(--color-light); */
    padding: 10px 15px 8px 15px;
    background-color: var(--color-primary);
    border: none;
}

.divRightMain>table.tbBoxViewBorder td.formTileTxt.tbBoxViewBorderBottom .formFontSubjectTxt {
    color: inherit;
}

.divRightMain>table.tbBoxViewBorder td.formTileTxt.tbBoxViewBorderBottom .formFontTileTxt {
    color: inherit;
}


.divSortDrop {
    height: auto;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    margin-bottom: 5px;
}

.divSortDrop td {
    vertical-align: middle;
}

.divRightInnerHome-topic {
    margin: 0;
    margin-top: 0;
    margin-bottom: 15px;
    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;
}

.divRightInnerHome-topic .title {
    font-size: 20px;
    font-weight: bold;
    line-height: 1.4em;
}

.divRightInnerHome-topic .date {
    color: var(--color-dark);
    font-size: 13px;
}

.divRightInnerHome-topic .date span {
    font-size: 1.2em;
    margin-right: 4px;
}

.divRightInnerTopBoxHome {
    padding: 20px;
    height: 170px;
}

.fontTitlTbHome {
    font-weight: bold;
}

.fontContantTbHome {
    color: var(--color-default);
    line-height: 1.6em;
}

.divRightInnerBigBoxHome>table {
    border-radius: 5px;
    overflow: hidden;
    -webkit-box-shadow: 0 5px 8px 0 rgba(24, 28, 33, 0.04);
    box-shadow: 0 5px 8px 0 rgba(24, 28, 33, 0.04);
}

.divRightInnerBigBoxHome>table tr:first-child table td {
    padding: 13px 20px;
}

.divRightInnerBigBoxHome>table tr:first-child table td span {
    color: #fff;
}

.divRightInnerBigBoxHome .divRightTitleHomeBoxAll>tbody>tr:first-child>td {
    border-bottom: 1px solid var(--color-border);
    background-color: var(--color-primary);
}

.divRightTrHomeLog b {
    color: var(--color-dark);
    font-size: 14px;
}

.divRightTrHome {
    padding: 0;
}

.divRightInnerBigBoxHome>table tr+tr td {
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: 13px;
}

.divRightTrHome>table tr:first-child td {
    background-color: whitesmoke;
}

#loadContantLogHome {
    padding: 0 !important;
}

.divLeftMenu.logout a {
    color: var(--color-danger);
}

.divLeftMenu.logout:hover {
    background-color: var(--color-danger);
}

.divLeftMenu.logout:hover a {
    color: #fff;
}

@font-face {
    font-family: "feather";
    src: url("../fonts/feather.eot?t=1501841394106");
    /* IE9*/
    src: url("../fonts/feather.eot?t=1501841394106#iefix") format("embedded-opentype"),
        /* IE6-IE8 */
        url("../fonts/feather.woff?t=1501841394106") format("woff"),
        /* chrome, firefox */
        url("../fonts/feather.ttf?t=1501841394106") format("truetype"),
        /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
        url("../fonts/feather.svg?t=1501841394106#feather") format("svg");
    /* iOS 4.1- */
}

@font-face {
    font-family: 'db_helvethaica';
    src: url('../fonts/helvethaica/db_helvethaica_x_bd_v3.2-webfont.eot');
    src: url('../fonts/helvethaica/db_helvethaica_x_bd_v3.2-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/helvethaica/db_helvethaica_x_bd_v3.2-webfont.woff2') format('woff2'), url('../fonts/helvethaica/db_helvethaica_x_bd_v3.2-webfont.woff') format('woff'), url('../fonts/helvethaica/db_helvethaica_x_bd_v3.2-webfont.ttf') format('truetype'), url('../fonts/helvethaica/db_helvethaica_x_bd_v3.2-webfont.svg#db_helvethaica_x75_bd') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'db_helvethaica';
    src: url('../fonts/helvethaica/db_helvethaica_x_med_v3.2-webfont.eot');
    src: url('../fonts/helvethaica/db_helvethaica_x_med_v3.2-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/helvethaica/db_helvethaica_x_med_v3.2-webfont.woff2') format('woff2'), url('../fonts/helvethaica/db_helvethaica_x_med_v3.2-webfont.woff') format('woff'), url('../fonts/helvethaica/db_helvethaica_x_med_v3.2-webfont.ttf') format('truetype'), url('../fonts/helvethaica/db_helvethaica_x_med_v3.2-webfont.svg#db_helvethaica_x65_med') format('svg');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'db_helvethaica';
    src: url('../fonts/helvethaica/db_helvethaica_x_v3.2-webfont.eot');
    src: url('../fonts/helvethaica/db_helvethaica_x_v3.2-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/helvethaica/db_helvethaica_x_v3.2-webfont.woff2') format('woff2'), url('../fonts/helvethaica/db_helvethaica_x_v3.2-webfont.woff') format('woff'), url('../fonts/helvethaica/db_helvethaica_x_v3.2-webfont.ttf') format('truetype'), url('../fonts/helvethaica/db_helvethaica_x_v3.2-webfont.svg#db_helvethaica_x55_regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

.new_login .login-form .form-control {
    font-size: 14px;
    color: #464646;
}

.new_login .login-form .form-btn {
    margin-top: 0;
}


.new_login {
    background: url('../img/bg-login.jpg') center;
    background-size: cover;
}

.new_login .login-form {
    background-color: #fff;
    width: 500px;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: auto;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    -webkit-box-shadow: 0 0 60px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.2);
    margin-top: -40px;
}

.new_login .login-form .form-group {
    margin-bottom: 20px;
}

.new_login .login-form .form-btn .btn {
    font-weight: bold;
    width: 100%;
    height: 44px;
    font-size: 16px;
    border-radius: 5px;
}

.new_login .login-form .input-group-addon {
    width: 110px;
    padding: 0 15px;
    text-align: center;
    background-color: transparent;
    border: none;
    position: absolute;
    z-index: 10;
}

.new_login .login-form .control-label {
    text-align: left;
    font-weight: normal;
    font-size: 16px;
    color: #666;
    margin: 0;
    line-height: 40px;
    text-align: left;
    padding-left: 0;
}

.new_login .login-form .control-label:after {
    content: '';
    position: absolute;
    top: 5px;
    right: 0;
    width: 1px;
    height: 30px;
    background-color: #e1e1e1;
}

.new_login .login-form .input-group {
    width: 100%;
    position: relative;
}

.new_login .login-form .input-group .form-control:last-child {
    width: 100%;
    height: 40px;
    padding-left: 125px;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15) inset;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.15) inset;
}

.login-form .header {
    height: 180px;
    background: url('../img/login-header.jpg') center;
    margin-bottom: 45px;
}

.login-form .header .brand {
    text-align: center;
}

.login-form .header .brand img {
    width: 240px;
}

.login-form .body {
    padding: 35px;
}

.login-form .body .title {
    font-size: 30px;
    font-weight: bold;
    color: var(--color-primary);
    text-align: center;
    line-height: 1em;
    margin-bottom: 30px;
}

.login-form .body .title small {
    display: block;
    font-weight: normal;
    font-size: 19px;
}


.feather {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: "feather" !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-alert-octagon:before {
    content: "\e81b";
}

.icon-alert-circle:before {
    content: "\e81c";
}

.icon-activity:before {
    content: "\e81d";
}

.icon-alert-triangle:before {
    content: "\e81e";
}

.icon-align-center:before {
    content: "\e81f";
}

.icon-airplay:before {
    content: "\e820";
}

.icon-align-justify:before {
    content: "\e821";
}

.icon-align-left:before {
    content: "\e822";
}

.icon-align-right:before {
    content: "\e823";
}

.icon-arrow-down-left:before {
    content: "\e824";
}

.icon-arrow-down-right:before {
    content: "\e825";
}

.icon-anchor:before {
    content: "\e826";
}

.icon-aperture:before {
    content: "\e827";
}

.icon-arrow-left:before {
    content: "\e828";
}

.icon-arrow-right:before {
    content: "\e829";
}

.icon-arrow-down:before {
    content: "\e82a";
}

.icon-arrow-up-left:before {
    content: "\e82b";
}

.icon-arrow-up-right:before {
    content: "\e82c";
}

.icon-arrow-up:before {
    content: "\e82d";
}

.icon-award:before {
    content: "\e82e";
}

.icon-bar-chart:before {
    content: "\e82f";
}

.icon-at-sign:before {
    content: "\e830";
}

.icon-bar-chart-2:before {
    content: "\e831";
}

.icon-battery-charging:before {
    content: "\e832";
}

.icon-bell-off:before {
    content: "\e833";
}

.icon-battery:before {
    content: "\e834";
}

.icon-bluetooth:before {
    content: "\e835";
}

.icon-bell:before {
    content: "\e836";
}

.icon-book:before {
    content: "\e837";
}

.icon-briefcase:before {
    content: "\e838";
}

.icon-camera-off:before {
    content: "\e839";
}

.icon-calendar:before {
    content: "\e83a";
}

.icon-bookmark:before {
    content: "\e83b";
}

.icon-box:before {
    content: "\e83c";
}

.icon-camera:before {
    content: "\e83d";
}

.icon-check-circle:before {
    content: "\e83e";
}

.icon-check:before {
    content: "\e83f";
}

.icon-check-square:before {
    content: "\e840";
}

.icon-cast:before {
    content: "\e841";
}

.icon-chevron-down:before {
    content: "\e842";
}

.icon-chevron-left:before {
    content: "\e843";
}

.icon-chevron-right:before {
    content: "\e844";
}

.icon-chevron-up:before {
    content: "\e845";
}

.icon-chevrons-down:before {
    content: "\e846";
}

.icon-chevrons-right:before {
    content: "\e847";
}

.icon-chevrons-up:before {
    content: "\e848";
}

.icon-chevrons-left:before {
    content: "\e849";
}

.icon-circle:before {
    content: "\e84a";
}

.icon-clipboard:before {
    content: "\e84b";
}

.icon-chrome:before {
    content: "\e84c";
}

.icon-clock:before {
    content: "\e84d";
}

.icon-cloud-lightning:before {
    content: "\e84e";
}

.icon-cloud-drizzle:before {
    content: "\e84f";
}

.icon-cloud-rain:before {
    content: "\e850";
}

.icon-cloud-off:before {
    content: "\e851";
}

.icon-codepen:before {
    content: "\e852";
}

.icon-cloud-snow:before {
    content: "\e853";
}

.icon-compass:before {
    content: "\e854";
}

.icon-copy:before {
    content: "\e855";
}

.icon-corner-down-right:before {
    content: "\e856";
}

.icon-corner-down-left:before {
    content: "\e857";
}

.icon-corner-left-down:before {
    content: "\e858";
}

.icon-corner-left-up:before {
    content: "\e859";
}

.icon-corner-up-left:before {
    content: "\e85a";
}

.icon-corner-up-right:before {
    content: "\e85b";
}

.icon-corner-right-down:before {
    content: "\e85c";
}

.icon-corner-right-up:before {
    content: "\e85d";
}

.icon-cpu:before {
    content: "\e85e";
}

.icon-credit-card:before {
    content: "\e85f";
}

.icon-crosshair:before {
    content: "\e860";
}

.icon-disc:before {
    content: "\e861";
}

.icon-delete:before {
    content: "\e862";
}

.icon-download-cloud:before {
    content: "\e863";
}

.icon-download:before {
    content: "\e864";
}

.icon-droplet:before {
    content: "\e865";
}

.icon-edit-2:before {
    content: "\e866";
}

.icon-edit:before {
    content: "\e867";
}

.icon-edit-1:before {
    content: "\e868";
}

.icon-external-link:before {
    content: "\e869";
}

.icon-eye:before {
    content: "\e86a";
}

.icon-feather:before {
    content: "\e86b";
}

.icon-facebook:before {
    content: "\e86c";
}

.icon-file-minus:before {
    content: "\e86d";
}

.icon-eye-off:before {
    content: "\e86e";
}

.icon-fast-forward:before {
    content: "\e86f";
}

.icon-file-text:before {
    content: "\e870";
}

.icon-film:before {
    content: "\e871";
}

.icon-file:before {
    content: "\e872";
}

.icon-file-plus:before {
    content: "\e873";
}

.icon-folder:before {
    content: "\e874";
}

.icon-filter:before {
    content: "\e875";
}

.icon-flag:before {
    content: "\e876";
}

.icon-globe:before {
    content: "\e877";
}

.icon-grid:before {
    content: "\e878";
}

.icon-heart:before {
    content: "\e879";
}

.icon-home:before {
    content: "\e87a";
}

.icon-github:before {
    content: "\e87b";
}

.icon-image:before {
    content: "\e87c";
}

.icon-inbox:before {
    content: "\e87d";
}

.icon-layers:before {
    content: "\e87e";
}

.icon-info:before {
    content: "\e87f";
}

.icon-instagram:before {
    content: "\e880";
}

.icon-layout:before {
    content: "\e881";
}

.icon-link-2:before {
    content: "\e882";
}

.icon-life-buoy:before {
    content: "\e883";
}

.icon-link:before {
    content: "\e884";
}

.icon-log-in:before {
    content: "\e885";
}

.icon-list:before {
    content: "\e886";
}

.icon-lock:before {
    content: "\e887";
}

.icon-log-out:before {
    content: "\e888";
}

.icon-loader:before {
    content: "\e889";
}

.icon-mail:before {
    content: "\e88a";
}

.icon-maximize-2:before {
    content: "\e88b";
}

.icon-map:before {
    content: "\e88c";
}

.icon-map-pin:before {
    content: "\e88e";
}

.icon-menu:before {
    content: "\e88f";
}

.icon-message-circle:before {
    content: "\e890";
}

.icon-message-square:before {
    content: "\e891";
}

.icon-minimize-2:before {
    content: "\e892";
}

.icon-mic-off:before {
    content: "\e893";
}

.icon-minus-circle:before {
    content: "\e894";
}

.icon-mic:before {
    content: "\e895";
}

.icon-minus-square:before {
    content: "\e896";
}

.icon-minus:before {
    content: "\e897";
}

.icon-moon:before {
    content: "\e898";
}

.icon-monitor:before {
    content: "\e899";
}

.icon-more-vertical:before {
    content: "\e89a";
}

.icon-more-horizontal:before {
    content: "\e89b";
}

.icon-move:before {
    content: "\e89c";
}

.icon-music:before {
    content: "\e89d";
}

.icon-navigation-2:before {
    content: "\e89e";
}

.icon-navigation:before {
    content: "\e89f";
}

.icon-octagon:before {
    content: "\e8a0";
}

.icon-package:before {
    content: "\e8a1";
}

.icon-pause-circle:before {
    content: "\e8a2";
}

.icon-pause:before {
    content: "\e8a3";
}

.icon-percent:before {
    content: "\e8a4";
}

.icon-phone-call:before {
    content: "\e8a5";
}

.icon-phone-forwarded:before {
    content: "\e8a6";
}

.icon-phone-missed:before {
    content: "\e8a7";
}

.icon-phone-off:before {
    content: "\e8a8";
}

.icon-phone-incoming:before {
    content: "\e8a9";
}

.icon-phone:before {
    content: "\e8aa";
}

.icon-phone-outgoing:before {
    content: "\e8ab";
}

.icon-pie-chart:before {
    content: "\e8ac";
}

.icon-play-circle:before {
    content: "\e8ad";
}

.icon-play:before {
    content: "\e8ae";
}

.icon-plus-square:before {
    content: "\e8af";
}

.icon-plus-circle:before {
    content: "\e8b0";
}

.icon-plus:before {
    content: "\e8b1";
}

.icon-pocket:before {
    content: "\e8b2";
}

.icon-printer:before {
    content: "\e8b3";
}

.icon-power:before {
    content: "\e8b4";
}

.icon-radio:before {
    content: "\e8b5";
}

.icon-repeat:before {
    content: "\e8b6";
}

.icon-refresh-ccw:before {
    content: "\e8b7";
}

.icon-rewind:before {
    content: "\e8b8";
}

.icon-rotate-ccw:before {
    content: "\e8b9";
}

.icon-refresh-cw:before {
    content: "\e8ba";
}

.icon-rotate-cw:before {
    content: "\e8bb";
}

.icon-save:before {
    content: "\e8bc";
}

.icon-search:before {
    content: "\e8bd";
}

.icon-server:before {
    content: "\e8be";
}

.icon-scissors:before {
    content: "\e8bf";
}

.icon-share-2:before {
    content: "\e8c0";
}

.icon-share:before {
    content: "\e8c1";
}

.icon-shield:before {
    content: "\e8c2";
}

.icon-settings:before {
    content: "\e8c3";
}

.icon-skip-back:before {
    content: "\e8c4";
}

.icon-shuffle:before {
    content: "\e8c5";
}

.icon-sidebar:before {
    content: "\e8c6";
}

.icon-skip-forward:before {
    content: "\e8c7";
}

.icon-slack:before {
    content: "\e8c8";
}

.icon-slash:before {
    content: "\e8c9";
}

.icon-smartphone:before {
    content: "\e8ca";
}

.icon-square:before {
    content: "\e8cb";
}

.icon-speaker:before {
    content: "\e8cc";
}

.icon-star:before {
    content: "\e8cd";
}

.icon-stop-circle:before {
    content: "\e8ce";
}

.icon-sun:before {
    content: "\e8cf";
}

.icon-sunrise:before {
    content: "\e8d0";
}

.icon-tablet:before {
    content: "\e8d1";
}

.icon-tag:before {
    content: "\e8d2";
}

.icon-sunset:before {
    content: "\e8d3";
}

.icon-target:before {
    content: "\e8d4";
}

.icon-thermometer:before {
    content: "\e8d5";
}

.icon-thumbs-up:before {
    content: "\e8d6";
}

.icon-thumbs-down:before {
    content: "\e8d7";
}

.icon-toggle-left:before {
    content: "\e8d8";
}

.icon-toggle-right:before {
    content: "\e8d9";
}

.icon-trash-2:before {
    content: "\e8da";
}

.icon-trash:before {
    content: "\e8db";
}

.icon-trending-up:before {
    content: "\e8dc";
}

.icon-trending-down:before {
    content: "\e8dd";
}

.icon-triangle:before {
    content: "\e8de";
}

.icon-type:before {
    content: "\e8df";
}

.icon-twitter:before {
    content: "\e8e0";
}

.icon-upload:before {
    content: "\e8e1";
}

.icon-umbrella:before {
    content: "\e8e2";
}

.icon-upload-cloud:before {
    content: "\e8e3";
}

.icon-unlock:before {
    content: "\e8e4";
}

.icon-user-check:before {
    content: "\e8e5";
}

.icon-user-minus:before {
    content: "\e8e6";
}

.icon-user-plus:before {
    content: "\e8e7";
}

.icon-user-x:before {
    content: "\e8e8";
}

.icon-user:before {
    content: "\e8e9";
}

.icon-users:before {
    content: "\e8ea";
}

.icon-video-off:before {
    content: "\e8eb";
}

.icon-video:before {
    content: "\e8ec";
}

.icon-voicemail:before {
    content: "\e8ed";
}

.icon-volume-x:before {
    content: "\e8ee";
}

.icon-volume-2:before {
    content: "\e8ef";
}

.icon-volume-1:before {
    content: "\e8f0";
}

.icon-volume:before {
    content: "\e8f1";
}

.icon-watch:before {
    content: "\e8f2";
}

.icon-wifi:before {
    content: "\e8f3";
}

.icon-x-square:before {
    content: "\e8f4";
}

.icon-wind:before {
    content: "\e8f5";
}

.icon-x:before {
    content: "\e8f6";
}

.icon-x-circle:before {
    content: "\e8f7";
}

.icon-zap:before {
    content: "\e8f8";
}

.icon-zoom-in:before {
    content: "\e8f9";
}

.icon-zoom-out:before {
    content: "\e8fa";
}

.icon-command:before {
    content: "\e8fb";
}

.icon-cloud:before {
    content: "\e8fc";
}

.icon-hash:before {
    content: "\e8fd";
}

.icon-headphones:before {
    content: "\e8fe";
}

.icon-underline:before {
    content: "\e8ff";
}

.icon-italic:before {
    content: "\e900";
}

.icon-bold:before {
    content: "\e901";
}

.icon-crop:before {
    content: "\e902";
}

.icon-help-circle:before {
    content: "\e903";
}

.icon-paperclip:before {
    content: "\e904";
}

.icon-shopping-cart:before {
    content: "\e905";
}

.icon-tv:before {
    content: "\e906";
}

.icon-wifi-off:before {
    content: "\e907";
}

.icon-minimize:before {
    content: "\e88d";
}

.icon-maximize:before {
    content: "\e908";
}

.icon-gitlab:before {
    content: "\e909";
}

.icon-sliders:before {
    content: "\e90a";
}

.icon-star-on:before {
    content: "\e90b";
}

.icon-heart-on:before {
    content: "\e90c";
}

/*G-STYLE*/

.btn {
    cursor: pointer;
    background: none;
    position: relative;
    overflow: hidden;
    top: 0;
    z-index: 10;
    border: 1px solid transparent;
    padding: 0 15px;
    min-width: 200px;
    height: 50px;
    line-height: 48px;
    border-radius: 5px;
    font-size: 18px;
    font-weight: 500;
}

.btn-sm {
    height: 40px;
    line-height: 38px;
    border-radius: 5px;
    min-width: 160px;
    font-size: 16px;
}

a.btn-primary,
.btn-primary {
    color: #fff;
    background-color: var(--color-primary);
    border-color: transparent;
}

a.btn-primary:hover,
.btn-primary:hover {
    color: var(--color-primary);
    background-color: var(--color-light);
    border-color: var(--color-primary);
}

a.btn-secondary,
.btn-secondary {
    color: #fff;
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
}

a.btn-info,
.btn-info {
    color: #fff;
    background-color: var(--color-info);
    border-color: var(--color-info);
}

a.btn-info:hover,
.btn-info:hover {
    color: #fff;
    background-color: var(--color-info);
    border-color: var(--color-info);
}

.btn-light {
    color: #999;
    background-color: #fff;
    border-color: #999;
    -webkit-box-shadow: 0px 10px 20px 5px rgba(29, 40, 132, 0.2);
    box-shadow: 0px 10px 20px 5px rgba(29, 40, 132, 0.2);
}

#boxAlbumNew>img {
    width: 80px;
    height: 80px;
    margin-top: 10px !important;
    -o-object-fit: cover;
    object-fit: cover;
}

#boxAlbumNew>div {
    width: 20px !important;
    height: 20px !important;
    margin-left: -20px !important;
    margin-top: 10px !important;
    margin-right: 10px !important;
}

#boxAlbumNew>div img {
    width: 20px !important;
    height: 20px !important;
}

/*G-STYLE*/

/* G-Jr  12012021 */

.input-key {
    background-color: #fefefe;
    border: 1px solid #c8c7cc;
    height: 30px;
    border-radius: 30px;
    position: relative;
    overflow: hidden;
}

.input-key div {
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    font-size: 12px;
    margin: 8px 110px 0 5px;
}

.input-key .btn {
    position: absolute;
    top: 0;
    right: 0;
    height: 30px;
    line-height: 30px;
    background-color: #5637b8;
    border: none;
    padding: 0 15px;
    font-size: 12px;
    color: #fff;
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
}

.input-key .btn:focus {
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.input-key .btn:hover {
    background-color: #5637b8;
}

.modal * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.modal-backdrop {
    z-index: 10000;
}

.modal {
    z-index: 10050;
    /*display: flex;
    align-items: center;*/
}

.modal-content {
    border: none;
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.modal-title {
    font-weight: normal;
    font-size: 20px;
}

.modal-body {
    padding: 20px 15px;
}

.modal-body textarea {
    width: 100% !important;
    padding: 10px;
    margin: 0;
    font-family: inherit;
    border-color: #c8c7cc;
    color: #616161;
    font-size: 13px;
    line-height: 1.4em;
}

.modal-footer .btn-secondary {
    background-color: #f2f2f2;
    color: #616161;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    height: 36px;
    min-width: 120px;
    font-size: 13px;
    border-radius: 5px;
    float: left;
    padding: 0 20px;
}

.modal-footer .btn-primary {
    background-color: #2671c2;
    color: #fff;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    height: 36px;
    min-width: 120px;
    font-size: 13px;
    border-radius: 5px;
    padding: 0 20px;
}

.modal-backdrop {
    display: none;
}

.modal-open .headBackOffice:before {
    opacity: 0.7;
    visibility: visible;
}

.modal-open .mainBackOffice:before {
    opacity: 0.7;
    visibility: visible;
}

.headBackOffice:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: -2px;
    width: 100%;
    z-index: 10010;
    background-color: #000;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
}

.mainBackOffice:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: #000;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
}

.product-nav {
    width: 96.4%;
    margin: 0 auto;
    padding-top: 20px;
    padding-bottom: 35px;
    border-bottom: 1px solid #d8dce0;
}

.product-nav .nav-list {
    margin-left: 20px;
}

.product-nav li {
    position: relative;
}

.product-nav li+li:before {
    content: "";
    position: relative;
    width: 1px;
    height: 20px;
    display: block;
    float: left;
    background-color: #d3d7db;
    margin: 0 15px;
}

.product-nav .link {
    font-size: 14px;
}

.product-nav .link:hover {
    color: #df0f20;
}

.product-nav .active .link {
    color: #df0f20;
}

.nav-list {
    margin: 0;
    padding: 0;
}

.nav-list>li {
    list-style: none;
    float: left;
}

.nav-list:before,
.nav-list:after {
    content: " ";
    display: table;
}

.nav-list:after {
    clear: both;
}

.nav-list.fluid>li {
    width: 100%;
}

/* G-Jr */

.checkbox-control {
    position: relative;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}

.checkbox-control .icon {
    width: 24px;
    height: 24px;
    border: 1px solid #bababa;
    background-color: #fff;
    border-radius: 4px;
    position: absolute;
    top: -4px;
    left: 0;
    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;
}

.checkbox-control .title {
    margin: 0;
    font-size: 16px;
    font-weight: normal;
    color: var(--color-dark);
    padding-left: 34px;
    line-height: 1.2em;
    display: block;
}

.checkbox-control .title a {
    position: relative;
    z-index: 100;
}

.checkbox-control input[type="checkbox"] {
    margin: 0;
    border: none;
    position: absolute;
    z-index: 5;
    opacity: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    cursor: pointer;
}

.checkbox-control input[type="checkbox"]:checked~.icon {
    border-color: transparent;
    background-color: var(--color-primary);
}

.checkbox-control input[type="checkbox"]:checked~.icon:before {
    font: normal normal normal 12px/1 FontAwesome;
    content: "\f00c";
    color: #fff;
}

.divBtn-menu a {
    font-size: 24px;
    width: 40px;
    height: 40px;
    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;
    border-radius: 4px;
    color: #fff;
    /* background-color: var(--color-default); */
    background-color: rgba(255, 255, 255, 0.4);
    border: 1px solid #fff;
}

.divBtn-menu a span {
    color: var(--color-light);
}

.divDashboard-widget {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 -10px 0 -10px;
}

.divRightInnerTopBoxHome {
    float: none;
    margin: 0 10px;
}

.divBtnmenu-close {
    position: absolute;
    top: 20px;
    left: -18px;
    /* background-color: var(--color-default); */
    background-color: var(--color-primary);
    padding: 10px;
    color: #fff;
    font-size: 15px;
    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;
    cursor: pointer;
    border-radius: 5px;
    -webkit-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
    opacity: 0;
}

.divBtnmenu-close.active {
    opacity: 1;
}

.divBtnmenu-close span {
    font-size: 16px;
    font-weight: bold;
}

.navControl.open~.navControl-overlay {
    opacity: 1;
    visibility: visible;
}

.navControl-overlay {
    opacity: 0;
    visibility: hidden;
    position: fixed;
    z-index: 10;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    -webkit-transition: all 400ms ease;
    -o-transition: all 400ms ease;
    transition: all 400ms ease;
}

.headCollapse-block {
    padding: 15px;
    margin-bottom: 15px;
    border-bottom: 2px solid #f4f4f4;
}

.headProfile {
    background-color: #fff;
    border-radius: 5px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.10) 0px 1px 4px;
    box-shadow: rgba(0, 0, 0, 0.10) 0px 1px 4px;
    padding: 15px;
}

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

.headProfile>a::before {
    content: '\e842';
    font-family: "feather" !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;

    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

.headProfile>.collapsed::before {
    content: '\e845';
}

.headProfile a .txt {
    font-size: 17px;
    font-weight: 600;
}

.headProfile a .divLogin-img {
    margin-right: 10px;
}

.headProfile .item-list li {
    position: relative;
    width: 100%;
    list-style: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

.headProfile .item-list li:hover a {
    color: var(--color-primary);
}

.headProfile .item-list li:hover .bullet-dot {
    background-color: var(--color-primary);
}

.headProfile .bullet-dot {
    position: relative;
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #bbb;
    left: -8px;
    -webkit-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

.headProfile .item-list li:not(:last-child) {
    padding-bottom: 10px;
}

.headProfile .item-list {
    padding-top: 10px;
    padding-left: 50px;
    margin-bottom: 0;
}

.mLeftBackOffice .d-flex {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.mLeftBackOffice .btn-regis {
    padding: 0 20px;
    height: 50px;
    min-width: 120px;
    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;
    border-radius: 5px;
    font-size: 16px;
    border: 1px solid #dfcb68;
    font-weight: 500;
    color: #411521;
    background: -webkit-gradient(linear, left top, left bottom, from(#e8da7a), to(#be982a));
    background: -o-linear-gradient(#e8da7a 0%, #be982a 100%);
    background: linear-gradient(#e8da7a 0%, #be982a 100%);
}

.mLeftBackOffice .btn-regis .icon {
    width: 34px;
    margin-right: 5px;
}

.mLeftBackOffice .btn-regis .icon img {
    width: 100%;
}

.login-page {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-height: 100dvh;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    background: url("../img/bg-login.jpg") center no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.login-page .mLeftBackOffice {
    margin-bottom: 0;
    position: relative;
}

.login-page .mLeftBackOffice .btn {
    min-width: 160px;
    height: 46px;
    line-height: 44px;
    font-size: 16px;
}

.layout-header {
    padding: 30px 0 40px 0;
}

.layout-header .icon {
    font-size: 60px;
    margin-right: 15px;
    color: var(--color-default);
}

.layout-header .title {
    font-weight: 600;
    font-size: 30px;
    color: var(--color-primary);
    margin: 0;
}

.layout-header .desc {
    font-size: 16px;
    color: var(--color-default);
    margin: 2px 0 0 0;
}

.detail-block {
    border: 2px solid var(--color-secondary);
    border-radius: 5px;
    padding: 15px;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.4);
    float: left;
    width: 100%;
}

.detail-block .cover {
    width: 140px;
    padding-top: 100%;
    /* background-color: #ddd; */
    border-radius: 5px;
    position: relative;
    overflow: hidden;
}

.detail-block .cover img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.detail-block .inner {
    text-align: left;
    padding-left: 5px;
    padding-right: 10px;
}

.detail-block .inner .title {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4em;
    color: var(--color-default);
}

.detail-block .inner .desc {
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.4em;
}

.detail-block~.divRightMain {
    margin-top: 20px;
}

.detail-block~.divRightMain .formRightContantTb .row>div {
    margin-bottom: 20px;
}

.detail-block~.divRightMain .topic {
    font-weight: 500;
    color: var(--color-default);
}

td.buttonSearchStyle {
    width: 1%;
    padding-right: 0 !important;
}

.formInputContantTbShotJumppage {
    width: 90px;
    height: 40px;
    border-color: var(--color-border);
    border-radius: 4px;
    padding: 0 10px;
}

.divRightHead.fixed {
    position: fixed;
    z-index: 500;
    left: 0;
    top: 88px;
    padding: 10px 25px;
    background-color: rgba(0, 0, 0, 0.1);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    /* margin-top: 5px; */

    background: transparent;
    -webkit-backdrop-filter: blur(50px);
    /* Note: currently only Safari supports backdrop-filter */
    backdrop-filter: blur(50px);
    --webkit-backdrop-filter: blur(50px);
    background-color: rgba(255, 255, 255, 0.1);
}

.divRightHead.fixed .fontHeadRight {
    position: relative;
    top: -10px;
    font-size: 17px;
    color: var(--color-dark);
}

.divRightHead.fixed>table {
    /* min-width: 1470px !important; */
    width: 100% !important;
    /* margin: auto 25px; */
}

/******/

.divRightNav.fixed {
    position: fixed;
    z-index: 500;
    left: 0;
    top: 112px;
    padding: 10px 25px;
    z-index: 999;
    pointer-events: none;
}

.divRightNav.fixed .fontContantTbNav a,
.divRightNav.fixed .fontContantTbNav {
    color: var(--color-dark);
    font-size: 12px;
    pointer-events: visible;
}

.divRightNav.fixed>table {
    width: 100% !important;
}

.divRightNav.fixed .divRightNavTb img {
    width: 10px;
    margin: 0 3px;
    -webkit-filter: brightness(0%);
    filter: brightness(0%);
}

.divRightNav.fixed .menuSubMod {
  opacity: 0;
}

.divRightMain.tiny {
    margin-top: 64px;
}

.cke_chrome {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.cke_1.cke_chrome {
    border-color: transparent !important;
}

.system-block .item-list {
    margin: 0 -10px;
    padding: 0;
}

.system-block .item-list:before,
.system-block .item-list:after {
    content: " ";
    display: table;
}

.system-block .item-list:after {
    clear: both;
}

.system-block .item {
    padding: 0 10px;
    margin-bottom: 20px;
    list-style: none;
    float: left;
    width: calc(100% / 4);
}

.system-block a {
    display: block;
    border: 2px solid var(--color-secondary);
    border-radius: 16px;
    padding: 15px;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.4);
}

.system-block a:hover {
    background-color: rgba(255, 255, 255, 0.8);
}

.system-block .icon {
    width: 100%;
    padding-top: 100%;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
}

.system-block .icon img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.system-block .title {
    margin-top: 20px;
    font-size: 16px;
    font-weight: 500;
}

a[rel="viewAlbum"] {
    margin: 0 10px 10px 0;
    float: left;
    display: block;
    width: 80px;
    height: 80px;
    position: relative;
}

a[rel="viewAlbum"] img {
    margin: 0 !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.table-collapse {
    overflow: hidden;
    max-height: 60px;
}

.table-collapse table {
    width: 100% !important;
    /* margin: 0 15px; */
}

.table-collapse>tbody>tr+tr {
    display: none;
}

.table-collapse>tbody>tr>td.formTileTxt {
    position: relative;
    cursor: pointer;
}

.table-collapse>tbody>tr+tr .formTileTxt {
    color: var(--color-default);
    font-weight: 600;
    font-size: 16px;
    background-color: #f5f5f5;
    border-radius: 5px;
    padding: 10px 15px !important;
}

.table-collapse>tbody>tr+tr>td {
    padding: 0 15px;
}

.table-collapse>tbody>tr+tr>td .tbBoxViewBorder {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.table-collapse>tbody>tr+tr .formFontSubjectTxt {
    font-size: 16px;
}

.table-collapse .tbBoxViewBorderBottom {
    border-color: transparent;
}

.table-collapse>tbody>tr>td.formTileTxt:hover {
    background-color: #f9f9f9;
}

.table-collapse>tbody>tr>td.formTileTxt:after {
    font-family: "feather";
    content: "\e842";
    position: absolute;
    font-size: 28px;
    top: 23px;
    right: 20px;
    color: var(--color-default);
}

.table-collapse.open>tbody>tr>td.formTileTxt:after {
    content: "\e845";
}

.table-collapse.open .tbBoxViewBorderBottom {
    border-color: var(--color-border);
}

.table-collapse.open>tbody>tr+tr {
    display: revert;
}

@property --p {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

.pie-wrapper {
    position: relative;
}

.pie-wrapper:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 16px solid #eee;
    background-color: #fff;
    border-radius: 50%;
}

.pie {
    --p: 20;
    --b: 16px;
    --c: darkred;
    --w: 120px;

    width: var(--w);
    aspect-ratio: 1;
    position: relative;
    z-index: 10;
    display: -ms-inline-grid;
    display: inline-grid;
    margin: 0;
    place-content: center;
    font-size: 25px;
    font-weight: bold;
    font-family: sans-serif;
}

.pie:before,
.pie:after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.pie:before {
    inset: 0;
    background: -o-radial-gradient(farthest-side, var(--c) 98%, #0000) top/var(--b) var(--b) no-repeat,
        conic-gradient(var(--c) calc(var(--p) * 1%), #0000 0);
    background: radial-gradient(farthest-side, var(--c) 98%, #0000) top/var(--b) var(--b) no-repeat,
        conic-gradient(var(--c) calc(var(--p) * 1%), #0000 0);
    -webkit-mask: radial-gradient(farthest-side,
            #0000 calc(99% - var(--b)),
            #000 calc(100% - var(--b)));
    mask: radial-gradient(farthest-side,
            #0000 calc(99% - var(--b)),
            #000 calc(100% - var(--b)));
}

.pie:after {
    inset: calc(50% - var(--b) / 2);
    background: var(--c);
    -webkit-transform: rotate(calc(var(--p) * 3.6deg)) translateY(calc(50% - var(--w) / 2));
    -ms-transform: rotate(calc(var(--p) * 3.6deg)) translateY(calc(50% - var(--w) / 2));
    transform: rotate(calc(var(--p) * 3.6deg)) translateY(calc(50% - var(--w) / 2));
}

.animate {
    -webkit-animation: p 1s 0.5s both;
    animation: p 1s 0.5s both;
}

.no-round:before {
    background-size: 0 0, auto;
}

.no-round:after {
    content: none;
}

@-webkit-keyframes p {
    from {
        --p: 0;
    }
}

@keyframes p {
    from {
        --p: 0;
    }
}

@media (max-width: 1199px) {
  .manage-rice {
    margin-left: 0;
  }
  .manage-rice .card-process .card-header {
    padding-left: 55px;
  }
  .manage-rice:first-child .card-process .card-header {
    padding: 10px 15px 8px 15px !important;
  }
  .manage-rice:not(:first-child) .card-process::before {
    left: 0;
    top: 0;
    font-size: 15px;
    width: 44px;
    height: 42px;
    z-index: 1;
    border-top-left-radius: 5px;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
  }
  .manage-rice:not(:first-child) .card-process::after {
    left: -8px;
    background-image: url(../img/static/down-line-mobile.png);
    background-position-y: 40px;
    height: 100%;
    width: 18px;
  }
  /* .manage-rice:not(:first-child) .card-process::before {
    z-index: 1;
  }
  .manage-rice:not(:first-child) .card-process::after {
    background-position: center;
    background-position-y: 0;
    margin-top: 15px;
  } */
}

@media (max-width: 767px) {
  .login-page .mLeftBackOffice {
    padding: 20px 20px;
    background: url("../img/static/bg-header-mobile.png");
  }
  .login-page .mLeftBackOffice:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 5px;
    top: 0;
    left: 0;
    background: -webkit-gradient(linear, left top, left bottom, from(#edc40d), to(#c79713));
    background: -o-linear-gradient(#edc40d 0%, #c79713 100%);
    background: linear-gradient(#edc40d 0%, #c79713 100%);
  }
  .login-page .mLeftBackOffice .d-flex {
    display: block;
  }
  .login-page .mLeftBackOffice .btn-regis {
    display: none;
  }
  .login-page .mLeftBackOffice .logo img {
    width: 33px;
    margin-bottom: 5px;
    margin-right: 0;
  }
  .login-page .mLeftBackOffice .logo a {
    display: block;
    text-align: center;
    font-size: 13px;
    width: auto;
  }
  .login-page .mLeftBackOffice .logo a small {
    font-size: 1em;
  }
  .login-form .form-btn.-regis {
    display: block;
  }
  .login-form .form-control {
    height: 50px;
  }
  .login-form .control-group button {
    top: 10px;
    right: 10px;
  }
  .login-form .btn {
    height: 50px;
  }
  .login-form .form-btn .btn-primary {
    font-size: 16px;
  }
  .login-form .form-btn .btn-primary .icon {
    width: 34px;
    margin-right: 5px;
  }

  /* .allBackOffice .mLeftBackOffice {
    padding: 12px 20px;
    background: url("../img/static/bg-header-mobile.png");
  }
  .allBackOffice .mLeftBackOffice:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 5px;
    top: 0;
    left: 0;
    background: -webkit-gradient(
      linear,
      left top,
      left bottom,
      from(#edc40d),
      to(#c79713)
    );
    background: linear-gradient(#edc40d 0%, #c79713 100%);
  }
  .allBackOffice .mLeftBackOffice .d-flex {
    display: block;
  }
  .allBackOffice .mLeftBackOffice .btn-regis {
    display: none;
  }
  .allBackOffice .mLeftBackOffice .logo img {
    width: 50px;
    margin: 0;
  }
  .allBackOffice .mLeftBackOffice .logo a .title {
    font-size: 13px;
    line-height: 1.2em;
    max-width: 190px;
    margin-left: 8px;
  }
  .allBackOffice .mLeftBackOffice .logo a small {
    font-size: 0.7em;
    margin-top: 3px;
  } */

  .mainBackOffice > table > tbody > tr {
    display: block;
  }
  .mainBackOffice > table > tbody > tr > td {
    display: block;
  }

  .divLogin-name {
    font-size: 13px;
    padding-right: 8px;
    display: none;
  }
  .divLogin .dropdown-menu {
    margin-top: 0;
  }
  .divLogin-img div {
    width: 40px;
    height: 40px;
  }
  .divLogin > a {
    padding: 0 10px;
  }
  .divBtn-menu a {
    width: 40px;
    height: 40px;
  }
  /* .divLeftMenuTb a {
    font-size: 15px;
  }
  .divLeftMenuTb a .feather {
    font-size: 15px;
  }
  .divLeftMenuTb a {
    padding: 12px;
  } */
  .divLeftMenuOver {
    font-size: 15px;
    /* padding: 12px; */
  }
  /* .divLeftMenuOver a .feather {
    font-size: 15px;
  } */

  .footerBackOffice {
    min-width: inherit;
    font-size: 12px;
    padding: 20px;
  }
  .footerBackOffice .d-flex {
    display: block !important;
  }
  .footerBackOffice img {
    width: 39px;
    margin-right: 0;
    margin-bottom: 3px;
  }

  .allBackOffice {
    min-width: inherit;
  }
  .mainBackOffice {
    min-width: inherit;
  }
  /* .mainBackOffice > table{display: block; border-collapse: inherit} */
  .mRightBackOffice {
    padding: 77px 20px 0 20px;
    width: 100vw;
  }
  .divRightInnerHome {
    width: 100%;
  }
  .divRightInnerHome-topic {
    margin-top: 30px;
    margin-bottom: 20px;
  }
  .divRightInnerHome-topic .title {
    font-size: 24px;
  }
  .divRightInnerHome-topic .date {
    font-size: 12px;
  }

  .navControl {
    width: 300px;
  }

  .loginBack-wrapper {
    margin: 30px auto;
  }
  .login-body {
    padding: 0 5px;
  }
  .login-body .title {
    margin-bottom: 30px;
  }
  .login-body .title div {
    font-size: 22px;
    padding: 0 20px 10px 20px;
  }

  .login-form .control-label {
    font-size: 14px;
    padding-bottom: 8px;
  }
  .login-form .action a {
    font-size: 14px;
  }

  .checkbox-control .title {
    font-size: 14px;
  }

  /* .divDashboard-widget {
    display: inline-flex;
    overflow: auto;
    margin: 0 0 20px -20px;
    width: 100vw;
    padding-right: 20px;
  }
  .divRightInnerTopBoxHome {
    min-width: 280px;
    margin: 0 0 0 10px;
    padding: 15px;
    height: 140px;
  } */
  /* .divRightInnerTopBoxHome:first-child {
    margin-left: 20px;
  } */
  /* .divRightInnerTopBoxHome:last-child{margin-right: 20px;} */
  .divRightInnerTopBoxHome .fontTitlTbHome ~ div {
    font-size: 11px !important;
    line-height: 1em;
  }
  .divRightInnerTopBoxHome img {
    width: 40px;
  }
  .cycle1Login {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  .cycle4Login {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }

  .fontContantTbHome {
    font-size: 12px;
  }
  .fontTitlTbHome {
    font-size: 15px;
  }

  .divRightHome {
    float: none;
    width: auto;
  }

  .divRightInnerBigBoxHome > table tr:first-child table td {
    padding: 12px 15px;
  }

  .divRightInnerBigBoxHome {
    height: 66dvh;
  }
  .wg-log {
    height: calc(66dvh - 50px);
    position: relative;
    z-index: 100;
  }
  .divRightHead.fixed {
    top: 77px;
    padding: 5px 20px;
  }
  .divRightHead.fixed .fontHeadRight{font-size: 16px;}
  .divRightNav.fixed{top: 98px;padding: 5px 20px;}

  .table-responsive > table > tbody > tr:first-child {
    display: none;
  }
  .table-responsive > table > tbody > tr {
    display: block;
    border-bottom: 1px solid var(--color-border);
    padding: 0;
  }
  .table-responsive > table > tbody > tr > td {
    border-bottom: none;
    display: block;
    font-size: 0.9em;
    text-align: right !important;
    padding: 10px 15px !important;
    height: auto;
  }
  .table-responsive > table > tbody > tr > td:nth-child(odd) {
    background-color: #fafafa;
  }
  .table-responsive > table > tbody > tr > td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  .table-responsive > table > tbody > tr > td:last-child {
    border-bottom: 0;
  }

  /* layout-header */
  .layout-header {
    padding: 20px 0;
  }
  .layout-header .icon {
    font-size: 50px;
    margin-right: 10px;
  }
  .layout-header .icon img {
    width: 50px;
  }
  .layout-header .title {
    font-size: 2em;
  }

  /* dashboard */
  .dashboard-block {
    padding-bottom: 0;
  }
  .dashboard-block .divRightInnerBigBoxHome {
    height: auto;
  }
  .dashboard-block .mb-20px {
    margin-bottom: 20px;
  }
  .dashboard-block .card-about {
    padding: 20px 15px;
    min-height: auto;
  }
  .dashboard-block .card-about .title {
    font-size: 20px;
    line-height: 1.3em;
  }
  .dashboard-block .card-about .desc {
    margin: 10px 0 0 0;
    font-size: 1em;
  }
  .dashboard-block .card-about .desc br {
    display: none;
  }
  .dashboard-block .card-about .btn {
    min-width: 150px;
    height: 40px;
    line-height: 38px;
    font-size: 1em;
  }
  .dashboard-block .card-qr {
    width: 100%;
    min-height: auto;
    padding: 30px 10px;
  }
  .dashboard-filter {
    margin-top: 20px;
    padding: 20px 15px;
  }
  .dashboard-filter .action {
    width: 100%;
  }
  .dashboard-info .card-right .desc .gutters-20 > div {
    font-size: 0.9em;
  }
  .dashboard-info {
    margin-top: 20px;
  }
  .dashboard-info .card-header {
    padding: 12px 15px;
    font-size: 15px;
  }
  .dashboard-info .card-body {
    padding: 20px 15px;
  }
  .dashboard-info .card-right,
  .dashboard-info .card-right + .card-right {
    margin-top: 20px;
  }
  .dashboard-info .card-right .desc .indicative-status {
    padding-left: 18px;
  }
  .dashboard-table {
    margin-top: 20px;
  }
  .dashboard-table .fontTitlTbHome {
    font-size: 15px;
    top: 1px;
  }
  .dashboard-table .icon {
    margin-right: 11px;
  }
  .dashboard-table .icon img {
    width: 25px;
  }

  /* system-block  */
  .system-block .item {
    width: calc(100% / 2);
  }
  .system-block .item:nth-child(3),
  .system-block .item:nth-child(4) {
    margin-bottom: 0;
  }

  /* detail-block */
  .detail-block ~ .divRightMain {
    margin-top: 20px;
  }
  .detail-block .inner {
    padding: 0;
  }
  .detail-block .inner .title {
    font-size: 15px;
  }
  .detail-block .inner .desc {
    font-size: 0.9em;
    margin-top: 5px;
  }

  /* manage-rice  */
  .manage-rice {
    margin-bottom: 20px;
  }
  .manage-rice .card-process {
    margin-top: 0;
    /* width: 100%; */
  }
  .manage-rice .card-process .card-header {
    font-size: 15px;
    padding-left: 50px;
  }

  .manage-rice .card-process .card-body .inner:first-child {
    position: relative;
    padding: 20px;
    border-right: none;
  }
  .manage-rice .card-process .card-body .inner:first-child .row {
    border: 1px solid #edc40d;
    border-radius: 10px;
    padding: 20px;
    margin: 0;
    background-color: #dedede30;
  }
  .manage-rice .card-process .card-body .inner:first-child .icon span {
    zoom: 80%;
  }
  .manage-rice .card-process .card-body .inner:first-child .topic {
    font-size: 0.9em;
  }
  .manage-rice .card-process .card-body .inner:first-child .btn-primary {
    height: 40px;
    line-height: 38px;
    font-size: 1em;
  }
  .manage-rice .card-process .card-body .inner-right {
    padding: 0 20px;
  }
  .manage-rice .card-process .card-body .inner-right .nav-link .title {
    font-size: 0.9em;
  }

  .dashboard-info .link {
    height: 60px;
  }
  .dashboard-info .link .icon img {
    width: 30px;
  }
  .manage-rice:not(:first-child) .card-process::before {
    width: 42px;
  }
}

@media (max-width: 575px) {
  .dashboard-block .card-about .btn {
    width: 100%;
    min-width: unset;
  }
  .dashboard-block .card-about .btn:last-child {
    margin-right: 0;
  }

  .system-block .item-list {
    margin: 0 -5px;
  }
  .system-block .item {
    padding: 0 5px;
    margin-bottom: 10px;
  }
  .system-block a {
    padding: 10px;
  }
  .system-block .title {
    margin-top: 10px;
    font-size: 0.9em;
  }
  .system-block .icon {
    margin-bottom: 0;
  }

  .detail-block .cover {
    width: 100%;
    padding-top: 80%;
  }

  .manage-rice .card-process .card-body .inner:first-child {
    padding: 15px;
  }
  .manage-rice .card-process .card-body .inner:first-child .row {
    padding: 15px;
  }
  .manage-rice .card-process .card-body .inner:first-child .btn-primary {
    width: 100%;
  }
  .manage-rice .card-process .card-body .inner-right > .row .col-sm-4 {
    margin-bottom: 15px;
    padding: 0 7.5px;
  }

  /* .manage-rice {
    margin-left: 50px;
  } */
  
}

.step-relate .nav {
    border-bottom: 1px solid #dee2e6;
}

.step-relate .nav li+li {
    margin-left: 5px;
}

.step-relate .nav a {
    display: block;
    padding: 10px 20px;
    border: 1px solid transparent;
    border-bottom: none;
    position: relative;
    background-color: #f5f5f5;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.step-relate .nav a:hover {
    color: var(--color-default);
}

.step-relate .nav a.active {
    background-color: #fff;
    border-color: #dee2e6;
}

.step-relate .nav a.active:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 1px;
    background-color: #fff;
}

.divRightManage {
    position: relative;
}

.divRightManage .fontContantTbManage {
    display: none;
    position: absolute;
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.8);
    top: 100%;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    font-weight: 600;
    opacity: 1;
    white-space: nowrap;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    border-radius: 2px;
    margin-top: 10px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    line-height: 1.2em;
    padding: 5px 8px;
    overflow: visible !important;
}

.divRightManage .fontContantTbManage:after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 4px solid rgba(0, 0, 0, 0.8);
}

.divRightManage .fontContantTbManage,
.divLogin,
.divRightHead>table td div {
    position: relative;
}

.divRightManage .fontContantTbManage,
.divLogin>a .fontContantTbManage,
.divBtn-menu>a .fontContantTbManage,
.divRightHead>table td div .fontContantTbManage {
    font-family: 'db_helvethaica' !important;
    display: none;
    position: absolute;
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.8);
    top: 100%;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    font-weight: 600;
    opacity: 1;
    white-space: nowrap;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    border-radius: 2px;
    margin-top: 10px;
    color: #fff !important;
    font-size: 12px;
    text-align: center;
    line-height: 1.2em;
    padding: 5px 8px;
    overflow: visible !important;
}

.divRightManage .fontContantTbManage::after,
.divLogin>a .fontContantTbManage::after,
.divBtn-menu>a .fontContantTbManage::after,
.divRightHead>table td div .fontContantTbManage::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 4px solid rgba(0, 0, 0, 0.8);
}

.divRightManage:hover .fontContantTbManage,
.divLogin>a:hover .fontContantTbManage,
.divBtn-menu>a:hover .fontContantTbManage,
.divRightHead>table td div:hover .fontContantTbManage {
    display: block !important;
}

.info {
    width: 40%;
    padding: 10px !important;
    border-radius: 5px
}

.add-app td {
    font-family: 'db_helvethaica';
    height: 120px;
}

.add-app td img {
    width: 40px;
    cursor: pointer;
}

/* Password Progress  */
.password-progress p {
    font-size: 16px;
    margin-bottom: 10px;
    margin-top: -10px;
}

.progress {
    margin: 10px 0px;
    height: 5px;
    width: 40%;
    border-radius: 5px;
}

.list-unstyled {
    margin-bottom: 10px;
}

.list-unstyled .feather {
    color: #1da249e3;
    font-size: 18px;
    font-weight: bold;
}

.list-unstyled li {
    font-size: 14px;
}

.progress-bar-danger {
    background-color: #1da249e3;
    width: 10%;
}

.list-unstyled .feather.error {
    color: red;
}

.list-unstyled .feather.success {
    color: #1da249e3;
}

.list-unstyled .check.note-passsword {
    font-size: 12px;
    color: #8c8c8c;
}

.control-group-password {
    position: relative;
    width: 39%;
}

.control-group-password .formInputContantTbShot {
    position: relative;
    width: 100%;
    font-size: 16px;
    background-color: #fff;
}

.formRightContantTb button {
    background-color: transparent;
    border: none;
    border-radius: 0;
    width: 30px;
    height: 30px;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg id='checked' xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Ccircle id='Ellipse_1' data-name='Ellipse 1' cx='15' cy='15' r='15' fill='%23fff'/%3E%3Cpath id='Path_1' data-name='Path 1' d='M15,0A15,15,0,1,0,30,15,15.017,15.017,0,0,0,15,0Zm8.383,11.053L13.8,20.564a1.475,1.475,0,0,1-2.068.038L6.654,15.977a1.525,1.525,0,0,1-.113-2.105A1.487,1.487,0,0,1,8.647,13.8l4.023,3.684L21.241,8.91a1.515,1.515,0,1,1,2.143,2.143Z' fill='%230e7653'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-size: 30px;
    z-index: 1;
}

.fontLinksub:hover {
    text-decoration: underline;
}

.fontContantTbTime {
    color: #616161;
    font-size: 13px;
    line-height: 25px;
  }
  .fontLinksub:link, .fontLinksub:visited {
    color: #616161;
    font-size: 13px;
    line-height: 25px;
    font-weight: 300;
  }



  .selectLayout{
    padding: 0 60px 0 0;
}
.selectLayout li{
    margin-right: 20px;
    width: 200px;
    float: left;
    margin-bottom: 20px;
    list-style: none;
}
.selectLayout .checkboxLayout{
    position: relative;
}
.selectLayout .checkboxLayout input{
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    margin: 0;
}
.selectLayout .checkboxLayout input:checked ~ .cover:after{
    content: 'เลือก';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
    color: #fff;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.selectLayout .checkboxLayout .cover{
    position: relative;
    margin: 0;
    border: 1px solid #e1e1e1;
}
.selectLayout .checkboxLayout .cover img{
    position: relative;
    width: 100%;
}
/* 2023/11/20 */
.selectLayout .checkboxLayout .layout-title {position: relative;text-align: center;color: #ffffff;background: #2671C2;padding: 5px 10px;}
.selectLayout .checkboxLayout input:checked ~ .layout-title {color: #ffffff; background: #0F7754;}

.selectLayout .checkboxLayout input ~ .cover::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -2px;
    border: 2px solid #2671C2;
    background: transparent;
    z-index: 1;
}
.selectLayout .checkboxLayout input:checked ~ .cover::before {
    border-color: #0F7754;
}
.selectLayout .checkboxLayout input:checked ~ .cover:after {
    content: "";
    position: absolute;
    top: -8px;
    right: -8px;
    left: auto;
    width: 30px;
    height: 30px;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg id='checked' xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Ccircle id='Ellipse_1' data-name='Ellipse 1' cx='15' cy='15' r='15' fill='%23fff'/%3E%3Cpath id='Path_1' data-name='Path 1' d='M15,0A15,15,0,1,0,30,15,15.017,15.017,0,0,0,15,0Zm8.383,11.053L13.8,20.564a1.475,1.475,0,0,1-2.068.038L6.654,15.977a1.525,1.525,0,0,1-.113-2.105A1.487,1.487,0,0,1,8.647,13.8l4.023,3.684L21.241,8.91a1.515,1.515,0,1,1,2.143,2.143Z' fill='%230e7653'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-size: 30px;
    z-index: 1;
}

.divOverTbAddon td {padding-left: 0;}
.divSubOverTbAddon td {vertical-align: middle;}

.selectLayout .checkboxLayout .cover {margin: 0; background-size: cover; background-position: center; background-repeat: no-repeat;padding-top: 220px;}
.selectLayout .checkboxLayout .cover img {-o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center;max-width: 100%; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.boxHomeSortli .divRightTitleHome {background: linear-gradient(to left, #01377d 0%, #2ab170 100%);}
.divRightHead.divHight {
    margin-top: 10px;
}

#boxHomeSort.ui-sortable {margin: 0 !important; display: grid; grid-template-columns: repeat(3, 1fr);gap: 15px;}
#boxHomeSort.ui-sortable .boxHomeSortli {width: 100%;padding: 0;}
#boxHomeSort.ui-sortable::before,
#boxHomeSort.ui-sortable .boxHomeSortli::before {display: none;}

.viewEditorTileTxt p {line-height: 1.6em;}

/* #boxMailContact ~ table td {padding-top: 5px;} */

@media (max-width: 1199px) {
  .loginNew-wrapper .login-form .body {padding: 0 20px;}
  .loginNew-wrapper .login-form .body .brand img { width: 120px; padding-bottom: 20px; }
  .loginNew-wrapper .login-form .body .title {font-size: 24px;}
  .loginNew-wrapper .login-form .body .title small {font-size: 16px;}
  .loginNew-wrapper .login-form .control-label { font-size: 14px; padding-bottom: 0;}
  .loginNew-wrapper .login-form .form-control {height: 40px; font-size: 14px; padding-left: 34px;}
  .loginNew-wrapper .login-form .control-group > span {font-size: 14px; left: 13px;}
  .login-form .control-group button {font-size: 14px; right: 7px;}
  .login-form .form-group { margin-bottom: 15px; }
  .loginNew-wrapper .login-form .form-btn .btn-primary { height: 44px; line-height: 42px; font-size: 16px; }
  .login-form .form-btn { margin-top: 15px; }
  .loginNew-wrapper .col-right .copy-rights {font-size: 12px; margin-top: 10px;}
  .loginNew-wrapper .col-right .versionsmall {font-size: 11px;}

  .loginNew-wrapper .col-left{width: 60%;}
  .loginNew-wrapper .login-form .body{width: 380px;}

  .allBackOffice{min-width: auto;}
  .mainBackOffice{min-width: auto;}
  
}
@media (max-width: 991px) {
  .loginNew-wrapper { background-image: url(../img/bg-new-login.png); background-size: cover; background-repeat: no-repeat; background-position: center; }
  .loginNew-wrapper > .d-flex { height: 100vh; -webkit-box-orient: vertical !important; -webkit-box-direction: reverse !important; -ms-flex-direction: column-reverse !important; flex-direction: column-reverse !important; }
  .loginNew-wrapper .col-left {width: 100%; background-image: none;}
  .loginNew-wrapper .col-right { width: auto; height: auto; max-width: 400px; top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); border-radius: 5px; margin-top: 100px; margin-bottom: 100px;}
  .loginNew-wrapper .d-flex {-ms-flex-wrap: nowrap;flex-wrap: nowrap;}
  .loginNew-wrapper .collumn {height: auto;}

  .divRightInnerBigBoxHome {margin: 10px 0 !important;}
  .divRightInnerHome {min-width: 100%; padding: 0; margin-bottom: 0;}
  .mRightBackOffice {width: 100vw; padding: 0 15px;}
  .divRightHome {margin-top: 100px;}

  .mainBackOffice > table {width: auto;}
  .divRightInnerHome-topic .title {font-size: 18px;}
  .divDashboard-widget {margin: 0 -5px 0 -5px; }
  .divRightInnerTopBoxHome { padding: 15px; height: 160px; margin: 0 5px;}
  .cycle1Login,
  .cycle4Login {width: 40px; height: 40px;}
  .cycle1Login span,
  .cycle4Login span {font-size: 18px;}
  .fontTitlTbHome {font-size: 15px;}
  .fontContantTbHome {font-size: 13px;}

  .add-app td {height: 100px;}

  #boxHomeSort {margin: 0 -5px;}
  .boxHomeSortli {padding: 5px;}

  #scrollToTopBtn {right: 15px; width: 35px; height: 35px;}
  .footerBackOffice .divLogin {padding-right: 90px;}

  .mRightBackOffice > form {min-width: auto; padding: 0; margin-top: 100px;}

  .divRightHeadSearch tbody {display: -ms-grid;display: grid; gap: 10px;}
  .divRightHeadSearch {padding: 15px;}
  .divRightHeadSearch tr > td {width: 100% !important; padding: 0 !important;}
  .divRightHeadSearch tr {position: relative; display: -ms-grid; display: grid; grid-gap: 10px !important;}
  /* .divRightHeadSearch tr > td.buttonSearchStyle {position: absolute; right: 0; bottom: 0; width: -webkit-max-content !important; width: -moz-max-content !important; width: max-content !important;} */

  .divRightMain .tbBoxListwBorder tbody > tr:first-child td span {font-size: 14px;}
  .mLeftBackOffice {padding: 10px 15px;}
  .footerBackOffice{min-width: auto;}
  .footerBackOffice > div > div{padding-left: 15px;padding-right: 15px;}
  .footerBackOffice .divLogin{padding-right: 15px;}
  
  .divRightHeadSearch > table > tbody > tr + tr > td, .divRightHeadSearch > table > tbody > tr + tr > td:last-child{padding-top: 0 !important;}
}

@media (max-width: 767px) {
  .mLeftBackOffice {padding: 10px 15px;}
  .mLeftBackOffice .logo img {width: 40px; height: auto; margin-right: 7px;}
  .mLeftBackOffice .logo a .title {font-size: 13px;}
  .mLeftBackOffice .logo a small {font-size: 8px;}

  .navControl { width: 250px; }
  .divLeftMenuTb td, 
  .divLeftMenuOver td {padding: 0 20px;}

  .login-form .control-group button {top: 50%;}

  .divLogin-img div,
  .divBtn-menu a {width: 35px; height: 35px;}
  .divBtn-menu a span {font-size: 20px;}
  .divLogin > a { padding: 0 7.5px; }

  .divDashboard-widget {display: block; width: 100%;}
  .divRightInnerTopBoxHome {float: left;min-width: auto; width: 100%; margin-bottom: 10px;}
  .divRightInnerTopBoxHome:nth-child(3) {margin-bottom: 0;}
  .cycle1Login,
  .cycle4Login {width: 35px; height: 35px;}
  .cycle1Login span,
  .cycle4Login span {font-size: 16px;}

  .boxHomeSortli {width: 100%;}
  .boxHomeSortli:first-child {padding-top: 0;}

  .divRightHome { margin-top: 95px; }

  .add-app td {/* height: 80px; */height: auto;line-height: 1em;padding: 15px 0;font-size: 14px;line-height: 1.2em;}
  .add-app td img {width: 35px;display: block;margin: 10px 0;}

  .divRightInnerBigBoxHome { height: auto; margin-top: 10px !important; }

  .divRightInnerHome-topic { margin-top: 0; margin-bottom: 10px; }
  .divRightInnerHome-topic .title {font-size: 16px;}

  .divRightInnerHome-topic .date span {margin-right: 0;}
  
  .footerBackOffice {display: block; padding: 0 15px; padding-top: 20px; padding-bottom: 10px;}
  .footerBackOffice .divLogin,
  .footerBackOffice .imgLogo {display: block; padding: 0; margin: 0; font-size: 11px; text-align: center;}
  .footerBackOffice .divLogin {margin-top: 5px; font-size: 10px;}
  .divRightMain {margin-bottom: 20px;}

  .mRightBackOffice > form {margin-top: 90px;}

  .divRightHeadSearch {margin-bottom: 20px;}
  .divRightHead {padding-bottom: 10px;}

  .fontHeadRight {font-size: 18px;}

  .btnAdd, 
  .btnDel, 
  .btnSort, 
  .btnBack, 
  .btnSave, 
  .btnExport, 
  .btnExportPdf, 
  .btnHistory,
  .btnEditView   {width: 35px; height: 35px; margin-left: 7px;}

  .fontContantTbNav,
  .fontContantTbNav a {font-size: 13px;}
  .divRightNavTb img {width: 12px; margin: 0 3px;}

  /* .divRightNav.fixed {top: 77px; padding: 10px 15px;} */
  /* .divRightHead.fixed {top: 114px; padding: 5px 15px;} */
  /* .divRightNav.fixed tr::before {left: -50px; bottom: -9px;} */

  .divRightMain > .tbBoxViewBorder 
  .formInputContantTb, 
  .divRightMain > 
  .tbBoxViewBorder .formInputContantTbShot, 
  .divRightMain > .tbBoxViewBorder .formTextareaContantTb, 
  .divRightMain > .tbBoxViewBorder .select2-container, 
  .divRightMain > .tbBoxViewBorder .control-group-password, 
  .divRightMain > .tbBoxViewBorder .formSelectContantTb,
  .progress {
    width: 100% !important;
  }

  .list-unstyled li { font-size: 13px; }
  .list-unstyled .feather {font-size: 16px;}

  .formInputContantTb {height: 36px;}
  .formRightContantTb button {width: 20px; height: 20px;}
  .formRightContantTb button::before {font-size: 14px;}

  .divRightMain.table-responsive {margin-bottom: 0;}
  .divRightMain.table-responsive .divRightMain {margin-bottom: 0;}
  .divRightMain.table-responsive > table tbody {display: -ms-grid;display: grid;padding-bottom: 15px;}
  .divRightMain.table-responsive > table td::before {display: none;}
  .divRightMain.table-responsive > table tr:not(:first-child) td:first-child {padding: 0 !important;}
  .divRightMain.table-responsive > table tr:not(:first-child) {padding: 15px;}
  .divRightMain.table-responsive > table tr:not(:first-child) + tr {padding-bottom: 0;}
  .divRightMain.table-responsive > table tr:first-child {display: block;}
  .divRightMain.table-responsive > table tr:first-child td {
    text-align: left !important;
    margin-bottom: 0; padding: 10px 15px 8px 15px !important;}
  .divRightMain.table-responsive > table tr:first-child td .formFontTileTxt {line-height: 1.2em; margin-top: 5px; display: block;}
  .divRightMain.table-responsive > table tr {border: none  ;}
  .divRightMain.table-responsive > table tr td {width: 100%; 
    text-align: left !important; 
    padding: 0 !important; height: auto;}
  .divRightMain.table-responsive > table tr td .formDivView {margin-top: 0;}
  .divRightMain.table-responsive > table tr td.formLeftContantTb {margin-bottom: 8px;background-color: transparent;}
  .divRightMain.table-responsive > table tr td .formRadioContantTb,
  .divRightMain.table-responsive > table tr td .formDivRadioR {margin-top: 0;}
  .divRightMain.table-responsive > table tr td label {margin-bottom: 0;}

  .divRightHeadSearch > table > tbody > tr + tr > td,
  .divRightHeadSearch > table > tbody > tr + tr > td:last-child{padding-top: 0;}

  .divRightInnerTopBoxHome{height: auto;min-height: 120px;}
  .divRightTrHome{height: auto;padding-bottom: 10px;}

  /* .divRightMain.table-responsive .tbBoxListwBorder > tbody > tr:first-child {display: none;} */
  .list-responsive > table {margin: 0;width: 100%;}
  .list-responsive > table > tbody > tr:first-child{display: none !important;}
  .list-responsive > table > tbody > tr > td[data-label]::before {display: block !important;}
  .list-responsive > table > tbody > tr > td[data-label]{text-align: right !important;}
  .list-responsive > table > tbody > tr:first-child > td[data-label]{text-align: right !important;}
  .list-responsive > table > tbody > tr > td[data-label] > table {display: inline;}
  .list-responsive > table > tbody > tr > td[data-label] > table .displayTdImg .displayClickImg{width: 30px;height: 30px;}
  .list-responsive > table > tbody > tr > td.divRightContantTbRL{background: initial !important;}

  td.buttonSearchStyle .btnSearch {width: 100%;}

  .divRightHeadSearch > table > tbody > tr + tr > td, 
  .divRightHeadSearch > table > tbody > tr + tr > td:last-child{padding-top: 0 !important;}

  .selectSearch4 ~ .buttonSearchStyle {display: none;}
}

@media (max-width: 575px) {
  .loginNew-wrapper .login-form .body {width: 100%; padding: 40px 15px 0 15px; }
  .loginNew-wrapper .col-right {width: calc(100% - 30px);}
  .loginNew-wrapper .col-right .login-body {width: 100%;}
  .loginNew-wrapper .col-left>address { font-size: 10px; padding-top: 12px; padding-bottom: 10px; }
  .loginNew-wrapper .login-form .body .form-btn {margin-top: 10px;}
  .loginNew-wrapper .login-form .form-btn .btn-primary { height: 42px; line-height: 1.2em; font-size: 15px; }
  .loginNew-wrapper .col-right .copy-rights { font-size: 11px; margin-top: 5px;padding: 10px 0;}
  .loginNew-wrapper .login-form .body .title { margin-bottom: 15px; }
}

  /* .loginNew-wrapper .login-form .body {padding: 0 20px;}
  .loginNew-wrapper .login-form .body .brand img { width: 120px; padding-bottom: 5px; }
  .loginNew-wrapper .login-form .body .title {font-size: 24px;}
  .loginNew-wrapper .login-form .body .title small {font-size: 16px;}
  .loginNew-wrapper .login-form .control-label { font-size: 14px; padding-bottom: 0;}
  .loginNew-wrapper .login-form .form-control {height: 40px; font-size: 14px; padding-left: 34px;}
  .loginNew-wrapper .login-form .control-group > span {font-size: 14px; left: 13px;}
  .login-form .control-group button {font-size: 14px; right: 7px;}
  .login-form .form-group { margin-bottom: 15px; }
  .loginNew-wrapper .login-form .form-btn .btn-primary { height: 44px; line-height: 42px; font-size: 16px; }
  .login-form .form-btn { margin-top: 15px; }
  .loginNew-wrapper .col-right .copy-rights {font-size: 12px; margin-top: 10px;}
  .loginNew-wrapper .col-right .versionsmall {font-size: 11px;}


@media (max-width: 991px) {
  .loginNew-wrapper { background-image: url(../img/bg-new-login.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; }
  .loginNew-wrapper > .d-flex { height: 120vh; flex-direction: column-reverse !important; }
  .loginNew-wrapper .col-left {width: 100%; background-image: none;}
  .loginNew-wrapper .col-right { width: auto; height: auto; max-width: 400px; top: 0; left: 50%; transform: translateX(-50%); border-radius: 5px; margin-top: 100px; margin-bottom: 130px;}
  .loginNew-wrapper .d-flex {flex-wrap: nowrap;}
  .loginNew-wrapper .collumn {height: auto;}

  .mainBackOffice > table {width: auto;}
  .divRightInnerHome-topic .title {font-size: 18px;}
  .divDashboard-widget {margin: 0 -5px 0 -5px; }
  .divRightInnerTopBoxHome { padding: 15px; height: 150px; margin: 0 5px;}
  .cycle1Login,
  .cycle4Login {width: 40px; height: 40px;}
  .cycle1Login span,
  .cycle4Login span {font-size: 18px;}
  .fontTitlTbHome {font-size: 15px;}
  .fontContantTbHome {font-size: 13px;}

  #boxHomeSort {margin: 0 -5px;}
  .boxHomeSortli {padding: 5px;}
}

@media (max-width: 767px) {
  .login-form .control-group button {top: 50%;}

  .divLogin-img div,
  .divBtn-menu a {width: 35px; height: 35px;}
  .divBtn-menu a span {font-size: 20px;}
  .divLogin > a { padding: 0 7.5px; }

  .divDashboard-widget {display: block; width: 100%;}
  .divRightInnerTopBoxHome {float: left;min-width: auto; width: 100%; margin-bottom: 10px;}
  .cycle1Login,
  .cycle4Login {width: 35px; height: 35px;}
  .cycle1Login span,
  .cycle4Login span {font-size: 16px;}

  .boxHomeSortli {width: 100%;}
} */

.divRightHeadSearch tr > td.selectSearch2 + td.selectSearch2{width: 26.4%;}

div:where(.swal2-container) div:where(.swal2-popup){width: 40em !important;}
div:where(.swal2-container) h2:where(.swal2-title){font-size: 2em !important;}
div:where(.swal2-container) .swal2-html-container{font-size: 1.55em !important;}
div:where(.swal2-container) div:where(.swal2-popup) {font-family: 'db_helvethaica' !important;}
div:where(.swal2-container) div:where(.swal2-actions){padding-bottom: 0.75em !important;}
div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm,
div:where(.swal2-container) button:where(.swal2-styled).swal2-deny,
div:where(.swal2-container) button:where(.swal2-styled).swal2-cancel{font-size: 1.4em !important;}


#boxHomeSort.boxHomeSortli .divRightTitleHome a span {
  color: #fff;
  font-weight: bold;
  font-size: 12px;
}

.divRightContantEnd ~ .divRightHeadSearch {display: none;}

#boxHomeSort.ui-sortable {margin: 0 !important; display: grid; grid-template-columns: repeat(3, 1fr);gap: 15px;}
#boxHomeSort.ui-sortable .boxHomeSortli {width: 100%;padding: 0;}
#boxHomeSort.ui-sortable::before,
#boxHomeSort.ui-sortable .boxHomeSortli::before {display: none;}

.divRightHeadSearch tr > td.td-select2 {padding-bottom: 0 !important;}

.divRightMain .divRightContantOverTb .widthDiv {padding-left: 5px !important;}
.listper li:first-child {height: 20px; display: flex; align-items: center;}
.listper label {padding: 8px; margin: 0 !important;display: flex; align-items: center;}
.listper label input {margin-right: 5px;}

.row-position {position: relative;padding-bottom: 0;}
.row-position.formRightContantTb  .jqplot-image-button {width: auto; height: auto; position: relative; top: unset; left: unset; right: unset; transform: unset;}
.row-position #savechartImages {position: absolute; top: 17px; right: 15px; height: 30px; padding: 5px; display: flex; align-items: center; background-color: #fff; border: 1px solid #267ce8; border-radius: 4px; font-family: 'db_helvethaica';}
.row-position #savechartImages button {outline: none; border: none; background-color: transparent; font-weight: 600;}
.row-position #viewChartImage {position: relative;padding: 0;}
.row-position #viewChartImage .jqplot-image-container-close {position: absolute; top: 10px; transform: unset; background-color: #ff4961; border-radius: 4px;border: 1px solid #fff;}
.row-position #viewChartImage .jqplot-image-container-close span {color: #fff; font-weight: 600;}
.row-position .rightclick {background-color: var(--color-primary); width: 100%; text-align: left;font-weight: 600; font-size: 16px; color: #fff;padding: 15px; font-family: 'db_helvethaica'; font-size: 16px; border-radius: 5px 5px 0 0; margin-left: auto;}
.tabchart .select2-container--default .select2-selection--single .select2-selection__rendered {font-family: 'db_helvethaica'; text-align: left;}
.divRightMain > .tbBoxViewBorder .tabchart .select2-container {width: 130px !important;}

.divLeftMenuTb a, 
.divLeftMenuOver a {padding: 10px;display: flex;align-items: center;white-space: normal;padding-right: 15px;}
.divLeftMenuOver a .fa {margin-right: 8px;}
.divLeftMenuTb a .fa {position: relative; transform: unset; left: 0;margin-right: 8px;}
.divLeftMenuTb a img {margin: 0;}
/* .divLeftMenuOver a span {margin-right: 5px;} */

.file-locition-wrapper {
  position: relative;
  width: 78%;
}
.btn-file-locition {
  position: absolute;
  width: max-content;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary);
  padding: 10px;
  border-radius: 4px;
  color: #fff !important;
  font-family: 'db_helvethaica';
}


@media (max-width: 991px)  {
  .loginNew-wrapper .col-right .versionsmall {display: none;}
}


textarea.formInputContantTbShot {height: 160px; padding-top: 10px;}

.tbBoxViewBorder .formInputContantTbShot.input-short {width: 20% !important;}


/* edit comments 181224 */
.divLeftMenu.newMenu a, 
.divLeftMenuOver.newMenu a {padding-left: 33px;}
.divLeftMenu a .material-symbols-outlined, 
.divLeftMenuOver a .material-symbols-outlined {left: 6px;}
.divLeftMenu.-LogOut a {padding-left: 35px;}

.navControl .overflow-y::-webkit-scrollbar { width: 10px; }
.navControl .overflow-y::-webkit-scrollbar-track { background: #f1f1f1; }
.navControl .overflow-y:-webkit-scrollbar-thumb { background-color: var(--color-primary); }
.navControl .overflow-y::-webkit-scrollbar-thumb:hover { background-color: var(--color-primary);}

.borderSpacing {border-top: 10px solid transparent;}

/* edit comemnts mobile device 13-08-24 */
@media (max-width: 767px) {
  #boxHomeSort.ui-sortable {display: block;}
  #boxHomeSort.ui-sortable .boxHomeSortli {margin-bottom: 13px;}

  .divRightNav.fixed tr td.divRightNavTb:nth-child(2) {display: none;}

  .listper li {width: 100% !important; margin: 0 !important;}
  .listper li:last-child {margin-bottom: 10px !important;}
  .listper li + li {margin-top: 10px !important;}

  .list-responsive > table > tbody > tr > td[data-label] > table .displayTdImg .displayClickImg {
    width: 30px !important;
    height: 30px !important;
    border-radius: 3px !important;
  }



  .displayTdImg ~ td {padding-left: 0 !important;vertical-align: middle !important;}
  .displayTdText {width: auto;padding: 0;}
  .displayTdText.displayTdImg > a,
  .displayTdImg ~ td > a {
    max-width: 120px;
    min-height: 1.2em;
    line-height: 1.4em;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    margin-left: auto;
    /* text-align: right; */
  }

  .displayTdText.displayTdImg > a ~ br {display: none;}
  .displayTdText.displayTdImg > a ~ br ~ span {margin-top: 10px;}
  /* .divRightContantOverTb a {
    max-width: 120px;
    min-height: 1.2em;
    line-height: 1.2em;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  } */

  .displayTdImg

  .add-app td {padding: 20px 0;}

  .divRightInnerBigBoxHome {margin-top: 0 !important;}

  .select-color {position: relative;}
  .select-color a {position: absolute;top: 50%; transform: translateY(-50%); right: 12px;}

  /* .divRightMain.table-responsive > table tr {overflow-x: hidden;} */

  .divRightMain > .tbBoxViewBorder 
  .formInputContantTb, 
  /* .divRightMain >  */
  .tbBoxViewBorder .formInputContantTbShot, 
  .divRightMain > .tbBoxViewBorder .formTextareaContantTb, 
  .divRightMain > .tbBoxViewBorder .select2-container, 
  .divRightMain > .tbBoxViewBorder .control-group-password, 
  .divRightMain > .tbBoxViewBorder .formSelectContantTb,
  .progress,
  .ajax-file-upload,
  .tbBoxViewBorder .formInputContantTbShot.input-short {
    width: 100% !important;
  }

  .formInputContantTbShot {min-width: auto;}

  .file-input-wrapper {overflow: unset;}
  .file-input-wrapper,
  .file-input-wrapper > .btn-file-input,
  .file-input-wrapper > input[type="file"] {width: 100%;left: 0;right: 0;}

  .list-responsive.list-setting > table > tbody > tr > td[data-label] {text-align: left !important;}
  .list-responsive.list-setting > table > tbody > tr > td[data-label]::before {display: none !important;}
  .list-responsive.list-setting > table > tbody > tr.divOverTb > td[data-label='ชื่อทรัพยากร']::before {display: block !important;height: 25px;}
  .list-responsive.list-setting .widthDiv {padding-left: 0 !important;}
  .list-responsive.list-setting .displayTdImg {width: 100% !important;}
  .list-responsive > table > tbody > tr > td[data-label] > table .displayTdImg .displayClickImg {width: 100% !important; height: auto !important;}
  .divRightMain.table-responsive.list-setting  > table tbody {padding-bottom: 10px !important;}
  .list-responsive.table-responsive.list-setting > table > tbody > tr:not(:last-child) {margin-bottom: 0;}
  .list-responsive.list-setting > table > tbody > tr > td[data-label].divRightContantOverTbL-Setting {display: none !important;}

  .table-responsive > table > tbody > tr > td > table {width: auto;margin-left: auto;}

  .list-responsive .tbBoxListwBorder {background-color: transparent;}
  .list-responsive.table-responsive > table > tbody > tr:not(:last-child) {margin-bottom: 10px;}
  .list-responsive > table > tbody > tr > td.divRightContantTbRL.bg-nav {background-color: #fff !important;padding: 10px !important;}

  .fontContantTbNav {
    max-width: 570px;
    min-height: 1.2em;
    line-height: 1.4em;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  .divRightNav.fixed .fontContantTbNav {max-width: 76%;}

  .fontHeadRight > br ~ div {
    font-size: 14px;
    max-width: 200px;
    min-height: 1.2em;
    line-height: 1.4em;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1
  }

  .divRightMain.table-responsive > table tr:first-child td.ui-sortableControl {padding: 0 !important;}
  .ui-sortableControl tbody {display: inline !important;}

  #boxPicNew img {max-width: 100% !important;}
  .formDivView > img {max-width: 100% !important;}
  .formDivView > a > img {max-width: 100% !important;}
  .formDivView video {width: 100% !important; height: auto !important;}
  .formDivView iframe {width: 100% !important; height: 190px !important;}
  .ajax-file-upload-statusbar {width: 100% !important;}

  .blockUI {zoom: 62%;}

  .viewEditorTileTxt {padding: 0;}
  .viewEditorTileTxt img {width: 100% !important; height: auto !important;}

  #boxHomeSort.ui-sortable.sortablePosition {display: inline-block;}
  #boxHomeSort.ui-sortable.sortablePosition .boxHomeSortli {margin-bottom: 12px;}
  #boxHomeSort.ui-sortable.sortablePosition .boxHomeSortli:last-child {margin-bottom: 10px;}

  .divLeftMenuTb a,
.divLeftMenuOver a {font-size: 14px;}

.borderSpacing {border-top: none;}

.divRightNav > table tr {display: flex;flex-direction: column;gap: 10px;}
.divRightNav .divRightNavTb[align="right"] {display: grid; gap: 7px;grid-template-columns: repeat(2, 1fr);}
.divRightNav .menuSubMod {margin: 0;width: 100%}
.divRightNav .menuSubMod a {padding: 10px;}

.list-responsive > table > tbody > tr > td.divRightContantTbRL.bg-nav .paganitionResponsive {display: flex ; flex-direction: column; width: 100%; gap: 5px;width: 100%;}
.list-responsive > table > tbody > tr > td.divRightContantTbRL.bg-nav .paganitionResponsive td {text-align: center;}
} 




/* edit comemnts mobile device 13-08-24 */
@media (max-width: 767px) {
    #boxHomeSort.ui-sortable {display: block;}
    #boxHomeSort.ui-sortable .boxHomeSortli {margin-bottom: 13px;}
  
    .divRightNav.fixed tr td.divRightNavTb:nth-child(2) {display: none;}
  
    .listper li {width: 100% !important; margin: 0 !important;}
    .listper li:last-child {margin-bottom: 10px !important;}
    .listper li + li {margin-top: 10px !important;}
  
    .list-responsive > table > tbody > tr > td[data-label] > table .displayTdImg .displayClickImg {
      width: 30px !important;
      height: 30px !important;
      border-radius: 3px !important;
    }
  
  
    .list-responsive > table > tbody > tr > td .displayTdImg {width: auto; padding: 0;}
    .list-responsive > table > tbody > tr > td .displayTdImg br {display: none;}
  
    .displayTdImg ~ td {padding-left: 0 !important;vertical-align: middle !important;}
    .displayTdText {width: auto;padding: 0;}
    .displayTdText.displayTdImg > a,
    .displayTdImg ~ td > a,
    .displayTdImg span,
    .list-responsive > table > tbody > tr > td[data-label] .fontContantTbupdate {
      max-width: 120px;
      min-height: 1.2em;
      line-height: 1.4em;
      word-break: break-word;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      margin-left: auto;
      /* text-align: right; */
    }
  
    .displayTdText.displayTdImg > a ~ br {display: none;}
    .displayTdText.displayTdImg > a ~ br ~ span {margin-top: 10px;}
    /* .divRightContantOverTb a {
      max-width: 120px;
      min-height: 1.2em;
      line-height: 1.2em;
      word-break: break-word;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
    } */
  
    .displayTdImg
  
    .add-app td {padding: 20px 0;}
  
    .divRightInnerBigBoxHome {margin-top: 0 !important;}
  
    .select-color {position: relative;}
    .select-color a {position: absolute;top: 50%; transform: translateY(-50%); right: 12px;}
  
    /* .divRightMain.table-responsive > table tr {overflow-x: hidden;} */
  
    .divRightMain > .tbBoxViewBorder 
    .formInputContantTb, 
    /* .divRightMain >  */
    .tbBoxViewBorder .formInputContantTbShot, 
    .divRightMain > .tbBoxViewBorder .formTextareaContantTb, 
    .divRightMain > .tbBoxViewBorder .select2-container, 
    .divRightMain > .tbBoxViewBorder .control-group-password, 
    .divRightMain > .tbBoxViewBorder .formSelectContantTb,
    .progress,
    .ajax-file-upload,
    .tbBoxViewBorder .formInputContantTbShot.input-short {
      width: 100% !important;
    }
  
    .formInputContantTbShot {min-width: auto;}
  
    .file-input-wrapper {overflow: unset;}
    .file-input-wrapper,
    .file-input-wrapper > .btn-file-input,
    .file-input-wrapper > input[type="file"] {width: 100%;left: 0;right: 0;}
  
    .list-responsive.list-setting > table > tbody > tr > td[data-label] {text-align: left !important;}
    .list-responsive.list-setting > table > tbody > tr > td[data-label]::before {display: none !important;}
    .list-responsive.list-setting > table > tbody > tr.divOverTb > td[data-label='ชื่อทรัพยากร']::before {display: block !important;height: 25px;}
    .list-responsive.list-setting .widthDiv {padding-left: 0 !important;}
    .list-responsive.list-setting .displayTdImg {width: 100% !important;}
    .list-responsive > table > tbody > tr > td[data-label] > table .displayTdImg .displayClickImg {width: 100% !important; height: auto !important;}
    .divRightMain.table-responsive.list-setting  > table tbody {padding-bottom: 10px !important;}
    .list-responsive.table-responsive.list-setting > table > tbody > tr:not(:last-child) {margin-bottom: 0;}
    .list-responsive.list-setting > table > tbody > tr > td[data-label].divRightContantOverTbL-Setting {display: none !important;}
  
    .table-responsive > table > tbody > tr > td > table {width: auto;margin-left: auto;}
  
    .list-responsive .tbBoxListwBorder {background-color: transparent;}
    .list-responsive.table-responsive > table > tbody > tr:not(:last-child) {margin-bottom: 10px;}
    .list-responsive > table > tbody > tr > td.divRightContantTbRL.bg-nav {background-color: #fff !important;padding: 10px !important;}
  
    .fontContantTbNav {
      max-width: 570px;
      min-height: 1.2em;
      line-height: 1.4em;
      word-break: break-word;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
    }
  
    .divRightNav.fixed .fontContantTbNav {max-width: 76%;}
  
    .fontHeadRight > br ~ div {
      font-size: 14px;
      max-width: 200px;
      min-height: 1.2em;
      line-height: 1.4em;
      word-break: break-word;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1
    }
  
    .divRightMain.table-responsive > table tr:first-child td.ui-sortableControl {padding: 0 !important;}
    .ui-sortableControl tbody {display: inline !important;}
  
    #boxPicNew img {max-width: 100% !important;}
    .formDivView > img {max-width: 100% !important;}
    .formDivView > a > img {max-width: 100% !important;}
    .formDivView video {width: 100% !important; height: auto !important;}
    .formDivView iframe {width: 100% !important; height: 190px !important;}
    .ajax-file-upload-statusbar {width: 100% !important;}
  
    .blockUI {zoom: 62%;}
  
    .viewEditorTileTxt {padding: 0;}
    .viewEditorTileTxt img {width: 100% !important; height: auto !important;}
  
    #boxHomeSort.ui-sortable.sortablePosition {display: inline-block;}
    #boxHomeSort.ui-sortable.sortablePosition .boxHomeSortli {margin-bottom: 12px;}
    #boxHomeSort.ui-sortable.sortablePosition .boxHomeSortli:last-child {margin-bottom: 10px;}
  } 
  
  
  /* edit comments 181224 */
  .divLeftMenu.newMenu a, 
  .divLeftMenuOver.newMenu a {padding-left: 33px;}
  .divLeftMenu a .material-symbols-outlined, 
  .divLeftMenuOver a .material-symbols-outlined {left: 6px;}
  .divLeftMenu.-LogOut a {padding-left: 35px;}
  .navControl .overflow-y::-webkit-scrollbar { width: 10px; }
  .navControl .overflow-y::-webkit-scrollbar-track { background: #f1f1f1; }
  .navControl .overflow-y:-webkit-scrollbar-thumb { background-color: var(--color-primary); }
  .navControl .overflow-y::-webkit-scrollbar-thumb:hover { background-color: var(--color-primary);}
  .borderSpacing {border-top: 10px solid transparent;}
  .divLeftSubMenuOver a, .fontContantSubMenu:link, .fontContantSubMenu:visited {color: var(--color-primary); border: 1px solid var(--color-primary); background-color: #267ce808;}
  .file-locition-wrapper { position: relative; width: 78%; } 
  .btn-file-locition { position: absolute; width: max-content; right: 5px; top: 50%; transform: translateY(-50%); height: 30px; display: inline-flex; align-items: center; justify-content: center; background-color: var(--color-primary); padding: 10px; border-radius: 4px; color: #fff !important; font-family: 'db_helvethaica'; }
  
  .divRightMain > table.tbBoxViewBorder td.RowaddPermis {padding: 10px 15px 8px 15px; background-color: var(--color-primary); border: none;}
  .divRightMain > .tbBoxViewBorder .RowaddPermis tr .tbRightTitleTbL, 
  .divRightMain > .tbBoxViewBorder .RowaddPermis tr .tbRightTitleTbL ~ td {padding-top: 15px; padding-bottom: 15px; background-color: #e2e2e2;}
  .divRightMain > .tbBoxViewBorder .RowaddPermis tr .tbRightTitleTbL {border-top-left-radius: 5px;}
  .divRightMain > .tbBoxViewBorder .RowaddPermis tr .tbRightTitleTbR {border-top-right-radius: 5px;}
  
  .list-responsive > table > tbody > tr > td.divRightContantTbRL {text-align: center !important;}
  
  .menu-icon  {max-width: 350px;display: flex;gap: 8px;align-items: center;}
  .menu-icon .menu-icon-block {width: 100%; display: block; padding: 10px; border-radius: 3px; border: 1px solid var(--color-border); text-align: center;height: 37px;}
  .menu-icon .menu-icon-select a {width: 120px; height: 37px; border-radius: 3px; background-color: var(--color-primary); display: flex ; color: #fffc; text-align: center; font-weight: 600; align-items: center; justify-content: center; font-family: 'db_helvethaica';}

  .w-auto {width: auto !important;}

  .mRightBackOffice {    padding: 110px 0 0 0;}
  
  .divRightHead.fixed {top: 85px;}
  .divRightNav.fixed .menuSubMod {display: none;}

  .divRightMain .tbBoxListwBorder tbody>tr:first-child td.divRightTitleTb.tdLangSpace ,
  .tdLangSpace {padding-left: 20px !important;}



  /* edit comemnts addon */
  @media (max-width: 767px) {
    .loginNew-wrapper .col-right .versionsmall {font-size: 10px; bottom: 0; margin-bottom: 5px;display: block;}
    .loginNew-wrapper .login-form .body {padding: 40px 15px 15px 15px}
    .loginNew-wrapper .col-right .copy-rights {margin-bottom: 30px;}
  
    .mLeftBackOffice {height: 75px;}
    .mLeftBackOffice .logo a .title {font-size: 13px;}
    .divLeftMenuTb a, .divLeftMenuOver a {font-size: 14px;}
  
    .divRightHead.fixed {top: 75px;}
    .divRightHead.fixed .fontHeadRight {font-size: 14px;top: -8px;}
    .divRightNav.fixed .fontContantTbNav a, .divRightNav.fixed .fontContantTbNav {font-size: 11px;}
  
    .select2-container--default .select2-selection--single .select2-selection__rendered,
    .select2-results__option {font-size: 13px;}
  
    #boxInputlink .formDivView {width: auto;}
  
    .select2-container .select2-selection--single .select2-selection__rendered {word-break: break-word; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;white-space: break-spaces;}
  
    .divRightMain.table-responsive > table tr:first-child td .formFontTileTxt {font-size: 11px;line-height: 1.5em;}
  
    .loginNew-wrapper .login-form .body .brand img {width: 100px;}
    .loginNew-wrapper .login-form .body .title {font-size: 20px;}
    .loginNew-wrapper .login-form .body .title small {font-size: 13px;height: 40px;}
  
    .mLeftBackOffice .logo a small {line-height: 1.4em;}
  
    .borderSpacing {border-top: none;}
  
    .divRightNav > table tr {display: flex;flex-direction: column;gap: 10px;}
    .divRightNav .divRightNavTb[align="right"] {display: grid; gap: 7px;grid-template-columns: repeat(2, 1fr);}
    .divRightNav .menuSubMod {margin: 0;width: 100%}
    .divRightNav .menuSubMod a {padding: 10px;}
  
    .list-responsive > table > tbody > tr > td.divRightContantTbRL.bg-nav .paganitionResponsive {display: flex ; flex-direction: column; width: 100%; gap: 5px;width: 100%;}
    .list-responsive > table > tbody > tr > td.divRightContantTbRL.bg-nav .paganitionResponsive td {text-align: center;}
  
    .divLeftMenuTb a, .divLeftMenuOver a{font-size: 14px;}
  
    .trEditPermis {padding: 0 !important;}
  
    .table-responsive > table.tableEditPermis tbody {padding-bottom: 0;}
    .table-responsive > table.tableEditPermis > tbody {padding-bottom: 0;}
    .table-responsive > table.tableEditPermis > tbody > tr:not(:last-child) {margin: 0;padding: 15px;border-bottom: 2px solid #0d673280;}
    .table-responsive > table.tableEditPermis tr:not(:first-child) + tr {padding-bottom: 15px;}
    /* .list-responsive > table.tableEditPermis > tbody > tr > td[data-label="เลือกทั้งหมด"]::before {display: none !important;} */
    .list-responsive > table.tableEditPermis > tbody > tr > td[data-label]:nth-child(2)::before {color: #FFCC00;}
    .list-responsive > table.tableEditPermis > tbody > tr > td[data-label]:nth-child(3)::before {color: #00CC00;}
    .list-responsive > table.tableEditPermis > tbody > tr > td[data-label]:nth-child(4)::before {color: #FF0000;}
    .list-responsive > table.tableEditPermis > tbody > tr > td[data-label] > div {margin-left: auto !important; margin-right: unset !important; text-align: left !important; width: 100px !important;}
    .list-responsive > table.tableEditPermis > tbody > tr > td[data-label] + td[data-label] {margin-top: 10px;}
    .list-responsive > table.tableEditPermis > tbody > tr > td[data-label] > div .formDivRadioR {margin: 0;}
    
    .divRightContantTbRL.bg-nav table tbody > tr {display: block;}
    .divRightContantTbRL.bg-nav table tbody > tr > td.divRightNavTb {display: block;width: 100%;text-align: center;}
    .divRightContantTbRL.bg-nav table tbody > tr > td.divRightNavTb:nth-child(1) {margin-bottom: 5px;}
    .formInputContantTbShotJumppage {width: 60px;height: 28px;}
  
    .divRightNav {margin-bottom: 0;}
  
    .table-responsive > table > tbody > tr > td > table {margin-right: 0;}
    .bg-nav table {margin: auto !important;}
  
    .file-locition-wrapper {width: 100%;}
  
    .loginNew-wrapper .login-form .body .brand img {padding-bottom: 20px;}

    .mRightBackOffice {padding: 0;}
    .mRightBackOffice > form {padding: 0 15px;}
    .divRightHome {padding: 0 15px;}
    .divRightHead.fixed {padding: 5px 15px;}

    .tableNoPic {display: table;}
    .tableNoPic td {width: auto;}

    .footerBackOffice .versionsmall {display: block;margin-top: 20px; color: #bbb; font-weight: bold;}

    .trEditPermis .list-responsive > table > tbody > tr > td[data-label]:first-child {text-align: right !important;}
    .list-responsive > table > tbody > tr > td[data-label]:first-child {text-align: left !important;}
  }
  

  .divLeftMenu a, .divLeftMenuOver a,
.divLeftSubMenu a, .divLeftSubMenuTb a {white-space: normal;}