/*----------------------------------------------------------------------------
* Ajax event indicator
*----------------------------------------------------------------------------*/
.event-indicator 
{
  width: 24px;
  z-index: 100;
  display: flex;
  aspect-ratio: 1/1;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.event-indicator::before 
{
  width: 100%;
  content: '';
  aspect-ratio: 1/1;
  background-size: cover;
  background-image: url(../img/loaders/sp-5-d.svg);
}




/*----------------------------------------------------------------------------
* Sort Header Properties
*----------------------------------------------------------------------------*/
.sort-data-container {
  gap: 1rem;
  display: flex;
  z-index: 9;
  max-height: 35px;
  padding: 0.5rem 0;
  align-items: center;
  max-width: fit-content;
}


.sort-data-container .vs { 
  max-height: 20px;
  border-color: var(--bdr);
}

.sort-data-container .navbar 
{
  height: 30px;
  padding-inline: 0.7rem;
  border-radius: 5px;
  border: 1px solid var(--bdr);
  background-color: var(--bgc-0);
}

.sort-data-container .navbar .link 
{
  gap: 0.2rem;
  font-size: 0.9rem;
}


.sort-data-container .static-frame-container 
{
  top: 115%;
  width: 280px;
  right: 5% !important
}

.sort-data-container .static-frame-container .static-frame 
{
  width: 100%;
  padding: 1rem;
  right: 0px !important;
}


.sort-data-container .menu-container {
  top: 120%;
  left: 0;
}

.sort-data-container > * {
  font-weight: 300;
  font-size: 0.95rem;
}

.sort-data-container nav {
  gap: 1rem;
  z-index: 9;
}

.sort-button {
  gap: 0.3rem;
  height: 30px;
  display: flex;
  font-size: 0.85rem;
  align-items: center;
  justify-content: center;
}











/*----------------------------------------------------------------------------
* Grid Block container
*----------------------------------------------------------------------------*/
.filter-container
{
  gap: 0.3rem;
  display: flex;
  padding-block: 0.5rem;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  border-bottom: 1px solid transparent;
}

.filter-container .text 
{
  font-size: 0.85rem;
}

.grid-button-container 
{
  gap: 0.7rem;
  width: 100%;
  display: flex;
  height: 35px;
  align-items: center;
  justify-content: center;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--bdr-1);
}

.grid-button-container [data-ico], 
.grid-button-container .ui-button 
{
  max-width: 20px !important;
}

.grid-button-container .active 
{
  border-color: #6699ff;
}











/*----------------------------------------------------------------------------
* Dropdown List Container Properties
*----------------------------------------------------------------------------*/
.dynamic-list-container {
  width: 150px;
  height: 30px;
  display: flex;
  z-index: 10;
  align-items: center;
  border-radius: 100vw;
  border: 1px solid var(--bdr);
  background-color: var(--bgc-0);
}

.dynamic-list-container input {
  width: 60%;
  flex-grow: 1;
  padding: 0 0.5rem 0 1rem;
  outline: #ffffff !important;
  border: 1px solid transparent;
}

.dynamic-list-container input::placeholder {
  opacity: 1.0 !important;
}

.dynamic-list-container .dropdown-button {
  width: 30px;
  height: 100%;
  display: flex;
  cursor: pointer;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;
  border-left: 1px solid var(--bdr);

}

.dynamic-list-container .dropdown-button::before {
  width: 10px;
  content: '';
  aspect-ratio: 1/1;
  background-image: url(../ico/svg/chevron-down.svg);
}

.dropdown-list {
  top: 110%;
  gap: 0.5rem;
  display: none;
  width: 100%;
  z-index: 10;
  min-width: 250px;
  max-height: 200px;
  position: absolute;
  overflow: hidden;
  overflow-y: scroll;
  list-style: none;
  flex-wrap: nowrap;
  padding: 1rem;
  flex-direction: column;
  background-color: #ffffff;
  border-radius: 7px;
  border: 1px solid var(--bdr);
  background-color: var(--bgc-0);
  box-shadow: var(--base-shdw-dark);
}

.dropdown-list > * {
  width: 100%;
  cursor: pointer;
  padding: 0.3rem;
  border-radius: 5px;
}

.dropdown-list > *:active { scale: var(--scale); }
.dropdown-list > *:hover { background-color: var(--bgc-2); }










