:root{
	--clr-primary-300:  hsl(250, 100%, 65%);
	--clr-primary-400: hsl(250, 54%, 45%);
	--clr-accent-300: hsl(205, 90%, 48%);	
	--clr-accent-400: hsl(171, 100%, 38%);	
	--clr-accent-500: hsl(169, 100%, 27%);	
	
    --clr-primaryShadow-300: hsl(256, 78%, 53%, 35%);
	--clr-accentShadow-300: hsl(205, 90%, 48%, 80%);

	--clr-neutral-100: hsl(0, 0%, 100%);
	--clr-neutral-200: hsl(0, 0%, 80%);
	--clr-neutral-300: hsl(0, 0%, 55%);
	--clr-neutral-350: hsl(180, 4%, 44%);
	--clr-neutral-400: hsl(0, 0%, 30%);
	--clr-neutral-700: hsl(0, 0%, 30%);
	--clr-neutral-800: hsl(0, 0%, 24%);
	--clr-neutral-900: hsl(0, 0%, 15%);
	--ff-arbic: "Tajawal" , "sans-serif";
	--ff-english: "Roboto" , "sans-serif";

	--ff-body: var(--ff-arbic);

	--fw-light: 300;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-bold: 700;

	--fs-300: 0.5rem;
	--fs-350: 0.75rem;
	--fs-375: 0.875rem;
	--fs-400: 1rem;
	--fs-500: 1.25rem;
	--fs-600: 1.5rem;
	--fs-700: 2rem;
	--fs-800: 2.5rem; 
	--fs-900: 3.5rem; 

	--fs-text-h1: var(--fs-600);
	--fs-text-h2: var(--fs-500);
	--fs-text-h3: var(--fs-400);
	
	--fs-body: var(--fs-400);
	--fs-nav: var(--fs-350 );
	--fs-button: var(--fs-400);   

	--fs-MeetingCard-text: var(--fs-400);
}

/* Desktop min size */
@media (min-width: 50em){ 
	:root{
		--fs-text-h1: var(--fs-700);
		--fs-text-h2: var(--fs-600);
		--fs-text-h3: var(--fs-500);

		--fs-button: var(--fs-500);

		--fs-MeetingCard-text: var(--fs-500)
	}
}

/* Box sizing rules */
*,
*::before,
*::after {
	box-sizing: border-box;
	
}

/* Remove default margin */
* {
	margin: 0;
	padding: 0;
	font: inherit;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
	outline: none;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
	list-style: none;
}

/* Set core root defaults */
html:focus-within {
	scroll-behavior: smooth;
}

html,
body {
	height: 100%;
	width: 100%;
	
}

