:root {
  --icon-width: 2.5rem;
  --text-width: 5rem;
  --icon-width-scale: 0.5rem;
  --icon-margin: 0.15rem;
  --transition-mode-delay: 0.25s;
  --abs-logo-image: url("../images/logo/ABS_LOGO.png");
  --bg-login-select: url("../images/background/BG_FLAG_LOGIN.jpg");
  --bg-main-select: url("../images/background/BG_FLAG_MAIN.jpg");

  /* BRIGHT */
  --mode-text: "BRIGHT";
  /* login */
  --color-login-select: #4a7080;
  --color-login-btn: #4a7080;
  --color-login-btn-hover: #548091;
  --color-login-bg: rgba(128, 128, 128, 0);
  --color-login-form-bg: #ffffff;
  --color-main-select: #548091;
  --color-main-btn: #ffffff;
  --color-main-btn-hover: #e2e2e2;
  --color-main-bg: rgba(128, 128, 128, 0);
  
  /* change password and reset password */
  --password-form-btn-bg-color: #f0f5fd;
  --password-form-btn-bg-color-hover: #2769c9;
  --password-form-btn-font-color: #000000;
  --password-form-btn-font-color-hover: #ffffff;

  /* sidebar */
  --bg-sidebar: #fff;
  --button-sidebar-select: #f2f2f2;
  --sidebar-font-active: #000;
  --sidebar-icon-color: #000;
  --sidebar-border-right: #f2f2f2;
  --sidebar-item-color: #548091;
  --sidebar-item-bg-hover: #DFE7E9;
  --sidebar-item-bg-active: #548091;

  --base: #fff;
  --font-color: #000;
  --font-color-reverse: #fff;
  --background-tooptip: rgb(150, 150, 150);
  --grid-subhead: #6192a7;
  --grid-head: #d8d8d8;
  --grid-mainhead: #548091;
  --grid-border: 1px solid rgba(0, 0, 0);
  --bg-table:#fff;

   /* alert */
   --space5: 5rem;
   --space4: 4rem;
   --space3: 3rem;
   --space2: 2.5rem;
   --space1: 1rem;
   --space0: 0.5rem;
   --radius: 0.5rem;

  /*informationTFRS9*/
  --height-file: 2.5rem;
  --height-input: 3.5rem;
  --height-head: 2.5rem;

  /* selectdropdown ABS9 */
  --border-gray: 1px solid rgba(182, 182, 182, 0.2);
  --bg-version-hover:#d4e5f8;
  --btn-radius:0.3rem;

  /* resultTFRS9 */
  --font-size-hover: 1.4rem;
  --width-hover: 30vw;
  --height-hover: 6vh;
  
  /* table TFRS9 */
  --height-title-table:3.5rem;
  --height-body-table: 3rem;
  --height-thead-table:6vh;
  --bg-head-table: #0c316d;
  --bg-color-even: rgba(182, 182, 182, 0.2);
  --border-table: 1px solid #d6d6d6;
  --border-line: 1px solid #d6d6d6;

  /* line */
  --height-line : 0.1rem;
  --height-line-text : 1.2;

  /* transition */
  --opacity-time-halfone : opacity 0.5s ease;
  --visibility-time-halfone : visibility 0.5s ease;

  /* theme */
  --theme-first-color: #4a7080;
  --theme-second-color: #548091;
  --theme-third-color: #f2f2f2;
  --theme-fourth-color: #f8f8f8;

  --theme-bg-modal: #fff;
  --theme-bg-modal-hover: #e9e9e9;

  --theme-first-font: #000;
  --theme-second-font: #ffffff;
  --theme-third-font: rgb(108, 117, 125);

  --theme-text-loading: gray;
  --theme-subtext-loading: darkgray;
  --theme-nontext-loading: #ffffff;

  --theme-maintext-alert: #000;
  --theme-subtext-alert: darkgray;
  --theme-icon-success: #00a96e;
  --theme-icon-warning: #ffbe00;
  --theme-icon-fail: #ff5861;
  --theme-icon-confirm: darkgray;
  --theme-shadow: 0.1rem 0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.19);
  --backdrop-background: rgba(0, 0, 0, 0.5);
  --bg-loading: #fff;

  /* user */
  --head-color: #214382;
  --bg-search-input-wrapper: #fff;
  --bg-current-search-target: #548091;
  --bg-hover-search-menu-item: #dee2e6;

  /* font change */
  --bg-font-change: #548091;
  --bg-font-change-hover: #fff;

  /* resultpage */
  --link-color: #0d6efd;
  --link-color-hover: #0757d0;

  /* Btn */
  --btn-success:#00a96e;
  --btn-success-hover: #00845b;
  --btn-warning: #ffbe00;
  --btn-warning-hover: #e8ad00;
  --btn-danger:#ff5861;
  --btn-danger-hover: #e64f57;
  --btn-secondary:#6c757d;
  --btn-secondary-hover: #61666b;
  --btn-abs:#548091;
  --btn-abs-hover: #4b7180;
  --btn-info: #548091;
  --btn-info-hover: #4a7080;

  /* input focus */
  --border-focus-color: #0d6efd;
  --border-blur-color: lightgray;
  --bg-box-li-hover:#d5e2e7;

  /* tabContain */
  --bg-tab:#fff;
  --bg-tab-dashBoard:#fff;
  --border-tab:1px solid lightgray;
  --border-tab-dashBoard:1px solid lightgray;
  --color-tab:#000;
  --color-two-tab:#a8a8a8;
  --color-two-tab-dashBoard:#a8a8a8;

  /* main16 */
  --background-main: #fff;
  --font-main: #000;
  --box-bg-color:#fff;
  --color-input:#000;
  --bg-input: #fff;
  --border-input: 1px solid lightgray;
  --bg-datetime-input:#fff;
  --placeholder-input: darkgray;
  --rowEnd-color: #00A96E;
  --noRowEnd-color: gray;
  --info-color-one: #425FE5;
  --info-color-two: #00A96E;
  --info-color-three: #FF5861;
  --info-color-four: #fcfa61;
  --bg-exportContentArea:#fff;

  --bg-multiArea:#fff;
  --bg-multiMenu:#fff;
  --border-multiArea:1px solid lightgray;
  --bg-multiBtn:#fff;
  --border-multiBtn:1px solid lightgray;
  --color-multiBtn:#000;
  --hover-multiBtn:#e2e2e2;

  --bg-dropDownArea:#fff;
  --border-dropDownArea:1px solid lightgray;
  --bg-dropDownMenu:#fff;
  --bg-dropDownButton:#fff;
  --border-dropDownButton:1px solid lightgray;
  --color-dropDownButton:#000;
  --hover-dropDownButton:#e2e2e2;

  --bg-status-web:#fff;
  --color-load-status-web:#214382;
  --color-adsearch: #000;
  --bg-clear-adsearch: #fff;
  --color-clear-adsearch: #808080;
  --border-clear-adsearch: 1px solid #808080;
  --border-clear-adsearch-hover:1px solid #FF5861;
  --bg-error-log-ibr: lightpink;
  --color-error-log-ibr: #FF5861;
  --border-Info-input:1px solid lightgray;
  --bg-detail-inputArea:#fff;
  --bg-error-display:#f8f8f8;
  --bg-error-title:#f2f2f2;
  --border-error-title:lightgray;
  --error-copy-hover-color:#000;
  --infoDownloadError-color:#777;
  --errorSolvingIcon-color-hover:#000;
  --color-addCashFlowTable: rgb(108, 117, 125);
  --border-b-addCashFlowTable: rgb(108, 117, 125);
  --border-cashFlow-table:1px solid #000;
  --bg-thead-one-cashFlow-table:#548091;
  --bg-thead-two-cashFlow-table:#6092a5;
  --color-thead-cashFlow-table:#fff;
  --suggest-bg:#fff;
  --suggest-border:1.5px solid lightgray;
  --suggest-hover:#e2e2e2;
  --selectCountMenu-bg:#fff;
  --selectCountArrow-bg:#e8e8e8;
  --selectCountItem-hover-bg:#d8d8d8;
  --detailList-color:#7e7e7e;
  --detailList-hover-color:#000;
  --textRefCredit-color:#FF5861;
  --frequencyWaning-color:#FF5861;
  --expandActivityBtn-hover-color:#000;
  --bg-modal-setup:#fff;
  --bg-bank-cell:#fff;
  --bg-slider-month-hover:#e8e8e8;
  --color-slider-month-hover:#000;
  --bg-slider-month-active:#548091;
  --border-color-decimalUp:#fff;
  --bg-navigate-hover:#f5f5f5;
  --bg-navigate-hover-for-main:#f5f5f5;
  --bg-modal-lessor:#fff;
  --bg-detail-page-table:#fff;
  --bg-detail-page-box: #fff;
  --bg-detail-page-delete-modal:#fff;
  --bg-detail-page-delete-modal-text-area:#fff;
  --border-detail-page-delete-modal-text-area:1px solid lightgray;
  --color-detail-page-delete-modal-text-area:#000;
  --color-detail-page-delete-modal-warning:red;
  --color-detail-page-detailLabel:rgb(108, 117, 125);
  --color-hover-colBtn:#000;
  --color-subLabelColor: #737376;
  --color-hover-expendinfoContractInRowRemeasurement: #000;
  --bg-detail-label-container: #6192a7;
  --border-color-container: lightgray;
  --bg-detail-first-item-container: #f2f2f2;
  --bg-loading-table: #fff;
  --border-loading-table: 2px solid #f2f2f2;
  --bg-loading-item-table: #548091;

  /* note base */
  --bg-user-info-menu:#fff;
  --bg-hover-user-info-menu-item:#e8e8e8;
  --color-user-info-menu-item:#777;
  --bg-user-manage:#e8e8e8;
  --bg-form-user-manage:#fff;
  --color-header-user-manage:#548091;
  --bg-loading_page: #fff;

  /* ABS9 */
  --bg-container-main: #fff;
  --color-title-font:#000;
  --color-subtext-font: rgb(108, 117, 125);
  --color-icon:#548091;
  --color-icon-head: #548091;
  --color-icon-status: #548091;
  --bg-disable: #f2f2f2;
  --color-disable: darkgray;
  --color-font-select:#4a7080;
  --bg-input-all: #fff;
  --border-input-all: 1px solid lightgray;
  --input-li-hover: lightgray;
  --icon-input:#f2f2f2;
  --color-close: #454545;
  --border-close-hover: #cdcdcd;
  --bg-info-hover:#4a7080;
  --border-box: 1px solid #dee2e6;
  --border-box-click: 1px solid #dee2e6;
  --border-box-hover: 1px solid #f2f2f2;
  --bg-box-click: #fff;
  --bg-box-detail: #f2f2f2;
  --color-text-hover:rgb(134, 147, 157);
  --bg-all-dashboard: lightgray;
  --bg-div-dasboard: #ffffff;
  --color-text-dashboard: rgb(108, 117, 125);
  --bg-button-switch: lightgray;
  --bg-box:#ffffff;
  --bg-box-hover:#EFF2F3;
  --border-color-abs:1px solid #548091;
  /* table */
  --bg-head-table: #548091;
  --bg-subhead-table: #e8e8e8;
  --bg-even-table: #f2f2f2;
  --bg-row-table-hover: #f2f2f2;
  --bg-row-click: lightgray;
  --color-row-click: #548091;
  /* --color-border-box: lightgray; */
  /* color */
  --color-success: #00a96e;
  --color-onprocess: #ffbe00;
  --color-not:#ff5861;
  --color-second-text: #dee2e6;
  --color-text-non-hl:#aaa;
  --color-text-non-hl-hover:rgb(97, 97, 97);
  /* switch */
  --bg-element-select: #548091;
  --color-element-select: #fff;
  --bg-element-select-hover:#d5e2e7;
}