/*----------------------------------------------------------------------------
* Dynamic Data Container
*----------------------------------------------------------------------------*/
.dynamic-data-container 
{
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: #ebf8ff;
}

.dynamic-data-container .ui-button 
{
  background-color: var(--bgc-0);
}

.dynamic-header-container 
{
  top: var(--dfh);
  width: 100%;
  min-height: calc(var(--dfh) - 5px);
  display: flex;
  z-index: 10;
  position: sticky;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  background-color: var(--trans-bgc-0);
  border-top: thin solid var(--bdr-1);
  border-bottom: thin solid var(--bdr-1);
}

.dynamic-header-container .split-right 
{
  gap: 0.5rem;
}

.dynamic-header-container * 
{
  border-color: var(--bdr-1);
}

.dynamic-header-container .search-container 
{
  border: 1px solid var(--bdr-1);
  background-color: #f7f7f7;
}

.dynamic-header-container .ui-button 
{
  width: 28px;
  background-color: var(--bgc-0);
}

.dynamic-header-container .vs 
{
  height: 25px;
  border-color: var(--bdr-1);
}

.dynamic-navbar 
{
  width: 100%;
  height: 100%;
  inset: 0;
  margin: auto;
  display: flex;
  align-items: center;
  max-width: var(--dfw);
}










/*----------------------------------------------------------------------------
* Dynamic Container
*----------------------------------------------------------------------------*/
.dynamic-container 
{
  gap: 1rem;
  width: 100%;
  display: flex;
  z-index: 0;
  list-style: none;
  max-width: var(--dfw);
  padding: 2rem 0 4rem 0;
}

.split-block-container 
{
  gap: 1rem;
  display: flex;
  flex-direction: row;
}

.dynamic-sidebar 
{
  top: calc(var(--dfh) + 85px);
  min-width: 270px;
  display: flex;
  position: sticky;
  max-height: 512px;
  flex-direction: column;
  border-radius: 10px;
  border: thin solid var(--bdr-1);
  background-color: var(--bgc-0);
}

.dynamic-content-container 
{
  display: flex;
  flex-grow: 1;
  flex-direction: column;
}


.dynamic-panel 
{
  gap: 1rem;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: none;
  opacity: 0.0;
  flex-direction: column;
  flex-grow: 1 !important;
  transition: opacity ease-in-out 0.20s;
}

.panel-header 
{
  gap: 0.5rem;
  display: flex;
  z-index: 10;
  height: 40px;
  align-items: center;
}

.panel-header > * 
{
  gap: 0.5rem;
}

.panel-header .vs 
{
  height: 20px;
  border-color: var(--bdr-1);
}

.panel-header .title 
{
  gap: 0.3rem;
  display: flex;
  height: 100%;
  align-items: center;
  font-size: 1.5rem;
  font-weight: bold;
}

.panel-header .text 
{
  height: 100%;
  display: flex;
  font-size: 0.9rem;
  align-items: center;
}

.panel-header .ico 
{
  width: 24px;
}

.panel-header .ui-button 
{
  width: 30px;
}

.panel-header .static-frame 
{
  right: 44%;
}

.panel-header .static-frame-container 
{
  top: 105% !important;
}

.dynamic-panel .data-container 
{
  gap: 3rem;
  display: flex;
  z-index: 0;
  padding-bottom: 1rem;
  flex-direction: column;
}

.dynamic-panel:first-child 
{
  z-index: 1;
  opacity: 1.0;
  display: flex;
}


.data-selector-container 
{
  gap: 0.3rem;
  display: flex;
  list-style: none;
  flex-direction: column;
}


.data-selector-container header  
{
  text-align: center;
  font-weight: bold;
  padding: 0.5rem;
  font-size: 1.2rem;
  border-bottom: 1px solid var(--bdr-1);
}

.data-selector 
{
  gap: 0.5rem;
  width: 100%;
  display: flex;
  padding: 0.5rem 1rem;
  cursor: pointer;
  border-radius: 7px;
  align-items: center;
  border: 1px solid transparent;
  transition: ease-in-out 0.10s;
}

.data-selector .ico 
{
  width: 22px;
}

.data-selector .text 
{
  font-size: 1.1rem;
}

