/*<style>*/
body{
	color: var(--on-background);
    background-color: var(--body);
}
header, footer {
    padding: 0 1rem;
    background-color: var(--app-title-container);
}

.ltr span{
	color: var(--symbols-color);
}
input, textarea, select{
	color: var(--on-background);
	background-color: var(--text-field);
}


	
/* === Layout combos (סמנטיים) === */
.flex-center-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-center {
  display: flex;
  align-items: center;
}

.flex-between {
  display: flex;
  justify-content: space-between;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-col-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}



	
.flex-center {
  display: flex;
  align-items: center;
}
.flex-container {
  display: flex;
  align-items: stretch;
}
.flex-center-row{
	display: flex;
    flex-direction: inherit;
    align-items: center;
	gap: 6px;
}
.flex-row{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.shmm-file2{
	display: flex;
    flex-direction: column;
	align-items: flex-start;
	padding: 6px 0;
	gap: 3px;
}

/*חלונות*/
.Full-sealing {
    background-color: #868c8c1a;
	backdrop-filter: blur(7px) saturate(180%);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	z-index: 1000;
}
.Message-window {
    background-color: var(--app-container);
    width: 470px;
    height: 450px;
    position: absolute;
    padding: 24px;
    border-radius: 20px;
    direction: rtl;
    left: 0;
    top: 50%;
	box-shadow: 0 8px 50px rgb(0 0 0 / 40%);
	animation: animatetop-window 0.6s;
	transition: 0.5s;
	margin-left: auto;
    margin-right: auto;
    right: 0;
	transform: translate(0%, -50%);
}
@keyframes animatetop-window{from{opacity: 0.9;transform: scale(0.95) translate(0%, -50%);} to{opacity:1;transform: scale(1) translate(0%, -50%);}}
.Message-window div[content]{
    overflow: auto;
    max-height: calc(100vh - 130px);
}
.Message-window div[content]::after{
    content: "";
    display: block;
    height: 50px;
}

.short-info-to-window{
	font-size: 13px;
	color: #808080;	
}
.title-surface {
	text-align: center;
    margin-block-start: 0em;
	margin-block-end: 0.5em;
    color: #f44336;
	letter-spacing: -0.03rem;
}
.BAction{
	position: absolute;
	bottom: 20px;
    left: 20px;
    display: flex;
	direction: ltr;
	justify-content: flex-start;
	align-items: center;
	width: -webkit-fill-available;
	background-color: var(--app-container);
	transition: 0.5s;
}	


@media only screen and (max-width: 600px){
	.Message-window {
		width: 100%;
		border-radius: 0 0 20px 20px;
		animation: animatetop-window 0.6s;
		transform: none;
        top: 0;
	}@keyframes animatetop-window{from{top:-300px;opacity:0.8} to{top:0;opacity:1}}
	@keyframes animateout-window {from{top:0;opacity:1;} to{top:-300px;opacity:0;}}
    .animate-out {
        animation: animateout-window 0.6s forwards;
    }
	header, footer {
	padding: 0rem 5px;
	}
	#username{
		font-size: 20px;
	}
	.quad-button{
		width:auto;
	}
}


	
#netfree-popup-window-hand-pull {
	display: none;
}