.dark_mode {
  /* DARK */
  --mode-text: "DARK";
  /* login */
  --color-login-select: #29384d;
  --color-login-btn: #576270;
  --color-login-btn-hover: #3f4c5b;
  --color-login-bg: rgba(128, 128, 128, 0.1);
  --color-login-form-bg: #ffffff;
  --color-main-select: #29384d;
  --color-main-btn: #ffffff;
  --color-main-btn-hover: #e2e2e2;
  --color-main-bg: rgba(128, 128, 128, 0.1);
 
  /* change password and reset password */
  --password-form-btn-bg-color: #f0f5fd;
  --password-form-btn-bg-color-hover: #3f4c5b;
  --password-form-btn-font-color: #000000;
  --password-form-btn-font-color-hover: #ffffff;
  
  /* sidebar */
  --bg-sidebar: #111419;
  --button-sidebar-select: #252f3d;;
  --sidebar-font-active: #fff;
  --sidebar-icon-color: #fff;
  --sidebar-border-right: #232a33;
  --sidebar-item-color: #fff;
  --sidebar-item-bg-hover: #29384d;
  --sidebar-item-bg-active: #29384d;

  /* select company */
  /* --bg-hover: #0c316d; */

  /* TFRS16 */
  --input_border: 1px rgb(211, 211, 211) solid;
  --error-color: red;
  --base: #fff;
  --font-color: #fff;
  --font-color-reverse: #fff;
  --background-tooptip: rgb(150, 150, 150);
  --grid-subhead: #576270;
  --grid-head: #29384d;
  --grid-mainhead: #29384d;
  --grid-border: 1px solid rgba(0, 0, 0);
  --bg-table:#383f47;

   /* alert */
   --space5: 5rem;
   --space4: 4rem;
   --space3: 3rem;
   --space2: 2.5rem;
   --space1: 1rem;
   --space0: 0.5rem;
   --radius: 0.5rem;

  /*informationTFRS9*/
  --height-file: 2.5rem;
  --height-input: 3.5rem;
  --height-head: 2.5rem;

  /* selectdropdown ABS9 */
  --border-gray: 1px solid rgba(182, 182, 182, 0.2);
  --bg-version-hover:#d4e5f8;
  --btn-radius:0.3rem;
  /* resultTFRS9 */
  --font-size-hover: 1.4rem;
  --width-hover: 30vw;
  --height-hover: 6vh;
  /* table TFRS9 */
  --height-title-table:3.5rem;
  --height-body-table: 3rem;
  --height-thead-table:6vh;
  --bg-head-table: #0c316d;
  --bg-color-even: rgba(182, 182, 182, 0.2);
  --border-table: 1px solid #fff;
  --border-line: 1px solid rgba(0, 0, 0);
  /* line */
  --height-line : 0.1rem;
  --height-line-text : 1.2;
  /* transition */
  --opacity-time-halfone : opacity 0.5s ease;
  --visibility-time-halfone : visibility 0.5s ease;

  /* theme */
  --theme-first-color: #252f3d;
  --theme-second-color: #29384d;
  --theme-third-color: #383f47;
  --theme-fourth-color: #252f3d;

  --theme-bg-modal: #383f47;
  --theme-bg-modal-hover: #232a33;

  --theme-first-font: #000;
  --theme-second-font: #ffffff;
  --theme-third-font: rgb(108, 117, 125);

  --theme-text-loading: #fff;
  --theme-subtext-loading: darkgray;
  --theme-nontext-loading: #ffffff;

  --theme-maintext-alert: #000;
  --theme-subtext-alert: darkgray;
  --theme-icon-success: #00b29f;
  --theme-icon-warning: #646ee4;
  --theme-icon-fail: #ef47bc;
  --theme-icon-confirm: darkgray;

  --theme-shadow: 0.1rem 0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.19);
  --backdrop-background: rgba(0, 0, 0, 0.5);

  /* user */
  --head-color: #214382;
  --bg-search-input-wrapper: #383f47;
  --bg-current-search-target: #646ee4;
  --bg-hover-search-menu-item: #111419;

  /* font change */
  --bg-font-change: #252f3d;
  --bg-font-change-hover: #383f47;
  /* --bg-font-change: #2C374E; */

  /* resultpage */
  --link-color: #0d6efd;
  --link-color-hover: #0757d0;

  /* Btn */
  --btn-success:#00b29f;
  --btn-success-hover: #008779;
  --btn-warning: #646ee4;
  --btn-warning-hover: #5760c7;
  --btn-danger:#ef47bc;
  --btn-danger-hover: #c93c9e;
  --btn-secondary:#6c757d;
  --btn-secondary-hover: #61666b;
  --btn-abs:#29384d;
  --btn-abs-hover: #243144;
  --btn-info: #29384d;
  --btn-info-hover: #252f3d;


  /* input focus */
  --border-focus-color: #646ee4;
  --border-blur-color: #232a33;
  --bg-box-li-hover:#232a33;

  /* tabContain */
  --bg-tab:#111419;
  --bg-tab-dashBoard:#383f47;
  --border-tab:1px solid #29384d;
  --border-tab-dashBoard:1px solid lightgray;
  --color-tab:#fff;
  --color-two-tab:#383f47;
  --color-two-tab-dashBoard:#677078;

  /* main16 */
  --background-main: #111419;
  --font-main: #fff;
  --box-bg-color:#232a33;
  --color-input:#fff;
  --bg-input: #232a33;
  --border-input: 1px solid #232a33;
  --bg-datetime-input: #232a33;
  --placeholder-input: #fff;
  --rowEnd-color: #00b29f;
  --noRowEnd-color: white;
  --info-color-one: #646ee4;
  --info-color-two: #00b29f;
  --info-color-three: #ef47bc;
  --info-color-four: #fcfa61;
  --bg-exportContentArea:#383f47;
  --bg-multiArea:#232a33;
  --bg-multiMenu:#111419;
  --border-multiArea:1px solid #232a33;
  --bg-multiBtn:#232a33;
  --border-multiBtn:1px solid #232a33;
  --color-multiBtn:#fff;
  --hover-multiBtn:#383f47;

  --bg-dropDownArea:#232a33;
  --border-dropDownArea:1px solid #232a33;
  --bg-dropDownMenu:#111419;
  --bg-dropDownButton:#232a33;
  --border-dropDownButton:1px solid #232a33;
  --color-dropDownButton:#fff;
  --hover-dropDownButton:#383f47;

  --bg-status-web:#383f47;
  --color-load-status-web:#646ee4;
  --color-adsearch: #fff;
  --bg-clear-adsearch: #232a33;
  --color-clear-adsearch: #808080;
  --border-clear-adsearch: 1px solid #232a33;
  --border-clear-adsearch-hover:1px solid #ef47bc;
  --bg-error-log-ibr: #383f47;
  --color-error-log-ibr: #ef47bc;
  --border-Info-input:1px solid #fff;
  --bg-detail-inputArea:#383f47;
  --bg-error-display:#232a33;
  --bg-error-title:#111419;
  --border-error-title:#111419;
  --error-copy-hover-color:#fff;
  --infoDownloadError-color:#fff;
  --errorSolvingIcon-color-hover:#fff;
  --color-addCashFlowTable: #fff;
  --border-b-addCashFlowTable: #232a33;
  --border-cashFlow-table:1px solid #000;
  --bg-thead-one-cashFlow-table:#252f3d;
  --bg-thead-two-cashFlow-table:#29384d;
  --color-thead-cashFlow-table:#fff;
  --suggest-bg:#232a33;
  --suggest-border:1.5px solid gray;
  --suggest-hover:#383f47;
  --selectCountMenu-bg:#232a33;
  --selectCountArrow-bg:#232a33;
  --selectCountItem-hover-bg:#383f47;
  --detailList-color:lightgray;
  --detailList-hover-color:#fff;
  --textRefCredit-color:#ef47bc;
  --frequencyWaning-color:#ef47bc;
  --expandActivityBtn-hover-color:#fff;
  --bg-modal-setup:#383f47;
  --bg-bank-cell:#111419;
  --bg-slider-month-hover:#383f47;
  --color-slider-month-hover:#fff;
  --bg-slider-month-active:#29384d;
  --border-color-decimalUp:#111419;
  --bg-navigate-hover:#232a33;
  --bg-navigate-hover-for-main:#383f47;
  --bg-modal-lessor:#383f47;
  --bg-detail-page-table:#383f47;
  --bg-detail-page-box: #383f47;
  --bg-detail-page-delete-modal:#111419;
  --bg-detail-page-delete-modal-text-area:#383f47;
  --border-detail-page-delete-modal-text-area:none;
  --color-detail-page-delete-modal-text-area:#fff;
  --color-detail-page-delete-modal-warning:#ef47bc;
  --color-detail-page-detailLabel:#fff;
  --color-hover-colBtn:#fff;
  --color-subLabelColor:#b8b8bb;
  --color-hover-expendinfoContractInRowRemeasurement: #fff;
  --bg-detail-label-container: #29384d;
  --border-color-container: #000;
  --bg-detail-first-item-container: #576270;
  --bg-loading-table: #111419;
  --border-loading-table: 2px solid #383f47;
  --bg-loading-item-table: #646ee4;

  /* ABS9 */
  --bg-container-main: #111419;
  --color-title-font:#ffffff;
  --color-subtext-font: darkgray;
  --color-icon: darkgray;
  --color-icon-head: #ffffff;
  --color-icon-status: #359ce3;
  --bg-disable: #232a33;
  --color-disable: darkgray;
  --color-font-select:#252f3d;
  --bg-input-all: #232a33;
  --border-input-all: 1px solid #232a33;
  --input-li-hover: #383f47;
  /* --color-input-all: #ffffff; */
  --icon-input:#252f3d;
  /* --icon-input-hover:#383f47; */
  --color-close: darkgray;
  --border-close-hover: lightgray;
  --bg-info-hover:#232a33;
  --border-box: 1px solid #252f3d;
  --border-box-click: 1px solid #252f3d;
  --border-box-hover: 1px solid #232a33;
  --bg-box-click: #232a33;
  --bg-box-detail: #232a33;
  --color-text-hover:rgb(134, 147, 157);
  --bg-all-dashboard: #383f47;
  --bg-div-dasboard: #111419;
  --color-text-dashboard: #ffffff;
  --bg-button-switch: #383f47;
  --bg-box:#383f47;
  --bg-box-hover:#232a33;
  --border-color-abs:1px solid #29384d;
  /* table */
  --bg-head-table: #29384d;
  --bg-subhead-table: #29384d;
  --bg-even-table: #232a33;
  --bg-row-table-hover: #232a33;
  --bg-row-click: #252f3d;
  --color-row-click: #00b29f;
  /* --color-border-box: rgb(0,0,0); */
  /* color */
  --color-success: #00b29f;
  --color-onprocess: #646ee4;
  --color-not:#ef47bc;
  --color-second-text: #dee2e6;
  --color-text-non-hl:#29384d;
  --color-text-non-hl-hover:#383f47;
  /* note base */
  --bg-user-info-menu:#383f47;
  --bg-hover-user-info-menu-item:#232a33;
  --color-user-info-menu-item:#fff;
  --bg-user-manage:#111419;
  --bg-form-user-manage:#383f47;
  --color-header-user-manage:#fff;
  --bg-loading_page: #111419;
  /* switch */
  --bg-element-select: #00b29f;
  --color-element-select: #252f3d;
  --bg-element-select-hover:#232a33;
}

