.window {
  --window--width: 1319px;
  --window--height: clamp(320px, 85vh, 805px);

  width: min(var(--window--width), 95vw);
  height: var(--window--height);

  max-width: 95vw;
  max-height: 90vh;

  box-sizing: border-box;
  overflow: auto;
}

.window.win10 {
  --window--border-width: 1px;
  --window--border-radius: 0px;
  --window--font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Segoe MDL2 Assets', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

  --window_header__favicon--width: 16px;
  --window_header__favicon--margin: 0 5px 0 4px;
  --window_header__title--font-size: 12px;

  --window_header__button--width: 45px;
  --window_header__button_icon--width: 10px;
  --window_header__button_icon--height: 10px;
  --window_header__button--transition: 100ms;
  --window_header__button--transition--active: 0ms;
}

.window.win11 {
  --window--border-width: 1px;
  --window--border-radius: 9px;
  --window--font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Segoe Fluent Icons', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

  --window_header__favicon--width: 16px;
  --window_header__favicon--margin: 0 5px 0 4px;
  --window_header__title--font-size: 12px;

  --window_header__button--width: 45px;
  --window_header__button_icon--width: 10px;
  --window_header__button_icon--height: 10px;
  --window_header__button--transition: 100ms;
  --window_header__button--transition--active: 0ms;
}

.window.chrome {
  --window_header--height: 30px;
  --window_header--border-width: 0 0 1px 0;

  --window_extra--height: 33px;
  --windows_extra--width: 100%;
  --window_extra--border-width: 0 0 2px 0;
  --window_extra--padding: 0;
  
  --window_extra_wrapper--height: 32px;
  --window_extra_wrapper--transition: 250ms;

  --window_extra__safe-indicator--margin: 1px 0 1px 1px;
  --window_extra__safe-indicator--padding: 0 3px 0 5px;

  --window_extra__safe-indicator_icon--padding: 0 10px;
  --window_extra__safe-indicator_icon--border-radius: 50%;
  --window_extra__safe-indicator_icon--width: 16px;
  --window_extra__safe-indicator_icon--height: 16px;
  --window_extra__safe-indicator_icon--transition: 150ms;
  --window_extra__safe-indicator_icon--translate-y: 0px;
  --window_extra__safe-indicator_icon--size: 26px;

  --window_extra__address--margin: 0 20px 0 5px;

  --window_extra__address_label--font-size: 13px;
  --window_extra__address_label--font-weight: 400;

  --window_extra__address_label_protocol--display: none;
}

.window.edge {
  --window_header--height: 31px;
  --window_header--border-width: 0 0 2px 0;

  --window_extra--height: 31px;
  --windows_extra--width: 100%;
  --window_extra--border-width: 0 0 2px 0;
  --window_extra--padding: 0;
  
  --window_extra_wrapper--height: 32px;
  --window_extra_wrapper--transition: 250ms;

  --window_extra__safe-indicator--margin: 1px 0 1px 1px;
  --window_extra__safe-indicator--padding: 0 5px 0 10px;

  --window_extra__safe-indicator_icon--padding: 0;
  --window_extra__safe-indicator_icon--border-radius: 50%;
  --window_extra__safe-indicator_icon--width: 16px;
  --window_extra__safe-indicator_icon--height: 16px;
  --window_extra__safe-indicator_icon--transition: 150ms;
  --window_extra__safe-indicator_icon--translate-y: 0px;
  --window_extra__safe-indicator_icon--size: 26px;

  --window_extra__address--margin: 0 20px 0 5px;

  --window_extra__address_label--font-size: 14px;
  --window_extra__address_label--font-weight: 400;
  
}

.window.opera {
  --window_header--height: 42px;
  --window_header--border-width: 0 0 0px 0;

  --window_extra--height: 39px;
  --windows_extra--width: none;
  --window_extra--border-width: 0 0 0 0;
  --window_extra--padding: 1px 5px 1px 5px;

  --window_extra_wrapper--height: 32px;
  --window_extra_wrapper--transition: 250ms;

  --window_extra__safe-indicator--margin: 0;
  --window_extra__safe-indicator--padding: 0;

  --window_extra__safe-indicator_icon--padding: 0;
  --window_extra__safe-indicator_icon--border-radius: 0;
  --window_extra__safe-indicator_icon--width: 13px;
  --window_extra__safe-indicator_icon--height: 100%;
  --window_extra__safe-indicator_icon--transition: 0;
  --window_extra__safe-indicator_icon--translate-y: 0px;
  --window_extra__safe-indicator_icon--size: 14px;

  --window_extra__address--margin: 0 20px 0 5px;

  --window_extra__address_label--font-size: 14px;
  --window_extra__address_label--font-weight: 400;
  --window_extra__address_label_protocol--display: none;
}