.data-selector:active 
{
  scale: 0.95;
  transition: ease-in-out 0.0s !important;
}

.data-selector:hover 
{
  border-color: var(--bdr-1);
  background-color: #eeeeee;
}










/*----------------------------------------------------------------------------
* Dynamic Panel Ajax indicator
*----------------------------------------------------------------------------*/
.data-loading-indicator 
{
  gap: 0.5rem;
  width: 100%;
  height: 100%;
  z-index: 100;
  display: flex;
  opacity: 0.0;
  position: absolute;
  align-items: center;
  flex-direction: column;
  justify-content: flex-start;
  backdrop-filter: blur(30px);
  border-radius: 15px;
  background-color: var(--trans-bgc-0);
  transition: opacity ease-in-out 0.30s;
}
.data-loading-indicator::before,
.data-loading-indicator::after 
{
  top: 20%;
  padding: 0.3rem 0;
  display: block;
  position: sticky;
  background-color: transparent;
}
.data-loading-indicator::before 
{
  content: '';
  width: 28px;
  aspect-ratio: 1/1;
  background-size: contain;
  background-image: url(../img/loaders/sp-5-d.svg);
}
.data-loading-indicator::after { top: 24%; content: 'Loading..';  }










/*----------------------------------------------------------------------------
* Dynamic Tab Container
*----------------------------------------------------------------------------*/
.dynamic-tab-container 
{
  gap: 0.7rem;
  width: 100%;
  height: 100%;
  display: flex;
  list-style: none;
  font-size: 0.9rem;
  align-items: center;
  max-width: fit-content;
}

.dynamic-tab-container > * 
{
  gap: 0.3rem;
  height: 30px;
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 1rem;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: bold;
  letter-spacing: 0.030rem;
  border: 1px solid var(--bdr-1);
  background-color: #ffffff;
  transition: ease-in-out 0.30s;
}

.dynamic-tab-container > *:active { 
  scale: 0.95; 
  transition: ease-in-out 0.50s;
}


.dynamic-tab-container .active .ico 
{
  filter: invert();
}


.dynamic-tab-container .active 
{
  color: #ffffff;
  border-color: transparent;
  background-color: #061232;
}


.dynamic-tab-container .indicator 
{
  left: 0;
  bottom: -2px;
  max-height: 0px;
  position: absolute;
  border-radius: 0px;
  border: none;
  background-color: transparent;
  border-bottom: 3px solid #061232;
} 











/*----------------------------------------------------------------------------
* Data feature container
*----------------------------------------------------------------------------*/
.dynamic-snippet-container 
{
  gap: 1rem;
  display: grid;
  grid-row: auto;
  list-style: none;
  grid-auto-rows: 1fr;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr) ) !important;
}

.dynamic-snippet
{
  display: flex;
  cursor: pointer;
  aspect-ratio: 2/1.4;
  flex-direction: column;
  border-radius: 15px;
  transition: ease-in-out 0.10s;
  border: 1px solid var(--bdr-0);
  background-color: var(--bgc-0);
}











/*----------------------------------------------------------------------------
* Step Frame Container Properties
*----------------------------------------------------------------------------*/
.steps-frame-container 
{
  width: 100%;
  display: flex;
  min-height: 100vh;
  align-items: center;
}

.steps-frame-container .main-container 
{
  width: 100%;
  height: 100%;
  display: flex;
}

.steps-frame-sidebar 
{
  top: var(--dfh);
  height: 100%;
  width: 320px;
  display: flex;
  position: sticky;
  align-items: center;
  flex-direction: column;
  background-color: #f7f7f7;
  border-right: 1px solid var(--bdr-0);
}


.steps-frame-sidebar > header 
{
  gap: 0.5rem;
  inset: 0;
  width: 90%;
  min-height: var(--dfh);
  padding-inline: 2rem;
  display: flex;
  align-items: center;
  font-size: 1.3rem;
  font-weight: bold;
  border-bottom: 1px solid var(--bdr-1);
}

.steps-frame-sidebar > header .ico 
{
  width: 22px;
}

.steps-frame-selectors-container 
{
  inset: 0;
  width: 90%;
  margin-inline: auto;
  font-size: 1.1rem;
  font-weight: bold;
  border-radius: 7px;
  padding: 2rem 1rem;
  list-style: none;
  border: 1px solid transparent;
}