/* font */

:root,
[data-font="standard"] {
--theme-font-size-xl: 1.375rem;
--theme-font-size-l: 1.25rem;
--theme-font-size-m: 1rem;
--theme-font-size-s: 0.875rem;
--theme-font-size-xs: 0.75rem;
--date-width: 16px;
--percent-top: 8px;
--font-size-select-home: 4rem;
--icon-size-user:1.75rem;
}

[data-font="large"] {
--theme-font-size-xl: 1.5rem;
--theme-font-size-l: 1.375rem;
--theme-font-size-m: 1.125rem;
--theme-font-size-s: 1rem;
--theme-font-size-xs: 0.875rem;
--date-width: 22px;
--percent-top: 10px;
--font-size-select-home: 5rem;
--icon-size-user:2.25rem;
}

.div_change_mode {
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 1rem;
right: 1rem;
width: auto;
}

#mode_checkbox {
width: 0rem;
height: 0rem;
opacity: 0;
position: absolute;
z-index: -1;
}

.label_change_mode {
width: calc(var(--icon-width) + var(--text-width) + var(--icon-margin));
height: calc(var(--icon-width) + (var(--icon-margin) * 2));
background-color: var(--color-main-select);
display: flex;
align-items: center;
justify-content: space-between;
margin: 0;
padding: 0;
border-radius: var(--icon-width);
position: relative;
cursor: pointer;
transition: all var(--transition-mode-delay) linear;
}