@media (prefers-color-scheme: light) {
  .window.win10 {
    --window--border-color: #B8B8B840 #B7B7B740 #9D9D9D40 #B1B1B140;
  }

  .window.win11 {
    --window--border-color: #B8B8B840 #B7B7B740 #9D9D9D40 #B1B1B140;
  }

  .window.chrome {
    --window--background: #d3e3fd !important;
    --window-border--picker: solid !important;
    --window_header--color: #000000 !important;
    --window_header__title--color: #000000 !important;
  
    --window_header--border-color: #B2B2B2 !important;
  
    --window_header__button--fill: #000000 !important;
  
    --window_header__button--minimize--background--hover: #c6ccd1 !important;
    --window_header__button--minimize--background--active: #a9b6ca !important;
    --window_header__button--maximize--background--hover: #c6ccd1 !important;
    --window_header__button--maximize--background--active: #a9b6ca !important;
    --window_header__button--close--background--hover: #E81123 !important;
    --window_header__button--close--background--active: #E36571 !important;
  
    --window_extra--background: #edf2fa !important;
    --window_extra--color: #000000 !important;
  
    --window_extra--border-color: #b2b2b2 !important;
  
    --window_extra_wrapper--background--hover: #e1e6ed !important;
    --window_extra__safe-indicator_icon--background: #ffffff !important;
    --window_extra__safe-indicator_icon--background--hover: #d2d9e5 !important;
    --window_extra__safe-indicator_icon--fill: #000000 !important;
  
    --window_extra__address_label_protocol--color: #4C4747 !important;
  
    --window_extra__address_label_domain--color: #1F1F1F !important;
    --window_extra__address_label_path--color: #4C4747 !important;
    --window_content--background: #FFFFFF !important;
    --window__loader--color: blue !important;
  }

  .window.edge {
    --window--background: #f3f3f3 !important;
  
    --window_header--color: #000000 !important;
    --window_header__title--color: #000000 !important;
  
    --window_header--border-color: #c1c1c1 !important;
  
    --window_header__button--fill: #323232 !important;
    --window-border--picker: none !important;
    --window_header__button--minimize--background--hover: #dadada !important;
    --window_header__button--minimize--background--active: #B2B4B8 !important;
    --window_header__button--maximize--background--hover: #dadada !important;
    --window_header__button--maximize--background--active: #B2B4B8 !important;
    --window_header__button--close--background--hover: #E81123 !important;
    --window_header__button--close--background--active: #E36571 !important;
  
    --window_extra--background: #ffffff !important;
    --window_extra--color: #000000 !important;
  
    --window_extra--border-color: #bfbfbf !important;
  
    --window_extra_wrapper--background--hover: #f5f5f5 !important;
  
    --window_extra__safe-indicator_icon--background--hover: #D7DBE2 !important;
    --window_extra__safe-indicator_icon--fill: #5F6368 !important;
  
    --window_extra__address_label_protocol--color: #767676 !important;
  
    --window_extra__address_label_domain--color: #000000 !important;
    --window_extra__address_label_path--color: #767676 !important;
  
    --window_content--background: #FFFFFF !important;
    --window__loader--color: #FFFFFF !important;
  }
  


  .window.opera {
    --window--background: #e8eef3 !important;
  
    --window_header--color: #000000 !important;
    --window_header__title--color: #000000 !important;
  
    --window_header--border-color: #c1c1c1 !important;
  
    --window_header__button--fill: #3c3c3d !important;
    --window-border--picker: solid !important;
    --window_header__button--minimize--background--hover: #dadada !important;
    --window_header__button--minimize--background--active: #B2B4B8 !important;
    --window_header__button--maximize--background--hover: #dadada !important;
    --window_header__button--maximize--background--active: #B2B4B8 !important;
    --window_header__button--close--background--hover: #d0011b !important;
    --window_header__button--close--background--active: #b80117 !important;
  
    --window_extra--background: #fefefe !important;
    --window_extra--color: #000000 !important;
  
    --window_extra--border-color: #bfbfbf !important;
  
    --window_extra_wrapper--background--hover: #d1d7db !important;
  
    --window_extra__safe-indicator_icon--background--hover: #b5babf !important;
    --window_extra__safe-indicator_icon--fill: #2a343c !important;
  
    --window_extra__address_label_protocol--color: #767676 !important;
  
    --window_extra__address_label_domain--color: #000000 !important;
    --window_extra__address_label_path--color: #6d7f8f !important;
  
    --window_content--background: #FFFFFF !important;
    --window__loader--color: #FFFFFF !important;
  }
  

  .window.opera::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -2px;
    right: -2px;
    height: 5px;
    background: linear-gradient(to bottom, #d8d8d8, #ffffff);
    filter: blur(4px);
    z-index: 1;
    pointer-events: none;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }

  .window.opera {
    position: relative;
    padding: 4px;
    border-left: 1px solid #aaaaaa;
    border-right: 1px solid #aaaaaa;
    border-bottom: 1px solid #aaaaaa;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  }

  .window.edge {
    border-color: #2b2b2b;
    border-width: 1;
  }
  
}

@media (prefers-color-scheme: dark) {
  .window.win10 {
    --window--border-color: #BABABA40 #B7B7B740 #99999940 #B7B7B740;
  }

  .window.win11 {
    --window--border-color: #BABABA40 #B7B7B740 #99999940 #B7B7B740;
  }

  .window.chrome {
    --window--background: #1f2020 !important;
  
    --window_header--color: #FFFFFF !important;
    --window_header__title--color: #FFFFFF !important;
  
    --window_header--border-color: #252628 !important;
  
    --window_header__button--fill: #FFFFFF !important;
  
    --window_header__button--minimize--background--hover: #37383A !important;
    --window_header__button--minimize--background--active: #4D4D50 !important;
    --window_header__button--maximize--background--hover: #37383A !important;
    --window_header__button--maximize--background--active: #4D4D50 !important;
    --window_header__button--close--background--hover: #E81123 !important;
    --window_header__button--close--background--active: #971722 !important;
  
    --window_extra--background: #282828 !important;
    --window_extra--color: #FFFFFF !important;
  
    --window_extra--border-color: #606164 !important;
    --window_extra__safe-indicator_icon--background: #3C3C3C !important;
    --window_extra_wrapper--background--hover: #4a4a4a !important;
  
    --window_extra__safe-indicator_icon--background--hover: #3C3C3C !important;
    --window_extra__safe-indicator_icon--fill: #ffffff !important;
  
    --window_extra__address_label_protocol--color: #9B9B9B !important;
  
    --window_extra__address_label_domain--color: #FFFFFF !important;
    --window_extra__address_label_path--color: #9B9B9B !important;
  
    --window_content--background: #FFFFFF !important;
    --window__loader--color: #a8c7fa !important;
  }
  

  .window.edge {
    --window--background: #202020 !important;
  
    --window_header--color: #FFFFFF !important;
    --window_header__title--color: #FFFFFF !important;
  
    --window_header--border-color: #7c7e82 !important;
  
    --window_header__button--fill: #FFFFFF !important;
  
    --window_header__button--minimize--background--hover: #4c4d50 !important;
    --window_header__button--minimize--background--active: #606163 !important;
    --window_header__button--maximize--background--hover: #4c4d50 !important;
    --window_header__button--maximize--background--active: #606163 !important;
    --window_header__button--close--background--hover: #E81123 !important;
    --window_header__button--close--background--active: #971722 !important;
  
    --window_extra--background: #292929 !important;
    --window_extra--color: #FFFFFF !important;
  
    --window_extra--border-color: #606164 !important;
    --window_extra_wrapper--background--hover: #3d3d3d !important;
  
    --window_extra__safe-indicator_icon--background--hover: #3e3e3e !important;
    --window_extra__safe-indicator_icon--fill: #FFFFFF !important;
  
    --window_extra__address_label_protocol--color: #b5b5b5 !important;
  
    --window_extra__address_label_domain--color: #FFFFFF !important;
    --window_extra__address_label_path--color: #b5b5b5 !important;
  
    --window_content--background: #FFFFFF !important;
  }
  

  .window.opera {
    --window--background: #030716 !important;
  
    --window_header--color: #000000 !important;
    --window_header__title--color: #000000 !important;
  
    --window_header--border-color: #c1c1c1 !important;
  
    --window_header__button--fill: #e7edf1 !important;
    --window-border--picker: solid !important;
    --window_header__button--minimize--background--hover: #38447a !important;
    --window_header__button--minimize--background--active: #030716 !important;
    --window_header__button--maximize--background--hover: #38447a !important;
    --window_header__button--maximize--background--active: #030716 !important;
    --window_header__button--close--background--hover: #d0011b !important;
    --window_header__button--close--background--active: #b80117 !important;
  
    --window_extra--background: #1e2235 !important;
    --window_extra--color: #000000 !important;
  
    --window_extra--border-color: #bfbfbf !important;
  
    --window_extra_wrapper--background--hover: #3c4468 !important;
  
    --window_extra__safe-indicator_icon--background--hover: #3d4c8f !important;
    --window_extra__safe-indicator_icon--fill: #e7edf1 !important;
  
    --window_extra__address_label_protocol--color: #ffffff !important;
  
    --window_extra__address_label_domain--color: #ffffff !important;
    --window_extra__address_label_path--color: #b4c1cc !important;
  
    --window_content--background: #FFFFFF !important;
    --window__loader--color: #FFFFFF !important;
  }
  
  .window.edge {
    border-color: #191919;
    border-width: 1;
  }

  .window.opera {
    position: relative;
    padding: 4px;
    border-left: 1px solid #2b2b2b;
    border-right: 1px solid #2b2b2b;
    border-bottom: 1px solid #2b2b2b;
    border-top: none;
    border-width: 1px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  }
  
}

.icon-edge,
.icon-chrome,
.icon-opera {
  display: none;
}

.window-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
  z-index: 5000;
}

