@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap");

@import url("components/buttons.css");
@import url("components/table.css");

/* Scale Down Page */
html {
  font-size: 12px;
}

#main-wrapper oj-module {
  height: inherit;
}

.sendOffScreen {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.icon-sm {
  width: 2rem;
  height: 2rem;
}

#cyn-spinner_layer_overlay {
  opacity: 0.65;
  width: 100%;
  height: 100%;
}

.mm-page.mm-slideout #cyn-spinner_layer_overlay {
  width: calc(100% + var(--mm-sidebar-expanded-size));
  left: calc(-1 * var(--mm-sidebar-expanded-size));
}

#cyn-spinner {
  /* display: none; */
  width: min-content;
  background: none;
  /* min-width: auto; */
  box-shadow: none;
  border: none;

  --loading-color: white;
}

#cyn-spinner .oj-dialog-header {
  padding-bottom: 0;
}

#cyn-spinner .oj-dialog-title {
  margin: auto;
  font-size: 2rem;
  color: var(--loading-color);
  font-weight: bold;
}

#cyn-spinner #spinner {
  padding: 2rem;
  display: block;
  margin: auto;
  height: 10rem;
  width: 10rem;
}

#cyn-spinner #spinner .oj-progress-circle-indeterminate-inner {
  border: 0.3rem solid var(--loading-color);
}

#dev-overlay {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  box-sizing: border-box;
  border: 0.5rem solid rgba(234, 97, 0, 0.716);
}

/* New Styles */

* {
  box-sizing: border-box;
  font-family: "Nunito", "Work Sans", sans-serif;
  font-size: 12px;
}

.font-nunito,
.font-nunito div label {
  font-family: "Nunito", sans-serif !important;
}

:root {
  --red-500: #d02106;
  --red-200: #f2465b;
  --red-100: #e66f5d;

  --green-500: #5dc836;
  --orange-500: #fc9c44;
  --orange-200: #ffce73;

  --royal-500: #081735;
  --royal-400: #141f3c;
  --royal-300: #212e4e;
  --royal-200: #a1acc7;
  --royal-100: #eff1f7;

  --cyan-500: #006f86;
  --cyan-400: #3fc7e3;
  --cyan-300: #28b3d0;
  --cyan-200: #a6e9f7;
  --cyan-100: #d4f1f7;

  --gray-1000: #121723;
  --gray-900: #141926;
  --gray-600: #1b2333;
  --gray-700: #49505a;
  --gray-600: #606774;
  --gray-500: #9199a5;
  --gray-400: #cacfd6;
  --gray-300: #e1e3e8;
  --gray-200: #f1f2f4;
  --gray-100: #f8fafd;

  --nav-shown-width: 256px;
  --nav-hidden-width: 0px;

  --purple-primary: #4b17d0;
  --purple-secondary: #a58be7;
  --purple-light: #dbd1f6;

  --green-olive: #41b4a9;
  --blue-notify: #0a66d1;
  --green-success: #5ba21f;
  --orange-warning: #fc9c44;

  --color-primary: var(--purple-primary);
  --color-secondary: var(--green-olive);
  --color-warning: var(--orange-warning);
  --color-success: var(--green-success);
  --color-error: var(--red-200);
}

main {
  background-color: #e6eaf1;
  padding: 2rem;
  min-height: 100vh
}

.portal-main main {
  min-height: calc(100vh - 64px);
}

main > div {
  border-radius: 1rem;
  background-color: #fff;
  padding: 1.5rem;
}

/* Backgrouds */
.background-error {
  background-color: var(--color-error);
}

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

.background-warning {
  background-color: var(--orange-warning);
}

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

.background-white {
  background-color: #fff;
}
.background-gray-lighter {
  background-color: var(--gray-100);
}
.background-gray-light {
  background-color: var(--gray-300);
}
.background-gray-medium {
  background-color: var(--gray-500);
}

.background-gray-dark {
  background-color: var(--gray-1000);
}
.text-primary {
  color: var(--color-primary);
}

.background-gradient {
  background-image: linear-gradient(to left, var(--color-primary), var(--color-secondary));
}