/*תפריט נפתח*/
.dropdown {
  position: relative;
/*  display: inline-block;*/
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--app-container);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  border-radius: 8px;
}
.iie0 {
	inset-inline-end: 0;
}
.dropdown-content a {
  color: var(--symbols-color);
  padding: 9px 16px;
  text-decoration: none;
	display: flex;
	align-items: center;
	border-radius: 15px;
    margin: 4px;
	border-radius: 15px;
	font-size: 16px;
    gap: 10px;
}
.dropdown-content a:hover {
	animation: a-hover 0.3s;
    animation-fill-mode: forwards;
}
@keyframes a-hover {
  from {background-color: inherit;}
  to {background-color: #a4a4a445;}
}
@keyframes a-hover1 {
  from {background-color: #dadada;}
  to {background-color: inherit;}
}
.dropdown:hover .dropdown-content {
  display: block;
}
.dropdown:hover {
  background-color: #ffffff69;
}


/*נפתחים*/
.active, .accordion:hover ,.accordion-off:hover{
  background-color: #ccc;
}
.panel {
  padding: 0 1.5%;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

/*מסגרות DIV מרכזי*/
.main-box{
	padding: 3%;
    border-radius: 30px;
    background-color: var(--button-background-color);
	transition: border-radius cubic-bezier(0.4, 0, 0.2, 1) 250ms;
	overflow: auto;
    max-width: 99vw;
}
div.main-box:hover {
	transition: border-radius cubic-bezier(0.4, 0, 0.2, 1) 250ms;
	border-radius: 20px;
}
:root {
  --app-container: #f9fbff;
  --app-color-main:black;
  --app-title-container: #f1f1f1;
  --main-color: #55545e;
	
  --button-color-dark: var(--on-primary);
  --button-color-medium: var(--on-secondary-container);
  --button-color-bright: var(--primary);
  --button-background-dark: var(--primary);
  --button-background-medium: var(--secondary-container);
  --button-background-bright: #ffffff59;
  --button-background-hover-dark: var(--primary);
  --button-background-hover-medium: var(--secondary-container);
  --button-background-hover-bright: var(--on-primary);
	
	--theme-color-surface-1: #7fb2ff21;
	--theme-color-surface-2: #f3f6fc;
    --theme-color-surface-3: #eff3fa;
    --theme-color-surface-4: #edf2fa;
    --theme-color-surface-5: #eaf0f9;
	

  --button-background-color: var(--on-primary);
	--blue: var(--primary);
	--beige: #fbf9ee;
	--LightBlue: #eff8ff;
  --secondary-color: #abaab6;
	--box-shadow-dice: 1px 0 10px;
	
}
:root {
--primary: #005ac5;
    --on-primary: #ffffff;
    --primary-container: #d6e2ff;
    --on-primary-container: #001a43;
    --secondary: #575e71;
    --on-secondary: #ffffff;
    --secondary-container: #dae2f9;
    --on-secondary-container: #141b2c;
    --tertiary: #715574;
    --on-tertiary: #ffffff;
    --tertiary-container: #fbd7fb;
    --on-tertiary-container: #29132d;
    --error: #ba1b1b;
    --error-container: #ffdad4;
    --on-error: #ffffff;
    --on-error-container: #410001;
    --background: #fdfbff;
    --on-background: #1b1b1e;
    --surface: #fdfbff;
    --on-surface: #1b1b1e;
    --surface-variant: #e1e2ec;
    --on-surface-variant: #44474f;
    --outline: #74777f;
    --inverse-on-surface: #f2f0f4;
    --inverse-surface: #2f3033;
    --inverse-primary: #acc7ff;
    --inverse-on-primary: #002e6c;
    --body: #FFF;
    --overlay: rgb(0 0 0 / .5);
    --active: rgb(0 0 0 / .1);
    --elevate1: 0 .125rem .125rem 0 rgb(0 0 0 / .32);
    --elevate2: 0 .25rem .5rem 0 rgb(0 0 0 / .4);
    --elevate3: 0 .375rem .75rem 0 rgb(0 0 0 / .48);
}
.dark:root {
--primary: #acc7ff;
    --on-primary: #002e6c;
    --primary-container: #004397;
    --on-primary-container: #d6e2ff;
    --secondary: #bfc6dc;
    --on-secondary: #283041;
    --secondary-container: #3f4759;
    --on-secondary-container: #dae2f9;
    --tertiary: #debbdf;
    --on-tertiary: #402843;
    --tertiary-container: #583e5b;
    --on-tertiary-container: #fbd7fb;
    --error: #ffb4a9;
    --error-container: #930006;
    --on-error: #680003;
    --on-error-container: #ffdad4;
    --background: #1b1b1e;
    --on-background: #e4e2e6;
    --surface: #1b1b1e;
    --on-surface: #e4e2e6;
    --surface-variant: #44474f;
    --on-surface-variant: #c4c6d0;
    --outline: #8e9099;
    --inverse-on-surface: #1b1b1e;
    --inverse-surface: #e4e2e6;
    --inverse-primary: #005ac5;
    --inverse-on-primary: #ffffff;
	
    --body: #000;
    --overlay: rgb(0 0 0 / .5);
    --active: rgb(255 255 255 / .2);
    --elevate1: 0 .125rem .125rem 0 rgb(0 0 0 / .32);
    --elevate2: 0 .25rem .5rem 0 rgb(0 0 0 / .4);
    --elevate3: 0 .375rem .75rem 0 rgb(0 0 0 / .48);
}	
.dark:root {
  --app-container: #111827;
  --app-color-main:white;
  --app-title-container: #4f5358;
  --main-color: white;
	
  --button-color-dark: white;
  --button-color-medium: white;
  --button-color-bright: white;
  --button-background-dark: #7c7cff;
  --button-background-medium: #9595d8;
  --button-background-bright: #00000000;
  --button-background-hover-dark: #8b8bcb;
  --button-background-hover-medium: #acacca;
  --button-background-hover-bright: #333e5696;
	
  --button-background-color: #555b68;
  --button-color-hover: rgba(195, 207, 244, 0.1);
  --button-color-active-bg: rgba(195, 207, 244, 0.2);
  --button-bg: #1f2937;
  --secondary-color: rgba(255,255,255,.8);
  --projects-section: #474d5a;
	--blue: #a9a9ff;
	--beige: #7a7a64;
	--LightBlue: #747292;
	--symbols-color: #a9a9a9;
	--text-field: #5c5c5c;
}
.dark.green:root {
  --button-background-bright: #00000000;
	--app-title-container: #262e24;
	--blue: #9cd67d;
}
.green:root {
  --app-title-container: #ebefe2;	
  --button-color-dark: white;
  --button-color-medium: #205107;
  --button-color-bright: #205107;
  --button-background-dark: #205107;
  --button-background-medium: #d7e7cd;
  --button-background-bright: #d5e7cf4f;
  --button-background-hover-dark: #386a20;
  --button-background-hover-medium: #dfe6d5;
  --button-background-hover-bright: #f0f3e8;
	
	--blue: #386a20;
	--beige: #fbf9ee;
	--LightBlue: #eff8ff;
	--secondary-color: #131f0d;
}
	
/*נפתח*/
summary {
    cursor: pointer;
    font-size: 16px;
    padding: 10px;
    background-color: #f2f2f2;
    border: 1px solid #ccc;
    margin-bottom: 5px;
    border-radius: 15px;
}
details[open] summary {
    border-radius: 20px 20px 0 0;
    background-color: #ddd; /* משנה את הרקע כאשר ה-details פתוח */
}
/*פס גלילה*/
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
    border-radius: 25px;
    background: #ddd;
}

	.Advanced-settings{
	margin: 5px auto;
	position: relative;
	padding: 25px;
	border-radius: 20px;
	top: 10%;
	width: 75%;
}