.window {
  position: fixed;
  display: flex;
  flex-direction: column;
  width: var(--window--width);
  height: var(--window--height);
  background: var(--window--background);
  border: solid;
  border-width: var(--window--border-width);
  border-color: var(--window--border-color);
  border-radius: var(--window--border-radius);
  font-family: var(--window--font-family);
  overflow: hidden;
  pointer-events: auto;
}

.window_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: var(--window_header--height) !important;
  color: var(--window_header--color) !important;
  border: var(--window-border--picker) !important;
  border-width: var(--window_header--border-width) !important;
  border-color: var(--window_header--border-color) !important;
  overflow: hidden;
  user-select: none;
}

.window_header_wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.window.opera .window_header_wrapper {
  margin-bottom: 5px;
}

.window_header_wrapper:first-of-type {
  flex: 1;
  justify-content: start;
}

.window_header__favicon {
  width: var(--window_header__favicon--width);
  margin: var(--window_header__favicon--margin);
  -webkit-user-drag: none;
  user-select: none;
}

.window_header__title {
  font-size: var(--window_header__title--font-size);
  user-select: none;
  color: var(--window_header__title--color);
}

.window_header__button--minimize {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--window_header__button--width);
  height: 100%;
  font-size: var(--window_header__button--font-size);
  user-select: none;
  transition: var(--window_header__button--transition) all;
}