/* Font size */
h1.large {
  font-size: 3.5rem;
}

h2.large {
  font-size: 3rem;
}

h3.large {
  font-size: 2rem;
}

h4.large {
  font-size: 1.25rem;
}

.header-title {
  font-size: 20px;
  font-weight: bold;
}

.font-md {
  font-size: 1rem !important;
}

.text-royal {
  color: var(--royal-500);
}

.text-gray-light {
  color: var(--gray-500);
}

.text-gray,
.oj-required-inline-container {
  color: var(--gray-600);
}

.cyn-panel-sm {
  background-color: white;
  border-radius: 1rem;
  padding: 1rem;
}

.cyn-panel {
  background-color: white;
  border-radius: 2rem;
  padding: 2rem;
}

/* Sidebar */
.cynergy-nav {
  height: 100%;
  width: var(--nav-hidden-width);
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  padding: 0px;
  background-color: #fff;
  overflow-x: hidden;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1.5px solid #e9ebf0;
  scrollbar-width: thin;
  padding-top: 10px;
}

.cynergy-nav.active {
  width: var(--nav-shown-width);
  padding: 10px 10px 0;
}

#portal-main > *,
#portal-main cyn-footer,
.cynergy-nav {
  transition: 0.5s;
}

/* .portal-margin cyn-footer  */
#portal-main.portal-margin > *,
#portal-main.portal-margin cyn-footer {
  margin-left: var(--nav-shown-width);
  /* width: calc(100% - 360px); */
}

#portal-main.portal-margin #show-leftmenu-button {
  display: none;
}

/* dialogs */
.oj-dialog {
  background-color: #fff;
}

.oj-dialog-header {
  background-image: none;
  padding: 24px;
  padding-bottom: 16px;
}

.oj-dialog-header div[slot="header"],
.oj-dialog-header div[slot="header"] label {
  color: var(--gray-1000);
}

.oj-dialog-header oj-button {
  margin: 0;
}

.oj-dialog-header oj-button span {
  color: var(--gray-600) !important;
}

.oj-dialog-footer {
  padding: 16px 24px;
}

/*MENU BUTTON*/
oj-menu-button.more-menu-button {
  rotate: 90deg !important;
}

oj-menu-button.more-menu-button button {
  border: none !important;
  border-radius: 50%;
  background-color: var(--purple-light) !important;
  /* #f5dfdc !important; */
}
oj-menu-button.more-menu-button button .oj-button-label span {
  color: var(--color-primary) !important;
}

oj-menu-button.label-menu-button button {
  border: 2px solid var(--color-secondary) !important;
  border-radius: 0.5rem;
  padding: 5px;
  /* #f5dfdc !important; */
}
oj-menu-button.label-menu-button button .oj-button-label span {
  color: var(--color-secondary) !important;
}
/*MENU BUTTON*/

/*SEARCH INPUT*/
oj-input-text.search-input .oj-text-field-middle {
  height: 33px !important;
  width: 20rem !important;
}
oj-input-text.search-input .oj-text-field-container {
  min-height: 33px !important;
  border: 1px rgb(203, 203, 203) solid !important;
  border-radius: 5px;
  width: 20rem !important;
}
oj-input-text.search-input input {
  min-height: 33px !important;
  width: 20rem !important;
}

oj-input-text.highlight-border-input .oj-text-field-container {
  border: 1px #41b4a9 solid !important;
  border-radius: 5px;
}
/*SEARCH INPUT*/

/*oj-tab-bar*/
oj-tab-bar.primary-tabs .oj-tabbar-item {
  flex: 0 0 auto !important;
}

oj-tab-bar.primary-tabs .oj-tabbar-listview-container .oj-tabbar-listview {
  background-color: white !important;
  border-radius: 10px;
  /*padding-left: 10px;
  padding-right: 10px;*/
}

oj-selected oj-tab-bar.primary-tabs .oj-tabbar-item-label {
  color: var(--color-primary) !important;
  font-weight: bolder !important;
}

oj-tab-bar.primary-tabs .oj-tabbar-item-label {
  color: var(--color-primary) !important;
  font-weight: bolder !important;
}