.step-frame-selector 
{
  gap: 0.5rem;
  display: flex;
  opacity: 0.5;
  padding: 0.5rem 1rem;
  /* cursor:no-drop; */
  align-items: center;
  border-radius: 7px;
}


.step-frame-selector::before
{
  width: 18px !important;
}

.steps-frame-selectors-container .active 
{
  opacity: 1.0;
  background-color: hsl(0, 0%, 93%);
}
.steps-frame-selectors-container [data-valid="true"] 
{
  opacity: 1.0;
  color: var(--base-green);
}
.steps-frame-selectors-container [data-valid="true"]::before 
{
  filter: var(--invert-green);
}





.step-content-container 
{
  display: flex;
  flex-grow: 1;
  flex-direction: column;
}

.frame-content-header 
{
  display: flex;
  padding: 2rem 0;
  align-items: center;

} 

.frame-content-header .title 
{
  font-size: 1.2rem;
  font-weight: bold;
}

.content-frames-container 
{
  width: 100%;
  height: 100%;
  display: flex;
  list-style: none;
}

.step-frame 
{
  top: 0;
  right: 0;
  bottom: 0;
  left: 50px;
  opacity: 0.0;
  display: none;
  padding: 0 2rem;
  position: absolute;
  flex-direction: column;
  backdrop-filter: blur(10px);
  background-color: var(--trans-bgc-0);
  transition: opacity ease-in-out 0.40s;
}

.step-frame:first-child 
{ 
  left: 0;
  opacity: 1.0;
  display: flex; 
}

.step-frame .event-indicator 
{
  top: 30px;
}

.content-frames-container .active 
{
  left: 0;
  opacity: 1.0;
  display: flex;
}


.step-frame form,
.step-frame .base-container
{
  gap: 1rem;
  width: 100%;
  max-height: fit-content;
  min-width: 330px;
  max-width: 500px;
  display: flex;
  flex-direction: column;
}



.step-frame .data-type-container .ico {
  filter: var(--invert-blue);
}

.step-frame .button-container 
{
  gap: 1rem;
  flex-grow: 0 !important;
}

.step-frame .base-container .button,
.step-frame .base-container .button-r 
{
  padding: 1rem 0;
  font-size: 1.1rem;
  flex-grow: 1;
}

.disclaimer-block
{
  gap: 1rem;
  padding: 2rem;
  display: flex;
  overflow: hidden;
  overflow-y: auto;
  max-height: 250px;
  flex-direction: column;
  border-radius: 15px;
  border: 1px solid var(--bdr);
}

.disclaimer-block .paragraph 
{
  gap: 0.3rem;
  display: flex;
  flex-direction: column;
  list-style: 1.5rem !important;
}



@keyframes StepFrameIn {
  0% 
  {
    left: 0px;
    opacity: 0.0;
  }
  100% 
  {
    left: 0px;
    opacity: 1.0;
  }
}

@keyframes StepFrameOut {
  0% 
  {
    left: 0px;
    opacity: 1.0;
  }
  100% 
  {
    left: 20px;
    opacity: 0.0;
  }
}


.SetStepFrameIn
{
  animation: StepFrameIn ease-in-out 0.50s forwards;
}


.SetStepFrameOut
{
  animation: StepFrameOut ease-in-out 0.50s forwards;
}










/*----------------------------------------------------------------------------
* Product Card Snippet Container Properties
*----------------------------------------------------------------------------*/
.prod-card-container 
{
  gap: 1rem;
  width: 100%;
  height: fit-content;
  display: grid;
  grid-row: auto;
  list-style: none;
  /* justify-items: center; */
  z-index: -1 !important;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr) );
}

.prod-card
{
  display: flex;
  cursor: pointer;
  aspect-ratio: 1/1;
  flex-direction: column;
  border-radius: 10px;
  border: 1px solid var(--bdr-1);
  background-color: var(--bgc-0);
  transition: ease-in-out 0.10s;
}

.prod-card:hover 
{
  border-color: #6699ff;
  box-shadow: 0 0 5px 5px hsl(0, 0%, 90%, 0.5);
}

.prod-card:active 
{
  scale: 0.97;
  box-shadow: none !important;
  transition: 0.0s !important;
}

.prod-card .stock-vin-container 
{
  display: flex;
  font-size: 0.75rem;
}