.window_header__button--minimize > svg {
  fill: var(--window_header__button--fill);
  width: var(--window_header__button_icon--width);
  height: var(--window_header__button_icon--width);
  stroke-width: 5px;
  shape-rendering: crispEdges !important;
}

.window_header__button--minimize:hover {
  background: var(--window_header__button--minimize--background--hover);
  transition: 0.25s;
}

.window_header__button--minimize:hover:active {
  background: var(--window_header__button--minimize--background--active);
  transition: var(--window_header__button--transition--active) all;
}

.window_header__button--maximize {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--window_header__button--width);
  height: 100%;
  font-size: var(--window_header__button--font-size);
  user-select: none;
  transition: var(--window_header__button--transition) all;
}

.window_header__button--maximize > svg {
  fill: var(--window_header__button--fill);
  width: var(--window_header__button_icon--width);
  height: var(--window_header__button_icon--width);
}

.window_header__button--maximize:hover {
  background: var(--window_header__button--maximize--background--hover);
  transition: 0.25s;
}

.window_header__button--maximize:hover:active {
  background: var(--window_header__button--maximize--background--active);
  transition: var(--window_header__button--transition--active) all;
}

.window_header__button--close {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--window_header__button--width);
  height: 100%;
  font-size: var(--window_header__button--font-size);
  user-select: none;
  transition: var(--window_header__button--transition) all;
}