#div_mode_icon {
width: var(--icon-width);
height: var(--icon-width);
border-radius: var(--icon-width);
display: flex;
align-items: center;
margin: var(--icon-margin);
padding: 0.7rem;
background-color: white;
color: var(--color-main-select);
position: absolute;
top: 0;
transition: all var(--transition-mode-delay) linear;
font-size: 1rem;
}

#div_mode_text::before {
content: var(--mode-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
color: white;
padding: 0.6rem 1rem;
font-size: 0.8rem;
font-weight: bolder;
transition: all var(--transition-mode-delay) linear;
}

#div_mode_text {
width: var(--text-width);
height: 100%;
display: flex;
align-items: center;
color: white;
padding: 0.6rem 1rem;
font-size: 0.8rem;
position: absolute;
top: 0;
transition: all var(--transition-mode-delay) linear;
}

.mode_left,
#div_mode_text.mode_left::before {
justify-content: left;
left: 0;
}

.mode_right,
#div_mode_text.mode_right::before {
justify-content: right;
right: 0;
}

#div_mode_text.translate_to_right {
justify-content: right;
transform: translateX(calc(var(--icon-width) + (var(--icon-margin) * 2)));
}

#div_mode_text.translate_to_left {
justify-content: left;
transform: translateX(
  calc((-1) * (var(--icon-width) + (var(--icon-margin) * 2)))
);
}