.prod-card .stock-vin-container > *
{
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: flex-start;
}

.prod-card .stock-vin-container > *:hover 
{
  text-decoration: underline;
}

.prod-card .stock-vin-container .vin-num 
{
  text-transform: uppercase;
  justify-content: flex-end;
}


.prod-card .image-container 
{
  width: 100%;
  display: flex;
  overflow: hidden;
  aspect-ratio: 16/12;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.prod-card .image-container::before 
{
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: '';
  position: absolute;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  background-image: linear-gradient(rgb( 0 0 0 / .2) 0 0);
}

.prod-card .image-container img 
{
  width: 100%;
  z-index: -1;
  object-fit: cover;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}


.prod-card-content 
{
  gap: 0.7rem;
  display: flex;
  overflow: hidden;
  padding: 1rem 1rem 0.5rem 1rem;
  flex-direction: column;
}


.prod-content-header, 
.prod-content-footer 
{
  display: flex;  
}

.prod-content-header > *,
.prod-content-footer > * 
{
  gap: 0.3rem;
  display: flex;
  flex-grow: 1;
  align-items: center;
  font-family: var(--base-font);
}


.prod-content-footer > *:first-child
{
  font-size: 1.25rem;
  font-weight: bold;
}


.prod-content-footer > *:last-child
{
  font-size: 0.9rem;
  justify-content: flex-end;
}

.prod-content-footer > *:first-child 
{
  font-size: 0.85rem !important;
  font-weight: normal !important;
}

.prod-price 
{
  font-size: 1.25rem;
  font-weight: bold;
  justify-content: flex-start !important;
}

.prod-content-footer 
{
  margin-bottom: 0.3rem;
  opacity: 0.9;
}


.prod-item-name 
{
  font-size: 1.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prod-item-location 
{
  gap: 0.1rem;
  justify-content: flex-start !important;
} 

.prod-item-location .ico 
{
  width: 12px !important;
}










/*----------------------------------------------------------------------------
* Make Snippet Horizontal
*----------------------------------------------------------------------------*/
[data-grid="false"] 
{
  /* grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)) !important; */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)) !important;
}

[data-grid="false"] .prod-card
{
  width: 100%;
  min-width: 330px;
  max-height: 130px;
  flex-direction: row;
  border-radius: 10px;
}

[data-grid="false"] .prod-card .vin-num 
{
  display: none;
}

[data-grid="false"] .image-container 
{
  max-width: 120px;
  overflow: hidden;
  aspect-ratio: unset;
  border-radius: unset;
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
}
[data-grid="false"] .image-container img 
{
  width: 100%;
  z-index: -1;
  object-fit: cover;
  border-radius: unset;
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
}
[data-grid="false"] .image-container::before 
{
  border-radius: unset;
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
}


[data-grid="false"] .prod-content-footer 
{
  flex-grow: 1;
  justify-content: flex-end;
}

[data-grid="false"] .prod-card-content 
{
  gap: 0.2rem;
  min-width: 60%;
  overflow: hidden;
  flex-grow: 1 !important;
}

[data-grid="false"] .prod-price 
{
  font-size: 1.15rem;
  font-weight: bold;
  justify-content: flex-start !important;
}

[data-grid="false"] .prod-item-name 
{
  font-size: 1.1rem;
  margin-block: 0.5rem;
}
[data-grid="false"] .prod-card:hover 
{
  scale: 1.05;
  box-shadow: 0 0 5px 5px hsl(0, 0%, 90%, 0.5);
}
[data-grid="false"] .prod-card:active 
{
  scale: 1.0 !important;
  box-shadow: none;
}









/*----------------------------------------------------------------------------
* prod Sidebar Container Properties
*----------------------------------------------------------------------------*/
.prod-sidebar 
{

  max-height: 60vh;
  min-width: 300px;
  min-height: 350px;
  display: flex;
  position: sticky;
  top: calc(var(--dfh) + 2.8rem);
  flex-direction: column;
  border-radius: var(--radius-15);
  border: 1px solid var(--bdr-1);
}

.prod-sidebar > header 
{
  gap: 0.5ren;
  display: flex;
  align-items: center;
  padding: 1rem;
  z-index: 10;
  border-bottom: 1px solid var(--bdr-2);
}

