:root {
  --primary-color: #F8981D;
}

* {
  box-sizing: border-box
}

html,
body {
  height: 100%;
}

body {
  --font-family: 'Calibre', sans-serif;
}

/* ---------------------- Added the Code for Hiding the Html elements from DOm As per the Requirements --------------------- */
.splashscreen--message-container {
  display: none;
}

/* for hidding the Room Type from Roject Refinement From Project List Page */
.group.room-type {
  display: none !important;
}

/* ------------------------------------- Hidding the HTML elements Completed ---------------------------------------------- */
/* ------------------------------------- Branding CSS Customizations -------------------------------------------------------*/
.tw-navbar__logo {
  width: 168px !important;
  height: auto !important;
}

/* ------------------------------------- Send to order Button CSS -------------------------------------------------------*/
#product-section .tw-btn.btn-sentItemlist {
  display: inline-flex;
  bottom: -1px;
  position: absolute;
  padding: 0 10px;
  width: fit-content;
}

/* -------------------------------------------- Access Mode CSS -------------------------------------------------------*/
.accessModeDropdown.render-dropdown-container {
  width: 191px;
}

.access-mode-dropdown.tw-dropdown.tw-dropdown-up .dropdown {
  bottom: auto !important;
}

.access-mode-dropdown {
  padding-left: 5px;
  border: none !important;
  padding-top: 2px;
  height: 37px !important;
}

#accessModeSelected {
  vertical-align: bottom;
}

/* -------------------------------------------- Client FeedBack CSS Changes -------------------------------------------------------*/
.task-bar-view .task.selected {
  width: 100% !important;
}

.task-bar-view .task.minimized {
  border-right: 0px !important;
}

.fo-browser-view section.options .options-view .option-view {
  border: 1px solid #C7C7C7 !important;
}

.fo-browser-view section.options .options-view .option-view.selected {
  border: 4px solid #C7C7C7 !important;
}

.fo-browser-view section.features-summary .features-summary-view .feature-summary-view {
  border: 1px solid #C7C7C7 !important;
}

.product-list-item-view.current .current-product-img.product-img {
  border: solid 4px var(--primary-color) !important;
}

.tw-btn:hover {
  background-color: var(--dark-grey-color) !important;
  color: var(--default-color) !important;
}

#camera-reset-btn:hover {
  --text-color: var(--default-color); 
}

.view-mode-selector .dropdown .dropdown-btn.tw-btn span:hover {
  color: var(--default-color) !important;
}

.login.account-container.tw-btn:hover {
  background-color: initial !important;
}

.project-summary-view #tasks-summary-container {
  width: auto !important;
}

.project-summary-view .link-button {
  font-weight: 500;
  text-decoration: underline;
}

.summary-images-view #title-area button {
  text-decoration: none;
}

.project-summary-view .link-button:hover {
  color: #777;
}

.summary-images-view #title-area .link-button {
  font-size: 20px !important;
  font-weight: 400;
}

/* ------Project Recovery Popup Continue Button------------ */
.design-recovery-popup .design-recovery-load__button {
  background-color: var(--default-color) !important;
  border-color: var(--default-color-dark) !important;
}

.design-recovery-popup .design-recovery-load__button:hover {
  background-color: var(--reform-background-color) !important;
}

.design-recovery-popup .design-recovery-discard__button {
  border-color: var(--default-color-dark) !important;
}
/* -------------------------------------------- Css for the Different Language Support -------------------------------------------------------*/
.user-summary-view .options-menu.open {
  width: fit-content;
}

/* -------------------------------------------- Css for Region Selector iFrame -------------------------------------------------------*/
.left .tw-btn.tw-btn--primary.iframe-button-view {
  border: none !important;
}

.left .tw-btn.tw-btn--primary.iframe-button-view:hover {
  background-color: #f0f0f0 !important;
}

.mobile-device .left .tw-btn__label {
  position: absolute !important;
}

@media not all and (min-resolution:.001dpcm) {
  @supports (-webkit-appearance: none) and (stroke-color:transparent) {
    .left .tw-btn__label {
      position: relative !important;
    }
  }
}