/* Set core body defaults */
body {
	text-rendering: optimizeSpeed;
	line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
	text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture,
svg {
	max-width: 100%;
	display: block;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
	html:focus-within {
	 scroll-behavior: auto;
	}
	
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Utility classes */
.text-primary-400{color: var(--clr-primary-400);}
.text-primary-300{color: var(--clr-primary-300);}

.text-accent-300{color: var(--clr-accent-300);}

.text-neutral-100{color: var(--clr-neutral-100);}
.text-neutral-200{color: var(--clr-neutral-200);}
.text-neutral-300{color: var(--clr-neutral-300);}
.text-neutral-350{color: var(--clr-neutral-350);}
.text-neutral-400{color: var(--clr-neutral-400);}
.text-neutral-800{color: var(--clr-neutral-800);}
.text-neutral-900{color: var(--clr-neutral-900);} 

.bg-primary-400{background-color: var(--clr-primary-400);}
.bg-primary-300{background-color: var(--clr-primary-300);}
.bg-accent-300{background-color: var(--clr-accent-300);}

.bg-neutral-100{background-color: var(--clr-neutral-100);}
.bg-neutral-400{background-color: var(--clr-neutral-300);}
.bg-neutral-800{background-color: var(--clr-neutral-800);}
.bg-neutral-900{background-color: var(--clr-neutral-900);} 

.fw-light{font-weight: var(--fw-light);}
.fw-regular{font-weight: var(--fw-regular);}
.fw-medium{font-weight: var(--fw-medium);}
.fw-bold{font-weight: var(--fw-bold);}

.ff-arbic{font-family: var(--ff-arbic);}
.ff-english{font-family: var(--ff-english);}

.fs-300{font-size: var(--fs-300)}
.fs-350{font-size: var(--fs-350)}
.fs-400{font-size: var(--fs-400)}
.fs-500{font-size: var(--fs-500)}
.fs-600{font-size: var(--fs-600)}
.fs-700{font-size: var(--fs-700)}
.fs-800{font-size: var(--fs-800)}
.fs-900{font-size: var(--fs-900)}

.fs-text-h1{
	font-size: var(--fs-text-h1);
	line-height: 1.6;
}
.fs-text-h2{font-size: var(--fs-text-h2);}
.fs-text-h3{font-size: var(--fs-text-h3);}

.center-div{
	margin-inline: auto;
	width: fit-content;
}

.center-text{
	text-align: center;
}

.hidden {
	display: none !important;
	opacity: 0;
	/* max-height: 0px !important; */
}

.flipped {
	transform: scale(1, -1);
	-moz-transform: scale(1, -1);
	-webkit-transform: scale(1, -1);
	-o-transform: scale(1, -1);
	-khtml-transform: scale(1, -1);
	-ms-transform: scale(1, -1);
}

.reverse[data-type=primary-inverted]{
	border-color: var(--clr-neutral-100) !important;
	background-color: var(--clr-neutral-100)  !important;
	color: var(--clr-neutral-800)  !important;
}

.reverse[data-type=primary-inverted]:hover,
.reverse[data-type=primary-inverted]:focus-visible{
	border-color: var(--clr-neutral-100) !important;
	background-color: var(--clr-neutral-100)  !important;
	color: var(--clr-neutral-800)  !important;	
}

.active-nav-item{
	background-color: var(--clr-primary-300) !important;
	color: var(--clr-neutral-100)  !important;
}

.active-tap{
	background-color: var(--clr-neutral-100) !important;
	color: var(--clr-neutral-800)  !important;
}

a{
	text-decoration: none;
	font: inherit;
	color: inherit;
}

/* general styling */
body{
	font-family: var(--ff-body);
	font-weight: var(--fw-medium);
	color: var(--clr-neutral-100);
	background-color: var(--clr-neutral-900);
	direction: rtl;
	overflow: hidden;
}

.container{
	--max-width:90rem;
	--padding:1rem;

	width: min(var(--max-width),100%  - 2 * var(--padding));
	margin-inline: auto;
}

.even-columns{
	display: grid;
	gap: 1rem;
}

.two-columns{
	display: flex;
}

.section{
	padding-top: 2rem;
}

.section:first{padding: 0;}

.noselect {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.scroll{
	overflow-y: auto;
}

.scroll::-webkit-scrollbar{
	width: 15px;
	cursor: context-menu;
}

.scroll::-webkit-scrollbar-track {	
	border-radius: 9999px;
	cursor: context-menu;
	/* background-color: black; */
	
}

.scroll::-webkit-scrollbar-thumb {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
	border: 4px solid rgba(0, 0, 0, 0);
	background-clip: padding-box;
	border-radius: 9999px;
	background-color: rgba(0, 0, 0, 0.5);
	cursor: context-menu;

}

.scroll::-webkit-scrollbar-thumb:hover{
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8);
	background-color: rgba(0, 0, 0, 0.7);
}

.context-menu{
	display: none;
	position: absolute;
	flex-direction: column;
	background-color: var(--clr-neutral-900);
	gap:0.625rem;
	padding-block: 0.625rem;
	border-radius: 0.325rem;
	
	font-size: var(--fs-400);
	z-index: 1000000;

	box-shadow: 0 3px 8px 4px hsla(0, 0%, 0%, 0.3);
}

.context-menu > ul{
	list-style: none;
}

.context-menu > ul > li{
	cursor: pointer;
	padding: 0.2rem 1rem; 
	width: 100%;
}

.context-menu > ul > li:hover{
	background-color: var(--clr-accent-300);
}

.HorLine{
	background-color: var(--clr-neutral-200);
	height: 1px;
}

@media (min-width: 50em){
	.even-columns{
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
	}

	.card-columns{
		grid-auto-flow: dense;
	}

	.container{
		--padding:2rem;

		width: min(var(--max-width),100%  - 2 * var(--padding));
	}
}

button[class*="button"]{
	border-radius: 0.4em;
	padding: 0.3em 0.7em;
	font-size: var(--fs-button);
	line-height: 1.4;
	cursor: pointer;
	transition: color,background-color,border-color;
	transition-duration: 300ms;
}

.button-regular{
	border: 0;
	background-color: inherit;
}

.button-regular:hover,
.button-regular:focus-visible{
	color: var(--clr-neutral-100);
	background-color: var(--clr-primary-300);
}

.button-primary{
    border-radius: 100%;
	border: 0;
	color: var(--clr-neutral-100);
	background-color: var(--clr-primary-300);
}

.button-primary:hover,
.button-primary:focus-visible{
    color: var(--clr-neutral-100);
	background-color: var(--clr-primary-400);
}

.button-primary-2{
    /* font-size: var(--fs-500) !important; */
    border-radius: 40vmax !important;
	width: fit-content;
	border: 0;
	color: var(--clr-neutral-200);
	background-color: var(--clr-primary-400);
}

.button-primary-2:hover,
.button-primary-2:focus-visible{
	color: var(--clr-neutral-100);
	background-color: var(--clr-primary-300);
}

.button-accent{
    width: fit-content;
    /* font-size: var(--fs-500) !important; */
	border-radius: 40vmax  !important;
	color: var(--clr-neutral-200);
	background-color: inherit;
	border: 1px solid var(--clr-neutral-200);
}

.button-accent:hover,
.button-accent:focus-visible{
	border-color: var(--clr-neutral-100);
	background-color: var(--clr-neutral-100);
	color: var(--clr-neutral-900);
}

.button-accent[data-type=inverted]{
	border: 1px solid var(--clr-neutral-100);
}

.button-accent[data-type=inverted]:hover,
.button-accent[data-type=inverted]:focus-visible{
	border-color: var(--clr-neutral-100);
	background-color: var(--clr-neutral-100);
	color: var(--clr-neutral-800);
}

.button-accent[data-type=primary-inverted]{
	border-color: var(--clr-neutral-100);
	margin-inline: 1em;
}

.button-accent[data-type=primary-inverted]:hover,
.button-accent[data-type=primary-inverted]:focus-visible{
	border-color: var(--clr-neutral-100);
	background-color: var(--clr-neutral-100);
	color: var(--clr-neutral-800);	
}

.Menu-container{
	border: 0;
	background-color: transparent;
	cursor: pointer;
}