.prod-sidebar > header .title 
{
  font-size: 1.2rem;
  font-weight: bold;
}


.prod-sidebar .sidebar-body 
{
  overflow: hidden;
  overflow-y: scroll;
  z-index: -1;
  padding: 1rem 0rem 1rem 1rem;

}

.prod-sidebar .prod-card-container 
{
  padding: unset !important;
}

.prod-sidebar .prod-card-container  .prod-card
{
  max-width: 270px;
  max-height: 100px;
  margin-bottom: 0rem;
}

.prod-sidebar .sidebar-footer
{
  display: flex;
  padding:  1rem;
  justify-content: center;
  border-top: 1px solid var(--bdr-2);
}

.prod-sidebar .sidebar-footer a:active
{
  scale: 0.95;
}
.prod-sidebar .sidebar-footer a:hover
{
  text-decoration: underline;
}









/*----------------------------------------------------------------------------
* Showcase Conatiner properties
*----------------------------------------------------------------------------*/
.showcase-container 
{
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  scale: 0.7;
  opacity: 0.0;
  z-index: 100;
  display: none;
  position: fixed;
  padding: 2rem;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(30px);
  background-color: var(--trans-bgc-1);
  transition: opacity ease-in-out 0.90s;
}

.showcase-container .close-button 
{
  top: 12px;
  left: 15px;
  width: 24px;
  aspect-ratio: 1/1;
  position: absolute;
  border-radius: 100vw;
  background-color: #ffffff;
}

.showcase 
{
  gap: 1rem;
  width: 100%;
  height: 100%;
  display: flex;
  border-radius: 15px;
  max-width: var(--dfw);
  justify-content: center;
}

.showcase > * 
{
  display: flex;
  flex: 1 0 50%;
  border-radius: 15px;
  flex-direction: column;
}

.showcase-image-container 
{
  gap: 2rem;
  align-items: center;
  justify-content: center;
  background-color: #061232;
}

.showcase-image-container .image-container 
{
  top: 50px;
  height: 60%;
  max-width: 80%;
  min-height: 400px;
  overflow: hidden;
  position: sticky;
  position: relative;
  border-radius: 10px;
  background-color: #061232;
}

.image-block-container 
{
  gap: 1rem;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  align-items: center;
  flex-direction: row;
  justify-content: center;
}

.image-block-container > * 
{
  gap: 1rem;
  width: 48px;
  opacity: 0.5;
  cursor: pointer;
  aspect-ratio: 1/1;
  border-radius: 5px;
  border: 1px solid #ffffff;
  transition: ease-in-out 0.30s;
}

.image-block-container .active
{
  opacity: 1.0;
}

.image-block-container > *:hover 
{
  opacity: 0.7;
}

.image-block-container > *:active 
{
  scale: 0.9;
  transition: ease-in-out 0.0s !important;
}

.image-block-container > * img 
{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}


.showcase-data-sidebar 
{
  max-width: 400px;
  overflow: hidden;
  padding: 2rem 1.5rem;
  overflow-y: auto;
  backdrop-filter: blur(10px);
  border: 1px solid var(--bdr-1);
  background-color: var(--bgc-0);
}

.sidebar-toggle-button 
{
  top: 15px;
  right: 15px;
  width: 26px;
  display: none;
  z-index: 10;
  aspect-ratio: 1/1;
  position: absolute;
  border-radius: 100vw;
}

.sidebar-toggle-button::before 
{
  width: 16px;
  filter: invert();
}

.showcase-sidebar-header 
{
  gap: 1.5rem;
  display: flex;
  flex-direction: column;
  margin-bottom: 0.5rem;
  padding: 1rem 0rem 0.5rem 0rem;
}

.retract-button 
{
  top: 10px;
  right: 10px;
  width: 20px;
  display: none;
  aspect-ratio: 1/1;
  position: absolute;
  border-radius: 100vw;
}

.retract-button::before 
{
  width: 80% !important;
}

.showcase-title 
{
  color: #061232;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 2rem;
  align-items: flex-start;
}

.showcase-title .year 
{
  padding-right: 0.3rem;
  border-right: 2px solid #061232;
}

.sb-header 
{
  display: flex;
  font-size: 1.3rem;
  font-weight: bold;
  line-height: 1.7rem;
  align-items: center;
  padding-block: 1rem 0.5rem;
}