/* -------------------------------------------- Css for Tablets -------------------------------------------------------*/
.mobile-device .arrow-btn.tw-btn {
  display: none !important;
}

.mobile-device #continueButton {
  display: block;
  margin: auto;
}

.mobile-device .task.tw-btn--tablet .label {
  font-size: 13px !important;
  margin-top: 5px;
}

.mobile-device .ideal-spaces-view>.ids-footer-view {
  display: none !important;
}

.mobile-device .task-bar-view .task.selected {
  color: white !important;
}

.mobile-device .tw-btn--tablet:hover {
  background: #464646 !important;
}

/* --------------------------------- Css for Collaborator Access Modes ------------------------------------*/
.limitedAccessMode .switch {
  display: none !important;
}

.readAccessMode .switch {
  display: none !important;
}

/* --------------------------------- Css for Email Invite Iframe ------------------------------------*/
.people-add-collaborators-view {
  display: none !important;
}

.people-manager-view2 .pre-list-text {
  display: inline !important;
}

.people-manager-view2 .email-invite-btn {
  display: inline !important;
}

.people-manager-view2 .top {
  padding: 20px 30px 0;
}

.alignCenter {
  text-align: center;
}

/* --------------------------------- Css Pan Down Bug#316030 ------------------------------------*/
[data-tips].pan-down.top-tip:hover:after,
[data-tips].pan-down.top-tip.hover:after,
[data-tips].pan-down.top-tip:hover:before,
[data-tips].pan-down.top-tip.hover:before {
  left: -100% !important;
}

[data-tips].rotate-down.top-tip:hover:after,
[data-tips].rotate-down.top-tip.hover:after,
[data-tips].rotate-down.top-tip:hover:before,
[data-tips].rotate-down.top-tip.hover:before {
  left: -100% !important;
}

/* --------------------------------- Css For the Header Price when Empty ------------------------------------*/
.center .project-name-view {
  height: 30%;
}

.project-name-view .name-container {
  padding: 5px 10px;
}

.center .x-2020-designsummary-widget {
  height: 60%;
}

#edit-project-btn {
  margin-bottom: 7px !important;
}

.x-2020-designsummary-widget .summaryView.minimal {
  padding: 5px 0 0 0 !important;
}

/* -------------------------------------------- To hide transfer button on people page -------------------------------------------------------*/
.people-list-view #transfer {
  display: none !important;
}

/* -------------------------------------------- To Show Price In Header -------------------------------------------------------*/
/* .summaryView.minimal .open-dialog .item-list-total {
  display: block !important;
} */

/*------------To disble "No cabinets on this wall" option Bug#310380---------------------------------*/
.measure-active-selection-view.active-selection-view .selection-content .features-container .feature label[for="wall-cabinet-rejection"],
#wall-cabinet-rejection {
  display: none;
}

/*------------Fixed tool tip goes out of screen Bug#322524 ---------------------------------*/
#camera-pan-container .pan-up:after,
#camera-pan-container .pan-down:after,
.camera-controls-view .rotate-down:after,
.camera-controls-view .rotate-up:after {
  left: auto !important;
  right: 0 !important;
}


/*------------Fixed Scroll Issue on ItemList for Add item AutoSuggest dropdown Bug#326394 ---------------------------------*/
.print-items-content .x-2020-designsummary-widget .ui-autocomplete {
  height: 50%;
  overflow-y: scroll;
}

/*------------Fixed Scroll Issue On Active selection View for Replace Task#327680---------------------------------*/
/* .left-container .active-selection-view .switch-container #product-list-container {
  height: -webkit-fill-available;
  overflow-y: scroll;
} */

/*------------Need to disable/hide the USername from Project Search as per Story#327568---------------------------------*/
#searchType option[value=Name] {
  display: none;
}

/* Fix for Task #327680 & Bug#336018 - Commented the code above for the #product-list-container */
.switch-container {
  overflow: auto !important;
}

.switch-container .switch-view #results {
  max-height: none !important;
}

/* ------------------------------New Feature sets Regression CSS -------------------------------------*/

#design-activity-panels .product-browser-x-view.is--desktop-legacy .tw-btn--icon.pbx__icon-sort {
  display: none !important;
}