.window_header__button--close > svg {
  fill: var(--window_header__button--fill);
  width: var(--window_header__button_icon--width);
  height: var(--window_header__button_icon--width);
}

.window_header__button--close:hover {
  background: var(--window_header__button--close--background--hover);
}


.window_header__button--close:hover:active {
  background: var(--window_header__button--close--background--active);
  transition: var(--window_header__button--transition--active) all;
}

.window_extra {
  display: flex;
  align-items: center;
  width: var(--windows_extra--width);
  height: var(--window_extra--height);
  background: var(--window_extra--background);
  color: var(--window_extra--color) !important;
  border: solid;
  border-width: var(--window_extra--border-width);
  border-color: var(--window_extra--border-color);
  padding: var(--window_extra--padding);
}

.window_extra_wrapper {
  display: flex;
  flex: 1;
  align-items: center;
  height: var(--window_extra_wrapper--height);
  transition: var(--window_extra_wrapper--transition) all;
  overflow: hidden;
}

.window_extra:hover > .window_extra_wrapper {
  background: var(--window_extra_wrapper--background--hover);
}

.window_extra__safe-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin: var(--window_extra__safe-indicator--margin);
  user-select: none;
  padding: var(--window_extra__safe-indicator--padding)
}

.window_extra__safe-indicator_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--window_extra__safe-indicator_icon--size);
  height: var(--window_extra__safe-indicator_icon--size);
  background-color: var(--window_extra__safe-indicator_icon--background);
  border-radius: 50%;
  box-sizing: border-box;
}

.window_extra__safe-indicator_icon > svg {
  width: var(--window_extra__safe-indicator_icon--width);
  height: var(--window_extra__safe-indicator_icon--height);
  fill: var(--window_extra__safe-indicator_icon--fill);
  transform: translateY(var(--window_extra__safe-indicator_icon--translate-y));
}

.window_extra__safe-indicator:hover > .window_extra__safe-indicator_icon {
  background: var(--window_extra__safe-indicator_icon--background--hover);
  transition: 0.2s;
}

.window_extra__address {
  display: flex;
  flex: 1;
  align-items: center;
  width: 100%;
  margin: var(--window_extra__address--margin);
  overflow: hidden;
}

.window_extra__address_label {
  font-size: var(--window_extra__address_label--font-size);
  font-weight: var(--window_extra__address_label--font-weight);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.window_extra__address_label_protocol {
  display: var(--window_extra__address_label_protocol--display);
  color: var(--window_extra__address_label_protocol--color);
}

.window_extra__address_label_domain {
  color: var(--window_extra__address_label_domain--color);
}

.window_extra__address_label_path {
  color: var(--window_extra__address_label_path--color);
}

.window_content {
  flex: 1;
  width: 100%;
}

.window_content > iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.window.edge .icon-edge {
  display: inline-block;
  shape-rendering: crispEdges !important;
}

.window.chrome .icon-chrome {
  display: inline-block;
}

.window.opera .icon-opera {
  display: inline-block;
}


.window_header__favicon.loading {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(9, 71, 204, 0.2);   
  border-top-color: var(--window__loader--color);                
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  background: none;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}



.window.opera .window_header__favicon,
.window.opera .window_header__title {
  display: none;
}

.window.opera .window_extra {
  border-radius: 8px;
  margin-bottom: 4px;
}


.window.opera .window_extra_wrapper {
  border-radius: 8px;
  box-sizing: border-box;
  height: calc(100% - 8px);
  flex: initial;
  width: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.window.opera .window_extra__address_label {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.window.opera .window_extra__safe-indicator {
  margin-right: 7px;
  margin-left: 12px;
}

.window.opera .window_extra__address ::selection {
  background-color: #4f1fff;
  color: white;
}

.window .window_content > .window_iframe {
  background-color: #171d25;
}

.window.opera .window_content > .window_iframe {
  background-color: #171d25;
  border-radius: 8px;
}