.sb-header .ui-button, 
.sb-header [data-ico] 
{
  width: 24px;
}

.price-loc-container 
{
  display: flex;
  align-items: center;
}

.price-loc-container > * 
{
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: flex-start;
}

.price-loc-container .price 
{
  font-size: 1.7rem;
  font-weight: bold;
}

.price-loc-container .loc 
{
  gap: 0.1rem;
  min-width: fit-content;
  font-size: 0.8rem;
  align-items: center;
  justify-content: flex-end;
}
.price-loc-container .loc .ico 
{
  width: 14px;
}

.specs-block-container 
{
  gap: 0 !important;
  list-style: none;
  margin-bottom: 0.5rem;
  padding: 1rem  0rem;
  border-bottom: 1px solid var(--bdr-1);
}

.specs-block-container > * 
{
  gap: 0.5rem;
  display: flex;
  padding: 0.4rem;
  min-height: 25px;
  font-weight: bold;
  font-size: 1.1rem;
  border-radius: 7px;
  align-items: center;
}

.specs-block-container .hs 
{
  border-radius: 0 !important;
  margin-bottom: 1rem;
}

.specs-block-container > * .text span
{
  /* font-size: 1rem; */
  font-weight: normal !important;
}

.specs-block-container > * .ico 
{
  width: 22px;
  filter: var(--invert-blue);
}


.specs-block-container li:last-child .split-left 
{
  gap: 0.3rem !important;
}

.specs-block-container li:last-child 
{
  background-color: #ebf8ff;
  border: 1px solid var(--bdr-0);
}

.specs-block-container li:last-child [data-ico] 
{
  background-color: #ffffff;
}

.showcase-description 
{
  display: flex;
  padding: 1rem;
  font-size: 0.95rem;
  height: 150px;
  min-height: 130px;
  overflow: hidden;
  overflow-y: auto;
  margin-bottom: 0.7rem;
  border-radius: 10px;
  flex-direction: column;
  border: 1px solid var(--bdr-1);
}


.showcase-disclaimer 
{
  gap: 0.3rem;
  width: 100%;
  display: flex;
  cursor: pointer;
  align-items: center;
  border: 1px solid hsl(0, 100%, 49%, 0.3);
}


.sales-rep-container 
{
  gap: 0.7rem;
  display: flex;
  align-items: center;
  padding: 0.7rem;
  border-radius: 10px;
  border: 1px solid var(--bdr-1);
}

.sales-rep-container .rep-info 
{
  height: 100%;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  justify-content: center;
}

.sales-rep-container .rep-info .name 
{
  gap: 0.3rem;
  display: flex;
  font-size: 1rem;
  font-weight: bold;
  align-items: center;
}

.sales-rep-container .rep-info .name .ico 
{
  width: 14px;
}

.sales-rep-container .rep-info .content
{
  font-size: 0.9rem;
  line-height: 1.5rem;
}

.sales-rep-container .rep-info .rep-social 
{
  gap: 0.7rem;
  display: flex;
}

.sales-rep-container .rep-info .rep-social > * 
{
  width: 16px;
}

.sales-rep-container .rep-info .rep-social > *::before 
{
  width: 100% !important;
}

.sales-rep-container .rep-img-container 
{
  width: 55px;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  border-radius: 100vw;
}

