/*
:root{

	--color1:#000000;
	--color2:#FFFFFF;
	--color3:#666666;
	--color4:#CCCCCC;
	--color5:#999999;

	--primary-color:var(--color1);
	--secondary-color:var(--color2);
	--highlight-bg-color:var(--color3);
	--highlight-color:#4F71A4;

	--max-width:1600px;

	--main-font:'Titillium Web', Helvetica, Arial, sans-serif;
	--secondary-font:var(--main-font);
	--main-font-weight:400;
	--main-font-weight-bold:600;
	--main-text-color:#666666;
	--main-line-height:1.5;
	--main-font-size:16px;
	--main-font-letter-spacing:0px;

	--generic-border:var(--color4);

	--body-bg:none;
	--body-bg-color:transparent;


	--header-bg-color:#dddddd;
	--header-color:#FFFFFF;

	--header-border-width:0px;
	--header-border-color:var(--primary-color);

	--header-shadow:none;
	--header-height:90px;
	--header-content-height:var(--header-height);
	--header-content-bg-color:transparent;

	--main-logo-url:url("../img/logo/main-logo.png");
	--main-logo-img-width:300px;
	--main-logo-xpos:10px;
	--main-logo-ypos:center;
	--main-logo-offset:0px;
	--main-logo-width:calc(var(--main-logo-img-width) + var(--main-logo-xpos) + var(--main-logo-offset));
	--main-logo-bg-width:var(--main-logo-img-width);
	--main-logo-position:var(--main-logo-xpos) var(--main-logo-ypos);

	--input-bg-color:#FFFFFF;
	--input-border-color:var(--generic-border);
	--input-border-size:1px;
	--input-border:var(--input-border-size) solid var(--input-border-color);
	--input-color:var(--main-text-color);
	--input-border-highlight: #FFFFFF;
	--input-highlight-shadow: 0px 0px 4px 0px rgba(0,0,0,0.1);
	--input-border-radius:3px;



	--nav-color:#FFFFFF;

	--nav-bg-color:var(--primary-color);
	--nav-border-color:var(--nav-color);

	--nav-hover-color:var(--primary-color);
	--nav-hover-bg-color:var(--nav-color);
	--nav-hover-border-color:var(--nav-hover-color);


	--button-color:var(--nav-color);
	--button-border-color:var(--nav-border-color);
	--button-bg-color:var(--nav-bg-color);
	--button-icon-color:var(--nav-color);
	--button-font-size:var(--main-font-size);
	--button-font-weight:400;
	--button-radius:5px;

	--button-height-standard:26px;

	--button-hover-color:var(--nav-hover-color);
	--button-hover-icon-color:var(--nav-hover-color);
	--button-hover-border:var(--nav-hover-border-color);
	--button-hover-bg-color:var(--nav-hover-bg-color);



	--main-heading-color:var(--main-text-color);
	--main-heading-height:60px;
	--main-heading-font:var(--secondary-font);
	--main-heading-font-size:34px;
	--main-heading-letter-spacing:var(--main-font-letter-spacing);
	--main-heading-icon-color:var(--main-heading-color);
}

*/

body{
	background:var(--body-bg);
	background-color: var(--body-bg-color);
	line-height: var(--main-line-height);
	font-weight: var(--main-font-weight);
	letter-spacing: var(--main-font-letter-spacing);
	color: var(--main-text-color);
	transition: all .250s ease;
}

body *{ font-family: var(--main-font);}


.main-logo{
	background-image: var(--main-logo-url);
}


/* Headings */

.main-heading{
	min-height: var(--main-heading-height);
	padding: 5px;
	font-size: var(--main-heading-font-size);
	color: var(--main-heading-color);
	display: flex;
	align-items: center;
	font-family: var(--main-heading-font);
	font-weight: var(--main-font-weight-bold);
	letter-spacing: var(--main-heading-letter-spacing);
	font-size:24px;
	width:100%;
}

.main-heading .heading-icon{
	font-size: 1.375rem;
	margin: 3px 5px 0 0;
	border: 1px solid #4F71A4;
	height: 30px;
	width: 30px;
	line-height: 29px;
	background-color: #EAECE4;
	border-radius: 5px;
	font-weight: 400;
	display: flex;
	justify-content: center;
	align-items: center;
}

.main-heading i{
	color: var(--main-heading-icon-color);
}



/* Buttons */

.button {
	text-align: center;
	border: var(--button-border-width) solid var(--button-border-color);
	color: var(--button-color);
	background-color: var(--button-bg-color);
	transition: all 250ms ease;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	gap: 5px;
}

.button:hover{
	border: 1px solid var(--button-hover-border);
	color: var(--button-hover-color);
	background-color: var(--button-hover-bg-color);
}

.button.standard-button{
	padding-left: 6px;
	padding-right: 6px;
	height: var(--button-height-standard);
	font-size: var(--button-font-size);
	font-weight: var(--button-font-weight);
	border-radius: var(--button-radius);
}

.button.small-button{
	height: 22px;
	padding-left: 5px;
	padding-right: 5px;
	border-radius: var(--small-button-radius);
	line-height: 1;
	font-size: 0.875rem;
	letter-spacing: -.2px;
}

.button.button-disabled{
	filter: grayscale(0.3) saturate(0.4) blur(.5px) opacity(0.5);
	cursor: not-allowed;
	pointer-events: none;
}

.icon-button {
	width:22px;
	height:22px;
	border: var(--button-border-width) solid var(--button-border-color);
	color: var(--button-color);
	background-color: var(--button-bg-color);
	border-radius:3px;
	font-size: 0.875rem;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 250ms ease;
	transform-origin : center center;
}

.icon-button i{
	transform-origin : center center;
	transition: all 250ms ease;
}

.cancel {
	color:var(--cancel-icon-color);
}


/*  Frames  */

.frame{
	padding:0px;
	margin-bottom:5px;
	background: none;
	display:block;
	box-sizing: border-box;
	font-size: var(--main-font-size);
	transition: none;
	color:var(--main-text-color);
}

.frame.main-list{
	border:1px solid var(--frame-border-color);
	background-color: var(--frame-bg-color);
	border-radius: 5px;
	padding:5px;
}


.blink {
  display: inline-block; /* Allows the element to be transformed */
  animation: squash-expand 0.15s ease-out; /* Trigger the squash-expand animation */
}

@keyframes squash-expand {
  0% {
	transform: scaleY(1); /* Normal size */
  }
  50% {
	transform: scaleY(0.0); /* Squashed */
  }
  100% {
	transform: scaleY(1); /* Back to normal size */
  }
}