oj-tab-bar.primary-tabs .oj-tabbar-item.oj-disabled .oj-tabbar-item-label {
  color: var(--oj-core-text-color-disabled) !important;
  font-weight: bolder !important;
}

oj-tab-bar.primary-tabs .oj-selected {
  border: none !important;
  /*width: 10px !important;*/
}

oj-tab-bar.primary-tabs .oj-selected .oj-tabbar-item-label {
  background-color: var(--purple-light) !important;
  padding: 7px !important;
  border-radius: 10px !important;
}

oj-tab-bar.router-tabs {
  background-color: #e6eaf1;
}

oj-tab-bar.router-tabs .oj-tabbar-listview-container .oj-tabbar-listview {
  background-color: #e6eaf1 !important;
  padding: 10px 2rem 0 2rem;
}

oj-tab-bar.primary-tabs-highlight .oj-tabbar-item {
  flex: 0 0 auto !important;
}
oj-tab-bar.primary-tabs-highlight .oj-tabbar-item-element {
  margin: 0 1rem 0 0 !important;
}
oj-tab-bar.primary-tabs-highlight .oj-tabbar-item-content {
  display: block !important;
}
oj-selected oj-tab-bar.primary-tabs-highlight .oj-tabbar-item-label {
  color: white !important;
  font-weight: bolder !important;
}
oj-tab-bar.primary-tabs-highlight .oj-tabbar-item-label {
  color: var(--color-primary) !important;
  background-color: white !important;
  padding: 8px 12px !important;
  border-radius: 20px !important;
  font-weight: bolder !important;

  display: flex;
  align-items: center;
  gap: 5px;
}
oj-tab-bar.primary-tabs-highlight .oj-tabbar-item.oj-disabled .oj-tabbar-item-label {
  color: var(--oj-core-text-color-disabled) !important;
  background-color: white !important;
  font-weight: bolder !important;
}
oj-tab-bar.primary-tabs-highlight .oj-selected {
  border: none !important;
  /*width: 10px !important;*/
}

oj-tab-bar.primary-tabs-highlight .oj-selected .oj-tabbar-item-label {
  color: white !important;
  background-color: var(--color-primary) !important;
  padding: 8px 12px !important;
  border-radius: 20px !important;
}
/*oj-tab-bar*/

oj-progress-bar.primary-progress-bar {
  --oj-progress-bar-value-bg-color: var(--color-primary);
}

oj-progress-bar.secondary-progress-bar {
  --oj-progress-bar-value-bg-color: var(--color-secondary);
}

oj-tab-bar.primary-tabs-highlight .oj-selected {
  border: none !important;
  /*width: 10px !important;*/
}

header span {
  font-size: 1.5rem;
}

.search-textarea {
  width: 15rem;
}

.search-wrapper {
  width: 100%;
  margin-bottom: 3rem;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

.gap-1rem {
  display: flex;
  gap: 1rem;
}

.options-drawer {
  padding: 2rem;
  width: 20%;
  max-width: 320px;
}

.primary-radio-set-inline .oj-radiocheckbox-icon {
  color: var(--color-primary) !important;
}

.primary-radio-set-inline .color {
  color: var(--color-primary) !important;
  font-size: 15px !important;
}

.primary-radio-option {
  position: relative;
  display: inline-block;
}

.primary-radio-option .tooltip1 .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: var(--color-primary) !important;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  width: 120px;
  top: 100%;
  left: 50%;
  margin-left: -60px;
  position: absolute;
  z-index: 1;
}

.primary-radio-option .tooltip1:hover .tooltiptext {
  visibility: visible;
}

.dialog-title {
  font-size: 1rem !important;
}

.dialog-filter-title {
  font-weight: bold;
}

.oj-table-sticky .oj-table-footer-cell,
.oj-table-sticky .oj-table-footer-selector-cell {
  background-color: #fff;
}

.primary-table .oj-combobox-choice {
  padding: 0px !important;
}

.worklog.oj-read-only > div {
  border: none;
}

.fedex .oj-disabled input {
  color: #000 !important;
}

.highlight-hover:hover {
  border: 1px solid black !important;
}