.sales-rep-container .rep-img-container img 
{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.showcase-data-sidebar .button-container 
{
  gap: 0.7rem;
  display: flex;
  padding-top: 1rem;
}

.showcase-data-sidebar .button-container .button,
.showcase-data-sidebar .button-container .ui-button
{
  height: 40px;
  flex-grow: 1;
}

.showcase-data-sidebar .button-container .button .ico
{
  width: 18px;
  border-color: var(--bdr-1);
}










/*----------------------------------------------------------------------------
* Goready showcase container
*----------------------------------------------------------------------------*/
.goready-header 
{
  gap: 0.7rem;
  display: flex;
  align-items: center;
}

.goready-header .company-logo-container 
{
  width: 80px;
  display: flex;
  align-items: center;
  aspect-ratio: 1/1;
  border-radius: 100vw;
  flex-direction: column;
  justify-content: center;
  background-color: #eeeeee;
} 

.goready-header .company-logo-container img 
{
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: inherit;
}

.goready-header .company-info-container 
{
  height: 100%;
  display: flex;
  flex-grow: 1;
  min-height: 50px;
  padding-inline: 0.7rem;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid var(--bdr-1);
}

.goready-header .company-info-container .company-name 
{
  font-size: 1.1rem;
  font-weight: bold;
}

.goready-header .company-info-container .company-addr 
{
  font-size: 0.85rem;
}









/*----------------------------------------------------------------------------
* Dialog Frame Animations
*----------------------------------------------------------------------------*/
@keyframes SetShowcaseIn 
{
  from 
  {
    scale: 0.7;
    opacity: 0.0;
  }
  to 
  {
    scale: 1.0;
    opacity: 1.0;
  }
}
@keyframes SetShowcaseOut 
{
  from 
  {
    scale: 1.0;
    opacity: 1.0;
  }
  to 
  {
    scale: 0.7;
    opacity: 0.0;
  }
}


.SetShowcaseIn
{
  animation: SetShowcaseIn ease-in-out 0.15s forwards;
}
.SetShowcaseOut
{
  animation: SetShowcaseOut ease-in-out 0.10s forwards;
}










/*----------------------------------------------------------------------------
* Extend 7 Retract Active Panel Keyframes And Classes
*----------------------------------------------------------------------------*/
@keyframes ExtShowcaseSidebar
{
  0% 
  {
    opacity: 0.0;
    right: -450px;
  }
  100% 
  {
    right: 0px;
    opacity: 1.0;
  }
}
@keyframes RetShowcaseSidebar
{
  0% 
  {
    right: 0px;
    opacity: 1.0;
  }
  100% 
  {
    opacity: 0.0;
    right: -450px;
  }
}

@keyframes ExtShowcaseImg
{
  0% 
  {
    scale: 0.7;
  }
  100% 
  {
    scale: 1.0;
  }
}



.ExtendShowcaseImage 
{ 
  animation: 
  ExtShowcaseImg ease-in-out 0.300s forwards; 
}

.ExtendShowcaseSidebar 
{ 
  animation: 
  ExtShowcaseSidebar ease-in-out 0.300s forwards; 
}
.RetractShocaseSidebar 
{ 
  animation: 
  RetShowcaseSidebar ease-out 0.300s forwards; 
}










/*----------------------------------------------------------------------------
* Sales Rep Container
*----------------------------------------------------------------------------*/
.profi-container 
{
  gap: 1rem;
  display: flex;
  padding: 2rem;
  min-height: 250px;
  align-items: center;
  flex-direction: column;
  justify-content: flex-start;
}

.profi-container .profi-header 
{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.profi-container .profi-header::before,
.profi-container .profi-header::after 
{
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  position: absolute;
}

.profi-container .profi-img-container 
{
  width: 90px;
  display: flex;
  aspect-ratio: 1/1;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  border-radius: 100vh;
}


.profi-container .profi-img-container img 
{
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: inherit;
}


.profi-info-container 
{
  gap: 0.7rem;
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.info-container > * 
{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profi-name 
{
  font-size: 1.3rem;
  font-weight: bold;
}

.profi-mail 
{
  cursor: pointer;
  color: #6699ff;
  font-size: 0.85rem;
}

.profi-mail:hover 
{
  text-decoration: underline;
} 

.profi-message-block 
{
  padding: 1rem;
  font-size: 0.9rem;
  line-height: 1.5rem;
  border-radius: 10px;
  border: 1px solid var(--bdr-1);
}

.profi-container .social-button-container
{
  gap: 0.3rem;
  display: flex;
  list-style: none;
}


.profi-container .social-button-container > * 
{
  width: 26px;
  aspect-ratio: 1/1;
}

.profi-container .social-button-container > *:active 
{
  scale: 0.9 !important;
}

.profi-container .social-button-container > *::before,
.profi-container .social-button-container > *::after 
{
  width: 80% !important;
  aspect-ratio: 1/1;
}


.profi-container .button-container 
{
  gap: 1rem;
  width: 100%;
  padding: 1rem 0;
}

.profi-container .button-container .button, 
.profi-container .button-container .button-r 
{
  width: 100%;
  flex-grow: 1;
  font-size: 1.1rem;
  padding: 1rem !important;
}