#div_mode_icon.translate_to_right {
justify-content: right;
transform: translateX(calc(var(--text-width) - var(--icon-margin)));
}

#div_mode_icon.translate_to_left {
justify-content: left;
transform: translateX(calc((-1) * (var(--text-width) - var(--icon-margin))));
}

#div_mode_text.translate_to_right::before {
justify-content: right;
}

#div_mode_text.translate_to_left::before {
justify-content: left;
}

.div_change_mode:hover #div_mode_icon {
width: calc(var(--icon-width) + var(--icon-width-scale));
}

.div_change_mode:hover #div_mode_text {
width: calc(var(--text-width) - var(--icon-width-scale));
}

.div_change_mode:hover #div_mode_text.translate_to_right {
transform: translateX(
  calc(
    (var(--icon-width) + (var(--icon-margin) * 2) + var(--icon-width-scale))
  )
);
}

.div_change_mode:hover #div_mode_text.translate_to_left {
transform: translateX(
  calc(
    (-1) *
      (var(--icon-width) + (var(--icon-margin) * 2) + var(--icon-width-scale))
  )
);
}

.div_change_mode:hover #div_mode_icon.translate_to_right {
transform: translateX(
  calc((var(--text-width) - var(--icon-margin) - var(--icon-width-scale)))
);
}

.div_change_mode:hover #div_mode_icon.translate_to_left {
transform: translateX(
  calc(
    (-1) * (var(--text-width) - var(--icon-margin) - var(--icon-width-scale))
  )
);
}