/*
=============================
        Global
=============================
*/
body {
    /*Add Color variables here*/
    --font-family: Exo;
    --border-radius: 4px;
    --shadow: 0 2px 4px rgba(0,0,0,0.3);
    --btn-size: 35px;
    --btn-size-l: 43.75px;
	--btn-color: #E099B6;
	--btn-color-hover: #CE5E8C; 
	--btn-color-dark: #4C5260;
	--btn-color-dark-hover: #2A2E35;
    --primary-color: #4C5260;
    --primary-color-hover: #E099B6;
    --primary-color-active: #E099B6;
    --primary-color-inverse: #ffffff;
    --default-color: #ffffff;
    --default-color-hover: #f2f2f2;
    --default-color-inverse: #464646;
    --default-color-dark: #E3E3E3;
    --danger-color: #ca4545;
    --danger-color-hover: #bf3636;
    --help-color: #4197bf;
    --border-color: var(--default-color-dark);
    --text-color: #4C5260;
    --text-color-light: #FFFFFF;
    --text-color-completed: var(--primary-color-active);
    
    --btn-size-s: 18px;
    --border-radius:0px;
    height: 100%;
    /*----------------- Phase 2 branding ----------------- */
    --base-gold: #d39c0a;
    --base-dark-gray: #57525a;
    --base-light-gray: #918b9a;
    --base-font-family: Montserrat;

}
/*
=============================
        Font Family
=============================
*/
@font-face{
	font-family: "Exo";
	src: url('assets/fonts/exo.woff2');
}
@font-face{
	font-family: "Exo";
	font-weight: bold;
	src: url('assets/fonts/exo2.woff2');
}
@font-face{
	font-family: "Exo3";
	font-weight: bold;
	src: url('assets/fonts/exo3.woff2');
}
@font-face{
	font-family: "Exo4";
	src: url('assets/fonts/exo4.woff2');
}
@font-face{
	font-family: "ffdingbats-arrowsone";
	src: url('assets/fonts/ffdingbats-arrowsone.woff');
}
/*
=============================
          Navbar
=============================
*/
.app-bar-container{
    /*Add Color variables here*/
    --primary-color: inherit;
    --primary-color-hover: inherit;
    --primary-color-active: inherit;
}
/*
=============================
      Hamburger Menu
=============================
*/
.menu-container{
}
.call-button{
    background-color: var(--btn-color-dark);
    transition: all 300ms cubic-bezier(.25,.46,.45,.94);
}
.call-button:hover{
    background-color: var(--btn-color-dark-hover);
}
/*
=============================
        Landing
=============================
*/
.ideal-spaces-landing-view{
    /*Add Color variables here*/
}
#get-inspired{
	background-color: var(--btn-color);
	border-color: var(--btn-color);
	color: var(--text-color);
	font-weight: bold;
}
#get-inspired:hover{
	background-color: var(--btn-color-hover);
	border-color: var(--btn-color-hover);
}
#floor-plan{
	background-color: var(--btn-color-dark);
	border-color: var(--btn-color-dark);
	color: var(--text-color-light);
	font-weight: bold;
}
#floor-plan:hover{
	background-color: bar(--btn-color-dark-hover);
	border-color: var(--btn-color-dark-hover);
}
/*
=============================
      Inspiration All
=============================
*/
.guide-view #page-container{
    /*Add Color variables here*/
    --primary-color: inherit;
    --primary-color-hover: inherit;
    --primary-color-active: inherit;
}
.tw-btn{
	transition: all 300ms cubic-bezier(.25,.46,.45,.94);
}
.tw-btn--primary{
    background-color: var(--btn-color-dark);
}
.tw-btn--primary:hover{
    background-color: var(--btn-color-dark-hover);
    border-color: var(--btn-color-dark-hover);
}
/*
=============================
    Inspiration Banner
=============================
*/
.guide-header-view{
    /*Add Color variables here*/
    --default-color:#ffffff;
    background-color: var(--default-color);
}
/*Current Step text*/
.milestone-bubble-view.bottom-tip.active .label{
    /*Add Color variables here*/
    color:var(--primary-color-active)!important;
}
/*Previous Step Text*/
.milestone-bubble-view.bottom-tip.completed .label{
    /*Add Color variables here*/
    color:var(--text-color-completed)!important;
}
/*Next Step Text*/
.milestone-bubble-view.bottom-tip .label{
    /*Add Color variables here*/
    color:var(--default-color-inverse)!important;
}
/*
=============================
    Preset Selector
=============================
*/
presets-style-view {
    /*Add Color variables here*/
}

/*Preset List Menu*/
.accordion-nav-menu-view .ui-accordion-content{
    /*Add Color variables here*/
    background-color: var(--default-color);
}


/*Preset List Menu Header*/
.accordion-nav-menu-view .ui-accordion-header{

}
.accordion-nav-menu-view .ui-state-active{
    background-color: var(--primary-color) !important; 
}

/*
=============================
        Appliance Types
=============================
*/
.guide-review-view{
    /*Add Color variables here*/
}
.question-view #answers-container{
    /*Add Color variables here*/
    background-color: var(--default-color);
}
/*
=============================
        Floor Plan
=============================
*/
.guide-measure-view{
    /*Add Color variables here*/
}
.left-overlay{
    /*Add Color variables here*/
}/*
.guide-measure-view .left-overlay .ids-buttons-panel li.selected, .measure-active-selection-view.active-selection-view .title {
    --primary-color: inherit;
    --primary-color-inverse:#000000;
    --border-color:#000000;
    border: 1px solid var(--border-color);
    color: var(--primary-color-inverse);
    background: white;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}
.guide-measure-view .left-overlay> #catalog-container, .measure-active-selection-view.active-selection-view .selection-content {
    --border-color:#000000;
    border: 1px solid var(--border-color);
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}*/
/*
=============================
       Cabinet layout
=============================
*/
.cabinet-layout-view.zones{
    /*Add Color variables here*/
}
/*
=============================
    Appliance Location
=============================
*/
.cabinet-layout-view.appliance{
    /*Add Color variables here*/
}
/*
=============================
         Design
=============================
*/
/*Global*/
.project-space-view{
    /*Add Color variables here*/
}
/*Taskbar (Catalog/Cabinets/Appliances/Styles)*/
.task-bar-view{
    /*Add Color variables here*/
}
.task-bar-view .task.selected:hover{
    background-color: var(--btn-color-dark);
}
/*Player Area*/
.activity-container{
    /*Add Color variables here*/
    --primary-color: inherit;
    --primary-color-hover: inherit;
    --primary-color-active: inherit;
}

/*3D Player area*/
#player-container{
    /*Add Color variables here*/
}

/*Floating buttons*/
.shop-context-menu-view .context-btn.delete.danger{
    /*Add Color variables here*/
    --primary-color: var(--danger-color);
    --primary-color-hover: var(--danger-color-hover);
    --primary-color-active: var(--danger-color-hover);
}
.shop-context-menu-view.design-context-menu-view{
    /*Add Color variables here*/
    --primary-color: inherit;
    --primary-color-hover: inherit;
    --primary-color-active: inherit;
}

/*Camera Controls*/
.camera-controls-view{

}
/*
=============================
        Projects
=============================
*/
.project-gallery-view{
    /*Add Color variables here*/
}

.mobile-device div .task-bar-view .task.selected{
    color: initial; 
    background-color: white;
    border-bottom-color: rgb(227,227,227);
}

.mobile-device div .task-bar-view .task.selected img{
    filter: none;
}