#design-activity-panels .product-browser-x-view .pbx__main-content-container .tw-btn--circle.tw-btn--icon.pbx__btn.tw-btn--selected,
.tw-btn--icon.tw-btn--selected {
  background: grey !important;
}

.project-list-item-card-view .tw-project-card__menu-container .tw-context-menu--opened .tw-context-menu-item--with-icon:nth-child(2) {
  display: none !important;
}

.customize-panel-view .product-configurator-view {
  overflow: overlay !important;
  --secondary-color: #464646 !important
}

.pbx__router-transition,
.pbx__main-content-container,
.tw-product-configurator-view .tw-product-configurator-view-content {
  --secondary-color: #464646 !important
}

.guide-measure-view .overlay-container .left-container.expanded,
.design-space-view .overlay-container .left-container.expanded {
  width: 55% !important;
}

/* For fixing the bug#351932 */
.left-container .active-selection-view {
  overflow: visible !important;
}

/* Improve accessMode dropdown hover visibility: Bugs #372786 & #372777 */
.design-header-view .access-mode-dropdown .dropdown #fullAccessMode:hover,
#limitedAccessMode:hover,
#readAccessMode:hover,
.dropdown>div:hover span {
  background-color: #464646 !important;
  color: white !important;
}

/*Story 377133: Reform - Add Refresh button in the item list*/
.btn-refreshItemlist {
  display: inline !important;
  margin: 0 0 0 20px;
}

.btn-refreshItemlist:disabled:hover {
  background-color: var(--control-color--disabled, var(--default-color)) !important;
  color: var(--on-control-color--disabled, var(--border-color)) !important;
}

#customRefreshLabel {
  font-size: 26px;
}

#customRefreshLabel.makeActive {
  font-size: 12pt;
  line-height: var(--btn-size);
  padding: 0 10px 0px 5px;
}

#customRefreshLabel.fadeOut {
  font-weight: normal;
  color: lightgrey;
}

@media not all and (min-resolution:.001dpcm) {
  @supports (-webkit-appearance:none) {
    .btn-sentItemlist {
      width: intrinsic !important;
    }
  }
}

/* For portrait layouts*/
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  .mobile-device #app-bar-container {
    height: 6%;
  }

  .mobile-device .main-app-bar-view .app-header {
    height: 100%;
  }

  .mobile-device #project-name {
    font-size: 95%;
    width: 85px;
  }

  .mobile-device .custom-view-container {
    height: auto !important;
  }

  .mobile-device .name-container {
    margin-right: 50%;
  }
}

.mobile-device .ceiling-height-input-view .label {
  font-size: 13px !important;
}

.mobile-device .ceiling-height-input-view input {
  text-align: center !important;
  font-size: 13px !important;
  padding: 2px !important;
}

/*Cookie banner button CSS*/
.privacy-preferences-banner.privacy-preferences-banner--visible .privacy-preferences-banner-content .privacy-preferences-choices .privacy-preferences-choices-allow,
.user-preference-modal .privacy-preferences-popup-content .privacy-preferences-popup-footer tw-button {
  background-color: var(--default-color);
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.privacy-preferences-banner.privacy-preferences-banner--visible .privacy-preferences-banner-content .privacy-preferences-choices .privacy-preferences-choices-allow:hover,
.user-preference-modal .privacy-preferences-popup-content .privacy-preferences-popup-footer tw-button:hover {
  background-color: #464646 !important;
  color: white !important;
}

/*Cookie Banner toggle Button*/
input:checked+.switch-toggle-slider {
  background-color: #464646 !important;
}

.project-name-view .name-container .project-name {
  position: relative;
}
/*Added a text Color for Total price after Hover*/
.x-2020-designsummary-widget.tw-btn:hover {
  --text-color: var(--default-color);
}

.tw-btn.tw-btn--primary.save-btn, 
#yes-btn {
  border-color: var(--border-color);
}

button.tw-project-card__button {
  padding-top: 4px;
}

.dropdown-panel-list .dropdown-panel .dropdown-panel-view {
  max-height: fit-content;
}