:root {
  --font-size: 15px;
  --text-color: #8694b0;
  --text-color-strong: #516283;
  --text-color-light: #adb8cc;
  --template-border-color: #dfe4ed;
  --main-color: #fd9203;
  --font-family: "Noto Sans", sans-serif;
  --scrollbar-color: var(--template-border-color);
  --header-height: 60px;
  --header-border-bottom: var(--template-border-color);
  --header-logo-border-right: var(--template-border-color);
  --header-logo-border-bottom: var(--template-border-color);
  --header-logo-background: #fff;
  --header-track-border-right: var(--template-border-color);
  --header-background-color: #fff;
  --header-logo-font-size: 22px;
  --header-box-display: none;
  --header-text-color: #333;
  --header-box-width: 60px;
  --header-box-background: transparent;
  --header-box-shadow: none;

  --button-height: 35px;
  --button-border: var(--template-border-color);
  --button-text-color: #516283;
  --button-text-color-hover: var(--main-color);
  --button-background: #fff;
  --button-border-radius: 32px;
  --button-padding: 13px;
  --button-box-shadow: none;

  --menu-box-shadow: none;
  --menu-master-color-strong: #516283;
  --menu-width: 280px;
  --menu-border-right: var(--template-border-color);
  --menu-background-color: #fff;
  --menu-icon-font-size: var(--font-size);
  --menu-background-check: var(--main-color);
  --menu-check-color: #fff;
  --menu-button-border-color: var(--button-border);

  --submenu-border-right: var(--template-border-color);
  --submenu-background-color: #fff;
  --submenu-sub-text-color: #8694b0;
  --submenu-text-color: var(--text-color-strong);
  --submenu-text-hover: var(--main-color);
  --submenu-background-check: var(--main-color);
  --submenu-check-color: #fff;

  --top-menu-border: var(--template-border-color);
  --top-menu-background-color: var(--live-background-color);
  --top-menu-background-check: var(--main-color);
  --top-menu-check-color: #fff;
  --top-menu-hover-color: var(--main-color);
  --top-menu-color: #8694b0;

  --top-submenu-background-color: var(--live-background-color);
  --top-submenu-text-color: #8694b0;
  --top-submenu-text-hover: var(--main-color);
  --top-submenu-background-check: var(--main-color);
  --top-submenu-check-color: #fff;

  --live-background-color: #fff;

  --login-background-color: var(--live-background-color);
  --login-panel-header-background: var(--panel-header-background);
  --login-panel-left-background-color: var(--main-color);
  --login-panel-right-background-color: var(--live-background-color);

  --login-button-background: var(--button-background);
  --login-button-text-color: var(--button-text-color);

  --login-panel-left-text-header-color: var(--text-color);
  --login-panel-left-text-header-align: left;
  --login-panel-left-text-header-font-size: 40px;
  --login-panel-left-text-header-font-weight: 700;

  --login-panel-left-text-footer-color: var(--text-color);
  --login-panel-left-text-footer-align: left;
  --login-panel-left-text-footer-font-size: 30px;
  --login-panel-left-text-footer-font-weight: 700;

  --login-title-font-size: 40px;
  --login-title-align: center;
  --login-title-font-weight: 700;
  --login-title-color: var(--text-color);

  --login-header-font-size: 14px;
  --login-header-align: left;
  --login-header-color: var(--text-color);
  --login-border-color: var(--template-border-color);

  --login-panel-detail-display: flex;
  --login-panel-detail-display-image: flex;
  --login-panel-detail-display-details: flex;

  --login-panel-detail-image-size: contain;
  --login-panel-detail-image-position: center;
  --login-panel-detail-direction: row;
  --login-panel-max-width: 1250px;
  --login-panel-border-radius: 10px;
  --login-panel-box-shadow: 0px 0px 10px 4px #0000004d;
  --login-form-box-shadow: none;
  --login-link-color: var(--login-title-color);

  --field-border-color: var(--template-border-color);
  --field-border-top: 1px;
  --field-border-bottom: 1px;
  --field-border-right: 1px;
  --field-border-left: 1px;
  --field-height: var(--button-height);
  --field-border-radius: 24px;
  --field-placeholder-color: #adb8cc;
  --field-padding-horizontal: 8px;
  --field-padding-vertical: 0px;
  --field-padding: var(--field-padding-vertical) var(--field-padding-horizontal)
    var(--field-padding-vertical) var(--field-padding-horizontal);
  --field-color: #516283;
  --field-background: #fff;
  --field-focus-border-color: #bcc2d1;

  --content-border-color: #dfe4ed;
  --content-border-radius: 10px;
  --content-background: #f8f9fb;
  --color-overlay: #0000004d;
  --color-green: #2ecc71;
  --color-red: #ef4648;
  --color-blue: #047afd;
  --color-orange: #f9bf3b;
  --color-sea: #1ba39c;
  --color-purple: #8e44ad;

  --modal-background: #fff;
  --modal-footer-background: #dfe4ed;
  --modal-header-background: var(--main-color);
  --modal-header-color: #fff;

  --preloader-color: var(--main-color);
  --live-area-width: 100%;
  --login-background-opacity: 0.6;

  --panel-background: #fff;
  --panel-header-background: #eceff4;
  --panel-footer-background: #fff;
  --panel-header-color: var(--text-color-strong);
  --panel-body-padding: 15px;
  --panel-border-radius: 8px;
  --panel-box-shadow: none;
  --panel-border-color: var(--content-border-color);

  --tr-hover-background: #eceff4;
  --tr-hover-color: var(--text-color);
  --tr-even-background: #fff;
  --tr-odd-background: #f8f9fb;
  --table-body-color: var(--text-color);
  --table-header-color: orange;

  --menu-user-splash-background: var(--submenu-background-color);
  --panel-header-font-size: calc(var(--font-size) + 2px);
  --panel-header-font-weight: 600;

  --panel-header-padding-vertical: 20px;
  --panel-header-padding-horizontal: 10px;
  --panel-header-border-color: transparent;

  --header-logo-text-color: var(--header-text-color);
  --menu-background-button-circle: var(--button-background);
  --menu-color-button-circle: var(--button-text-color);

  --top-menu-background-button-circle: var(--button-background);
  --top-menu-color-button-circle: var(--button-text-color);

  --submenu-font-size: var(--font-size);
  --submenu-padding-horizontal: 0px;
  --submenu-item-padding-horizontal: 12px;
  --submenu-item-padding-vertical: 12px;
  --modules-button-radius: 100px;

  --header-box-padding-horizontal: 0px;
  --header-box-padding-vertical: 0px;
  --header-logo-padding-horizontal: 0px;
  --header-logo-padding-vertical: 0px;
  --login-panel-left-header-image-position: center;

  --login-text-center-align: center;
  --login-text-center-size: 18px;
  --login-text-center-weight: 600;
  --login-text-center-color: var(--text-color);
}
