@-ms-viewport{width:device-width}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,main,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}*,::after,::before{box-sizing:inherit}html{box-sizing:border-box;touch-action:manipulation;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:transparent}body{line-height:1;font-family:sans-serif;text-align:left}[tabindex="-1"]:focus:not(:focus-visible){outline:0!important}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote::after,blockquote::before,q::after,q::before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}caption{caption-side:bottom}th{text-align:inherit;text-align:-webkit-match-parent}hr{box-sizing:content-box;height:0;overflow:visible}code,kbd,pre,samp{font-family:monospace,monospace}pre{overflow:auto;-ms-overflow-style:scrollbar}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:0;text-decoration:underline;text-decoration:underline dotted;cursor:help;text-decoration-skip-ink:none}address{font-style:normal;line-height:inherit}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0}sub{bottom:-.25em}sup{top:-.5em}em{font-style:italic}img{border-style:none}svg:not(:root){overflow:hidden}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}button,input{overflow:visible}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}[tabindex="-1"]:focus{outline:0!important}fieldset{min-width:0}legend{max-width:100%;white-space:normal;color:inherit;display:block}progress{vertical-align:baseline}textarea{overflow:auto;resize:vertical}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}output{display:inline-block}template{display:none}[hidden]{display:none}
:root {
    /*
    --color-?: #f9e8e8;
    */
    --color-bg: #ffffff;
    --color-bg-picture: #ffffff;
    --color-header: #e1e5ec;
    --color-button-bg: #578fff;
    --color-button-ok-bg: #3f9b29;
    --color-button-ok-text: #ffffff;
    --color-button-error-bg: #ef4c39;
    --color-button-error-text: #ffffff;
    --color-button-on-bg: #578fff;
    --color-button-off-bg: #b5b5b5;
    --color-button-menu: #ffffff;
    --color-button-menu-selected: #f5fbff;
    --color-button-menu-outline: #e1e5ec;
    --color-button-reject: #ef4c39;
    --color-button-inactive: #b5b5b5;
    --color-button-recommendation: #ffffff;
    --color-button-recommendation-outline: #e1e5ec;
    --color-button-dropdown: #ffffff;
    --color-button-dropdown-outline: #e1e5ec;
    --color-text: #707070;
    --color-text-button: #ffffff;
    --color-text-overlay: #ffffff;
    --color-text-active: #578fff;
    --color-text-inactive: #b5b5b5;
    --color-text-ok: #3f9b29;
    --color-text-reject: #ef4c39;
    --color-text-warning: #b15151;
    --color-panel-info: #f5fbff;
    --color-panel-a: #e1e5ec;
    --color-panel-b: #e9edf5;
    --color-panel-result: #f9e8e8;
    --color-panel-card: #e1e5ec;
    --color-panel-card-active: #f5fbff;
    --color-input-bg: #ffffff;
    --color-input-bg-inactive: #e1e5ec;
    --color-input-outline: #e1e5ec;
    --color-input-outline-active: #578fff;
    --color-input-outline-error: #ef4c39;
    --color-list-line-a: #f5fbff;
    --color-list-line-b: #f9fff5;
    --color-list-separator: #e1e5ec;
    --color-list-scroll: #b5b5b5;
    --color-list-title: #e1e5ec;
    --color-list-title-selected: #e1e5ec;
    --color-list-title-error: #e1e5ec;
    --color-icon-header: #707070;
    --color-icon-header-bg:#ffffff;
    --color-icon-active-header: #ffffff;
    --color-icon-active-header-bg: #578fff;
    --color-icon-list: #707070;
    --color-icon-list-inactive: #b5b5b5;
    --color-icon-button: #ffffff;
    --color-icon-button-dropdown: #b5b5b5;
    --color-icon-overlay: #578fff;
    --color-icon-overlay-warning: #ffc400;
    --color-icon-overlay-error: #ef4c39;
    --color-icon-number: #fff;
    --color-icon-number-bg-red: #ef4c39;
    --color-icon-number-bg-yellow: #ffc400;
    --color-progress-bg: #b5b5b5;
    --color-progress-ok: #3f9b29;
    --color-progress-warning: #b15151;
    --color-graph-bg: #ffffff;
    --color-graph-outline: #e1e5ec;
    --color-graph-actial-line: #707070;
    --color-graph-value-free: #3f9b29;
    --color-graph-value-reserved: #8bc87c;
    --color-graph-value-ordered: #76a4ff;
    --color-graph-chart-grid: #c5d8ff;
    --color-graph-chart-grid-text: #c5d8ff;
    --color-graph-chart-axis-text: #707070;
    --color-graph-chart-color1: #1f78b4;
    --color-graph-chart-color2: #b15151;

    /* COLORS FOR HEADER */
    /* Ticketing */
    --color-ticketing-modal: rgba(112, 112, 112, 0.33);
    --color-ticketing-bg:#F9E8E8;
    --color-ticketing-icon:#B5B5B5;

    /* Modal - Saving Active State */
    --color-modal-content-bg: #F5FBFF;
    --color-modal-content-border: #558DFC;
    --color-modal-btn-save-bg: #00A651;
    --color-modal-btn-delete-bg: #707070;
    --color-modal-btn-other-bg: #578FFF;
    --color-modal-btn: #fff;

    --color-text-title: #707070;
    --color-line-gray: #B5B5B5;
    --color-date-filter:#707070;
    --color-additional-func-content-bg: #E1E5EC;
    --color-additional-func-bg: #fff;

    --color-label-bg: #fff;

    --color-line-blue: #558DFC;
    --color-clicked-border: #558DFC;

    --color-avatar-border: #00A651;
    --color-radiobutton-border:#707070;
    --color-radiobutton-bg: #B5B5B5;

/* NEW COLOR SYSTEM */
    --color-white: white;
    /* --color-primary: #578FFF; */
    --color-primary: #0078ff;
    --color-primary-middle-light: #96c8ff;
    --color-primary-light: #e5f4ff;
    /* --color-primary-dark: #00499c; */
    --color-primary-dark: #0054B3;
    --color-danger: #B42424;
    --color-light-danger: #EF4C39;
    --color-lighter-danger: #f6aea6;
    /* --color-success:#3F9B29;
    --color-light-success:#8BC87C; */
    --color-success: #248710;
    --color-light-success:#ECFFE5;
    --color-warning: #FFAA00;
    --color-light-warning:#FFC400;
    --color-secondary-dark: #6E6E6E;
    --color-secondary: #707070;
    --color-light-secondary: #B5B5B5;
    --color-lighter-secondary: #E1E5EC;
    --color-panel: #F5FBFF;
    --color-bg-card: #E9EDF5;
    --color-bg-active-card: #F5FBFF;
    --color-header: #e1e5ec;
    --color-input-border: #E1E5EC;
    --color-bg-secondary: #E1E5EC;

    --color-table-odd: #F4F5F9;
    --color-table-even: #E9EDF5;
    /* TEMP --> a colour system egységesítése után átnevezni */
    --color-neutral-1: #F4F5F9;
    --color-neutral-2: #e9edf5;





    /*
    --color-border: #b5b5b5;
    --color-danger: #ef4c39;
    --color-warning: #ffc400;
    --color-gray: #707070;
    --color-card-bg: #f9fff5;
    --color-card-bg-2: #f5fbff;
    --color-card-bg-active: #f5fbff;
    --color-white: #ffffff;
    --color-button: #000000;
    --color-button-primary: #ffffff;
    --color-button-primary-bg: #578fff;
    */

    --regular1: normal normal normal 1.75rem/2.5rem Segoe UI;
    --regular2: normal normal normal 1.375rem/2rem Segoe UI;
    --regular3: normal normal normal 1rem/1.5rem Segoe UI;

    --semibold1: normal normal 600 1.75rem/5rem Segoe UI;
    --semibold2: normal normal 600 1.375rem/2rem Segoe UI;
    --semibold3: normal normal 600 1rem/1.5rem Segoe UI;

    --bold1: normal normal bold 1.75rem/5rem Segoe UI;
    --bold2: normal normal bold 1.375rem/2rem Segoe UI;
    --bold3: normal normal bold 1rem/1.5rem Segoe UI;

    --badge: normal normal normal 1rem/1.5rem Segoe UI;
    --badge-bold: normal normal bold 1rem/1.5rem Segoe UI;
    --buttontext2: normal normal normal 1.375rem/1.75rem Segoe UI;
    --buttontext3: normal normal normal 1rem/1.5rem Segoe UI;

}

/********/
/* TAGS */
/********/
h2 {
	font-size: 1.5rem;
	line-height: 1.3333;
}

/*********/
/* ATOMS */
/*********/

/* Line */
.line {
	width: 100%;
	height: 1px;
	background-color: var(--color-lighter-secondary);
	margin: auto;
}
.line90 {
	width: 90%;
	height: 1px;
	background-color: var(--color-lighter-secondary);
	margin: auto;
}
.line-v80 {
	height: 70%;
	width: 1px;
	background-color: var(--color-lighter-secondary);
	align-self: center;
}

/* Background-colors */
.bg-white{
	background-color: var(--color-white);
}
.bg-primary{
	background-color: var(--color-primary);
}
.bg-primary-middle-light{
	background-color: var(--color-primary-middle-light);
}
.bg-danger{
	background-color: var(--color-danger);
}
.bg-light-danger{
	background-color: var(--color-light-danger);
}
.bg-success{
	background-color: var(--color-success);
}
.bg-light-success{
	background-color: var(--color-light-success);
}
.bg-warning{
	background-color: var(--color-warning);
}
.bg-light-warning{
	background-color: var(--color-light-warning);
}

.bg-secondary{
	background-color:var(--color-secondary);
}
.bg-light-secondary{
	background-color: var(--color-light-secondary);
}
.bg-lighter-secondary{
	background-color: var(--color-lighter-secondary);
}

.bg-panel{
	background-color: var(--color-panel);
}
.bg-primary-ligth{
	background-color: var(--color-primary-light);
}
.bg-card{
	background-color: var(--color-bg-card);
}
.bg-header{
	background-color: var(--color-header);
}
.bg-transparent{
	background-color: transparent;
}

/* Colors */
.clr-white {
	color: var(--color-white);
}

.clr-primary {
	color: var(--color-primary);
}
.clr-primary-dark {
	color: var(--color-primary-dark);
}

.clr-danger {
	color: var(--color-danger);
}

.clr-light-danger {
	color: var(--color-light-danger);
}

.clr-success {
	color: var(--color-success);
}

.clr-light-success {
	color: var(--color-light-success);
}

.clr-warning {
	color: var(--color-warning);
}

.clr-light-warning {
	color: var(--color-light-warning);
}

.clr-secondary {
	color: var(--color-secondary);
}

.clr-light-secondary {
	color: var(--color-light-secondary);
}
.clr-lighter-secondary {
	color: var(--color-lighter-secondary);
}

.clr-panel {
	color: var(--color-panel);
}

.clr-card {
	color: var(--color-bg-card)
}
.clr-header {
	color: var(--color-header)
}

/*Text*/
/******/

.a-text{
	display: flex;
	align-items: center;
	width: 100%;
	/* color: var(--color-text) */
}

.a-text.center{
	justify-content: center;
	align-items: center;
	text-align: center;
}
.a-text.left{
	justify-content: start;
}
.a-text.right{
	justify-content: end;
}
.a-text.primary{
	color: var(--color-primary);
}
.a-text.primary-dark{
	color: var(--color-primary-dark);
}
.a-text.secondary{
	color: var(--color-secondary)
}
.a-text.light-secondary{
	color: var(--color-light-secondary)
}
.a-text.lighter-secondary{
	color: var(--color-lighter-secondary)
}
.a-text.danger{
	color: var(--color-danger);
}
.a-text.success{
	color: var(--color-success)
}
.a-text.white{
	color: var(--color-white)
}
.a-text.warning{
	color: var(--color-warning)
}

.a-text1 {
	font: var(--regular1)
}
.a-text2 {
	font: var(--regular2)
}
.a-text3 {
	font: var(--regular3)
}

.a-reg5 {
	font: var(--regular5)
}
.a-reg4 {
	font: var(--regular4)
}
.a-reg2 {
	font: var(--regular2)
}

.a-sem1 {
	font: var(--semibold1);
}
.a-sem2 {
	font: var(--semibold2);
}
.a-sem3 {
	font: var(--semibold3);
}

.a-bold1 {
	font: var(--bold1);
}
.a-bold2 {
	font: var(--bold2);
}
.a-bold3 {
	font: var(--bold3);
}

.a-badgetext {
	font: var(--badge);
}

.bold {
	font-weight: bold;
}
.semi-bold {
	font-weight: 600;
}
.semi {
	font-weight: 600;
}
.a-buttontext2 {
	font: var(--buttontext2);
}
.a-buttontext3 {
	font: var(--buttontext3);
}


/*Icon*/
/******/
.icon > .tiny, .icontext.tiny,
.a-dot.tiny{
	width: 0.5rem;
	height: 0.5rem;
}
.icon > .smaller, .icontext.smaller,
.a-dot.smaller{
	width: 1rem !important;
	height: 1rem !important;
}
.icon > .small, .icontext.small,
.a-dot.small{
	width: 1.5rem;
	height: 1.5rem;
}
.icon > .normal,
.icontext.normal,
.a-dot.normal{
	width: 2.5rem;
	height: 2.5rem;
}
.icon > .large,
.icontext.large{
	width: 5rem;
	height: 5rem;
}
.icon>.huge,
.icontext.huge {
	width: 8rem;
	height: 8rem;
}
/* TODO: komponens szinten implementálni... */
.icontext.circle{
	border-radius: 50%;
}

.opacity{
	opacity: 0.3;
}

.a-iconbadge{
	position: relative;
}

.a-dot{
	position: absolute;
	border-radius: 50%;
}

.a-dot.left {
	top: 0.5rem;
	left: 0.5rem;
}
.a-dot.right {
	top: 0.5rem;
	right: 0.5rem;
}



/*BOX*/
/*****/
.box{
	display: flex;
	/* padding: 0 0.5rem; */
	width: 100%;
	border-radius: 0.25rem
}

.vbox{
	flex-direction: row;
}

.hbox{
	height: 100%;
	flex-direction: column;
	/* height: 300px; */
}

/* Button */
/**********/
.icon{
	display: flex;
	justify-content: center;
	align-items: center;
}

.a-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	min-width: 1.5rem;
	width: 100%;
	border: none;
	position: relative;
	cursor: pointer;
	/* border-radius: 0.5rem; */
	position: relative;
	padding: 0 0.5rem;
}

.circular{
	border-radius: 1.5rem;
}
.rectangular{
	border-radius: 0.5rem;
}
.straight {
	border-radius: 0;
}

.a-button.col{
	flex-direction: column;
}
.a-button:focus{
	outline: none;
}

.a-button.height-tiny,
.a-checkbox.height-tiny,
.a-radio.height-tiny {
	height: 1.25rem;
}


.a-button.height-small,
.a-checkbox.height-small,
.a-radio.height-small {
	height: 2rem;
}
.a-button.height-medium, .a-checkbox.height-medium, .a-radio.height-medium, .height-medium, .a-input.height-medium  {
	height: 2.5rem;
}
.a-button.height-large, .a-checkbox.height-large,
.a-radio.height-large {
	height: 3.5rem;
}
.a-button.height-xxlarge{
	/* height: 15.5rem; */
	height: 7.75rem;
}

.a-button.height-huge,
.a-checkbox.height-huge {
	height: 5rem;
}

.a-button.width-fit,
.a-checkbox.width-fit,
.a-radio.width-fit {
	width: fit-content;
}

.a-button.width-tiny,
.a-checkbox.width-tiny,
.a-radio.width-tiny {
	width: 2.5rem;
}
.a-button.width-smaller,
.a-checkbox.width-smaller,
.a-radio.width-smaller {
	width: 3.5rem;
}
.a-button.width-small,
.a-checkbox.width-small,
.a-radio.width-small {
	width: 5.5rem;
}
.a-button.width-medium,
.a-checkbox.width-medium,
.a-radio.width-medium {
	width: 7.5rem;
}
.a-button.width-large,
.a-checkbox.width-large,
.a-radio.width-large {
	width: 10rem;
}
.a-button.width-larger,
.a-checkbox.width-larger,
.a-radio.width-larger {
	width: 11rem;
}

.a-button.width-huge,
.a-checkbox.width-huge {
	width: 23.5rem;
}

.a-button.disabled, .a-button:disabled, .disabled {
	cursor: not-allowed!important;
	opacity: 0.6;
	background-color: var(--color-lighter-secondary);
}

.a-button.none{
	border: none !important;
	background-color: transparent;
}

.a-button.primary {
	color: white;
	background-color: var(--color-primary);
	border: none;
}

.a-button.primary-outlined {
	color: var(--color-primary);
	border: 1px solid var(--color-primary);
	/* background-color: #F5FBFF; */
	background-color: var(--color-white);
}

.a-button.primary-dark {
	color: white;
	background-color: var(--color-primary-dark);
	border: none;
}

.a-button.primary-dark-outlined {
	color: var(--color-primary-dark);
	border: 1px solid var(--color-primary-dark);
	background-color: var(--color-white);
}

/* ennek kéne majd a secondary buttonnak lennie */
.a-button.second {
	/* background-color: var(--color-primary-light); */
	background-color: var(--color-white);
	/* color: var(--color-text); */
	color: var(--color-primary);
	border: 1px solid var(--color-primary);
}

.a-button.secondary {
	/* background-color: #b5b5b5; */
	background-color: var(--color-secondary);
	color: white;
}

.a-button.secondary-outlined {
	background-color: white;
	border: 1px solid #E1E5EC;
	color: #707070;
}



.a-button.success {
	color: var(--color-white);
	border: 1px solid var(--color-success);
	background-color: var(--color-success);
}

.a-button.success-outlined {
	color: var(--color-secondary);
	border: 1px solid var(--color-success);
	background-color: var(--color-light-success);
}

.a-button.danger {
	color: var(--color-white);
	border: 1px solid var(--color-danger);
	background-color: var(--color-danger);
}

.a-button.danger-outlined{
	color: var(--color-danger);
	border: 1px solid var(--color-danger);
	background-color: var(--color-lighter-danger);
}

.a-button.skybound {
	background-color: white;
	border: 1px solid #578FFF;
	color: #578FFF;
}

.a-button.alert {
	background-color: #EF4C39;
	color: white;
}

.bg-white>.primary-outlined.active {
	color: var(--color-primary);
	/* border: 1px solid var(--color-primary); */
	/* background-color: #F5FBFF; */
}

.bg-panel>.primary-outlined.active,
.bg-panel .primary-outlined.active {
	background-color: white;
	border: 1px solid var(--color-primary);
	color: var(--color-primary);
}

.bg-white>.primary-outlined, .bg-panel>.primary-outlined {
	background-color: white;
	border: 1px solid var(--color-lighter-secondary);
	color: #707070;
}

/* TODO: ez van használva valhol? */
.bg-panel>.a-toggle-button.primary.active,
.bg-primary-light>.a-toggle-button.primary.active,
.bg-card>.primary.active,
.bg-transparent>.primary.active{
	background-color: var(--color-primary);
	border: 1px solid var(--color-primary);
	color: var(--color-white);
}

/* .bg-white .primary.none.active{
	background-color: var(--color-primary);
	color: var(--color-white);
} */

.bg-panel>.a-toggle-button.primary,
.bg-primary-light>.a-toggle-button.primary,
.bg-card>.primary,
.bg-transparent>.primary{
	background-color: var(--color-white);
	border: 1px solid var(--color-lighter-secondary);
	color: var(--color-secondary);
}

/* .bg-white .primary.none{
	background-color: var(--color-white);
	color: var(--color-secondary);
} */

.icontext {
	border-radius: 1rem;
	padding: 0 0.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1rem;
}
.icontext.badge, .icon.badge{
	position: absolute;
	right: -10px;
	bottom: -10px;
}

.icontext.fix-small{
	width: 1.5rem;
	height: 1.5rem;
}

.a-badge.red, .icontext.red{
	background-color: #EF4C39;
	color: white;
}

.a-badge.blue, .icontext.blue{
	background-color: #578FFF;
	color: white;
}

.a-badge.gray, .icontext.gray{
	background-color: #707070;
	color: white;
}

.icontext.border-danger,
.border-danger {
	border: solid 1px var(--color-danger);
}

.icontext.border-primary,
.border-primary {
	border: solid 1px var(--color-primary);
}

.icontext.border-secondary,
.border-secondary{
	border: solid 1px var(--color-secondary);
}
.icontext.border-light-secondary,
.border-light-secondary {
	border: solid 1px var(--color-light-secondary);
}
.icontext.border-success,
.border-success {
	border: solid 1px var(--color-success);
}
.icontext.border-white,
.border-white {
	border: solid 1px var(--color-white);
}


/* régi osztályok */
.a-btn {
	display: flex;
	align-items: center;
	border-radius: var(--s-radius-sm);
	color: var(--color-text-button);
	background: var(--color-button-bg);
	padding: 0 var(--s-button-h-pad);
	height: var(--s-button-h);
	min-width: 1.5rem;
	font-size: calc(22rem/16);
	cursor: pointer;
	border: none;
}
.a-btn.select {
	height: 2.5rem;
	min-width: 10rem;
	padding: 0;
}
.a-btn.small {
	font-size: var(--s-button-small-font-size);
	height: var(--s-button-small-h);
	padding: 0 var(--s-button-small-h-pad);
}
.a-btn.icon {
	padding: calc(var(--s-button-h)/8);
}
.a-btn:focus {
	outline: 0;
}
.a-btn:focus-visible {
    box-shadow: 0 0 0 1px white,0 0 4px 4px var(--color-input-outline-active);
}
.a-btn:disabled {
	cursor: not-allowed;
	opacity: 0.6;
	background: var(--color-button-inactive);
}
.a-btn.primary {
	/*
	color: var(--color-button-primary);
	background: var(--color-button-primary-bg);
	*/
}
.a-btn.on { background: var(--color-button-on-bg); }
.a-btn.off {
	color: var(--color-button-off-text);
	background: var(--color-button-off-bg);
	border: 1px solid var(--color-button-off-border);
}
.a-btn.off2 {
	color: var(--color-button-off-text);
	background: var(--color-button-off-bg);
}

.a-btn.ok {
	color: var(--color-button-ok-text);
	background: var(--color-button-ok-bg);
}
.a-btn.error {
	color: var(--color-button-error-text);
	background: var(--color-button-error-bg);
}



.a-btn svg {
	/*
	height: calc(var(--s-button-h)*3/4);
	width: calc(var(--s-button-h)*3/4);
	*/
	height: var(--s-icon-h);
}

.a-btn + .a-btn {
	/* margin-left: 0.5rem; */
}

/* Icon */
/********/
.a-icon {
	border-radius: var(--s-radius-sm);
	padding: 0;
	margin: calc(2rem/16) 0.5rem;
	height: var(--s-icon-h);
	min-width: 1.5rem;
	background: none;
	cursor: pointer;
	border: none;
}
.a-icon.small {
	height: var(--s-icon-small-h);
	min-width: 1rem;
	margin: 0 0.125rem;
}
.a-icon:focus {
	outline: 0;
}
.a-icon:focus-visible {
    box-shadow: 0 0 0 1px white,0 0 4px 4px var(--color-input-outline-active);
}
.a-icon:disabled {
	cursor: not-allowed;
}



.a-icon svg {
	height: 100%;
}

.a-icon + .a-icon {
	margin-left: 0.5rem;
}

/* Tag */
/*******/
.m-tags {
	display: flex;
	flex-flow: row wrap;
}

.a-tag {
	display: flex;
	align-items: center;
	font-size: 1rem;
	border: calc(1rem/16) solid var(--color-button-bg);
	border-radius: var(--s-radius-sm);
	color: var(--color-text);
	background: var(--color-bg);
	padding: 0 0.5rem;
	height: var(--s-tag-h);
	min-width: 1.5rem;
	cursor: pointer;
}

.a-tag.circular{
	border-radius: 1.5rem;
}
.a-tag.rectangular{
	border-radius: 0.5rem;
}

.a-tag.small{
	height: 2rem;
}
.a-tag.tiny{
	height: 1.5rem;
}

.a-tag.primary{
	color: var(--color-white);
	background: var(--color-primary);
	border: 1px solid var(--color-primary)
}

.a-tag.active {
	font-weight: bold;
}

.a-tag svg {
	width: 1.5rem;
	height: 1.5rem;
	margin-left: 0.5rem;
}

/* Toggle */
/**********/
.a-toggle {
	display: flex;
	align-items: center;
	font-size: 1rem;
	border: calc(1rem/16) solid var(--color-bg);
	border-radius: var(--s-radius-sm);
	color: var(--color-text);
	/*
	background: var(--color-bg);
	*/
	background: var(--color-button-off-bg);
	padding: 0 0.5rem;
	height: var(--s-tag-h);
	min-width: 1.5rem;
}

.a-toggle.on {
	background: var(--color-button-on-bg);
}

/* Radio */
/*********/
.a-checkbox[type="checkbox"],
.a-radio[type="radio"] {
	width: 1em;
	height: 1em;
}

/* Group for buttons, labels, etc. */
/***********************************/
.m-group {
	display: flex;
	align-items: center;
	flex-flow: row wrap;
	margin-left: -0.5rem;
}
/*
.m-group *:not(:first-child) {
*/
.m-group > * {
	margin-left: 0.5rem;
}

/* Group for buttons, labels, etc. */
/***********************************/
.m-grid {
	display: flex;
	align-items: flex-start;
	flex-flow: row nowrap;
}
.m-grid > .fill {
	flex: 1;
}

/* Clock */
/*********/
.a-clock {
	text-align: right;
	padding-right: 0.5rem;
	color: var(--color-on-surface);
	font-family: var(--title-l-font-family);
	font-size: var(--title-l-font-size);
	line-height: var(--title-l-line-height);
	font-weight: var(--title-l-font-weight);
	letter-spacing: var(--title-l-letter-spacing);
}
.a-clock p:first-child {
	font-size: 2rem !important;
	line-height: 2.5rem !important;
}
.a-clock p:last-child {
	font-size: 1rem;
	line-height: 1.5rem;
}

/* Card */
/********/
.a-card {
	position: relative;
	background: var(--color-panel-card);
	padding: 0.5rem;
	border-radius: var(--s-radius-md);
	transition: background var(--t-transition) ease-in-out;
}
/*
.a-card:nth-of-type(even) {
	background: var(--color-card-bg-active);
}
*/
.a-card.active {
	box-shadow: 0px 0px 8px #00000080;
	background: var(--color-panel-card-active) !important;
}

.a-card.fill {
	position: absolute;
	top: 0.5rem;
	bottom: 0.5rem;
	left: 0.5rem;
	right: 0.5rem;
	margin: 1rem;
	height: 100%;
}

/* Table */
/*********/
.a-table {
	width: 100%;
	max-width: 100%;
}
/*
.a-table tbody, .a-table tr {
	width: 100%;
}
*/
.a-table tr {
	display: flex;
	align-items: center;
	position: relative;
}
.a-table th, .a-table td {
	flex: 1;
	vertical-align: middle;
	padding: 0.5rem;
}
.a-table th {
	text-align: center;
}

/****/
.m-scroll, .m-table .sui-scroll {
	position: relative;
	overflow: auto;
}
.m-scroll, .m-table .sui-scroll > .wrapper {
	display: inline-block;
}
.m-scroll.sui-fill, .m-table .sui-scroll.sui-fill {
	width: 100%;
}
.m-scroll.sui-fill, .m-table .sui-scroll.sui-fill > .wrapper {
	min-width: 100%;
}

/****/
.m-table {
	display: flex;
	flex-flow: column nowrap;
	background: var(--color-list-line-a);
	position: relative;
	--m-table-padding: 0.5rem;
}
.m-table.small {
	--m-table-padding: 0.25rem;
}
.m-table table thead {
	position: sticky;
	top: 0;
}

.m-scroll .m-table {
	/*
	position: static;
	*/
}
/*
.m-scroll.fill .m-table {
	min-width: 100%;
	width: 100%;
}
*/
.m-table table {
	width: 100%;
}
.m-table .sui-inside .sui-header {
	display: flex;
	position: sticky;
	top: 0;
	flex-flow: row nowrap;
	align-items: center;
	padding: var(--m-table-padding);
	background: var(--color-header);
	width: 100%;
}
.m-table .sui-inside .sui-header > .sui-column:not(:first-child),
.m-table .sui-inside .sui-header > .sui-editable:not(:first-child) > .sui-column {
	margin-left: 0.25rem;
}
.m-table .sui-inside .sui-header .sui-column {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
}
.m-table .sui-inside .sui-header .sui-column.sortable {
	cursor: pointer;
}
.m-table .sui-inside .sui-header .sui-column > .sui-title {
	flex-grow: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	/*
	margin-left: calc(0.5rem + 1px);
	*/
}
.m-table .sui-inside .sui-header .sui-column.left { text-align: left; }
.m-table .sui-inside .sui-header .sui-column.right { text-align: right; }
.m-table .sui-inside .sui-header .sui-column.center { text-align: center; }

.m-table .sui-inside .sui-header > .sui-column.sui-editable {
	cursor: move;
}
.m-table .sui-inside .sui-header > .sui-column.sui-editable > .sui-icon {
	display: none;
}
.m-table .sui-inside .sui-header > .sui-column.sui-editable:hover > .sui-icon {
	display: block;
}
.m-table .sui-inside .sui-header > .sui-editable > .sui-divider > .sui-icon {
	border: 1px dashed black;
	margin: 0.1rem 0.25rem;
	height: calc(100% - 0.2rem);
}
.m-table .sui-inside .sui-header > .sui-editable > .sui-divider:hover {
	cursor: col-resize;
}
/*
.m-table .sui-header > .sui-editable > .sui-column > *:first-child {
	flex-grow: 1;
}
*/

.m-table > .sui-toolbar {
	display: flex;
	align-items: center;
	z-index: 10;
	position: absolute;
	top: 0;
	right: 0;
	height: 2rem;
	background: var(--color-header);
}
.m-table > .sui-toolbar-menu {
	z-index: 10;
	position: absolute;
	top: 2rem;
	right: 0;
	padding: var(--m-table-padding);
	background: var(--color-header);
	border: 1px solid black; /* FIXME */
}
.m-table > .sui-toolbar-menu > .item {
	padding: var(--m-table-padding);
}

.m-table .sui-inside .sui-row {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
}
.m-table .sui-inside .sui-row:nth-of-type(even) {
	background: var(--color-list-line-b);
}

.m-table .sui-inside .sui-row > .sui-cell {
	display: flex;
	padding: var(--m-table-padding);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.m-table .sui-inside .sui-row > .sui-cell.left { justify-content: flex-start; }
.m-table .sui-inside .sui-row > .sui-cell.right { justify-content: flex-end; }
.m-table .sui-inside .sui-row > .sui-cell.center { justify-content: center; }
.m-table .sui-inside .sui-row > .sui-cell .a-icon {
	height: 1.5rem;
	margin: 0;
}
.m-table .sui-inside .sui-row > .sui-cell:not(:first-child) {
	margin-left: 0.25rem;
}
.m-table .sui-inside .sui-row > .sui-cell.editing {
	padding: calc(var(--m-table-padding)-2px);
}
/*
.m-table .sui-inside .sui-row > .sui-cell > * {
	width: 100%;
}
*/
.m-table .sui-inside .sui-row > .sui-cell > input {
	padding: 0;
	border: 1px solid black;
}

/**********/
/* Inputs */
/**********/

/* Input */
.a-input {
	display: flex;
	padding-left: 0.25em;
	padding-right: .25rem;
	height: 2rem;
	border-radius: var(--s-radius-sm);
	border: calc(1rem/16) solid var(--color-header);
	background: var(--color-input-bg);
}

.a-input.circular{
	border-radius: 1.5rem;
}
.a-input.rectangular{
	border-radius: 0.5rem;
}

.a-input input, .a-input input:focus, .a-input input:focus-visible, input.a-input:focus-visible {
	border: none;
	background: none;
	outline: 0;
	width: 100%;
	padding: 0 0.5rem;
}


.a-input:focus-within {
    box-shadow: 0 0 0 1px white,0 0 4px 4px var(--color-input-outline-active);
	border: 0;
}

.a-input.icon svg {
	width: calc(24rem/16);
	height: calc(24rem/16);
	margin: calc(3rem/16);
}

select.a-input, select.a-input:focus-visible {
	outline: 0;
}

.a-input:has(> input[type='checkbox']) {
	background: none;
	border: none;
	padding: 0;
	align-items: center;
	gap: 0.3rem;
}

/*********/
/* Modal */
/*********/
.m-modal-wrapper {
    position: fixed;
    background: #000;
    opacity: .45;
    top: 0;
    left: 0;
    width: 100%;
    height: 1200%;
    z-index: 1000;
}

.m-modal-content {
    position: fixed;
    background-color: var(--color-bg);
    width: 100%;
    max-width: 800px;
    height: auto;
    max-height: 100%;
    top: 50%;
    left: 50%;
    padding: 15px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    overflow: auto;
    z-index: 1010;
}

.m-modal-wrapper-center {
	position: fixed;
	background: #0000005f;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 1000;
}

.m-modal-content-center{
	position: fixed;
	background-color: var(--color-modal-content-bg);
	border: 1px solid var(--color-modal-content-border);
	border-radius: 0.5rem;
	width: 100%;
	max-width: 600px;
	height: auto;
	max-height: 100%;
	top: 50%;
	left: 50%;
	padding: 15px;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	overflow: auto;
	z-index: 1010;
}

.a-title-modal{
	font-size: calc(24rem/16);
	color: var(--colot-text-title);
	font-family: var(--title-font-family);
}

.form-textarea {
	display: flex;
	width: 90%;
	height: 150px;
	align-items: center;
	gap: 10px;
	padding-left: 0.5em;
	border-radius: var(--s-radius-sm);
	border: calc(1rem/16) solid var(--color-header);
	background: var(--color-input-bg);
	resize: none;
	padding: 0;
}

.form-control {
	border-radius: var(--s-radius-sm);
	border: calc(1rem/16) solid var(--color-header);
	background: var(--color-input-bg);
}

.form-control:focus {
	outline: none;
}




/* vim: ts=4
 */

.m-auth-form .a-checkbox .a-text{
	color: var(--color-secondary) !important;
	margin-left: 0.5rem;
}


/* Text utils */
.text-ok {
	color: var(--color-text-ok);
}
.text-error {
	color: var(--color-text-reject);
}
.text-hidden {
	opacity: 0;
}

/* Padding */
.p-1 { padding: 0.5rem; }
.p-2 { padding: 1rem; }
.p-3 { padding: 2rem; }

.px-1 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-2 { padding-left: 1rem; padding-right: 1rem; }
.px-3 { padding-left: 2rem; padding-right: 2rem; }

/* Width */
.w-100 { width: 100%; }
.w-1b { width: 1rem; }
.w-2b { width: 2rem; }
.w-3b { width: 3rem; }
.w-4b { width: 4rem; }
.w-5b { width: 5rem; }
.w-6b { width: 6rem; }
.w-7b { width: 7rem; }
.w-8b { width: 8rem; }
.w-9b { width: 9rem; }
.w-10b { width: 10rem; }
.w-11b { width: 11rem; }
.w-12b { width: 12rem; }
.w-13b { width: 13rem; }
.w-14b { width: 14rem; }
.w-15b { width: 15rem; }
.w-16b { width: 16rem; }
.w-17b { width: 17rem; }
.w-18b { width: 18rem; }
.w-19b { width: 19rem; }
.w-20b { width: 20rem; }
.w-21b { width: 21rem; }
.w-22b { width: 22rem; }
.w-23b { width: 23rem; }
.w-24b { width: 24rem; }
.w-25b { width: 25rem; }
.w-26b { width: 26rem; }
.w-27b { width: 27rem; }
.w-28b { width: 28rem; }
.w-29b { width: 29rem; }
.w-30b { width: 30rem; }
.w-31b { width: 31rem; }
.w-32b { width: 32rem; }
.w-33b { width: 33rem; }
.w-34b { width: 34rem; }
.w-35b { width: 35rem; }
.w-36b { width: 36rem; }
.w-37b { width: 37rem; }
.w-38b { width: 38rem; }
.w-39b { width: 39rem; }

/* align */
.text-right { text-align: right; }
.text-center { text-align: center; }

/* position */
.m-pos-absolute { position: absolute; width: 100%; height: 100%; }
.m-pos-absolute.fill { top: 0; bottom: 0; left: 0; right: 0; }

/* flex */
.d-flex { display: flex; }
.d-flex.col { flex-direction: column; }
.d-flex.justify-start { justify-content: start; }
.d-flex.justify-end { justify-content: end; }
.d-flex.justify-center { justify-content: center; }
.d-flex.justify-space-between { justify-content: space-between; }
.d-flex.align-start { align-items: start; }
.d-flex.align-end { align-items: end; }
.d-flex.align-center { align-items: center; }
.d-flex.align-stretch { align-items: stretch; }

/* flex children */
.d-flex > .fill { flex-grow: 1 }

.d-flex.gap-1b { margin: 0 -0.5rem; }
.d-flex.gap-1b > * { margin: 0 0.5rem; }

.d-flex.col.gap-1b { margin: -0.5rem 0; }
.d-flex.col.gap-1b > * { margin: 0.5rem 0; }

.d-flex.gap-2b {
	margin: 0 -1rem;
}

.d-flex.gap-2b>* {
	margin: 0 1rem;
}

.d-flex.gap-01w{
	gap: 0.5rem;
}
.d-flex.gap-1w{
	gap: 1rem;
}
.d-flex.col.gap-1w{
	gap: 1rem;
}

.d-wrap{
	flex-wrap: wrap;
}

/* vim: ts=4
 */

/* Layout */

:root {
	--s-hdr-line: calc(3.5rem - 2rem/16);
	--s-panel-gap: 0.5rem;
	--s-radius-sm: calc(4rem/16);
	--s-radius-md: calc(10rem/16);
	--s-radius-lg: calc(16rem/16);
	--s-icon-h: 2rem;
	--s-icon-small-h: 1.5rem;
	--s-button-font-size: calc(22rem/16);
	--s-button-h: 3rem;
	--s-button-h-pad: 2rem;
	--s-button-small-font-size: 1rem;
	--s-button-small-h: 2rem;
	--s-button-small-h-pad: 1rem;
	--s-tag-h: 2.5rem;
	--s-hdr-button-h: 2.5rem;

	/* larger viewport dim */
	--s-lg-vpd: calc(120rem - 2rem);
	/* smaller viewport dim */
	--s-sm-vpd: calc(65rem - 2rem);
	--s-content-sm-w: 50rem;
	--s-content-sm-h: 42.5rem;

	--t-transition: 0.1s;

	/* calculated values */
	/* --s-hdr-size: calc(var(--s-hdr-line) * 2); */
	--s-hdr-size: 4rem;
	/*
	--s-hdr-size: calc(var(--s-hdr-line) * 2 + 4rem/16);
	*/

	/* DEBUG
	font-size: 21.33333px;
	*/
}

/*
div#app {
	width: 1080px;
	height: 1920px;
	overflow: auto;
	border: 1px solid red;
}
*/

html, body, #app, .o-container-main {
	height: 100%;
	user-select: none;
}

html > body {
	/* DEBUG
	font-size: 21.33333px;
	font-size: 1rem;
	*/
	line-height: 1.5;
	color: var(--color-text);
	overflow: hidden;
}

/* HEADER */
/* div.m-header {
	display: flex;
	flex-direction: column;
	color: var(--color-text);
}

.m-header .row {
	display: flex;
	height: var(--s-hdr-line);
	align-items: center;
	background: var(--color-header);
	padding: 0 0.5rem;
}
.m-header .row:first-child {
	margin-bottom: calc(2rem/16)
}
.m-header .row:nth-child(2) {
	margin-top: calc(2rem/16)
} */
.o-content-lg .m-header /*.m-patient-list tr.m-header*/ {
	/* height: var(--s-hdr-line);
	margin-bottom: calc(2rem/16);
	background: var(--color-header); */
}

.m-header .a-btn {
	/*
	border: none;
	background: inherit;
	*/
	/* height: var(--s-hdr-button-h); */
}
/* .m-header .a-btn svg {
	height: var(--s-icon-h);
	width: var(--s-icon-h);
}
.m-header .a-icon {
	height: var(--s-icon-h);
}

.m-header .fill {
	flex: 1;
}  */



/* CONTENT-SM */
.o-container-main, .o-container-ul, .o-container-sm-mrkt {
	display: flex;
}

.o-container-main, .o-container-ul {
	flex-direction: column;
	background-color: var(--color-surface-2);

	& .o-content-marketing{
		background-color: inherit;
	}
}

.o-content-sm, .o-content-lg {
	background: var(--color-bg);
	/* DEBUG
	border: 1px solid black;
	*/
}

.o-content-lg, .o-container-sm-mrkt, .o-content-marketing {
	flex-grow: 1;
}

.o-content-sm {
	/*
	min-width: calc(var(--s-lg-vpd) - var(--s-sm-vpd) - var(--s-hdr-size));
	min-height: calc(var(--s-lg-vpd) - var(--s-sm-vpd) - var(--s-hdr-size));
	*/
	min-width: var(--s-content-sm-w);
	min-height: var(--s-content-sm-h);
}

.o-content-marketing {
	/*
	min-width: calc(2 * var(--s-sm-vpd) - var(--s-lg-vpd) + var(--s-hdr-size));
	min-height: calc(var(--s-lg-vpd) - var(--s-sm-vpd) - var(--s-hdr-size));
	min-height: var(--s-content-sm-h);
	*/
}

.o-content-lg {
	display: flex;
	flex-direction: column;
	min-width: var(--s-sm-vpd);
	min-height: var(--s-sm-vpd);
	position: relative;
}

/**************/
/* RESPONSIVE */
/**************/
/* @media screen and (min-width: 1888px) { */
@media screen and (min-width: 118rem /*1888px*/) {
	/*
	div#app {
		width: 1920px;
		height: 1080px;
		overflow: auto;
		border: 1px solid red;
	}
	*/
	:root {
		--s-hdr-size: calc(var(--s-hdr-line) + 2rem/16);
	}
	.o-container-main {
		flex-direction: row;
		max-height: 100vh;
	}
	.o-container-sm-mrkt {
		flex-direction: column;
		width: var(--s-content-sm-w);
	}

	/*
	.o-content-sm {
		min-width: calc(var(--s-lg-vpd) - var(--s-sm-vpd) - var(--s-hdr-size));
		min-height: calc(var(--s-lg-vpd) - var(--s-sm-vpd) - var(--s-hdr-size));
	}
	*/

	.o-content-marketing {
		/*
		min-width: calc(var(--s-lg-vpd) - var(--s-sm-vpd) - var(--s-hdr-size));
		min-height: calc(2 * var(--s-sm-vpd) - var(--s-lg-vpd) - 0 * var(--s-hdr-size));
		*/
	}

	.o-contentainer-ul {
		max-height: 100vh;
	}
	.o-content-lg {
		min-width: calc(var(--s-sm-vpd) - var(--s-hdr-size));
		min-height: calc(var(--s-sm-vpd) - var(--s-hdr-size));
		max-height: 100vh;
	}
}
/* vim: ts=4
 */

/***************/
/* PatientInfo */
/***************/

/* PageList */
/************/
.m-expedition-info{
	background-color: var(--color-primary-light);
	height: 100%;
}

.m-expedition-info .page-list {
	display: flex;
	align-items: stretch;
}

.m-expedition-info .page {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	border: calc(1rem/16) solid var(--color-header);
	border-radius: var(--s-radius-md);
	margin: 0.5rem calc(4rem/16);
	padding: calc(2rem/16);
	/* height: 15.5rem; */
	height: 7.75rem;
}
.m-expedition-info .page .title {
	font-weight: bold;
	transition: font-size var(--t-transition) ease-in-out;
}
.m-expedition-info .page.active {
	justify-content: center;
	/* background: var(--color-panel-info); */
}
.m-expedition-info .page.active .title {
	font-size: calc(28rem/16);
}
/* .m-expedition-info .page .content {
	display: flex;
	align-items: center;
	flex: 1;
	width: 100%;
	height: auto;
	opacity: 1;
	transition: height var(--t-transition) ease-in-out, opacity var(--t-transition) ease-in-out, flex var(--t-transition) ease-in-out;
} */
.m-expedition-info .page.active .content {
	height: 0;
	opacity: 0;
	flex: 0;
}

.m-expedition-info .a-widget {
	width: 100%;
	display: flex;
	flex-flow: column;
	align-items: center;
}

/* Info */
/********/
.m-expedition-info .info {
	display: flex;
	/* margin: 0 calc(4rem/16) calc(4rem/16) calc(4rem/16); */
	padding: .5rem;
	width: 50rem;
	/* height: 27.5rem; */
	min-height: 27.5rem;
	/* background: var(--color-panel-info); */
	background: var(--color-white);
	width: 49rem;
	margin: auto;
	font-size: 1.5rem;
	position: relative;
}

.m-expedition-info .info .product-filters{
	font: var(--regular3);
}

.m-expedition-info .info .product-filters .a-input{
	border-radius: 1.5rem;
}

.m-expedition-info .info .product-category-filter .m-group{
	gap: .5rem;
	position: relative;
}

.m-expedition-info .info .product-category-filter .m-group .a-input{
	border-radius: 1.5rem;
}

.m-expedition-info .info .product-category-filter .m-group select {
	appearance: none;
	padding: 0 3rem 0 .75rem;

}
.m-expedition-info .info .product-category-filter .m-group .select-wrapper{
	position: relative;
}

.m-expedition-info .info .product-category-filter .m-group .select-wrapper::after {
	content: '▼';
	font-size: .8rem;
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
}

.m-expedition-info .info .m-product-quantity{
	width: 48rem;
	height: 6.5rem;
	background-color: #f2f2f7;
	margin: 1rem 0;
	padding: .5rem 1rem;
	gap: 2rem;
}

.m-expedition-info .info .m-product-quantity .a-text.qty-text{
	height: 2.5rem;
}
/* TEMP */
.m-expedition-info .info.patient{
	padding: 0;
	flex-direction: column;
}
.m-expedition-info .info.patient .patient-personal-data{
	background-color: #f0f2f5;
}
.m-expedition-info .info.patient .header{
	background-color: var(--color-primary-light);
	height: 4rem;
	padding: 0.5rem;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom: 1px var(--color-light-secondary) solid;
}

.m-expedition-info .info.patient .header .init{
	position: relative;
}

.m-expedition-info .info.patient .header .init .avatar{
	width: 3rem;
	opacity: .6;
}
.m-expedition-info .info.patient .header .init .dot{
	bottom: -.75rem;
	left: calc(50% - .25rem);

}

.m-expedition-info .info.patient .header .selected-patients{
	gap: .25rem;
}

.m-expedition-info .info.patient .header .selected-patients .avatar-container{
	position: relative;
}

.m-expedition-info .info.patient .header .selected-patients .avatar{
	width: 3rem;
	cursor: pointer;
}
.m-expedition-info .info.patient .header .selected-patients .avatar.main-avatar{
	border: solid 2px var(--color-primary);
	border-radius: 50%;
}

.m-expedition-info .info.patient .header .selected-patients .avatar.second-avatar{
	opacity: .6;
}

.m-expedition-info .info.patient .header .selected-patients .dot{
	bottom: -.75rem;
	left: calc(50% - .25rem);
}

.m-expedition-info .info.patient .header .selected-patients .badge.close{
	top: -.5rem;
	right: -.5rem;
	bottom: auto;
	cursor: pointer;
}

.m-expedition-info .info.patient .header .badge.anonim-name{
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	cursor: pointer;
}

.m-expedition-info .info.patient .header .a-button.new-patient{
	width: 3rem;
	height: 3rem;
	padding: 0;

}
.m-expedition-info .info.patient .header .a-button.new-patient .avatar{
	width: 3rem;
	opacity: .4;
	border: 2px solid var(--color-primary);
	border-radius: 50%;
}

.m-expedition-info .info.patient .header .a-button.new-patient .badge{
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.m-expedition-info .info.patient .main{
	padding: .5rem;
	gap: .5rem;
}

.m-expedition-info .info.patient .main div.a-input{
	height: 2.5rem;
	border-radius: 1.5rem;
	width: 90%;
}

.m-expedition-info .info.patient .main .a-text-input-group{
	padding: 0 .25rem 0 1rem;
	border-radius: 1.5rem;
}

.m-expedition-info .info.patient .main .a-text-input-group .m-select .m-popper{
	background-color: var(--color-lighter-secondary);
}

.m-expedition-info .info.patient .main .a-text-input-group .m-select .m-popper .popper-toggle button.a-button{
	background-color: var(--color-lighter-secondary);
	min-width: 9rem;
}

.m-expedition-info .info.patient .main .a-text-input-group .m-select .m-popper .popper-toggle button.a-button > div.vbox{
	justify-content: space-between;
}

.m-expedition-info .info.patient .main .a-text-input-group .m-select .m-popper .popper-toggle button.a-button .a-text{
	font-size: 1rem;
}

.m-expedition-info .info.patient .main .a-text-input-group .a-input{
	height: 100%;
	min-width: 20rem;
	margin:0;
	border-radius: 0;
}

.m-expedition-info .info.patient .main .a-text-input-group .a-input input{
	width: 100%;
	text-align: left;
	font: var(--regular3);
}

.m-expedition-info .info.patient .main label.form-group {
	font: var(--regular3);
}
/* azonosító megadása */
.m-expedition-info .info.patient .main .idcard .a-text-input-group{
	border-radius: .5rem;
	padding: 0;
}

.m-expedition-info .info.patient .main .idcard .a-text-input-group .m-select .m-popper .popper-toggle button.a-button {
	min-width: 7rem;
}

.m-expedition-info .info.patient .main .idcard .a-text-input-group .a-input{
	min-width: 13rem;
}


/* svg ikonok */
.m-expedition-info .info.patient .states svg{
	width: 5rem;
}
.m-expedition-info .info .footer {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	gap: 0.5rem;
}

.m-expedition-info .col-left {
	display: flex;
	flex-direction: column;
	width: 20rem;
	/*
	margin: 0.5rem calc(4rem/16);
	*/
	padding: 1rem;
}
.m-expedition-info .col-right {
	display: flex;
	flex-direction: column;
	padding: 1rem;
	width: 100%;
	position: relative;
}
.m-expedition-info fieldset {
	margin-bottom: 1rem;
}
.m-expedition-info legend {
	font-size: 1rem;
	margin-bottom: 0.5rem
}

.m-expedition-info .age {
	display: flex;
	flex-direction: column;
	font-size: 1.5rem;
}
.m-expedition-info .age label {
	display: flex;
	align-items: center;
	line-height: 2.5rem;
}
.m-expedition-info .age input {
	margin-right: 0.25rem;
}

.m-expedition-info .weight .m-group {
	font-size: 1.5rem;
}

.m-expedition-info .weight input {
	color: var(--color-text);
	background-color: var(--color-input-bg);
	width: 5rem;
}

.m-expedition-info .family {
	padding: 1rem;
	align-items: flex-end;
}
.m-expedition-info .main-avatar {
	width: 5rem;
}
.m-expedition-info .sec-avatar {
	width: 3rem;
	margin-left: 1rem;
}
.m-expedition-info .state {
	display: flex;
	flex-flow: row wrap;
	/*
	margin-top: 2rem;
	*/
	width: 100%;
	position: absolute;
	bottom: 3rem;
}

.m-expedition-info .state svg {
	width: 5rem;
	margin: 1rem 0 0 1rem;
}

/***************/
/* PatientList */
/***************/

.m-patient-list {
	color: var(--color-text);
}

.m-patient-list > .list {
	display: flex;
	flex-flow: row wrap;
	font-size: 1.5rem;
	line-height: 2.5rem;
	max-height: calc(100vh - var(--s-hdr-line));
	overflow: auto;
}
div.m-patient-list > .list > div {
	/*
	min-width: 30rem;
	*/
	width: calc(50% - 2rem);
	height: 12.5rem;
	flex-grow: 1;
	margin: 0.5rem;
}

.m-patient-list tr {
	position: relative;
	background: var(--color-panel-a);
}
.m-patient-list tr:nth-of-type(even) {
	background: var(--color-panel-b);
}
.m-patient-list tr.active {
	background: var(--color-panel-card-active) !important;
	z-index: 1;
	box-shadow: 0px 0px 8px #00000080;
}

.m-patient-list .a-card > div {
	position: absolute;
}
.m-patient-list svg.i-avatar {
	width: 5rem;
}
.m-patient-list .a-card .checked { position: absolute; /* color: var(--color-button-primary-bg); */ width: 2rem; height: 2rem; top: 4rem; left: 4.2rem; }
.m-patient-list .a-card .name { top: 0.5rem; left: 8rem; }
.m-patient-list .a-card .taj { top: 2.5rem; left: 8rem; }
.m-patient-list .a-card .address { top: 6rem; left: 0.5rem; }
.m-patient-list .a-card .email { top: 8.5rem; left: 0.5rem; font-size: 1rem; }
.m-patient-list .a-card .phone { top: 10rem; left: 0.5rem; font-size: 1rem; }


/* NEW CARD */

.m-patient-list{
	background-color: #f0f2f5;
}
.m-patient-list .a-card.m-patient-card-new {
	width: calc(50% - 2rem);
	flex-grow: 1;
	height: 14rem;
	background-color: var(--color-white);
	cursor: pointer;
	z-index: 5;
	border-radius: 0.5rem;
	justify-content: space-between;
	box-shadow: 0px 0px 2px 0px #0000005f;
	position: relative;
	padding: 0;
}

.m-patient-list .a-card.m-patient-card-new.active{
	background-color: var(--color-primary-light);
	box-shadow: 0px 0px 6px #00000080;
	z-index: 14;
	border: 2px solid var(--color-primary);
}

.m-patient-list .a-card.m-patient-card-new .m-card-header{
	height: 4rem;
	background-color: #f5fbff;
	width: 100%;
	border-radius: 0.5rem 0.5rem 0 0;
	border-bottom: solid 2px var(--color-light-secondary);
	position: relative;
	padding: .5rem;
}

.m-patient-list .a-card.m-patient-card-new.active .m-card-header{
	background-color: var(--color-neutral-2);
	border-bottom: solid 2px var(--color-primary);
}
.m-patient-list .a-card.m-patient-card-new .m-card-header .icontext{
	height: 1.6rem;
	font-size: .8rem;
}

.m-patient-list .a-card.m-patient-card-new .m-card-content{
	width: 100%;
	padding: .5rem;
}

.m-patient-list .a-card.m-patient-card-new .m-card-content .taj{
	margin-left: 10rem;
	margin-top: .5rem;
	width: fit-content;
}
.m-patient-list .a-card.m-patient-card-new .m-card-content .name{
	margin-top: 1.5rem;
	margin-bottom: .25rem;
}
.m-patient-list .a-card.m-patient-card-new .m-card-content .name .a-text{
	line-height: 2rem;
}
.m-patient-list .a-card.m-patient-card-new.active .m-card-content .name .a-text{
	color: var(--color-primary-dark);
}

.m-patient-list .a-card.m-patient-card-new .avatar-container{
	width: 5.75rem;
	height: 5.75rem;
	border-radius: 50%;
	border: solid 2px var(--color-light-secondary);
	background-color: var(--color-white);
	position: absolute;
	top: 2rem;
	left: 1rem;
	display: flex;
	justify-content: center;
	align-items: center;
}
.m-patient-list .a-card.m-patient-card-new.active .avatar-container{
	border: solid 2px var(--color-primary);
}

.m-patient-list .a-card.m-patient-card-new.active .avatar-container .icon.badge{
	right: -1.5rem;
}
.m-patient-list .a-card.m-patient-card-new .avatar-container .avatar{
	width: 5.75rem;
}
/*
.m-patient-list .header { height: var(--s-hdr-line); }
.o-content-lg .m-header {
	height: calc(var(--s-hdr-line) - 2rem/16);
	margin-bottom: calc(2rem/16);
	background: var(--color-header);
}
*/
.m-patient-list .menu {
	height: var(--s-hdr-line);
	margin-bottom: calc(2rem/16);
	padding: 0 0.75rem;
	background: var(--color-header);
	text-align: left;
}
/*
table.m-patient-list div.menu { position:absolute; }
*/

/*
table.m-patient-list .header { background: var(--color-header); }
table.m-patient-list th.menu { padding: 0; text-align: left; }
*/
table.m-patient-list th { font-size: 1rem; position: relative; }
table.m-patient-list .avatar { width: 6rem; }
table.m-patient-list .avatar .checked { position: absolute; width: 2rem; height: 2rem; top: 4rem; left: 4.2rem; }
table.m-patient-list .name { min-width: 14rem; }
table.m-patient-list .taj { min-width: 10rem; }
table.m-patient-list .address { min-width: 30rem; }

.a-patient-sens-icon { width: 2rem; }

/***********/
/* Problem */
/***********/
.m-problem-main {
	padding: 1em;
	display: flex;
	flex-flow: column;
	height: 100%;
}

.m-problem-main .problem {
	display: flex;
	flex-flow: row;
	flex-basis: 0;
	flex-grow: 1;
	margin-bottom: 1rem;
	padding: 1rem;
	background: #eee;
}

.m-problem-main .solution {
	display: flex;
	flex-flow: row;
	flex-basis: 0;
	flex-grow: 1;
}

.m-problem-main .category-list {
	flex-basis: 0;
	flex-grow: 1;
	padding: 1rem;
	background: #eee;
}
.m-problem-main .category-list .item {
	font-size: 1.5rem;
}

.m-problem-main .brand-list {
	display: flex;
	flex-flow: row wrap;
	flex-basis: 0;
	flex-grow: 1;
	margin-left: 1rem;
	padding: 1rem 1rem 1rem 0;
	background: #eee;
}
.m-problem-main .brand-list .item {
	min-width: 12rem;
	margin: 0 0 1rem 1rem;
	font-size: 1.5rem;
	line-height: 3rem;
	text-align: center;
	background: #fff;
}

.m-problem-main .title {
	font-size: 1rem;
	line-height: 2rem;
}

.m-problem-info {
	overflow: auto;
	margin-bottom: 3rem;
}

.m-problem-info .title {
	font-size: 1rem;
	line-height: 2rem;
}

.m-problem-main .col-symptom-location { flex-basis: 20%; }
.m-problem-main .col-symptom-search-col { margin-left: 1rem; flex-basis: 80%; }
.m-problem-main .col-symptom-search-col .search { width: 100%; }
.m-problem-main .col-symptom-search-row { display: flex; flex-flow: row; }
.m-problem-main .col-symptom { flex-basis: 50%; }
.m-problem-main .col-symptom-group { margin-left: 1rem; flex-basis: 50%; }
/*
.m-problem-main .col-symptom-location { flex-basis: 20%; }
.m-problem-main .col-symptom { flex-basis: 30%; }
.m-problem-main .col-symptom-ext { flex-basis: 50%; }
*/

.m-problem-main .col-symptom .symptom {
	font-size: 1.5rem;
	line-height: 2rem;
}
/* TEMPORARY: diagnostic data missing */
.m-problem-main .col-symptom .symptom.nodiag {
	color: #c77;
}
.m-problem-main .col-symptom .symptom.active {
	font-weight: bold;
}

.m-problem-main .col-symptom-group .symptom {
	font-size: 1.5rem;
	line-height: 2rem;
}

.m-eeszt-main > .list {
	display: flex;
	flex-flow: row wrap;
	max-height: calc(100vh - var(--s-hdr-line));
	overflow: auto;
}

.m-epresc-card-ph {
	position: relative;
	width: calc(50% - 2rem);
	/*
	height: 10rem;
	*/
	margin: 0.5rem;
}
div.m-epresc-card {
	position: relative;
	width: 100%;
	height: 11.5rem;
	transition: height var(--t-transition) ease-in-out;
}
div.m-epresc-card .name { font-size: 1.5rem; height: 3rem; }
div.m-epresc-card > .m-group { position: absolute; top: 0.5rem; right: 0.5rem; }
div.m-epresc-card .field { display: flex; }
div.m-epresc-card .field > label { display: block; width: 8rem; }
div.m-epresc-card .field > label > span { display: inline-block; width: 40rem; }
div.m-epresc-card .field > span { display: inline-block; }
div.m-epresc-card .field.bold > span { font-weight: bold; }

div.m-epresc-card .right-col { padding: 0.5rem; border-left: 1px solid var(--color-text); }
div.m-epresc-card .right-col .bold { font-weight: bold; }

/***************/
/* ProductList */
/***************/
.m-product-list {
	position: relative;
	color: var(--color-text);
	height: 100%;
	--s-product-card-main-h: 12.5rem;
	--s-product-card-presc-closed-h: 2rem;
	--s-product-card-presc-h: 25rem;
	background-color: #f0f2f5;
}

.m-product-list .m-header.header .atk-chips{
	padding: .25rem .75rem;
	background-color: #f0f2f5;
	font-size: .8rem;
	font-weight: 600;
	border-radius: 1.5rem;
}

.m-product-list > .list {
	line-height: 2.5rem;
	max-height: calc(100vh - var(--s-hdr-line));
	height: 100%;
	overflow: auto;
	display: flex;
	flex-flow: row wrap;
	align-content: flex-start;
	position: relative;
	gap:0.5rem;
	padding: 0 .5rem;
}
div.m-product-list .list .shade {
	position: sticky;
	height: 100%;
	width: 100%;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #000000;
	z-index: 1;
	opacity: 0;
	transition: opacity var(--t-transition) ease-in-out;
}
div.m-product-list .list .shade.active {
	z-index: 12;
	opacity: 0.3;
}
div.m-product-card-ph {
	position: relative;
	/*
	min-width: 30rem;
	*/
	width: calc(50% - 2rem);
	height: calc(var(--s-product-card-main-h) + var(--s-product-card-presc-closed-h));
	flex-grow: 1;
	/*
	flex-basis: 0;
	*/
	margin: 0.5rem;
}
div.m-product-card-ph.active {
	position: sticky;
	top: 0;
	bottom: var(--s-product-card-presc-closed-h);
	z-index: 100;
	transition: top var(--t-transition) ease-in-out, bottom var(--t-transition) ease-in-out;
}
div.m-product-card-ph.active.prescription {
	position: sticky;
	top: 0;
	bottom: calc(var(--s-product-card-presc-h) - var(--s-product-card-presc-closed-h));
	z-index: 100;
}
div.m-product-card {
	position: relative;
	/* min-width: 30rem; */
	width: 100%;
	/* height: 14.5rem; */
	height: 15.5rem;
	padding: 0;
	transition: height var(--t-transition) ease-in-out;
}

/* NEW CARD */
.m-product-new-card{
	width: calc(50% - 2rem);
	flex-grow: 1;
	height: 14rem;
	background-color: var(--color-white);
	cursor: pointer;
	z-index: 5;
	border-radius: 0.5rem;
	justify-content: space-between;
	box-shadow: 0px 0px 2px 0px #0000005f;
	position: relative;
	padding: 0;
	/* margin-left: .5rem; */
}

.m-product-new-card.active{
	box-shadow: 0px 0px 6px #00000080;
	z-index: 14;
	border: 2px solid var(--color-primary);
}

.m-product-new-card.active.prescription .m-product-card {
	height: 36.5rem;
	z-index: 100;
}

.m-product-new-card .m-card-header{
	height: 3.5rem;
	background-color: #f5fbff;
	width: 100%;
	border-radius: 0.5rem 0.5rem 0 0;
	border-bottom: solid 2px var(--color-light-secondary);
	position: relative;
	padding: .5rem;
}

.m-product-new-card.active .m-card-header{
	background-color: var(--color-neutral-2);
	border-bottom: solid 2px var(--color-primary);
}

.m-product-new-card .m-card-content{
	width: 100%;
	padding: .5rem;
	position: relative;
}

.m-product-new-card .m-card-content .product-name{
	max-height: 2rem;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	display: inline-block;
	width: 90%;
}

.m-product-new-card .m-card-content .avatar-container{
	width: 4rem;
	position: absolute;
	top:-12px;
	right: 8px;
	z-index: 20;
}

.m-product-new-card .m-card-content .avatar-container .icon.badge{
	right: 0px;
	bottom: -6px;
	border-radius: 50% !important;
}

.m-product-new-card .m-card-content .avatar-container .icon.badge svg{
	border-radius: 50%;
}

.m-product-new-card .m-card-content .modified-price{
	text-decoration: line-through;
}

.m-product-new-card .m-card-content .cart{
	background-color:#f2f2f7;
	padding: .5rem .5rem .5rem 1.5rem;
	width: 22rem;
	position: relative;
}

.m-product-new-card .m-card-content .cart .cart-icon {
	position: absolute;
	left: -15px;
	bottom: -15px;
}

/* Info card */
.m-product-list .m-product-info-card {
	position: absolute;
	/* top: calc(var(--s-hdr-line) + 0.5rem); */
	top: 0.5rem;
	bottom: 0.5rem;
	left: 0.5rem;
	right: 0.5rem;
	height: 100%;
	background: #fff;
}

.m-product-list .m-product-info-card > div.btns-container{
	gap: 0.5rem
}

/* Prescription card */
div.m-prescription-card {
	position: absolute;
	/* top: calc(var(--s-hdr-line) + 0.5rem); */
	top: 0.5rem;
	z-index: 100;
	width: calc(50% - 1rem);
	height: 25rem;
	background-color: var(--color-panel-result);
	border-radius: var(--s-radius-md);
}
div.m-prescription-card.left {
	left: 0.5rem;
}
div.m-prescription-card.right {
	right: 1rem;
}

/* Replacements list */
div.m-replacements {
	position: absolute;
	/* top: calc(var(--s-hdr-line) + 0.5rem); */
	top: 0;
	z-index: 100;
	width: calc(50% - 1rem);
	height: 100%;
	overflow: auto;
	display: flex;
	flex-flow: row wrap;
	align-content: flex-start;
}
div.m-replacements.left {
	left: 0.5rem;
}
div.m-replacements.right {
	right: 1rem;
}
div.m-replacements div.m-product-card-ph {
	position: relative;
	width: calc(100%);
}

.m-product-list tr {
	position: relative;
	background: var(--color-panel-a);
}
.m-product-list tr:nth-of-type(even) {
	background: var(--color-panel-b);
}
.m-product-list tr.active {
	background: var(--color-panel-card-active) !important;
	z-index: 20;
	box-shadow: 0px 0px 8px #00000080;
}
.m-product-list .main-panel .left-side {
	flex: 3;
}

.m-product-list .main-panel > div {
	/* position: absolute; */
}

.m-product-list .main-panel .inf-icon-cont {
	align-self: flex-start;
	margin: 0.5rem 0;
}

.m-product-list .main-panel .product-name {
	max-height: 2rem;
	overflow: hidden;
	align-items: flex-start;
}
.m-product-list .main-panel .left-side .badge{
	border-radius: 50%;
	right: -1.2rem;
	bottom: -1.25rem;
	font-size: 1.2rem;
	border: 3px solid var(--color-white);
}

.m-product-list .main-panel .qty-container {
	gap: 0.25rem;
}
.m-product-list .main-panel .qty-container .icontext {
	font: var(--buttontext2);
}
.m-product-list .main-panel .qty-input {
	/* margin: 0.5rem 0; */
}
.m-product-list .main-panel .qty-input .a-input {
	width: 4rem;
	padding: 0;
	height: 2.5rem;
}
.m-product-list .main-panel .qty-input .a-input input{
	width: 100%;
	color: var(--color-secondary);
	text-align: center;
	font: var(--buttontext2);
}
.m-product-list .main-panel .right-side {
	flex: 1;
	/* min-width: 9rem; */
	gap: 0.5rem;
	/* width: 9.5rem !important; */
	/* flex-basis: 11rem; */
}
.m-product-list .main-panel .right-side .user-info {
	padding: 0.5rem 0;
}
.m-product-list .main-panel .right-side .user-info .avatar{
	position: relative;
	top: 0;
	margin-right: 1rem;
}
.m-product-list .main-panel .right-side .user-info .avatar .icon.badge {
	right: -1rem;
	bottom: -1.25rem;
	cursor: pointer;
}
.m-product-list .main-panel .right-side .total-price{
	line-height: 3rem;
}

.m-product-list .main-panel .right-side .m-popper .popper-toggle span {
	width: 100%;
}
/*
.m-product-list svg.i-avatar {
	width: 5rem;
}
*/
.m-product-list .a-card .main-panel .storage .qty-input input[type=number] {
	position: relative;
}
.m-product-list .a-card .main-panel .storage .qty-input input[type=number]::-webkit-inner-spin-button,
.m-product-list .a-card .main-panel .storage .qty-input input[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	/* cursor: pointer;
	margin: 0;
	height: 1.8rem;
	width: 2rem;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%); */
}

.m-product-list .m-product-card .name { top: 1rem; left: 4rem; font-size: 1.5rem; }
.m-product-list .m-product-card .image { bottom: 1rem; right: 1rem; width: 10rem; height: 7.5rem; background: #fff; }
.m-product-list .m-product-card .avatar { top: 0.5rem; left: 0.5rem; width: 3rem; height: 3rem; }
.m-product-list .m-product-card .i-avatar { height: 100%; }
.m-product-list .m-product-card .icons { top: 0.5rem; right: 0.5rem; }
.m-product-list .m-product-card .qty { position: absolute; top: 5rem; left: 1rem; width: 8rem; }
.m-product-list .m-product-card .add-to-cart { position: absolute; top: 8rem; left: 1rem; }
.m-product-list .m-product-card .quick-cart-group { position: absolute; top: 5rem; left: 1rem; }
.m-product-list .m-product-card .price-label { top: 8rem; left: 1rem; transition: left var(--t-transition) ease-in-out; }
.m-product-list .m-product-card .price { top: 9.5rem; left: 1rem; font-size: 1.5rem; transition: left var(--t-transition) ease-in-out; }

.m-product-list tr .cart { display: flex; flex-flow: row; }
.m-product-list tr button { height: 2rem; margin-left: 1rem; }
.m-product-list td.price { text-align: right; }

.m-product-list > .list > .m-product-card-ph.active .price-label { left: 12rem; }
.m-product-list > .list > .m-product-card-ph.active .price { left: 12rem; }

.m-product-list .menu { height: var(--s-hdr-line); padding: 0 0.75rem; text-align: left; }
/*
table.m-product-list div.menu { position:absolute; }
*/

/*
table.m-product-list .header { background: var(--color-header); }
table.m-product-list th.menu { padding: 0; text-align: left; }
*/
table.m-product-list th { font-size: 1rem; position: relative; }
table.m-product-list .avatar { width: 6rem; }
table.m-product-list .avatar .checked { position: absolute; color: var(--color-button-primary-bg); width: 2rem; height: 2rem; top: 4rem; left: 4.2rem; }
table.m-product-list .name { min-width: 14rem; }
table.m-product-list .taj { min-width: 10rem; }
table.m-product-list .address { min-width: 30rem; }

.m-product-card .main-panel {
	width: 100%;
	position: relative;
	/* height: var(--s-product-card-main-h); */
	height: 100%;
	z-index: 10;
	/* background: var(--color-panel-card); */
	background: #f5fbff;
	border-radius: var(--s-radius-md);
	/* padding: 1rem; */
	padding: 0.5rem;
	transition: background var(--t-transition) ease-in-out;
	box-shadow: 0px 0px 2px 0px #00000030;
}

.m-product-card .presc-panel {
	background-color: var(--color-panel-result);
	border-radius: var(--s-radius-md);
	height: 3.5rem;
	position: absolute;
	top: 11.5rem;
	left: 0;
	width: 100%;
	z-index: 5;
	overflow: hidden;
	transition: height var(--t-transition) ease-in-out;
}

.m-product-card-ph.active .main-panel {
	z-index: 20;
	background: var(--color-panel-card-active) !important;
}

.m-product-card-ph.prescription.active .presc-panel {
	height: 25rem;
	height: var(--s-product-card-presc-h);
	z-index: 15;
}

.m-product-list .presc-panel > * {
	position: absolute;
}

/* obsolete
.m-product-card .presc-panel .label { top: 1rem; left: 1rem; width: 100%; }

.m-product-card .presc-tp-label { top: 2rem; left: 1rem; }
.m-product-card .presc-tp { top: 2rem; right: 1rem; width: 24rem; }
.m-product-card .presc-qty-label { top: 4rem; left: 1rem; }
.m-product-card .presc-qty { top: 6rem; left: 1rem; width: 10rem; }
.m-product-card .presc-no-label { top: 4rem; right: 1rem; width: 16rem; }
.m-product-card .presc-no { top: 6rem; right: 1rem; width: 16rem; }
.m-product-card .presc-pretense-label { top: 8rem; left: 1rem; }
.m-product-card .presc-pretense-list { top: 10rem; left: 1rem; width: calc(100% - 2rem); }

.m-product-card .presc-pretense-list .a-btn { height: 2rem; text-align: center; flex-grow: 1; flex-basis: 0; }
.m-product-card .presc-pretense-list .a-btn * { text-align: center; width: 100%; }

.m-product-card .presc-taj-label { top: 12rem; left: 1rem; }
.m-product-card .presc-taj { top: 14rem; left: 1rem; width: 12rem; }
.m-product-card .presc-bno-label { top: 12rem; right: 1rem; width: 12rem; }
.m-product-card .presc-bno { top: 14rem; right: 1rem; width: 12rem; }
.m-product-card .presc-spec-seal-label { top: 16rem; left: 1rem; }
.m-product-card .presc-spec-seal { top: 18rem; left: 1rem; width: 12rem; }
.m-product-card .presc-rdate-label { top: 16rem; right: 1rem; width: 12rem; }
.m-product-card .presc-rdate { top: 18rem; right: 1rem; width: 12rem; }
.m-product-card .presc-seal-label { top: 20rem; left: 1rem; }
.m-product-card .presc-seal { top: 22rem; left: 1rem; width: 12rem; }
.m-product-card .presc-date-label { top: 20rem; right: 1rem; width: 12rem; }
.m-product-card .presc-date { top: 22rem; right: 1rem; width: 12rem; }
*/

/* new */
.m-prescription-card .panel .label { top: 1rem; left: 1rem; width: 100%; }

.m-prescription-card .tp-label { top: 2rem; left: 1rem; }
.m-prescription-card .tp { top: 2rem; right: 1rem; width: 24rem; }
.m-prescription-card .qty-label { top: 4rem; left: 1rem; }
.m-prescription-card .qty { top: 6rem; left: 1rem; width: 10rem; }
.m-prescription-card .no-label { top: 4rem; right: 1rem; width: 16rem; }
.m-prescription-card .no { top: 6rem; right: 1rem; width: 16rem; }
.m-prescription-card .pretense-label { top: 8rem; left: 1rem; }
.m-prescription-card .pretense-list { top: 10rem; left: 1rem; width: calc(100% - 2rem); }

.m-prescription-card .pretense-list .a-btn { height: 2rem; text-align: center; flex-grow: 1; flex-basis: 0; }
.m-prescription-card .pretense-list .a-btn * { text-align: center; width: 100%; }

.m-prescription-card .taj-label { top: 12rem; left: 1rem; }
.m-prescription-card .taj { top: 14rem; left: 1rem; width: 12rem; }
.m-prescription-card .bno-label { top: 12rem; right: 1rem; width: 12rem; }
.m-prescription-card .bno { top: 14rem; right: 1rem; width: 12rem; }
.m-prescription-card .spec-seal-label { top: 16rem; left: 1rem; }
.m-prescription-card .spec-seal { top: 18rem; left: 1rem; width: 12rem; }
.m-prescription-card .rdate-label { top: 16rem; right: 1rem; width: 12rem; }
.m-prescription-card .rdate { top: 18rem; right: 1rem; width: 12rem; }
.m-prescription-card .seal-label { top: 20rem; left: 1rem; }
.m-prescription-card .seal { top: 22rem; left: 1rem; width: 12rem; }
.m-prescription-card .date-label { top: 20rem; right: 1rem; width: 12rem; }
.m-prescription-card .date { top: 22rem; right: 1rem; width: 12rem; }

/* vim: ts=4
 */

/*****************/
/* Marketing box */
/*****************/
.o-content-marketing {
	display: flex;
	flex-flow: column;
	margin: calc(4rem/16);
	align-content: stretch;
	/*
	align-items: stretch;
	*/
}

.o-content-marketing .content {
	flex-grow: 1;
	border: calc(1rem/16) solid var(--color-header);
	border-radius: var(--shape-md);
	min-width: 16rem;
	height: 6.5rem;
	margin: calc(4rem/16);
	/* padding: calc(2rem/16); */
	overflow: hidden;
}

@media screen and (min-width: 118rem /*1888px*/) {
	.o-content-marketing {
		flex-flow: row wrap;
		align-content: flex-start;
	}
}

/* vim: ts=4
 */

.ct-chart-line-month-sales-container {
    /* background-color: white; */
    /* width: 90%; */
    /* border: 1px #C5D8FF solid; */
    padding: 0.5rem 0.25rem;
    border-radius: 1.5rem;
}
.color-legend {
    /* background-color: var(--color-white); */
    width: fit-content;
    height: fit-content;

}
.ct-chart-line-month-sales-container .color-legend {
    height: 30px;
}


.color-legend .tick text {
    fill: #635F5D;
}
.ct-chart-line-month-sales {

}

.ct-chart-bar-week-sales
{
    /* background-color: white; */
    /* width: 70%; */
    /* border: 1px #C5D8FF solid; */
}
.ct-chart-line-month-sales-data-range{
    width: 100%;
    /* background-color: white; */
    /* border: 1px #C5D8FF solid; */
}

.ct-chart-line-month-sales .ct-point,
.ct-chart-line-month-sales-data-range .ct-point{
    stroke-width: 0;
}

.ct-chart-line-month-sales .ct-line,
.ct-chart-line-month-sales-data-range .ct-line {
    stroke-width: 2px;
    fill: transparent;
}

.ct-double-octave:after,
.ct-major-eleventh:after,
.ct-major-second:after,
.ct-major-seventh:after,
.ct-major-sixth:after,
.ct-major-tenth:after,
.ct-major-third:after,
.ct-major-twelfth:after,
.ct-minor-second:after,
.ct-minor-seventh:after,
.ct-minor-sixth:after,
.ct-minor-third:after,
.ct-octave:after,
.ct-perfect-fifth:after,
.ct-perfect-fourth:after,
.ct-square:after {
    content: "";
    clear: both
}

.ct-label {
    fill: rgba(0, 0, 0, .4);
    color: rgba(0, 0, 0, .4);
    font-size: 1rem;
    line-height: 1
}

.ct-grid-background,
.ct-line {
    fill: white
}

.ct-chart-bar .ct-label,
.ct-chart-line .ct-label {
    display: block;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

}

.ct-chart-donut .ct-label,
.ct-chart-pie .ct-label {
    dominant-baseline: central
}

.ct-label.ct-horizontal.ct-start {
    -webkit-box-align: flex-end;
    -webkit-align-items: flex-end;
    -ms-flex-align: flex-end;
    align-items: flex-end;
    -webkit-box-pack: flex-start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: flex-start;
    justify-content: flex-start;
    text-align: left;
    text-anchor: start
}

.ct-label.ct-horizontal.ct-end {
    -webkit-box-align: flex-start;
    -webkit-align-items: flex-start;
    -ms-flex-align: flex-start;
    align-items: flex-start;
    -webkit-box-pack: flex-start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: flex-start;
    justify-content: flex-start;
    text-align: left;
    text-anchor: start
}

.ct-label.ct-vertical.ct-start {
    -webkit-box-align: flex-end;
    -webkit-align-items: flex-end;
    -ms-flex-align: flex-end;
    align-items: flex-end;
    -webkit-box-pack: flex-end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: flex-end;
    justify-content: flex-end;
    text-align: right;
    text-anchor: end
}

.ct-label.ct-vertical.ct-end {
    -webkit-box-align: flex-end;
    -webkit-align-items: flex-end;
    -ms-flex-align: flex-end;
    align-items: flex-end;
    -webkit-box-pack: flex-start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: flex-start;
    justify-content: flex-start;
    text-align: left;
    text-anchor: start
}

.ct-chart-bar .ct-label.ct-horizontal.ct-start {
    -webkit-box-align: flex-end;
    -webkit-align-items: flex-end;
    -ms-flex-align: flex-end;
    align-items: flex-end;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    text-anchor: start
}

.ct-chart-bar .ct-label.ct-horizontal.ct-end {
    -webkit-box-align: flex-start;
    -webkit-align-items: flex-start;
    -ms-flex-align: flex-start;
    align-items: flex-start;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    text-anchor: start
}

.ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-start {
    -webkit-box-align: flex-end;
    -webkit-align-items: flex-end;
    -ms-flex-align: flex-end;
    align-items: flex-end;
    -webkit-box-pack: flex-start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: flex-start;
    justify-content: flex-start;
    text-align: left;
    text-anchor: start
}

.ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-end {
    -webkit-box-align: flex-start;
    -webkit-align-items: flex-start;
    -ms-flex-align: flex-start;
    align-items: flex-start;
    -webkit-box-pack: flex-start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: flex-start;
    justify-content: flex-start;
    text-align: left;
    text-anchor: start
}

.ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-start {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: flex-end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: flex-end;
    justify-content: flex-end;
    text-align: right;
    text-anchor: end
}

.ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-end {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: flex-start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: flex-start;
    justify-content: flex-start;
    text-align: left;
    text-anchor: end
}

.ct-grid {
    stroke: rgba(0, 0, 0, .2);
    stroke-width: 1px;
    stroke-dasharray: 2px
}

.ct-point {
    stroke-width: 10px;
    stroke-linecap: round
}

.ct-line {
    stroke-width: 4px
}

.ct-area {
    stroke: none;
    fill-opacity: .1
}

.ct-bar {
    fill: none;
    stroke-width: 20px
}

.ct-slice-donut {
    fill: none;
    stroke-width: 60px
}

.ct-series-a .ct-bar,
.ct-series-a .ct-line,
.ct-series-a .ct-point,
.ct-series-a .ct-slice-donut {
    stroke: #1F78B4
}

.ct-series-a .ct-area,
.ct-series-a .ct-slice-donut-solid,
.ct-series-a .ct-slice-pie {
    fill: #1F78B4
}

.ct-series-b .ct-bar,
.ct-series-b .ct-line,
.ct-series-b .ct-point,
.ct-series-b .ct-slice-donut {
    stroke: #f05b4f
}

.ct-series-b .ct-area,
.ct-series-b .ct-slice-donut-solid,
.ct-series-b .ct-slice-pie {
    fill: #f05b4f
}

.ct-series-c .ct-bar,
.ct-series-c .ct-line,
.ct-series-c .ct-point,
.ct-series-c .ct-slice-donut {
    stroke: #f4c63d
}

.ct-series-c .ct-area,
.ct-series-c .ct-slice-donut-solid,
.ct-series-c .ct-slice-pie {
    fill: #f4c63d
}

.ct-series-d .ct-bar,
.ct-series-d .ct-line,
.ct-series-d .ct-point,
.ct-series-d .ct-slice-donut {
    stroke: #d17905
}

.ct-series-d .ct-area,
.ct-series-d .ct-slice-donut-solid,
.ct-series-d .ct-slice-pie {
    fill: #d17905
}

.ct-series-e .ct-bar,
.ct-series-e .ct-line,
.ct-series-e .ct-point,
.ct-series-e .ct-slice-donut {
    stroke: #453d3f
}

.ct-series-e .ct-area,
.ct-series-e .ct-slice-donut-solid,
.ct-series-e .ct-slice-pie {
    fill: #453d3f
}

.ct-series-f .ct-bar,
.ct-series-f .ct-line,
.ct-series-f .ct-point,
.ct-series-f .ct-slice-donut {
    stroke: #59922b
}

.ct-series-f .ct-area,
.ct-series-f .ct-slice-donut-solid,
.ct-series-f .ct-slice-pie {
    fill: #59922b
}

.ct-series-g .ct-bar,
.ct-series-g .ct-line,
.ct-series-g .ct-point,
.ct-series-g .ct-slice-donut {
    stroke: #0544d3
}

.ct-series-g .ct-area,
.ct-series-g .ct-slice-donut-solid,
.ct-series-g .ct-slice-pie {
    fill: #0544d3
}

.ct-series-h .ct-bar,
.ct-series-h .ct-line,
.ct-series-h .ct-point,
.ct-series-h .ct-slice-donut {
    stroke: #6b0392
}

.ct-series-h .ct-area,
.ct-series-h .ct-slice-donut-solid,
.ct-series-h .ct-slice-pie {
    fill: #6b0392
}

.ct-series-i .ct-bar,
.ct-series-i .ct-line,
.ct-series-i .ct-point,
.ct-series-i .ct-slice-donut {
    stroke: #f05b4f
}

.ct-series-i .ct-area,
.ct-series-i .ct-slice-donut-solid,
.ct-series-i .ct-slice-pie {
    fill: #f05b4f
}

.ct-series-j .ct-bar,
.ct-series-j .ct-line,
.ct-series-j .ct-point,
.ct-series-j .ct-slice-donut {
    stroke: #dda458
}

.ct-series-j .ct-area,
.ct-series-j .ct-slice-donut-solid,
.ct-series-j .ct-slice-pie {
    fill: #dda458
}

.ct-series-k .ct-bar,
.ct-series-k .ct-line,
.ct-series-k .ct-point,
.ct-series-k .ct-slice-donut {
    stroke: #eacf7d
}

.ct-series-k .ct-area,
.ct-series-k .ct-slice-donut-solid,
.ct-series-k .ct-slice-pie {
    fill: #eacf7d
}

.ct-series-l .ct-bar,
.ct-series-l .ct-line,
.ct-series-l .ct-point,
.ct-series-l .ct-slice-donut {
    stroke: #86797d
}

.ct-series-l .ct-area,
.ct-series-l .ct-slice-donut-solid,
.ct-series-l .ct-slice-pie {
    fill: #86797d
}

.ct-series-m .ct-bar,
.ct-series-m .ct-line,
.ct-series-m .ct-point,
.ct-series-m .ct-slice-donut {
    stroke: #b2c326
}

.ct-series-m .ct-area,
.ct-series-m .ct-slice-donut-solid,
.ct-series-m .ct-slice-pie {
    fill: #b2c326
}

.ct-series-n .ct-bar,
.ct-series-n .ct-line,
.ct-series-n .ct-point,
.ct-series-n .ct-slice-donut {
    stroke: #6188e2
}

.ct-series-n .ct-area,
.ct-series-n .ct-slice-donut-solid,
.ct-series-n .ct-slice-pie {
    fill: #6188e2
}

.ct-series-o .ct-bar,
.ct-series-o .ct-line,
.ct-series-o .ct-point,
.ct-series-o .ct-slice-donut {
    stroke: #a748ca
}

.ct-series-o .ct-area,
.ct-series-o .ct-slice-donut-solid,
.ct-series-o .ct-slice-pie {
    fill: #a748ca
}

.ct-square {
    display: block;
    position: relative;
    width: 100%
}

.ct-square:before {
    display: block;
    float: left;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: 100%
}

.ct-square:after {
    display: table
}

.ct-square>svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.ct-minor-second {
    display: block;
    position: relative;
    width: 100%
}

.ct-minor-second:before {
    display: block;
    float: left;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: 93.75%
}

.ct-minor-second:after {
    display: table
}

.ct-minor-second>svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.ct-major-second {
    display: block;
    position: relative;
    width: 100%
}

.ct-major-second:before {
    display: block;
    float: left;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: 88.8888888889%
}

.ct-major-second:after {
    display: table
}

.ct-major-second>svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.ct-minor-third {
    display: block;
    position: relative;
    width: 100%
}

.ct-minor-third:before {
    display: block;
    float: left;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: 83.3333333333%
}

.ct-minor-third:after {
    display: table
}

.ct-minor-third>svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.ct-major-third {
    display: block;
    position: relative;
    width: 100%
}

.ct-major-third:before {
    display: block;
    float: left;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: 80%
}

.ct-major-third:after {
    display: table
}

.ct-major-third>svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.ct-perfect-fourth {
    display: block;
    position: relative;
    width: 100%
}

.ct-perfect-fourth:before {
    display: block;
    float: left;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: 75%
}

.ct-perfect-fourth:after {
    display: table
}

.ct-perfect-fourth>svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.ct-perfect-fifth {
    display: block;
    position: relative;
    width: 100%
}

.ct-perfect-fifth:before {
    display: block;
    float: left;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: 66.6666666667%
}

.ct-perfect-fifth:after {
    display: table
}

.ct-perfect-fifth>svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.ct-minor-sixth {
    display: block;
    position: relative;
    width: 100%
}

.ct-minor-sixth:before {
    display: block;
    float: left;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: 62.5%
}

.ct-minor-sixth:after {
    display: table
}

.ct-minor-sixth>svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.ct-golden-section {
    display: block;
    position: relative;
    width: 100%
}

.ct-golden-section:before {
    display: block;
    float: left;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: 61.804697157%
}

.ct-golden-section:after {
    content: "";
    display: table;
    clear: both
}

.ct-golden-section>svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.ct-major-sixth {
    display: block;
    position: relative;
    width: 100%
}

.ct-major-sixth:before {
    display: block;
    float: left;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: 60%
}

.ct-major-sixth:after {
    display: table
}

.ct-major-sixth>svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.ct-minor-seventh {
    display: block;
    position: relative;
    width: 100%
}

.ct-minor-seventh:before {
    display: block;
    float: left;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: 56.25%
}

.ct-minor-seventh:after {
    display: table
}

.ct-minor-seventh>svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.ct-major-seventh {
    display: block;
    position: relative;
    width: 100%
}

.ct-major-seventh:before {
    display: block;
    float: left;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: 53.3333333333%
}

.ct-major-seventh:after {
    display: table
}

.ct-major-seventh>svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.ct-octave {
    display: block;
    position: relative;
    width: 100%
}

.ct-octave:before {
    display: block;
    float: left;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: 50%
}

.ct-octave:after {
    display: table
}

.ct-octave>svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.ct-major-tenth {
    display: block;
    position: relative;
    width: 100%
}

.ct-major-tenth:before {
    display: block;
    float: left;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: 40%
}

.ct-major-tenth:after {
    display: table
}

.ct-major-tenth>svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.ct-major-eleventh {
    display: block;
    position: relative;
    width: 100%
}

.ct-major-eleventh:before {
    display: block;
    float: left;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: 37.5%
}

.ct-major-eleventh:after {
    display: table
}

.ct-major-eleventh>svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.ct-major-twelfth {
    display: block;
    position: relative;
    width: 100%
}

.ct-major-twelfth:before {
    display: block;
    float: left;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: 33.3333333333%
}

.ct-major-twelfth:after {
    display: table
}

.ct-major-twelfth>svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.ct-double-octave {
    display: block;
    position: relative;
    width: 100%
}

.ct-double-octave:before {
    display: block;
    float: left;
    content: "";
    width: 0;
    height: 0;
    padding-bottom: 25%
}

.ct-double-octave:after {
    display: table
}

.ct-double-octave>svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.magistral-registration-info{
	height: 44.25rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background-color: var(--color-primary-light);
	padding-bottom: 0.5rem;
}

.magistral-registration-info .info{
	height: 100%;

	.m-table.ingredient-table {
			max-width: 50rem;
			max-height: 24.5rem;
			height: 100%;
			background: var(--color-surface-2);

			.sui-scroll.sui-fill {
				height: 100%;
			}

			>.sui-toolbar {
				right: 1.5rem;
				top: .25rem;
				background-color: transparent;
				display: none;
			}

			& .sui-inside {
				& .sui-header {
					background-color: var(--color-surface-1);
					color: var(--color-on-surface-variant);
				}

				& .sui-row {
					height: 3rem;
					border-bottom: solid 2px var(--color-surface-1);
					color: var(--color-on-surface-variant);
					color: var(--color-on-surface);

					&:nth-of-type(even) {
						background-color: var(--color-surface-2);
					}

					&:nth-of-type(odd) {
						background-color: var(--color-surface-2);
					}

					&.selected {
						background-color: var(--color-surface-4);
						box-shadow: var(--elevation-2);
						cursor: pointer;
					}
				}
			}
		}
}


.material-main{
	background-color: #f0f2f5;
	height: 100%;
}

/* Material Card List */
.material-list .list{
	display: flex;
	flex-flow: row wrap;
	font-size: 1.5rem;
	line-height: 2.5rem;
	max-height: calc(100vh - var(--s-hdr-line));
	height: 100%;
	overflow: auto;
	padding: var(--spacing-xs);
	gap: var(--spacing-xs);

	/* Material Card */
	& .material-card {
		width: calc(50% - 2rem);
		flex-grow: 1;
		height: 14rem;
		background-color: var(--color-surface-2);
		cursor: pointer;
		z-index: 5;
		border-radius: 0.5rem;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		position: relative;
		padding: var(--spacing-sm);
		border: 1px solid var(--color-outline-variant);
		color: var(--color-on-surface);

		&.active{
			background-color: var(--color-surface-3);
			box-shadow: var(--elevation-2);
			z-index: 14;
			border: 2px solid var(--color-primary);
		}
	}
}


/* Similar Magistral Recipe Card */
.similar-magistral-recipe-card{
	background-color: var(--color-surface-3);
	cursor: pointer;
	height: 100%;
	border: solid 1px var(--color-outline-variant);
	overflow: hidden;
	border-radius: var(--shape-md);

	&.active{
		background-color: var(--color-secondary-container);
	}
}

.insurance-main{
    .m-table.data-table-basic.retaxa{
        & .sui-inside {
            & .sui-row{
                cursor: pointer;
                &.selected{
                    background-color: transparent;
                    box-shadow: none;
                }
                &.active{
                    background-color: var(--color-secondary-container);
                    box-shadow: var(--elevation-2);
                }
            }
        }
    }

}

.insurance-info{
    .settlement-info-all{
        & .c-filter-chip-group.status{
            & .c-filter-chip{
                min-width: 246px;
            }
        }
    }
}

/* Segment */
.c-segment{
	font-family: var(--label-l-font-family);
	font-size: var(--label-l-font-size);
	line-height: var(--label-l-line-height);
	font-weight: var(--label-l-font-weight);
	letter-spacing: var(--label-l-letter-spacing);
	border: 1px solid var(--color-outline);
	color: var(--color-on-surface);
	height: 2.5rem;
	cursor: pointer;

	&:has(input[type="checkbox"]:disabled) {
		opacity: var(--opacity-disabled);
		cursor: not-allowed;
	}

	& input[type="checkbox"]:disabled {
		cursor: not-allowed;
	}

	& label {
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: inherit;
		width: 100%;
		height: 100%;
		padding-inline: var(--spacing-sm);
	}

	& label input{
		-webkit-appearance: none;
		appearance: none;
		cursor: pointer;
	}

	&.filter.start{
		border-radius: var(--shape-full) var(--shape-none) var(--shape-none) var(--shape-full);
	}
	&.filter.middle, &.entry.middle{
		border-radius: var(--shape-none);
	}

	&.filter.end{
		border-radius: var(--shape-none) var(--shape-full) var(--shape-full) var(--shape-none);
	}
	&.entry.start {
		border-radius: var(--shape-sm) var(--shape-none) var(--shape-none) var(--shape-sm);
	}
	&.entry.end {
		border-radius: var(--shape-none) var(--shape-sm) var(--shape-sm) var(--shape-none);
	}
}

.c-segment:has(label input[type=checkbox]:checked) {
	background-color: var(--color-secondary-container);
	color: var(--color-on-secondary-container);
}

/* Segment with Select */
.c-segment:has(.c-select){
	padding-left: var(--spacing-sm);
	font-family: var(--label-l-font-family);
	font-size: var(--label-l-font-size);
	line-height: var(--label-l-line-height);
	font-weight: var(--label-l-font-weight);
	letter-spacing: var(--label-l-letter-spacing);
	cursor: pointer;


	& label{
		padding-inline: 0;
	}

	& .c-select .c-popper {
		& .popper-toggle .select-message-container .select-container{
			background-color: transparent;
			& .value-container span{
				/* margin: auto; */
				font-family: var(--label-l-font-family);
				font-size: var(--label-l-font-size);
				line-height: var(--label-l-line-height);
				font-weight: var(--label-l-font-weight);
				letter-spacing: var(--label-l-letter-spacing);
			}
		}
		& .popper-opts{
			font-family: var(--label-l-font-family);
			font-size: var(--label-l-font-size);
			line-height: var(--label-l-line-height);
			/* font-weight: var(--label-l-font-weight); */
			letter-spacing: var(--label-l-letter-spacing);
			border-radius: var(--shape-lg);
		}
	}
}

.c-filter-chip{
	font-family: var(--label-l-font-family);
	font-size: var(--label-l-font-size);
	line-height: var(--label-l-line-height);
	font-weight: var(--label-l-font-weight);
	letter-spacing: var(--label-l-letter-spacing);
	color: var(--color-on-surface-variant);
	border-radius: var(--shape-full);
	border: 1px solid var(--color-outline-variant);
	height: 2rem;
	cursor: pointer;

	&.custom-filter-chip{
		height: auto;
	}

	&.entry{
		border-radius: var(--shape-sm);
	}

	& label {
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: inherit;
		width: 100%;
		height: 100%;
		padding-inline: var(--spacing-md);
		white-space: nowrap;
	}
	& label input {
		-webkit-appearance: none;
		appearance: none;
		cursor: pointer;
	}

	& label.has-icon-left {
		padding-left: var(--spacing-sm);
	}
}

.c-filter-chip:has(label input[type=checkbox]:checked) {
	background-color: var(--color-secondary-container);
	color: var(--color-on-secondary-container);
	border: none;
}



.c-input-chip{
	font-family: var(--label-l-font-family);
	font-size: var(--label-l-font-size);
	line-height: var(--label-l-line-height);
	font-weight: var(--label-l-font-weight);
	letter-spacing: var(--label-l-letter-spacing);
	color: var(--color-on-surface-variant);
	border-radius: var(--shape-full);
	height: 2rem;
	padding-left: var(--spacing-md);
	padding-right: var(--spacing-xs);

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

	/* TODO: erre lett külön komponens --> TextInputButton */
	& .c-icon-button{
		width: 2rem;
		height: 2rem;
		padding: 0;
		cursor: pointer;
	}

	&.entry {
		border-radius: var(--shape-sm);
	}

	&.outlined{
		border: 1px solid var(--color-outline-variant);
		color: var(--color-on-surface);
	}

	&.tonal{
		background-color: var(--color-secondary-container);
		color: var(--color-on-secondary-container);
		border: none;
	}

	&.readonly{
		padding-right: var(--spacing-md);
	}
}

.c-text-input,
.c-text-area {
	display: flex;
	font-family: var(--body-l-font-family);
	font-size: var(--body-l-font-size);
	line-height: var(--body-l-line-height);
	font-weight: var(--body-l-font-weight);
	letter-spacing: var(--body-l-letter-spacing);
	width: 100%;

	&.vertical {
		flex-direction: column;
		gap: var(--spacing-xxs);
	}

	&.error {
		&>.label-container {
			color: var(--color-error);
		}
	}

	&.disabled {
		background-color: transparent;

		&>.label-container {
			opacity: var(--opacity-disabled);
			background-color: transparent;
		}

		&>.input-message-container {
			&>.input-container {
				background-color: var(--state-layer-opacity-0-on-surface);
				opacity: var(--opacity-disabled);
				cursor: not-allowed;
			}

			&>.message-container {
				opacity: var(--opacity-disabled);
			}
		}
	}

	&.error {
		&>.input-message-container>.message-container {
			color: var(--color-error)
		}
	}

	&>.input-message-container {
		width: 100%;
		height: 100%;
	}

	&.bg-surface-1>.input-message-container>.input-container {
		background-color: var(--color-surface-2);
	}

	&.bg-surface-2>.input-message-container>.input-container,
	&.bg-surface-3>.input-message-container>.input-container {
		background-color: var(--color-surface-1);
	}

	&.surface-1>.input-message-container>.input-container {
		background-color: var(--color-surface-1);
	}

	&.surface-2>.input-message-container>.input-container {
		background-color: var(--color-surface-2);
	}

	&.surface-3>.input-message-container>.input-container {
		background-color: var(--color-surface-3);
	}

	&>.label-container {
		color: var(--color-on-surface-variant);
		font-family: var(--label-l-font-family);
		font-size: var(--label-l-font-size);
		line-height: var(--label-l-line-height);
		font-weight: var(--label-l-font-weight);
		letter-spacing: var(--label-l-letter-spacing);
		display: inline;
	}

	&>.input-message-container>.message-container {
		width: 100%;
		font-family: var(--body-s-font-family);
		font-size: var(--body-s-font-size);
		line-height: var(--body-s-line-height);
		font-weight: var(--body-s-font-weight);
		letter-spacing: var(--body-s-letter-spacing);
		padding: var(--spacing-xxs) var(--spacing-sm) var(--spacing-none);
	}

	&.entry>.input-message-container>.input-container {
		border-radius: var(--shape-sm) var(--shape-sm) var(--shape-none) var(--shape-none);
		padding-inline-start: var(--spacing-sm);
		position: relative;
		height: 100%;
	}

	&.entry>.input-message-container>.input-container::after {
		content: '';
		position: absolute;
		bottom: -1px;
		left: 0;
		right: 0;
		height: 1px;
		pointer-events: none;
	}

	&.entry {
		&.enabled>.input-message-container>.input-container::after {
			background-color: var(--color-outline-variant);
		}

		&.error>.input-message-container>.input-container::after {
			background-color: var(--color-error);
			height: 2px;
		}
	}


}

.c-text-input{

	&.enabled:has(input:focus) {
		&>.label-container {
			color: var(--color-primary);
		}
	}

	:has(input:invalid) {
		&>.label-container {
			color: var(--color-error);
		}
	}

	&.horizontal{
		/* align-items: center; */
		gap: var(--spacing-sm);
		&>.label-container{
			height: 2.5rem;
			display: flex;
			align-items: center;
		}
	}




	&.filter>.input-message-container>.input-container{
		border-radius: var(--shape-full);
		position: relative;
	}

	&.filter {
		&.error>.input-message-container>.input-container{
			outline: 2px solid var(--color-error);
		}
	}

	&.filter.enabled>.input-message-container>.input-container:has(input:focus) {
		outline: 2px solid var(--color-primary);
	}


	&.entry.enabled>.input-message-container>.input-container:has(input:focus)::after{
		background-color: var(--color-primary);
		height: 2px;
	}

	&>.input-message-container{
		height: 2.5rem;

		&>.input-container{
		height: 2.5rem;
		border: none;
		flex: 1;
	}

	}

	&>.input-message-container>.input-container>.icon-container{
		width: 3rem;
		height: 2.5rem;
		display: flex;
		justify-content: center;
		align-items: center;
		color: var(--color-on-surface-variant);
	}

	&>.input-message-container>.input-container input{
		border: none;
		flex: 1;
		background-color: transparent;
		height: 100%;
		color: var(--color-on-surface);
		width: 100%;
	}



	&.featured{
		height: 3.5rem;
		&>.input-message-container {
			height: 100%;
			&>.input-container{
				box-shadow: var(--elevation-2);
				&>.icon-container{
					width: 3.5rem;
					height: 3.5rem;
				}
			}
		}
	}
}

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

.c-text-area {

	&>.input-message-container {
		min-height: 6rem;
		height: 6rem;

		&>.input-container textarea {
			border: none;
			flex: 1;
			background-color: transparent;
			height: 100%;
			color: var(--color-on-surface);
			width: 100%;
			height: 100%;
			resize: none;
		}
	}

	&.enabled:has(textarea:focus) {
		&>.label-container {
			color: var(--color-primary);
		}
	}

	:has(textarea:invalid) {
		&>.label-container {
			color: var(--color-error);
		}
	}

	&.entry.enabled>.input-message-container>.input-container:has(textarea:focus)::after {
		background-color: var(--color-primary);
		height: 2px;
	}




}



.c-dropdown-input{
	display: flex;
	align-items: flex-end;
	gap: var(--color-xs);
	height: 2.5rem;
	width: 100%;

	&.filter{
		border-radius: var(--shape-full);

		& *{
			border-radius: var(--shape-full);
		}

		& .c-text-input >.input-message-container>.input-container>.icon-container.search,
		& .c-select .select-message-container>.select-container>.icon-container.search{
			display: none;
		}

		& .c-select .select-message-container>.select-container,
		& .c-text-input>.input-message-container>.input-container{
			padding-inline-start: var(--spacing-sm);
		}

		& .c-select.focused .select-message-container>.select-container{
			outline: none;
		}

		& .c-text-input {
			&.filter.enabled>.input-message-container>.input-container:has(input:focus){
				outline: none;
			}
		}
	}

	&.entry{
		border-top-left-radius: var(--shape-sm);
		border-top-right-radius: var(--shape-sm);
		position: relative;


		& *{
			border-top-left-radius: var(--shape-sm);
			border-top-right-radius: var(--shape-sm);
		}

		& .c-text-input {
			.input-message-container>.input-container::after{
				background-color: transparent;
			}
			&.enabled>.input-message-container>.input-container:has(input:focus)::after {
				background-color: transparent;
			}
		}

		& .c-select{
			& .select-message-container>.select-container::after{
				background-color: transparent;
			}
			&.focused .select-message-container>.select-container::after{
				background-color: transparent;
			}
		}
	}
	&.entry::after {
		content: '';
		position: absolute;
		bottom: -1px;
		left: 0;
		right: 0;
		height: 1px;
		pointer-events: none;
		background-color: var(--color-outline-variant);
	}

	&.bg-surface-1{
		background-color: var(--color-surface-1);

		& .c-select{
			background-color: var(--color-surface-4);

			& .c-popper .popper-opts{
				background-color: var(--color-surface-4);
			}

		}

		& .c-text-input {
			background-color: var(--color-surface-1);

			& .input-message-container>.input-container {
				background-color: var(--color-surface-1);
			}
		}
	}
	&.bg-surface-2,
	&.bg-surface-3{
		background-color: var(--color-surface-2);

		& .c-select {
			background-color: var(--color-surface-4);

			& .c-popper .popper-opts {
				background-color: var(--color-surface-4);
			}
		}

		& .c-text-input {
			background-color: var(--color-surface-2);
			& .input-message-container>.input-container{
				background-color: var(--color-surface-2);
			}
		}
	}

	&.featured {
		height: 3.5rem;
		box-shadow: var(--elevation-2);

		& .c-select{
			height: 100%;
			justify-content: center;

			& .select-message-container>.select-container{
				padding-inline-start: var(--spacing-md);
			}
		}

		& .c-text-input{
			&>.input-message-container>.input-container{
				box-shadow: none;
			}
		}
	}

	&.filter:has(.c-text-input.enabled>.input-message-container>.input-container>input:focus),
	&.filter:has(.c-select.filter.focused .select-message-container>.select-container ){
		outline: 2px solid var(--color-primary);
	}

}

.c-date-input{
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xxs);
	font-family: var(--body-l-font-family);
	font-size: var(--body-l-font-size);
	line-height: var(--body-l-line-height);
	font-weight: var(--body-l-font-weight);
	letter-spacing: var(--body-l-letter-spacing);

	cursor: pointer;

	&>.label-container{
		color: var(--color-on-surface-variant);
		font-family: var(--label-l-font-family);
		font-size: var(--label-l-font-size);
		line-height: var(--label-l-line-height);
		font-weight: var(--label-l-font-weight);
		letter-spacing: var(--label-l-letter-spacing);
		display: inline;
	}

	&>.input-message-container>.input-container {
		height: 2.5rem;
		border: none;
		padding-inline: var(--spacing-xs);

		& input {
			border: none;
			flex: 1;
			background-color: transparent;
			height: 100%;
			color: var(--color-on-surface);
			width: 100%;
			cursor: inherit;
		}
	}

	&:has(input[type="date"]:focus) {
		&>.label-container {
			color: var(--color-primary);
		}
	}


	&.bg-surface-1 {
		&>.input-message-container>.input-container {
			background-color: var(--color-surface-2);
		}
	}

	&.bg-surface-2,
	&.bg-surface-3{
		&>.input-message-container>.input-container {
			background-color: var(--color-surface-1);
		}
	}

	&.entry{
		&>.input-message-container>.input-container{
			border-radius: var(--shape-sm) var(--shape-sm) var(--shape-none) var(--shape-none);
			position: relative;

			&::after {
				content: '';
				position: absolute;
				bottom: -1px;
				left: 0;
				right: 0;
				height: 1px;
				pointer-events: none;
				background-color: var(--color-outline-variant);
			}

			&:has(input[type="date"]:focus)::after {
				background-color: var(--color-primary);
				height: 2px;
			}
		}



	}

	&.filter{
		&>.input-message-container>.input-container {
			border-radius: var(--shape-full);

			&:has(input[type="date"]:focus) {
			outline: 2px solid var(--color-primary);
			}
		}


	}
}

.c-select{
	font-family: var(--body-l-font-family);
	font-size: var(--body-l-font-size);
	line-height: var(--body-l-line-height);
	font-weight: var(--body-l-font-weight);
	letter-spacing: var(--body-l-letter-spacing);
	color: var(--color-on-surface);
	position: relative;

	&.focused{
		& button.toggle .label{
			color: var(--color-primary);
		}
		&.entry {
			& .select-message-container>.select-container::after {
				height: 2px;
				background-color: var(--color-primary);
			}
		}
		&.filter{
			& .select-message-container>.select-container {
				outline: solid 2px var(--color-primary);
			}
		}
	}

	&.error{
		& button.toggle .label{
			color: var(--color-error);
		}
		&>.message-container{
			color: var(--color-error)
		}
		&.entry {
			& .select-message-container>.select-container::after {
				height: 2px;
				background-color: var(--color-error);
			}
		}
		&.filter{
			& .select-message-container>.select-container{
				outline: 2px solid var(--color-error);
			}
		}
	}

	& .c-popper {
		height: 100%;
		&>.popper-toggle{
		height: 100%;

			&>button.toggle{
				background-color: transparent;
				border: none;
				cursor: pointer;
				width: 100%;
				height: 100%;
				padding: 0;

				& .label{
					color: var(--color-on-surface-variant);
					font-family: var(--label-l-font-family);
					font-size: var(--label-l-font-size);
					line-height: var(--label-l-line-height);
					font-weight: var(--label-l-font-weight);
					letter-spacing: var(--label-l-letter-spacing);
					width: auto;
				}

				& .placeholder{
					color: var(--color-on-surface-variant);
				}
			}
	}
	}




	& .c-popper .popper-opts {
		background-color: var(--color-surface-2);
		box-shadow: var(--elevation-1);

		& ul {
			padding: var(--spacing-xxs) var(--spacing-none);

			& li {
				cursor: pointer;
				padding: var(--spacing-xxs) var(--spacing-sm);
			}
		}
	}

	&.bg-surface-1{
		& .select-message-container>.select-container {
			background-color: var(--color-surface-2);
		}

		& .c-popper .popper-opts {
			background-color: var(--color-surface-2);
		}
	}
	&.bg-surface-2,
	&.bg-surface-3{
		& .select-message-container>.select-container {
			background-color: var(--color-surface-1);
		}

		& .c-popper .popper-opts {
			background-color: var(--color-surface-1);
		}
	}

	&.surface-1{
		& .select-message-container>.select-container {
			background-color: var(--color-surface-1);
		}

		& .c-popper .popper-opts {
			background-color: var(--color-surface-1);
		}
	}
	&.surface-2{
		& .select-message-container>.select-container {
			background-color: var(--color-surface-2);
		}

		& .c-popper .popper-opts {
			background-color: var(--color-surface-2);
		}
	}

	& .select-message-container{
		width: 100%;
		text-align: left;
		&>.select-container {
			height: 2.5rem;
			width: 100%;
			&>.icon-container{
				width: 3rem;
				height: 2.5rem;
				color: var(--color-on-surface-variant);
				display: flex;
				justify-content: center;
				align-items: center;
			}

			&>.value-container{
				flex:1;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				> span{
					max-width: 100%;
				}
			}
		}
	}



	&.entry {
		& .select-message-container>.select-container{
			position: relative;
			border-radius: var(--shape-sm) var(--shape-sm) var(--shape-none) var(--shape-none);
			padding-inline-start: var(--spacing-sm);
		}
		& .select-message-container>.select-container::after{
			content: '';
			position: absolute;
			bottom: -1px;
			left: 0;
			right: 0;
			height: 1px;
			pointer-events: none;
			background-color: var(--color-outline-variant);
		}
		& .c-popper .popper-opts{
			border-radius: var(--shape-none) var(--shape-none) var(--shape-sm) var(--shape-sm);
		}
	}

	&.filter {
		& .select-message-container>.select-container {
			border-radius: var(--shape-full);
		}
		& .c-popper .popper-opts {
			border-radius: var(--shape-lg);
		}
	}

	&>.message-container {
		width: 100%;
		font-family: var(--body-s-font-family);
		font-size: var(--body-s-font-size);
		line-height: var(--body-s-line-height);
		font-weight: var(--body-s-font-weight);
		letter-spacing: var(--body-s-letter-spacing);
		padding: var(--spacing-xxs) var(--spacing-sm) var(--spacing-none);
		color: var(--color-on-surface-variant);
	}


	&>.multiple-tags-container{
		height: 2.5rem;
		position: absolute;
		left: 100%;
		top: 1.75rem
	}

}

/* DROPDOWN SEARCH */
.c-dropdown-search{
	font-family: var(--body-l-font-family);
	font-size: var(--body-l-font-size);
	line-height: var(--body-l-line-height);
	font-weight: var(--body-l-font-weight);
	letter-spacing: var(--body-l-letter-spacing);
	color: var(--color-on-surface);
	position: relative;
	/* height: 2.5rem; */

	& .popper-toggle{
		height: 100%;
		background-color: inherit;

		& .search-container{
			height: 2.5rem;
			background-color: inherit;
			& input {
				height: 100%;
				margin-right: var(--spacing-sm);
				width: calc(100% - var(--spacing-sm));
				border: none;
				background-color: transparent;
			}
			& .c-icon-button {
				height: 2.5rem;
			}
		}
	}

	& .search-container {
		/* height: 2.5rem; */
		background-color: inherit;
		display: flex;
		align-items: center;
		gap: var(--spacing-xxs);

		& .c-popper{
			height: 100%;

			& .popper-toggle{
				height: 100%;
				padding-inline-start: var(--spacing-xxs);
				& input {
					height: 100%;
					border: none;
					background-color: transparent;
					margin-inline-start: var(--spacing-xxs);
				}

			}

			& .popper-opts {
				padding: var(--spacing-xxs);
			}
		}


	}

	& .popper-opts{
		/* border-radius: var(--shape-lg); */

		& .list li{
			padding: var(--spacing-xxs) var(--spacing-sm);
		}
	}




	&.entry {
		& .search-container {
			position: relative;
			border-radius: var(--shape-sm) var(--shape-sm) var(--shape-none) var(--shape-none);
			padding-inline-start: var(--spacing-sm);
			align-items: flex-start;
		}

		& .search-container::after {
			content: '';
			position: absolute;
			bottom: -1px;
			left: 0;
			right: 0;
			height: 1px;
			pointer-events: none;
			background-color: var(--color-outline-variant);
		}

		& .popper-opts {
			border-radius: var(--shape-none) var(--shape-none) var(--shape-sm) var(--shape-sm);
		}
	}

	&.entry {
		& .search-container:has(input:focus)::after {
			height: 2px;
			background-color: var(--color-primary);
		}
	}



	&.filter{
		& .search-container {
			border-radius: var(--shape-full);
			padding-inline-start: var(--spacing-sm);
		}

		& .popper-opts {
			border-radius: var(--shape-lg);
		}

		& .search-container:has(input:focus) {
			outline: solid 2px var(--color-primary);
		}

	}

	&.bg-surface-1 {
		& .search-container {
			background-color: var(--color-surface-2);
		}

		& .popper-opts {
			background-color: var(--color-surface-2);
		}
	}

	&.bg-surface-2,
	&.bg-surface-3 {
		& .search-container {
			background-color: var(--color-surface-1);
		}

		& .popper-opts {
			background-color: var(--color-surface-1);
		}
	}

	&.surface-1 {
		& .search-container {
			background-color: var(--color-surface-1);
		}

		& .popper-opts {
			background-color: var(--color-surface-1);
		}
	}

	&.surface-2 {
		& .search-container {
			background-color: var(--color-surface-2);
		}

		& .popper-opts {
			background-color: var(--color-surface-2);
		}
	}
}

.c-icon,
.c-icon{
	&.md{
		width: 24px;
		height: 24px;
	}

	&.sm{
		width: 18px;
		height: 18px;
	}
	&.lg{
		width: 32px;
		height: 32px;
	}
	&.xl{
		width: 48px;
		height: 48px;
	}

	&.primary{
		color: var(--color-primary);
	}
	&.error{
		color: var(--color-error);
	}
	&.warning{
		color: var(--color-warning);
	}
	&.success{
		color: var(--color-success);
	}
	&.on-primary{
		color: var(--color-on-primary);
	}
	&.on-error{
		color: var(--color-on-error);
	}
	&.on-warning{
		color: var(--color-on-warning);
	}
	&.on-surface{
		color: var(--color-on-surface)
	}
	&.on-surface-variant{
		color: var(--color-on-surface-variant)
	}

	&.spin{
		animation: spin 1s linear infinite;
	}
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

.c-circle-text-with-icon {
	width: 4rem;
	height: 4rem;
	position: relative;
	color: var(--color-on-surface);
	background-color: transparent !important;

	& .icon-container{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	&.warning{
		color: var(--color-warning);
		&>.icon-container svg{
			fill: var(--color-warning);
		}
	}
	&.danger{
		color: var(--color-error);

		&>.icon-container svg{
			fill: var(--color-error)!important;
		}
	}
	&.allowed{
		color: var(--color-success);

		&>.icon-container svg{
			fill: var(--color-success)!important;
		}
	}
}


.c-badge {
	border-radius: var(--shape-full);
	font-family: var(--label-l-font-family);
	font-size: var(--label-l-font-size);
	line-height: var(--label-l-line-height);
	font-weight: var(--label-l-font-weight);
	letter-spacing: var(--label-l-letter-spacing);
	/* height: 1.25rem; */

	&.primary{
		background-color: var(--color-primary);
	}
	&.warning{
		background-color: var(--color-warning);
	}
	&.error{
		background-color: var(--color-error) !important;
	}
	&.success{
		background-color: var(--color-success);
	}

	&.primary-container {
		background-color: var(--color-primary-container);
	}

	&.secondary-container {
		background-color: var(--color-secondary-container);
	}

	&.tertiary-container {
		background-color: var(--color-tertiary-container);
	}

	&.prescription-container {
		background-color: var(--color-prescription-container);
	}

	&.top-right{
		position: absolute;
		top: -.15rem;
		right: -.5rem;
	}
}

.c-status-badge{
	border-radius: var(--shape-full);
	background-color: var(--color-surface-4);
	font-family: var(--label-l-font-family);
	font-size: var(--label-l-font-size);
	line-height: var(--label-l-line-height);
	font-weight: var(--label-l-font-weight);
	letter-spacing: var(--label-l-letter-spacing);
	height: 1.75rem;
	padding-inline: var(--spacing-xs);

	&.small{
		font-family: var(--label-m-font-family);
		font-size: var(--label-m-font-size);
		line-height: var(--label-m-line-height);
		font-weight: var(--label-m-font-weight);
		letter-spacing: var(--label-m-letter-spacing);
		height: 1.2rem;
		padding-inline: var(--spacing-xs);
	}

	&.has-icon{
		padding-left: var(--spacing-xs) !important;
	}

	&.primary-container{
		background-color: var(--color-primary-container);
	}
	&.secondary-container{
		background-color: var(--color-secondary-container);
	}
	&.success-container{
		background-color: var(--color-success-container);
	}
	&.success{
		background-color: var(--color-success-container);
	}
	&.tertiary-container{
		background-color: var(--color-tertiary-container);
	}
	&.prescription-container{
		background-color: var(--color-prescription-container);
	}
	&.error{
		background-color: var(--color-error);
		color: var(--color-on-error);
	}
	&.light{
		background-color: var(--color-surface-1);
		color: var(--color-on-surface);
	}

}

.c-container{
	&.primary{
		background-color: var(--color-primary-container);
		color: var(--color-on-primary-container);
	}
	&.secondary {
		background-color: var(--color-secondary-container);
		color: var(--color-on-secondary-container);
	}
	&.tertiary {
		background-color: var(--color-tertiary-container);
		color: var(--color-on-tertiary-container);
	}
	&.warning {
		background-color: var(--color-warning-container);
		color: var(--color-on-warning-container);
	}
	&.error {
		background-color: var(--color-error-container);
		color: var(--color-on-error-container);
	}
	&.prescription {
		background-color: var(--color-prescription-container);
		color: var(--color-on-prescription-container);
	}
	&.surface-1 {
		background-color: var(--color-surface-1);
	}
	&.surface-2 {
		background-color: var(--color-surface-2);
	}
	&.surface-3 {
		background-color: var(--color-surface-3);
	}
	&.surface-4 {
		background-color: var(--color-surface-4);
	}
	&.surface-5 {
		background-color: var(--color-surface-5);
	}

	&.padding-none{
		padding: 0;
	}
	&.padding-xs{
		padding: var(--spacing-xs);
	}
	&.padding-sm{
		padding: var(--spacing-sm);
	}
	&.padding-md{
		padding: var(--spacing-md);
	}
	&.padding-x-none{
		padding-inline: 0;
	}
	&.padding-x-xs{
		padding-inline: var(--spacing-xs);
	}
	&.padding-x-sm{
		padding-inline: var(--spacing-sm);
	}
	&.padding-x-md{
		padding-inline: var(--spacing-md);
	}
	&.padding-y-none{
		padding-block: 0;
	}
	&.padding-y-xs{
		padding-block: var(--spacing-xs);
	}
	&.padding-y-sm{
		padding-block: var(--spacing-sm);
	}
	&.padding-y-md{
		padding-block: var(--spacing-md);
	}

	&.margin-none {
		margin: 0;
	}

	&.margin-xs {
		margin: var(--spacing-xs);
	}

	&.margin-sm {
		margin: var(--spacing-sm);
	}

	&.margin-md {
		margin: var(--spacing-md);
	}

	&.margin-x-none {
		margin-inline: 0;
	}

	&.margin-x-xs {
		margin-inline: var(--spacing-xs);
	}

	&.margin-x-sm {
		margin-inline: var(--spacing-sm);
	}

	&.margin-x-md {
		margin-inline: var(--spacing-md);
	}

	&.margin-y-none {
		margin-block: 0;
	}

	&.margin-y-xs {
		margin-block: var(--spacing-xs);
	}

	&.margin-y-sm {
		margin-block: var(--spacing-sm);
	}

	&.margin-y-md {
		margin-block: var(--spacing-md);
	}

	/* Shape */
	&.shape-xs {
		border-radius: var(--shape-xs);
	}
	&.shape-sm {
		border-radius: var(--shape-sm);
	}
	&.shape-md {
		border-radius: var(--shape-md);
	}

	/* Width */
	&.width-panel {
		width: 50rem; /*800px*/
	}

	/* Height */
	&.height-panel{
		/* height: 42.5rem; 680px */
		height: 46.5rem; /*744px*/
	}
	&.height-header{
		height: 4rem; /*64px*/
	}
}

.c-flex{
	display: flex;

	/* Direction */
	&.column{
		flex-direction: column;
	}

	&.row-reverse{
		flex-direction: row-reverse;
	}

	&.column-reverse{
		flex-direction: column-reverse;
	}

	/* Justify Content*/
	&.justify-flex-start{
		justify-content: flex-start;
	}
	&.justify-flex-end{
		justify-content: flex-end;
	}
	&.justify-center{
		justify-content: center;
	}
	&.justify-space-between{
		justify-content: space-between;
	}
	&.justify-space-evenly{
		justify-content: space-evenly;
	}
	&.justify-space-around{
		justify-content: space-around;
	}
	&.justify-start {
		justify-content: start;
	}
	&.justify-end {
		justify-content: end;
	}
	&.justify-left {
		justify-content: left;
	}
	&.justify-right {
		justify-content: right;
	}

	/* Align Items */
	&.align-stretch {
		align-items: stretch;
	}
	&.align-flex-start {
		align-items: flex-start;
	}
	&.align-flex-end {
		align-items: flex-end;
	}
	&.align-center {
		align-items: center;
	}
	&.align-baseline {
		align-items: baseline;
	}

	/* TODO: Gap */
	&.gap-xxs{
		gap: var(--spacing-xxs);
	}
	&.gap-xs {
		gap: var(--spacing-xs);
	}
	&.gap-sm {
		gap: var(--spacing-sm);
	}
	&.gap-md {
		gap: var(--spacing-md);
	}
	&.gap-lg {
		gap: var(--spacing-lg);
	}

	/* Flex */
	&.flex > *{
		flex: 1;
	}

	/* Wrap */
	&.nowrap{
		flex-wrap: nowrap;
	}
	&.wrap{
		flex-wrap: wrap;
	}
	&.wrap-reverse{
		flex-wrap: wrap-reverse;
	}

	/* Align Self */
	&.align-self-auto{
		align-self: auto;
	}
	&.align-self-auto {
		align-self: auto;
	}

	&.align-self-flex-start {
		align-self: flex-start;
	}

	&.align-self-flex-end {
		align-self: flex-end;
	}

	&.align-self-center {
		align-self: center;
	}

	&.align-self-baseline {
		align-self: baseline;
	}

	&.align-self-stretch {
		align-self: stretch;
	}
}

/* InfoPanel */
.c-info-panel{
	/* width: 800px; */
	/* height: 680px; */
	background-color: var(--color-surface-2);

	& .content-container{
		width: 100%;
		flex-grow: 1;
		padding: var(--spacing-xxs);
		background-color: var(--color-secondary-container);
		overflow-y: auto;
	}

		& .content-container .content{
			background-color: var(--color-surface-2);
			height: 100%;
			border-radius: var(--shape-xs);
			/* padding: var(--spacing-sm); */
		}
}

.c-header {
	background-color: var(--color-surface-3);
	width: 100%;
	height: 4rem;
}

.c-prescription-box{
	border: 1px solid var(--color-prescription);
	background-color: var(--color-surface-1);
}

.c-tab{
	width: 100%;
	border: none;
	background-color: transparent;
	&.size-md{
		height: 4rem;
	}
	&.size-lg{
		height: 8.75rem;
	}
}

button.c-tab-segment{
	border: none;
	padding: 0;
	cursor: pointer;
	background-color: transparent;

	&>.label{
		cursor: inherit;
		padding: var(--spacing-xxs);
		padding-top: var(--spacing-sm);

		&>.title {
			transition: font-size var(--motion-transition) ease-in-out;
			font-family: var(--title-m-font-family);
			font-size: var(--title-m-font-size);
			line-height: var(--title-m-line-height);
			font-weight: var(--title-m-font-weight);
			letter-spacing: var(--title-m-letter-spacing);
			color: var(--color-on-surface-variant)
		}
	}

	&.selected{
		padding-top: var(--spacing-xs);
		&>.label{
			border-top-left-radius: var(--shape-lg);
			border-top-right-radius: var(--shape-lg);
			background-color: var(--color-secondary-container);

			&>.title {
				font-family: var(--title-l-font-family);
				font-size: var(--title-l-font-size);
				line-height: var(--title-l-line-height);
				font-weight: var(--title-l-font-weight);
				letter-spacing: var(--title-l-letter-spacing);
				color: var(--color-on-secondary-container);
			}
		}
	}


}
button.c-tab-segment:focus {
	outline: none;
}

.c-avatar{
	background-color: var(--color-secondary-container);
	border-radius: var(--shape-full);

	&.size-xs{
		width: 2.3rem;
		min-width: 2.3rem;
		height: 2.3rem;
		/* padding: var(--spacing-xxs); */
		font-family: var(--title-m-font-family);
		font-size: var(--title-m-font-size);
		line-height: var(--title-m-line-height);
		font-weight: var(--title-m-font-weight);
		letter-spacing: var(--title-m-letter-spacing);

		& .avatar{
			width: 100%;
			height: 100%;
		}
		&.selected {
			border: 2px solid var(--color-primary);
			box-shadow: var(--elevation-2);
		}
	}
	&.size-sm{
		width: 3rem;
		height: 3rem;
		/* padding: var(--spacing-xxs); */
		font-family: var(--title-m-font-family);
		font-size: var(--title-m-font-size);
		line-height: var(--title-m-line-height);
		font-weight: var(--title-m-font-weight);
		letter-spacing: var(--title-m-letter-spacing);

		& .avatar{
			width: 100%;
			height: 100%;
		}
		&.selected {
			border: 2px solid var(--color-primary);
			box-shadow: var(--elevation-2);
		}
	}


	&.size-md{
		width: 3.75rem; /*60px*/
		height: 3.75rem;
		/* padding: var(--spacing-xxs); */
		font-family: var(--title-m-font-family);
		font-size: var(--title-m-font-size);
		line-height: var(--title-m-line-height);
		font-weight: var(--title-m-font-weight);
		letter-spacing: var(--title-m-letter-spacing);

		& .avatar{
			width: 100%;
			height: 100%;
		}
		&.selected {
			border: 2px solid var(--color-primary);
			box-shadow: var(--elevation-2);
		}
	}
	&.size-lg{
		width: 5rem; /*80px*/
		height: 5rem;
		/* padding: var(--spacing-xxs); */
		font-family: var(--headline-s-font-family);
		font-size: var(--headline-s-font-size);
		line-height: var(--headline-s-line-height);
		font-weight: var(--headline-s-font-weight);
		letter-spacing: var(--headline-s-letter-spacing);
		& .avatar {
			width: 100%;
			height: 100%;
		}
		&.selected {
			border: 3px solid var(--color-primary);
			box-shadow: var(--elevation-2);
		}
	}

	&.anonim-avatar-container {
		position: relative;

		&>.label {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 5;
			color: var(--color-on-surface);
		}
	}
	&.disabled{
		opacity: var(--opacity-disabled);
	}
}

:root {
	/* Colors */
	--color-primary: #36618e;
	--color-surface-tint: #36618e;
	--color-on-primary: #ffffff;
	--color-primary-container: #d1e4ff;
	--color-on-primary-container: #001d36;
	--color-secondary: #535f70;
	--color-on-secondary: #ffffff;
	--color-secondary-container: #d7e3f8;
	--color-on-secondary-container: #101c2b;
	--color-tertiary: #6b5778;
	--color-on-tertiary: #ffffff;
	--color-tertiary-container: #f3daff;
	--color-on-tertiary-container: #251433;
	--color-prescription: #E8B0AA;
	--color-prescription-container: #FEEBEF;
	--color-error: #ba1a1a;
	--color-on-error: #ffffff;
	--color-error-container: #ffdad6;
	--color-on-error-container: #410002;
	--color-warning: #e5a000;
	--color-on-warning: #ffffff;
	--color-warning-container: #ffdb8a;
	--color-on-warning-container: #4a2c00;
	--color-success: #009951;
	--color-on-success: #ffffff;
	--color-success-container: #a8f0c4;
	--color-on-success-container: #4a2c00;
	--color-background: #f8f9ff;
	--color-on-background: #191c20;
	--color-surface: #f8f9ff;
	--color-on-surface: #191c20;
	--color-surface-variant: #dfe2eb;
	--color-on-surface-variant: #43474e;
	--color-outline: #73777f;
	--color-outline-variant: #c3c6cf;
	--color-shadow: #000000;
	--color-scrim: #000000;
	--color-inverse-surface: #2e3135;
	--color-inverse-on-surface: #eff0f7;
	--color-inverse-primary: #a0cafd;
	--color-primary-fixed: #d1e4ff;
	--color-on-primary-fixed: #001d36;
	--color-primary-fixed-dim: #a0cafd;
	--color-on-primary-fixed-variant: #1a4975;
	--color-secondary-fixed: #d7e3f8;
	--color-on-secondary-fixed: #101c2b;
	--color-secondary-fixed-dim: #bbc7db;
	--color-on-secondary-fixed-variant: #3b4858;
	--color-tertiary-fixed: #f3daff;
	--color-on-tertiary-fixed: #251433;
	--color-tertiary-fixed-dim: #d7bee4;
	--color-on-tertiary-fixed-variant: #523f5f;
	--color-surface-dim: #d8dae0;
	--color-surface-bright: #f8f9ff; /*bright: jelenleg uaz mint a surface*/
	--color-surface-1: #ffffff; /*lowest*/
	/* --color-surface-2: #f2f3fa; */
	--color-surface-2: #fafafa; /*low*/
	--color-surface-3: #eceef4;
	--color-surface-4: #e6e8ee; /*high*/
	--color-surface-5: #e1e2e8; /*highest*/

	/* Elevation */
	--elevation-1: 0px 1px 2px 0px rgb(0 0 0 / 30%), 0px 1px 3px 1px rgb(0 0 0 / 15%);
	--elevation-2: 0px 1px 2px 0px rgb(0 0 0 / 30%), 0px 2px 6px 2px rgb(0 0 0 / 15%);
	--elevation-3: 0px 1px 3px 0px rgb(0 0 0 / 30%), 0px 4px 8px 3px rgb(0 0 0 / 15%);

	/* Typography */
	--display-font-family: "Roboto", sans-serif;
	--text-font-family: "Roboto", sans-serif;

	--display-xl-font-family: var(--display-font-family);
	--display-xl-font-size: 5.5rem;
	/* 88px / 16 */
	--display-xl-line-height: 6rem;
	/* 96px / 16 */
	--display-xl-font-weight: 475;
	--display-xl-font-variation-opsz: 18;
	--display-xl-letter-spacing: 0;

	--display-l-font-family: var(--display-font-family);
	--display-l-font-size: 3.5625rem;
	/* 57px / 16 */
	--display-l-line-height: 4rem;
	/* 64px / 16 */
	--display-l-font-weight: 475;
	--display-l-font-variation-opsz: 18;
	--display-l-letter-spacing: 0;

	--display-m-font-family: var(--display-font-family);
	--display-m-font-size: 2.8125rem;
	/* 45px / 16 */
	--display-m-line-height: 3.25rem;
	/* 52px / 16 */
	--display-m-font-weight: 475;
	--display-m-font-variation-opsz: 18;
	--display-m-letter-spacing: 0;

	--display-s-font-family: var(--display-font-family);
	--display-s-font-size: 2.25rem;
	/* 36px / 16 */
	--display-s-line-height: 2.75rem;
	/* 44px / 16 */
	--display-s-font-weight: 475;
	--display-s-font-variation-opsz: 18;
	--display-s-letter-spacing: 0;

	--headline-l-font-family: var(--display-font-family);
	--headline-l-font-size: 2rem; /* 32px / 16 */
	--headline-l-line-height: 2.5rem; /* 40px / 16 */
	--headline-l-font-weight: 475;
	--headline-l-font-variation-opsz: 18;
	--headline-l-letter-spacing: 0;

	--headline-m-font-family: var(--display-font-family);
	--headline-m-font-size: 1.5rem;
	/* 28px / 16  --> 24px*/
	--headline-m-line-height: 2.25rem;
	/* 36px / 16 */
	--headline-m-font-weight: 475;
	--headline-m-font-variation-opsz: 18;
	--headline-m-letter-spacing: 0;

	--headline-s-font-family: var(--display-font-family);
	--headline-s-font-size: 1.25rem;
	/* 24px / 16 --> 20px*/
	--headline-s-line-height: 2rem;
	/* 32px / 16 */
	--headline-s-font-weight: 475;
	--headline-s-font-variation-opsz: 18;
	--headline-s-letter-spacing: 0;

	--title-l-font-family: var(--text-font-family);
	--title-l-font-size: 1.375rem;
	/* 22px / 16 */
	--title-l-line-height: 1.875rem;
	/* 30px / 16 */
	--title-l-font-weight: 500;
	--title-l-font-variation-opsz: 17;
	--title-l-letter-spacing: 0;

	--title-m-font-family: var(--text-font-family);
	--title-m-font-size: 1.125rem;
	/* 18px / 16  --> 18px*/
	--title-m-line-height: 1.5rem;
	/* 24px / 16 */
	--title-m-font-weight: 500;
	--title-m-font-variation-opsz: 17;
	--title-m-letter-spacing: 0;

	--title-s-font-family: var(--text-font-family);
	--title-s-font-size: 0.875rem;
	/* 14px / 16 */
	--title-s-line-height: 1.25rem;
	/* 20px / 16 */
	--title-s-font-weight: 500;
	--title-s-font-variation-opsz: 17;
	--title-s-letter-spacing: 0;

	--label-l-font-family: var(--text-font-family);
	--label-l-font-size: 0.875rem;
	/* 14px / 16 */
	--label-l-line-height: 1.25rem;
	/* 20px / 16 */
	--label-l-font-weight: 500;
	--label-l-font-variation-opsz: 17;
	--label-l-letter-spacing: 0;

	--label-m-font-family: var(--text-font-family);
	--label-m-font-size: 0.75rem;
	/* 12px / 16 */
	--label-m-line-height: 1rem;
	/* 16px / 16 */
	--label-m-font-weight: 500;
	--label-m-font-variation-opsz: 17;
	--label-m-letter-spacing: .00625rem;
	/* .1px / 16 */

	--label-s-font-family: var(--text-font-family);
	--label-s-font-size: 0.6875rem;
	/* 11px / 16 */
	--label-s-line-height: 1rem;
	/* 16px / 16 */
	--label-s-font-weight: 500;
	--label-s-font-variation-opsz: 17;
	--label-s-letter-spacing: .00625rem;
	/* .1px / 16 */

	--body-l-font-family: var(--text-font-family);
	--body-l-font-size: 1rem;
	/* 16px / 16 */
	--body-l-line-height: 1.5rem;
	/* 24px / 16 */
	--body-l-font-weight: 400;
	--body-l-font-variation-opsz: 17;
	--body-l-letter-spacing: 0;

	--body-m-font-family: var(--text-font-family);
	--body-m-font-size: 0.875rem;
	/* 14px / 16 */
	--body-m-line-height: 1.25rem;
	/* 20px / 16 */
	--body-m-font-weight: 400;
	--body-m-font-variation-opsz: 17;
	--body-m-letter-spacing: 0;

	--body-s-font-family: var(--text-font-family);
	--body-s-font-size: 0.75rem;
	/* 12px / 16 */
	--body-s-line-height: 1rem;
	/* 16px / 16 */
	--body-s-font-weight: 400;
	--body-s-font-variation-opsz: 17;
	--body-s-letter-spacing: .00625rem;
	/* .1px / 16 */

	/* Opacity */
	/* Opacity for state layer */
	--opacity-0: .04;
	--opacity-1: .08;
	--opacity-2: .12;
	--opacity-3: .16;

	--state-layer-opacity-1-primary: rgba(54, 97, 142, var(--opacity-1));
	--state-layer-opacity-2-primary: rgba(54, 97, 142, var(--opacity-2));
	--state-layer-opacity-3-primary: rgba(54, 97, 142, var(--opacity-3));

	--state-layer-opacity-1-surface-tint: rgba(54, 97, 142, var(--opacity-1));
	--state-layer-opacity-2-surface-tint: rgba(54, 97, 142, var(--opacity-2));
	--state-layer-opacity-3-surface-tint: rgba(54, 97, 142, var(--opacity-3));

	--state-layer-opacity-1-on-primary: rgba(255, 255, 255, var(--opacity-1));
	--state-layer-opacity-2-on-primary: rgba(255, 255, 255, var(--opacity-2));
	--state-layer-opacity-3-on-primary: rgba(255, 255, 255, var(--opacity-3));

	--state-layer-opacity-1-primary-container: rgba(209, 228, 255, var(--opacity-1));
	--state-layer-opacity-2-primary-container: rgba(209, 228, 255, var(--opacity-2));
	--state-layer-opacity-3-primary-container: rgba(209, 228, 255, var(--opacity-3));

	--state-layer-opacity-1-on-primary-container: rgba(0, 29, 54, var(--opacity-1));
	--state-layer-opacity-2-on-primary-container: rgba(0, 29, 54, var(--opacity-2));
	--state-layer-opacity-3-on-primary-container: rgba(0, 29, 54, var(--opacity-3));

	--state-layer-opacity-1-secondary: rgba(83, 95, 112, var(--opacity-1));
	--state-layer-opacity-2-secondary: rgba(83, 95, 112, var(--opacity-2));
	--state-layer-opacity-3-secondary: rgba(83, 95, 112, var(--opacity-3));

	--state-layer-opacity-1-on-secondary: rgba(255, 255, 255, var(--opacity-1));
	--state-layer-opacity-2-on-secondary: rgba(255, 255, 255, var(--opacity-2));
	--state-layer-opacity-3-on-secondary: rgba(255, 255, 255, var(--opacity-3));

	--state-layer-opacity-1-secondary-container: rgba(215, 227, 248, var(--opacity-1));
	--state-layer-opacity-2-secondary-container: rgba(215, 227, 248, var(--opacity-2));
	--state-layer-opacity-3-secondary-container: rgba(215, 227, 248, var(--opacity-3));

	--state-layer-opacity-1-on-secondary-container: rgba(16, 28, 43, var(--opacity-1));
	--state-layer-opacity-2-on-secondary-container: rgba(16, 28, 43, var(--opacity-2));
	--state-layer-opacity-3-on-secondary-container: rgba(16, 28, 43, var(--opacity-3));

	--state-layer-opacity-1-tertiary: rgba(107, 87, 120, var(--opacity-1));
	--state-layer-opacity-2-tertiary: rgba(107, 87, 120, var(--opacity-2));
	--state-layer-opacity-3-tertiary: rgba(107, 87, 120, var(--opacity-3));

	--state-layer-opacity-1-on-tertiary: rgba(255, 255, 255, var(--opacity-1));
	--state-layer-opacity-2-on-tertiary: rgba(255, 255, 255, var(--opacity-2));
	--state-layer-opacity-3-on-tertiary: rgba(255, 255, 255, var(--opacity-3));

	--state-layer-opacity-1-tertiary-container: rgba(243, 218, 255, var(--opacity-1));
	--state-layer-opacity-2-tertiary-container: rgba(243, 218, 255, var(--opacity-2));
	--state-layer-opacity-3-tertiary-container: rgba(243, 218, 255, var(--opacity-3));

	--state-layer-opacity-1-on-tertiary-container: rgba(37, 20, 51, var(--opacity-1));
	--state-layer-opacity-2-on-tertiary-container: rgba(37, 20, 51, var(--opacity-2));
	--state-layer-opacity-3-on-tertiary-container: rgba(37, 20, 51, var(--opacity-3));

	--state-layer-opacity-1-error: rgba(186, 26, 26, var(--opacity-1));
	--state-layer-opacity-2-error: rgba(186, 26, 26, var(--opacity-2));
	--state-layer-opacity-3-error: rgba(186, 26, 26, var(--opacity-3));

	--state-layer-opacity-1-on-error: rgba(255, 255, 255, var(--opacity-1));
	--state-layer-opacity-2-on-error: rgba(255, 255, 255, var(--opacity-2));
	--state-layer-opacity-3-on-error: rgba(255, 255, 255, var(--opacity-3));

	--state-layer-opacity-1-error-container: rgba(255, 218, 214, var(--opacity-1));
	--state-layer-opacity-2-error-container: rgba(255, 218, 214, var(--opacity-2));
	--state-layer-opacity-3-error-container: rgba(255, 218, 214, var(--opacity-3));
	/* --state-layer-opacity-disabled-error-container: rgba(255, 218, 214, var(--opacity-disabled)); */
	--state-layer-opacity-disabled-error-container: rgba(255, 218, 214, .8);

	--state-layer-opacity-1-on-error-container: rgba(65, 0, 2, var(--opacity-1));
	--state-layer-opacity-2-on-error-container: rgba(65, 0, 2, var(--opacity-2));
	--state-layer-opacity-3-on-error-container: rgba(65, 0, 2, var(--opacity-3));

	--state-layer-opacity-1-background: rgba(248, 249, 255, var(--opacity-1));
	--state-layer-opacity-2-background: rgba(248, 249, 255, var(--opacity-2));
	--state-layer-opacity-3-background: rgba(248, 249, 255, var(--opacity-3));

	--state-layer-opacity-1-on-background: rgba(25, 28, 32, var(--opacity-1));
	--state-layer-opacity-2-on-background: rgba(25, 28, 32, var(--opacity-2));
	--state-layer-opacity-3-on-background: rgba(25, 28, 32, var(--opacity-3));

	--state-layer-opacity-1-surface: rgba(248, 249, 255, var(--opacity-1));
	--state-layer-opacity-2-surface: rgba(248, 249, 255, var(--opacity-2));
	--state-layer-opacity-3-surface: rgba(248, 249, 255, var(--opacity-3));

	--state-layer-opacity-0-on-surface: rgba(25, 28, 32, var(--opacity-0));
	--state-layer-opacity-1-on-surface: rgba(25, 28, 32, var(--opacity-1));
	--state-layer-opacity-2-on-surface: rgba(25, 28, 32, var(--opacity-2));
	--state-layer-opacity-3-on-surface: rgba(25, 28, 32, var(--opacity-3));

	--state-layer-opacity-1-surface-variant: rgba(223, 226, 235, var(--opacity-1));
	--state-layer-opacity-2-surface-variant: rgba(223, 226, 235, var(--opacity-2));
	--state-layer-opacity-3-surface-variant: rgba(223, 226, 235, var(--opacity-3));

	--state-layer-opacity-1-on-surface-variant: rgba(67, 71, 78, var(--opacity-1));
	--state-layer-opacity-2-on-surface-variant: rgba(67, 71, 78, var(--opacity-2));
	--state-layer-opacity-3-on-surface-variant: rgba(67, 71, 78, var(--opacity-3));

	--state-layer-opacity-1-outline: rgba(115, 119, 127, var(--opacity-1));
	--state-layer-opacity-2-outline: rgba(115, 119, 127, var(--opacity-2));
	--state-layer-opacity-3-outline: rgba(115, 119, 127, var(--opacity-3));

	--state-layer-opacity-1-outline-variant: rgba(195, 198, 207, var(--opacity-1));
	--state-layer-opacity-2-outline-variant: rgba(195, 198, 207, var(--opacity-2));
	--state-layer-opacity-3-outline-variant: rgba(195, 198, 207, var(--opacity-3));

	--state-layer-opacity-1-shadow: rgba(0, 0, 0, var(--opacity-1));
	--state-layer-opacity-2-shadow: rgba(0, 0, 0, var(--opacity-2));
	--state-layer-opacity-3-shadow: rgba(0, 0, 0, var(--opacity-3));

	--state-layer-opacity-1-scrim: rgba(0, 0, 0, var(--opacity-1));
	--state-layer-opacity-2-scrim: rgba(0, 0, 0, var(--opacity-2));
	--state-layer-opacity-3-scrim: rgba(0, 0, 0, var(--opacity-3));

	--state-layer-opacity-1-inverse-surface: rgba(46, 49, 53, var(--opacity-1));
	--state-layer-opacity-2-inverse-surface: rgba(46, 49, 53, var(--opacity-2));
	--state-layer-opacity-3-inverse-surface: rgba(46, 49, 53, var(--opacity-3));

	--state-layer-opacity-1-inverse-on-surface: rgba(239, 240, 247, var(--opacity-1));
	--state-layer-opacity-2-inverse-on-surface: rgba(239, 240, 247, var(--opacity-2));
	--state-layer-opacity-3-inverse-on-surface: rgba(239, 240, 247, var(--opacity-3));

	--state-layer-opacity-1-inverse-primary: rgba(160, 202, 253, var(--opacity-1));
	--state-layer-opacity-2-inverse-primary: rgba(160, 202, 253, var(--opacity-2));
	--state-layer-opacity-3-inverse-primary: rgba(160, 202, 253, var(--opacity-3));

	--state-layer-opacity-1-primary-fixed: rgba(209, 228, 255, var(--opacity-1));
	--state-layer-opacity-2-primary-fixed: rgba(209, 228, 255, var(--opacity-2));
	--state-layer-opacity-3-primary-fixed: rgba(209, 228, 255, var(--opacity-3));

	--state-layer-opacity-1-on-primary-fixed: rgba(0, 29, 54, var(--opacity-1));
	--state-layer-opacity-2-on-primary-fixed: rgba(0, 29, 54, var(--opacity-2));
	--state-layer-opacity-3-on-primary-fixed: rgba(0, 29, 54, var(--opacity-3));

	--state-layer-opacity-1-primary-fixed-dim: rgba(160, 202, 253, var(--opacity-1));
	--state-layer-opacity-2-primary-fixed-dim: rgba(160, 202, 253, var(--opacity-2));
	--state-layer-opacity-3-primary-fixed-dim: rgba(160, 202, 253, var(--opacity-3));

	--state-layer-opacity-1-on-primary-fixed-variant: rgba(26, 73, 117, var(--opacity-1));
	--state-layer-opacity-2-on-primary-fixed-variant: rgba(26, 73, 117, var(--opacity-2));
	--state-layer-opacity-3-on-primary-fixed-variant: rgba(26, 73, 117, var(--opacity-3));

	--state-layer-opacity-1-secondary-fixed: rgba(215, 227, 248, var(--opacity-1));
	--state-layer-opacity-2-secondary-fixed: rgba(215, 227, 248, var(--opacity-2));
	--state-layer-opacity-3-secondary-fixed: rgba(215, 227, 248, var(--opacity-3));

	--state-layer-opacity-1-on-secondary-fixed: rgba(16, 28, 43, var(--opacity-1));
	--state-layer-opacity-2-on-secondary-fixed: rgba(16, 28, 43, var(--opacity-2));
	--state-layer-opacity-3-on-secondary-fixed: rgba(16, 28, 43, var(--opacity-3));

	--state-layer-opacity-1-secondary-fixed-dim: rgba(187, 199, 219, var(--opacity-1));
	--state-layer-opacity-2-secondary-fixed-dim: rgba(187, 199, 219, var(--opacity-2));
	--state-layer-opacity-3-secondary-fixed-dim: rgba(187, 199, 219, var(--opacity-3));

	--state-layer-opacity-1-on-secondary-fixed-variant: rgba(59, 72, 88, var(--opacity-1));
	--state-layer-opacity-2-on-secondary-fixed-variant: rgba(59, 72, 88, var(--opacity-2));
	--state-layer-opacity-3-on-secondary-fixed-variant: rgba(59, 72, 88, var(--opacity-3));

	--state-layer-opacity-1-tertiary-fixed: rgba(243, 218, 255, var(--opacity-1));
	--state-layer-opacity-2-tertiary-fixed: rgba(243, 218, 255, var(--opacity-2));
	--state-layer-opacity-3-tertiary-fixed: rgba(243, 218, 255, var(--opacity-3));

	--state-layer-opacity-1-on-tertiary-fixed: rgba(37, 20, 51, var(--opacity-1));
	--state-layer-opacity-2-on-tertiary-fixed: rgba(37, 20, 51, var(--opacity-2));
	--state-layer-opacity-3-on-tertiary-fixed: rgba(37, 20, 51, var(--opacity-3));

	--state-layer-opacity-1-tertiary-fixed-dim: rgba(215, 190, 228, var(--opacity-1));
	--state-layer-opacity-2-tertiary-fixed-dim: rgba(215, 190, 228, var(--opacity-2));
	--state-layer-opacity-3-tertiary-fixed-dim: rgba(215, 190, 228, var(--opacity-3));

	--state-layer-opacity-1-on-tertiary-fixed-variant: rgba(82, 63, 95, var(--opacity-1));
	--state-layer-opacity-2-on-tertiary-fixed-variant: rgba(82, 63, 95, var(--opacity-2));
	--state-layer-opacity-3-on-tertiary-fixed-variant: rgba(82, 63, 95, var(--opacity-3));

	/* Opacity for content */
	--opacity-disabled: .38;

	/* Shapes */
	--shape-none: 0; /* No border-radius */
	--shape-xs: 0.25rem; /* 4px */
	--shape-sm: 0.5rem; /* 8px */
	--shape-md: 0.75rem; /* 12px */
	--shape-lg: 1rem; /* 16px */
	--shape-xl: 1.75rem; /* 28px */
	--shape-full: 62.5rem; /* 1000px */

	/* Spacing */
	--spacing-none: 0;
	--spacing-xxs: .25rem; /* 4px */
	--spacing-xs: .5rem; /* 8px */
	--spacing-sm: 1rem; /* 16px */
	--spacing-md: 1.5rem; /* 24px */
	--spacing-lg: 2rem; /* 32px */
	--spacing-xl: 2.5rem; /* 40px */
	--spacing-xxl: 3.5rem; /* 56px */

	/* Motion --> TODO*/
	--motion-transition: .1s;
	--motion-transition-long: .3s;

}

.c-text {
	&.headline-lg{
		font-family: var(--headline-l-font-family);
		font-size: var(--headline-l-font-size);
		line-height: var(--headline-l-line-height);
		font-weight: var(--headline-l-font-weight);
		letter-spacing: var(--headline-l-letter-spacing);
	}
	&.headline-md{
		font-family: var(--headline-m-font-family);
		font-size: var(--headline-m-font-size);
		line-height: var(--headline-m-line-height);
		font-weight: var(--headline-m-font-weight);
		letter-spacing: var(--headline-m-letter-spacing);
	}
	&.headline-sm{
		font-family: var(--headline-s-font-family);
		font-size: var(--headline-s-font-size);
		line-height: var(--headline-s-line-height);
		font-weight: var(--headline-s-font-weight);
		letter-spacing: var(--headline-s-letter-spacing);
	}
	&.title-lg{
		font-family: var(--title-l-font-family);
		font-size: var(--title-l-font-size);
		line-height: var(--title-l-line-height);
		font-weight: var(--title-l-font-weight);
		letter-spacing: var(--title-l-letter-spacing);
	}
	&.title-md{
		font-family: var(--title-m-font-family);
		font-size: var(--title-m-font-size);
		line-height: var(--title-m-line-height);
		font-weight: var(--title-m-font-weight);
		letter-spacing: var(--title-m-letter-spacing);
	}
	&.title-sm{
		font-family: var(--title-s-font-family);
		font-size: var(--title-s-font-size);
		line-height: var(--title-s-line-height);
		font-weight: var(--title-s-font-weight);
		letter-spacing: var(--title-s-letter-spacing);
	}
	&.body-lg{
		font-family: var(--body-l-font-family);
		font-size: var(--body-l-font-size);
		line-height: var(--body-l-line-height);
		font-weight: var(--body-l-font-weight);
		letter-spacing: var(--body-l-letter-spacing);
	}
	&.body-md{
		font-family: var(--body-m-font-family);
		font-size: var(--body-m-font-size);
		line-height: var(--body-m-line-height);
		font-weight: var(--body-m-font-weight);
		letter-spacing: var(--body-m-letter-spacing);
	}
	&.body-sm{
		font-family: var(--body-s-font-family);
		font-size: var(--body-s-font-size);
		line-height: var(--body-s-line-height);
		font-weight: var(--body-s-font-weight);
		letter-spacing: var(--body-s-letter-spacing);
	}
	&.label-lg{
		font-family: var(--label-l-font-family);
		font-size: var(--label-l-font-size);
		line-height: var(--label-l-line-height);
		font-weight: var(--label-l-font-weight);
		letter-spacing: var(--label-l-letter-spacing);
	}
	&.label-md{
		font-family: var(--label-m-font-family);
		font-size: var(--label-m-font-size);
		line-height: var(--label-m-line-height);
		font-weight: var(--label-m-font-weight);
		letter-spacing: var(--label-m-letter-spacing);
	}
	&.label-sm{
		font-family: var(--label-s-font-family);
		font-size: var(--label-s-font-size);
		line-height: var(--label-s-line-height);
		font-weight: var(--label-s-font-weight);
		letter-spacing: var(--label-s-letter-spacing);
	}

	&.primary{
		color: var(--color-primary);
	}
	&.on-surface{
		color: var(--color-on-surface);
	}
	&.on-surface-variant{
		color: var(--color-on-surface-variant);
	}
	&.outline{
		color: var(--color-outline);
	}
	&.outline-variant{
		color: var(--color-outline-variant);
	}
	&.prescription{
		color: var(--color-prescription);
	}
	&.error{
		color: var(--color-error);
	}
	&.success{
		color: var(--color-success);
	}
	&.white{
		color: var(--color-surface-1);
	}

	&.nowrap{
		white-space: nowrap;
	}
}

.c-button {
	font-family: var(--label-l-font-family);
	font-size: var(--label-l-font-size);
	line-height: var(--label-l-line-height);
	font-weight: var(--label-l-font-weight);
	letter-spacing: var(--label-l-letter-spacing);
	border-radius: var(--shape-sm);
	height: 2.5rem;
	padding-inline: var(--spacing-md);
	cursor: pointer;

	&.has-icon-left {
		padding-left: var(--spacing-sm);
	}

	&.has-icon-right {
		padding-right: var(--spacing-sm);
	}

	&.filled {
		background-color: var(--color-primary);
		color: var(--color-on-primary);
		border: none;
	}

	&.outlined {
		background-color: transparent;
		border: 1px solid var(--color-outline);
		color: var(--color-primary);
	}

	&.tonal {
		background-color: var(--color-secondary-container);
		color: var(--color-on-secondary-container);
		border: none
	}

	&.text{
		border: none;
		background-color: transparent;
		color: var(--color-primary);
		&[disabled] {
			color: var(--color-on-surface-variant);
		}
	}

	&[disabled] {
		cursor: not-allowed;
		opacity: var(--opacity-disabled);
	}

	&.filled:disabled,
	&.tonal:disabled {
		background-color: var(--state-layer-opacity-2-on-surface);
		color: var(--color-on-surface);
		opacity: var(--opacity-disabled);
	}

	&.outlined:disabled {
		border: solid 1px var(--state-layer-opacity-2-on-surface);
		opacity: var(--opacity-disabled);
	}

}


.c-icon-button{
	width: 3rem;
	height: 3rem;
	border-radius: var(--shape-full);
	padding: var(--spacing-xxs);
	display: flex;
	justify-content: center;
	align-items: center;
	border: none;
	background: transparent;
	cursor: pointer;

	&[disabled] {
		cursor: not-allowed;
		opacity: var(--opacity-disabled);
	}

	&> .icon-container{
		width: 100%;
		height: 100%;
		border-radius: inherit;
		cursor: inherit;
	}

	&.filled> .icon-container{
		background-color: var(--color-primary);
		color: var(--color-on-primary);
	}
	&.tonal> .icon-container{
		background-color: var(--color-secondary-container);
		color: var(--color-on-secondary-container);
	}
	&.standard> .icon-container{
		background-color: transparent;
		color: var(--color-on-surface);
	}

	&.text-input{
		width: 2rem;
		height: 2rem;
		padding: 0;
		cursor: pointer;
		border: none;
		background: inherit;
	}
}

/* ez nem ide kéne */
button:focus{
	outline: none;
}

.c-badge-button{
	border: none;
	background: transparent;
	cursor: pointer;

	&[disabled] {
		cursor: not-allowed;
		& .c-badge{
			background-color: var(--state-layer-opacity-disabled-error-container);
		}
	}
}

.c-avatar-button{
	width: 3rem;
	height: 3rem;
	border-radius: var(--shape-full);
	display: flex;
	justify-content: center;
	align-items: center;
	border: none;
	background: transparent;
	cursor: pointer;
}

/* Toggle Icon Button component */
.c-toggle-icon-button{
	cursor: pointer;

	& label input[type=checkbox] {
		-webkit-appearance: none;
		appearance: none;
		cursor: pointer;
	}


	&:has(input[type=checkbox]:checked) .c-circle-text-with-icon > svg{
		color: var(--color-on-secondary-container);
		& .outer-circle{
			fill: var(--color-secondary-container);
			stroke: var(--color-outline);
		}
		& .text-label{
			font-weight: 600;
		}
	}

	&:has(input[type=checkbox]:not(:checked)){
		color: var(--color-outline-variant);

	}

	& .c-circle-text-with-icon{
		width: 5rem;
		height: 5rem;

		& .text-label{
			font-size: 9px;
		}

		& .icon-container{
			color: var(--color-primary);
		}
	}
}


/* Toggle Button */
.c-toggle-button{
	cursor: pointer;
	border-radius: var(--shape-sm);
	height: 2.5rem;

	& label{
		padding-inline: var(--spacing-md);
	}

	& label input[type=checkbox] {
		-webkit-appearance: none;
		appearance: none;
		cursor: pointer;
	}

	&:has(input[type=checkbox]:checked){
		background-color: var(--color-secondary-container);
		color: var(--color-on-secondary-container);
		border: solid 1px var(--color-primary);
	}

	&:has(input[type=checkbox]:not(:checked)) {
		color: var(--color-on-surface-variant);
		background-color: transparent;
		border: solid 1px var(--color-outline)

	}
}

.c-checkbox{
	&.disabled {
		cursor: not-allowed;
		background-color: transparent;
		opacity: var(--opacity-disabled);
	}

	cursor: pointer;
	input[type="checkbox"] {
		-webkit-appearance: none;
		appearance: none;
		cursor: pointer;
	}
	& .checkbox-label{
		& .icon-active,
		& .icon-inactive
		{
			height: 2rem;
			width: 2rem;
			flex-shrink: 0;
		}
		cursor: inherit;
	}

	& input[type=checkbox]:checked+.checkbox-label .icon-active{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	& input[type=checkbox]:checked+.checkbox-label .icon-inactive{
		display: none;
	}
	& input[type=checkbox]:not(:checked)+.checkbox-label .icon-active{
		display: none;
	}
	& input[type=checkbox]:not(:checked)+.checkbox-label .icon-inactive{
		display: flex;
		justify-content: center;
		align-items: center;
	}

	& .checkbox-label .label{
		font-family: var(--body-m-font-family);
		font-size: var(--body-m-font-size);
		line-height: var(--body-m-line-height);
		font-weight: var(--body-m-font-weight);
		letter-spacing: var(--body-m-letter-spacing);
		color: var(--color-on-surface);
	}

	&.danger .checkbox-label .label{
		color: var(--color-error);
	}
}

.c-checkbox-group{
	&.surface-1{
		background-color: var(--color-surface-1);
	}
	&.surface-2{
		background-color: var(--color-surface-2);
	}
	&.surface-3{
		background-color: var(--color-surface-3);
	}
}

.c-radio {
	&.disabled {
		cursor: not-allowed;
		background-color: transparent;
		opacity: var(--opacity-disabled);
	}

	cursor: pointer;

	input[type="radio"] {
		-webkit-appearance: none;
		appearance: none;
		cursor: pointer;
	}

	& .radio-label {

		& .icon-active,
		& .icon-inactive {
			height: 2rem;
			width: 2rem;
			flex-shrink: 0;
		}

		cursor: inherit;
	}

	& input[type=radio]:checked+.radio-label .icon-active {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	& input[type=radio]:checked+.radio-label .icon-inactive {
		display: none;
	}

	& input[type=radio]:not(:checked)+.radio-label .icon-active {
		display: none;
	}

	& input[type=radio]:not(:checked)+.radio-label .icon-inactive {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	& .radio-label .label {
		font-family: var(--body-m-font-family);
		font-size: var(--body-m-font-size);
		line-height: var(--body-m-line-height);
		font-weight: var(--body-m-font-weight);
		letter-spacing: var(--body-m-letter-spacing);
		color: var(--color-on-surface);
	}

	&.danger .radio-label .label {
		color: var(--color-error);
	}
}

.c-divider{
	&.horizontal{
		height: 1px;
		min-height: 1px;
		/* margin: auto; */
		&.width-100{
			width: 100%;
		}
		&.width-90{
			width: 90%;
		}
		&.width-80{
			width: 80%;
		}
		&.width-70{
			width: 70%;
		}
		&.width-60{
			width: 60%;
		}
	}

	&.vertical{
		width: 1px;
		margin: auto;
		&.width-100 {
			height: 100%;
		}

		&.width-90 {
			height: 90%;
		}

		&.width-80 {
			height: 80%;
		}

		&.width-70 {
			height: 70%;
		}

		&.width-60 {
			height: 60%;
		}
	}

	&.color-outline{
		background-color: var(--color-outline);
	}
	&.color-outline-variant{
		background-color: var(--color-outline-variant);
	}


}

.loading-container {
	height: 100%;
	width: 100%;
	/* background-color: var(--color-surface-2); */
}

.capsule-container {
	height: 100px;
}

.capsule-frame {
	width: 60px;
	height: 30px;
	border: 3px solid var(--color-primary);
	border-radius: 15px;
	position: relative;
	animation: bounce-and-rotate 6s infinite linear;
}

.capsule-fill {
	width: 50%;
	height: 100%;
	background-color: var(--color-primary);
	border-radius: 15px 0 0 15px;
	position: absolute;
	left: 0;
	animation: rotate-fill 6s infinite linear;
}

@keyframes bounce-and-rotate {
	0% {
		transform: translateY(0) rotate(0deg);
	}

	20% {
		transform: translateY(-30px) rotate(90deg);
	}

	40% {
		transform: translateY(0) rotate(180deg);
	}

	70% {
		transform: translateY(-90px) rotate(270deg);
	}

	100% {
		transform: translateY(0) rotate(360deg);
	}
}

@keyframes rotate-fill {

	0%,
	100% {
		transform: scaleX(1);
	}

	50% {
		transform: scaleX(1.1);
	}
}

.loading-text {
	margin-top: 20px;
}

.c-switch{
	position: relative;
	display: flex;
}

.c-switch>.switch-container{
	width: 3.25rem;
	height: 2rem;
	display: block;
	overflow: hidden;
	cursor: pointer;
	border-radius: var(--shape-full);
}

.c-switch input[type="checkbox"]{
	display: none;
}

.c-switch .inner{
	display: block;
	width: 200%;
	margin-left: -100%;
}

.c-switch .inner:before,
.c-switch .inner:after{
	float: left;
	width: 50%;
	height: 2rem;
	padding: 0;
	box-sizing: border-box;
}

.c-switch .inner:before{
	content: "";
	background-color: var(--color-primary);
	color: var(--color-white);
	display: flex;
	align-items: center;
	justify-content: start;
}

.c-switch .inner:after{
	content: "";
	background-color: var(--color-surface-1);
	border: 2px solid var(--color-outline);
	border-radius: var(--shape-full);
	color: var(--color-white);
	display: flex;
	align-items: center;
	justify-content: end;
}

.c-switch .switch{
	display: block;
	background: var(--color-outline);
	position: absolute;
	left: 0.5rem;
	border-radius: 50%;
	transition: all 0.1s ease-in 0s;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1rem;
	height: 1rem;
	top: 0.5rem;
}

.c-switch input[type="checkbox"]:checked+span.inner {
	margin-left: 0;
}

.c-switch input[type="checkbox"]:checked~span.switch {
	left: 1.5rem;
	background: var(--color-on-primary);
	width: 1.5rem;
	height: 1.5rem;
	top: 0.25rem;
}

/* MAIN MENU */
.c-menu-main{
	display: flex;
	align-items: center;
	gap: var(--spacing-sm)
}
/* MAIN MENU ITEM */
.c-menu-main-item{

	&.selected {
		display: flex;
		align-items: center;
		background-color: var(--color-secondary-container);
		border-radius: var(--shape-full);
		height: 2.5rem;
		padding-inline-start: var(--spacing-xs);
		padding-inline-end: var(--spacing-sm);
	}
}

.c-nav-menu-multi-level{
	& .c-popper{
		& .popper-opts{
			min-width: 15.5rem;
			width: auto!important;
		}
	}
}

.c-nav-menu-item{

	&>.main-menu{
		margin: var(--spacing-xxs);
		display: flex;
		align-items: center;
		justify-content: space-between;
		cursor: pointer;
		color: var(--color-on-surface-variant);
		gap: var(--spacing-xs);
		padding-inline-start: var(--spacing-xs);
		padding-inline-end: var(--spacing-sm);
		height: 2.5rem;

		&.selected {
			background-color: var(--color-secondary-container);
			border-radius: var(--shape-full);


			color: var(--color-on-surface);
		}
	}

	& .sub-menu {
		border-radius: var(--shape-full);
		padding-inline: var(--spacing-sm);
		padding-top: var(--spacing-xxs);
		padding-bottom: var(--spacing-xxs);
		margin-right: var(--spacing-xxs);
		cursor: pointer;
		&.selected{
			background-color: var(--color-surface-1);

		}
	}
}

.c-more-options-menu{
	& .c-popper {
			& .popper-opts {
				min-width: 12rem;
				width: auto !important;
			}
		}
}

.c-more-options-menu-item{
	margin: var(--spacing-xxs);
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	color: var(--color-on-surface-variant);
	gap: var(--spacing-xs);
	padding-inline-start: var(--spacing-xs);
	padding-inline-end: var(--spacing-sm);
	height: 2.5rem;
	width: 100%;
}

.c-tabbed-form{
	display: flex;
	gap: 0.5rem;
	max-width: 76rem;
	height: calc(100% - 6rem);
	background-color: var(--color-surface-2);

	& ul.main-categories,
	ul.sub-categories{
		&>li{
			list-style-type: none;
			height: 3.5rem;
			display: flex;
			justify-content: start;
			align-content: center;
			padding: 1rem;
			cursor: pointer;
			flex-wrap: wrap;
		}
	}

	& ul.main-categories{
		flex: 2;
		min-height: 100%;
		background-color: var(--color-surface-4);
		color: var(--color-on-surface-variant);
		display: flex;
		flex-direction: column;

		&>li.active{
			background-color: var(--color-surface-2);
			color: var(--color-primary);
			position: relative;


			&>span{
				font-size: var(--body-l-font-size) !important;
				transition: font-size var(--motion-transition) ease-in-out;
			}

			&::before {
				content: "";
				position: absolute;
				left: 0.25rem;
				top: 20%;
				bottom: 20%;
				height: 60%;
				width: 4px;
				border-left: 4px solid var(--color-primary);
			}
		}
	}

	& ul.sub-categories{
		min-height: 100%;
		width: fit-content;
		background-color: inherit;
		display: flex;
		flex-direction: column;
		position: relative;

		&::before{
			content: "";
			position: absolute;
			top: .25rem;
			bottom: .25rem;
			left: .25rem;
			height: calc(100% - .5rem);
			border-left: 2px dotted var(--color-light-secondary);
		}

		&>li.active {
			color: var(--color-primary);
			position: relative;
			font-size: var(--body-l-font-size) !important;

			&>span {
				font-size: var(--body-l-font-size) !important;
				transition: font-size var(--motion-transition) ease-in-out;
			}

			&::before {
				content: "";
				position: absolute;
				left: 0rem;
				top: 50%;
				bottom: 50%;
				width: 10px;
				height: 10px;
				border: 3px solid var(--color-primary);
				background-color: var(--color-white);
				border-radius: 50%;
				transform: translateY(-50%);
			}
		}
	}

	& .form-container{
		flex: 5;
		gap: 0.5rem;
		padding: 0.5rem;
		overflow: auto;

		&::-webkit-scrollbar{
			width: 0.5rem;
		}

		&::-webkit-scrollbar-thumb{
			background-color: var(--color-surface-3);
			border-radius: 1rem;
		}

		&::-webkit-scrollbar-track{
			background-color: var(--color-surface-2);
		}
	}
}

.c-update-form, .c-form {
    display: flex;
    gap: 0.5rem;
    max-width: 76rem;
    height: calc(100% - 6rem);
    background-color: var(--color-surface-2);

    & ul.main-tabs,
    ul.sub-tabs {
        &>li {
            list-style-type: none;
            height: 3.5rem;
            display: flex;
            justify-content: start;
            align-content: center;
            padding: 1rem;
            cursor: pointer;
            flex-wrap: wrap;
        }
    }

    & ul.main-tabs {
        flex: 2;
        min-height: 100%;
        background-color: var(--color-surface-4);
        color: var(--color-on-surface-variant);
        display: flex;
        flex-direction: column;

        &>li.active {
            background-color: var(--color-surface-2);
            color: var(--color-primary);
            position: relative;


            &>span {
                font-size: var(--body-l-font-size) !important;
                transition: font-size var(--motion-transition) ease-in-out;
            }

            &::before {
                content: "";
                position: absolute;
                left: 0.25rem;
                top: 20%;
                bottom: 20%;
                height: 60%;
                width: 4px;
                border-left: 4px solid var(--color-primary);
            }
        }
    }

    & ul.sub-tabs {
        min-height: 100%;
        /* TODO: ez így nem szerencsés, talán majd dinamikusan kellene számolni a kódban... */
        min-width: 13rem;
        width: fit-content;
        background-color: inherit;
        display: flex;
        flex-direction: column;
        position: relative;

        &::before {
            content: "";
            position: absolute;
            top: .25rem;
            bottom: .25rem;
            left: .25rem;
            height: calc(100% - .5rem);
            border-left: 2px dotted var(--color-light-secondary);
        }

        &>li.active {
            color: var(--color-primary);
            position: relative;
            font-size: var(--body-l-font-size) !important;

            &>span {
                font-size: var(--body-l-font-size) !important;
                transition: font-size var(--motion-transition) ease-in-out;
            }

            &::before {
                content: "";
                position: absolute;
                left: 0rem;
                top: 50%;
                bottom: 50%;
                width: 10px;
                height: 10px;
                border: 3px solid var(--color-primary);
                background-color: var(--color-white);
                border-radius: 50%;
                transform: translateY(-50%);
            }
        }
    }

    & .form-container {
        flex: 5;
        gap: 0.5rem;
        padding: var(--spacing-sm);
        overflow: auto;

        &::-webkit-scrollbar {
            width: 0.5rem;
        }

        &::-webkit-scrollbar-thumb {
            background-color: var(--color-surface-3);
            border-radius: 1rem;
        }

        &::-webkit-scrollbar-track {
            background-color: var(--color-surface-2);
        }
    }
}

.c-update-form-with-header{
    max-width: 76rem;
}

.c-editable-text,
.c-editable-number{
    /* TODO: az expediálásnál speciálisan ezt be kell állítani!!!! */
    /* height: 4.5rem;
    padding-top: var(--spacing-xs); */
}

.c-accordion{
	max-height: 10rem;
	min-height: 8.5rem;
	&>.accordion-item {
		& .c-button.arrow {
			padding-left: 0;
			color: var(--color-on-surface);
			min-height: 2.5rem;

			&.open{
				color: var(--color-primary);
			}
			& .icon {
				&.closed {
					transition: transform var(--motion-transition-long) ease-in-out;
				}

				&.open {
					transform: rotate(90deg);
					transition: transform var(--motion-transition-long) ease-in-out;
				}
			}
		}

		&>.content {
			padding: var(--spacing-none) var(--spacing-xs) var(--spacing-none) 1.875rem;
		}
	}
}




.c-modal{
	position: fixed;
	background: #0000005f;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 1000;

	& .modal-content{
		position: fixed;
		background-color: var(--color-surface-4);
		border-radius: var(--shape-md);
		box-shadow: var(--elevation-1);
		width: 100%;
		max-width: 640px;
		height: auto;
		max-height: 100%;
		top: 50%;
		left: 50%;
		padding: 15px;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		overflow: auto;
		z-index: 1010;
	}
}

.c-modal-wrapper{
	width: 100vw;
	height: 100vh;
	z-index: 200;
	background-color: rgba(0, 0, 0, 0.4);
	position: fixed;
	top: 0;
	left: 0;

	.c-dialog, .c-spinner-dialog{
		width: 30rem;
		min-height: 20rem;
		height: fit-content;
		z-index: 202;
		background-color: var(--color-surface-1);
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border-radius: 0.5rem;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.c-dialog{
		&.success {
			& .dialog-header {
				background-color: var(--color-success-container);
			}

			& .dialog-footer {
				&>button.c-button {
					&.filled {
						background-color: var(--color-success);
					}
					&.outlined {
						color: var(--color-success);
					}
				}
			}
		}
		&.alert {
			& .dialog-header {
				background-color: var(--color-warning-container);
			}
			/* TODO_ meglátjuk, hogy legyen a formázása */
			/* & .dialog-footer {
				&>button.c-button {
					&.filled {
						background-color: var(--color-warning);
					}
					&.outlined {
						color: var(--color-warning);
					}
				}
			} */
		}
		&.confirm{
			& .dialog-header {
				background-color: var(--color-primary-container);
			}
		}


	}

	.c-spinner-dialog{
		height: 30rem;
	}


}


.c-step-progress-bar{
	&.controlled {
		& .c-step-progress-bar-item{
			cursor: pointer;
		}
	}
}

.c-step-progress-bar-item{
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xxs);
	justify-content: center;
	align-items: center;

	&.sm{
		width: 5rem;

		&>.icon-container {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		border: none;
		border-radius: var(--shape-full);
		width: 1.5rem;
		height: 1.5rem;

		&>div.not-started {
			width: 1.5rem;
			height: 1.5rem;
			border-radius: var(--shape-full);
			display: flex;
			justify-content: center;
			align-items: center;

			&>svg.icon {
				color: var(--color-outline-variant);
				position: absolute;
			}
		}

		&>div.fulfilled,
		div.current {
			width: 1.5rem;
			height: 1.5rem;
			border-radius: var(--shape-full);
			display: flex;
			justify-content: center;
			align-items: center;

			&>svg.icon {
				color: var(--color-primary);
				position: absolute;

			}
		}

		&>div.current,
		div.not-started {
			&>svg.icon {
				>path:nth-of-type(2) {
					stroke-width: 2;
				}
			}
		}

		&>div.line {
			width: 92px;
			height: 4px;
			border-radius: var(--shape-full);
			position: absolute;
			left: 22px;
			top: 10px;

			&.primary {
				background-color: var(--color-primary);
			}

			&.surface-5 {
				background-color: var(--color-surface-5);
			}
		}}
	}




	&.lg{
		&>.icon-container{
			background-color: var(--color-surface-5);
			border-radius: var(--shape-full);
			width: 2.5rem;
			height: 2.5rem;
			max-width: 2.5rem;
			max-height: 2.5rem;
			min-width: 2.5rem;
			min-height: 2.5rem;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			&>div.not-started{
				width: 1.875rem;
				height: 1.875rem;
				background-color: var(--color-outline-variant);
				border-radius: var(--shape-full);
				display: flex;
				justify-content: center;
				align-items: center;
			}
			&>div.fulfilled, div.current{
				width: 1.6rem;
				height: 1.6rem;
				background-color: var(--color-surface-1);
				border-radius: var(--shape-full);

				&>.icon{
					position: absolute;
					top: 4px;
					left: 4px;
					width: 2rem;
					height: 2rem;
					color: var(--color-primary);
				}
			}

			&>div.line{
				width: 60px;
				height: 5px;
				position: absolute;
				left: 40px;
				top:'18px';
				&.primary{
					background-color: var(--color-primary);
				}
				&.surface-5{
					background-color: var(--color-surface-5);
					}
				}
			}

			&.vertical{
				flex-direction: row;
				justify-content: flex-start;
				align-self: flex-start;
				gap: var(--spacing-sm);
				width: 100%;

				/* TEMP--> ezt vszínűleg csak az eLearningben kellene így használni */
				&:has(.icon-container .current){
					/* background-color: var(--color-secondary-container); */
				}

				&>.icon-container{
					width: 2.2rem;
					height: 2.2rem;
					max-width: 2.2rem;
					max-height: 2.2rem;
					min-width: 2.2rem;
					min-height: 2.2rem;
					&>div.not-started {
						width: 1.6rem;
						height: 1.6rem;
						background-color: var(--color-outline-variant);
						border-radius: var(--shape-full);
						display: flex;
						justify-content: center;
						align-items: center;
					}

					&>div.fulfilled,
					div.current {
						width: 1.4rem;
						height: 1.4rem;
						background-color: var(--color-surface-1);
						border-radius: var(--shape-full);

						&>svg.icon {
							position: absolute;
							top: 2px;
							left: 2px;
							width: 2rem;
							/* width: 1.5rem; */
							/* height: 1.5rem; */
							height: 2rem;
							color: var(--color-primary);
							/* stroke-width: 2; */
						}
					}
					&>div.line {
						width: 3px;
						height: 20px;
						position: absolute;
						left: 17px;
						top: 36px;
					}
				}
			}

			&.label.container{
				white-space: nowrap;
			}

	}

	&.sm{

	}

}

.m-table.data-table-basic {
	height: 100%;
	background: var(--color-surface-2);

	.sui-scroll.sui-fill {
		height: 100%;
	}

	>.sui-toolbar {
		right: 1.5rem;
		top: .25rem;
		background-color: transparent;
		display: none;
	}

	& .sui-inside {
		& .sui-header {
			background-color: var(--color-surface-1);
			color: var(--color-on-surface-variant);
		}

		& .sui-row {
			height: 3rem;
			border-bottom: solid 2px var(--color-surface-1);
			color: var(--color-on-surface-variant);
			color: var(--color-on-surface);

			&:nth-of-type(even) {
				background-color: var(--color-surface-2);
			}

			&:nth-of-type(odd) {
				background-color: var(--color-surface-2);
			}

			&.selected {
				background-color: var(--color-surface-4);
				box-shadow: var(--elevation-2);
				cursor: pointer;
			}

			&.active {
				background-color: var(--color-secondary-container);
				box-shadow: var(--elevation-2);
				cursor: pointer;
			}
		}
	}
}



/* Expedition */
.expedition-info{
	& .expedition-navigation{
		position: relative;
		height: 100%;

		&>.active-avatar-container{
			width: 10.25rem;
			height: inherit;
			position: relative;
			& .active-avatar{
				height: 5.25rem;
				position: absolute;
				left: 50%;
				top: -65%;
				transform: translateX(-50%);
			}
			& .c-badge-button .c-badge.top-right {
				right: 20% !important;
				top: -80% !important;
			}
		}

		&>.expedition-queue{
			width: 29rem;
			margin: auto;
			overflow: hidden;
			& .avatar-scroll{
				display: flex;
				gap: var(--spacing-xxs);
				overflow-x: auto;
				scroll-behavior: smooth;
				flex: 1;
			}
			& .avatar-scroll::-webkit-scrollbar {
				display: none;
			}

			& .avatar-scroll {
				-ms-overflow-style: none;
				scrollbar-width: none;
			}
}

		&>.expedition-queue>.avatar-container{
			height: inherit;
			&>.main-avatar{
				opacity: 1;
			}
			&>.avatar{
				opacity: .8;
			}
		}
	}

	& .product-filters .atk-container .product-category-filter{
		& .m-group{
			gap: var(--spacing-xs);
			& .select-wrapper{
				position: relative;

				& select{
					border-radius: var(--shape-full);
					height: 2.5rem;
					padding-inline-start: var(--spacing-sm);
					padding-inline-end: var(--spacing-xl);
					border: none;
					appearance: none;
					-webkit-appearance: none;
					&:focus {
						outline: 2px var(--color-primary) solid;
						box-shadow: none;
					}
				}

				& .select-arrow{
					position: absolute;
					right: var(--spacing-sm);
					top: 50%;
					transform: translateY(-50%);
					pointer-events: none;
				}

			}
		}
	}

	& .patient-info {
		& .c-dropdown-search.dropdown-patient-search {
			& .search-container{
				max-width: 15rem;
				width: 15rem;
				padding-inline-start: var(--spacing-xxs);
				align-items: center;

				& input{
					max-width: 9.2rem;
				}
			}
		}
	}


	& .c-modal.payment-process{
		& .modal-content{
			max-width: 90%;
		}
		&.step-2 .modal-content
		{
			height: 53rem;
		}
	}

}

.card {

}

/* Product */
.product-list {
	& .m-table.product-table {
		& .sui-toolbar{
			background-color: var(--color-surface-2);
			color: var(--color-on-surface);
			right: .5rem;
		}

		& .sui-header{
			background-color: var(--color-surface-2);
			color: var(--color-on-surface);
			font-family: var(--label-l-font-family);
			font-size: var(--label-l-font-size);
			line-height: var(--label-l-line-height);
			font-weight: var(--label-l-font-weight);
			letter-spacing: var(--label-l-letter-spacing);
			& .sui-column{
				& .sui-title{
					text-align: center;
				}
			}
		}
		& .sui-body{
			& .sui-row{
				height: 3rem;
				cursor: pointer;

				& .sui-cell{
					color: var(--color-on-surface);
					font-family: var(--body-l-font-family);
					font-size: var(--body-l-font-size);
					line-height: var(--body-l-line-height);
					font-weight: var(--body-l-font-weight);
					letter-spacing: var(--body-l-letter-spacing);
				}
			}

			& .sui-row:nth-child(odd){
				background-color: var(--color-surface-3);
			}
			& .sui-row:nth-child(even){
				background-color: var(--color-surface-4);
			}
			& .sui-row.selected {
				background-color: var(--color-secondary-container) !important;
				box-shadow: var(--elevation-2);
				position: relative;
				z-index: 12;
			}
		}
	}
}


/* Patient & Product*/
.patient-list,
.product-list{
	background-color: var(--color-surface-1);
	position: relative;
	height: 100%;
}

.patient-list>.list,
.product-list>.list {
	display: flex;
	flex-flow: row wrap;
	/* font-size: 1.5rem; */
	/* line-height: 2.5rem; */
	max-height: calc(100vh - var(--s-hdr-line));
	/* height: 100%; */
	/* overflow: auto; */
	padding: var(--spacing-xs);
	gap: var(--spacing-xs);

	>.placeholder{
		width: calc(50% - 2rem);
		height: 14rem;
		flex-grow: 1;
	}

	& .prescription-neak{
		max-height: 44.7rem;
		overflow: auto;

		& .retaxa-note{
			height: 3rem;
			& .input-message-container{
				height: 2rem;
				max-height: 2rem;
				min-height: 2rem;
			}
		}
	}
}

.product-list:has(.list>.c-loading){
	min-height: 100%;
}

.product-list>.list:has(.c-loading){
	justify-content: center;
	align-items: center;
	height: 100%;
}

.patient-list .patient-card,
.product-list .product-card,
.product-list .prescription-card{
	width: calc(50% - 2rem);
	flex-grow: 1;
	height: 14rem;
	background-color: var(--color-surface-2);
	cursor: pointer;
	z-index: 5;
	border-radius: 0.5rem;
	justify-content: space-between;
	position: relative;
	padding: var(--spacing-sm);
	border: 1px solid var(--color-outline-variant);
	color: var(--color-on-surface);

	& .label{
		color: var(--color-on-surface-variant);
	}

	&>.content-container{
		height: 100%;
	}
}

.patient-list .patient-card.active,
.product-list .product-card.active,
.product-list .prescription-card.active{
	background-color: var(--color-surface-3);
	box-shadow: var(--elevation-2);
	z-index: 14;
	border: 2px solid var(--color-primary);
}

.product-list .prescription-card.selected,
.product-list .product-card.selected{
	border: 2px solid var(--color-prescription);
	background-color: var(--color-surface-3);
	box-shadow: var(--elevation-2);
	z-index: 14;
}

.product-list .product-card .brand,
.product-list .prescription-card .brand{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.product-list .prescription-card{
	padding-bottom: var(--spacing-xs);
}


/* Product */
.one-product-info {
	color: var(--color-on-surface);
	height: 100%;

	& .c-label{
		color: var(--color-on-surface-variant)
	}

	.m-table.ingredient-table {
		max-width: 50rem;
		max-height: 13.5rem;
		height: 100%;
		background: var(--color-surface-2);

		.sui-scroll.sui-fill {
			height: 100%;
		}

		>.sui-toolbar {
			right: 1.5rem;
			top: .25rem;
			background-color: transparent;
			display: none;
		}

		& .sui-inside {
			& .sui-header {
				background-color: var(--color-surface-1);
				color: var(--color-on-surface-variant);
			}

			& .sui-row {
				height: 3rem;
				border-bottom: solid 2px var(--color-surface-1);
				color: var(--color-on-surface-variant);
				color: var(--color-on-surface);

				&:nth-of-type(even) {
					background-color: var(--color-surface-2);
				}

				&:nth-of-type(odd) {
					background-color: var(--color-surface-2);
				}

				&.selected {
					background-color: var(--color-surface-4);
					box-shadow: var(--elevation-2);
					cursor: pointer;
				}
			}
		}
	}
}

.product-list .product-card .product-name,
.product-list .prescription-card .product-name{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;

	&.cart{
		width: 86%;
	}
}

.product-list .product-card .cart{
	width: 19rem;
	position: relative;
}

.product-list .product-card .cart .cart-icon-container{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: var(--color-surface-5);
}

.product-list .product-card .cart .cart-icon-container .c-icon{
	width: 5rem;
	height: 5rem;
}

.product-list .product-card .patient-container{
	position: absolute;
	right: 10px;
	bottom: -40px;
}

.product-list .product-card .patient-container{
	display: flex;
	align-items: end;

	& .icon-exchange {
		position: relative;
		margin-left: -16px;
		margin-bottom: -16px;
		z-index: 100;
	}
	& .popper-opts{
		width: fit-content !important;
		& .selected-patient-list {
			box-shadow: var(--elevation-2);
			min-width: 12rem;
		}
	}

}



.product-list .list.product-prescription .product-attrs .product-attr-container{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	max-width: 24rem;
}

/* EPrescriptionDetailedData */
.product-list .list .e-prescription-detailed-data-body{
	max-height: 43rem;
	overflow: auto;

	& .drug-values>* {
		max-height: 1.5rem;
		max-width: 20rem;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
}


/* Patient */
.patient-main{
	height: 100%;
	& .client-registration{
		height: 100%;
		position: relative;
	}
}

.m-wrapper-pop-up-window{
	width: 100vw;
	height: 100vh;
	z-index: 200;
	background-color: rgba(0, 0, 0, 0.4);
	position: fixed;
	top: 0;
	left: 0;
}

.m-wrapper-pop-up-window .m-pop-up-window{
	width: 30rem;
	min-height: 20rem;
	height: fit-content;
	z-index: 202;
	background-color: var(--color-white) ;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 0.5rem;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.m-wrapper-pop-up-window .m-pop-up-window .pu-header{
	display: flex;
	justify-content: flex-end;
	height: 15%;
	flex: 1;
	padding: 0.5rem;
}

.m-wrapper-pop-up-window .m-pop-up-window.ok .pu-header {
	background-color: var(--color-light-success);
}

.m-wrapper-pop-up-window .m-pop-up-window.err .pu-header {
	background-color: var(--color-lighter-danger);
}
.m-wrapper-pop-up-window .m-pop-up-window.normal .pu-header {
	background-color: var(--color-primary-light);
}


.m-wrapper-pop-up-window .m-pop-up-window .pu-body{
	padding: 2rem 1rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex: 4;
}

.m-wrapper-pop-up-window .m-pop-up-window .pu-btns {
	padding: 1rem 1rem;
	flex:2;
}



.m-purchase-info{
	height: 44.25rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background-color: var(--color-primary-light);
	padding-bottom: 0.5rem;
}

.m-purchase-info > .page-list{
	width: 49rem;
	margin: 0.5rem;
	background-color: white;
	/* padding: 0.25rem; */
	justify-content: space-between;
}

.m-purchase-info>.page-list .vbox {
	width: auto;
}
.m-purchase-info .m-partner-info {
	padding: 0;
	margin: auto;
}

.m-purchase-info .m-partner-info .a-partners {
	padding: 0.5rem;
}
.m-purchase-info > .info{
	height: 100%;
	width: 49rem;
	height: 39.75rem;
	margin: auto;
	background-color: var(--color-transparent);
	padding: 0;
}

.m-purchase-info .m-product-detail {
	position: relative;
	background-color: var(--color-white);
	padding: 0.25rem;
	border-radius: 0.5rem;
}

.m-purchase-info .m-product-detail .charts {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	padding: 0.5rem 0;
	justify-content: center;
}

.m-purchase-info .m-setting-charts {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	/* background-color: var(--color-panel); */
	background-color: var(--color-white);
	overflow: auto;
	padding: 0.5rem;
}

.purchase-info .setting-charts{
	& .settings-charts-container .c-filter-chip {
		border-radius: var(--shape-md);
		width: 22.5rem;
		height: 13.25rem;
	}

}

.m-purchase-info .m-setting-charts::-webkit-scrollbar {
	width: 5px;
}

.m-purchase-info .m-setting-charts::-webkit-scrollbar-thumb {
	background-color: var(--color-light-secondary);
	border-radius: 1rem;
}

.m-purchase-info .m-setting-charts::-webkit-scrollbar-track {
	background-color: var(--color-lighter-secondary);
}

.m-purchase-info .a-partner-control {
	background-color: var(--color-primary-light);
}

.m-demand-list .header .a-input,
.m-partner-list .header .a-input{
	height: 2.5rem;
}
.m-demand-list .header .a-input input,
.m-partner-list .header .a-input input{
	height: 100%;
	width: 100%;
	font-size: 1.2rem;
}
.m-demand-list .list,
.m-partner-list .list,
.m-order-list .list{
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 0.5rem;
	gap: 10px;
	overflow: auto;
	position: relative;
	height: 100%;
	max-height: calc(100vh - var(--s-hdr-line))
}

.m-demand-list .list .shade,
.m-demand-list .shade,
.m-partner-list .list .shade,
.m-partner-list .shade {
	position: fixed;
	/* TEMP */
	/* height: 150%; */
	width: 100%;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: var(--color-secondary);
	z-index: -1;
	opacity: 0.2;
	transition: opacity var(--t-transition) ease-in-out;

}

.m-demand-list .shade.active,
.m-partner-list .shade.active,
.m-partner-list .list .shade.active {
	z-index: 12;
	opacity: 0.05;
}

.m-demand-list div.container {
	outline: solid 1px var(--color-lighter-secondary)
}

.m-demand-list .c-header .c-select .select-message-container .select-container{
	padding-left: var(--spacing-sm);
	& .icon-container{
		display: none;
	}
}


.m-demand-card,
.m-partner-card{
	width: calc(50% - 2rem);
	flex-grow: 1;
	height: 13.5rem;
	background-color: var(--color-bg-card);
	cursor: pointer;
	z-index: 5;
	border-radius: 0.5rem;
	padding: 0.25rem;
	justify-content: space-between;
}

.m-demand-card.active,
.m-partner-card.active {
	/* background-color: var(--color-bg-active-card); */
	background-color: var(--color-primary-light);
	box-shadow: 0px 0px 6px #00000080;
	z-index: 14;
}

.m-partner-card .product-name{
	max-height: 2rem;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	display: inline-block;
}

.m-demand-card>div{
	justify-content: space-between;
	padding: 0.5rem 0.25rem;
	gap: 10px;
	align-items: start;
}

.m-demand-card>div>div .a-text{
	max-height: 2rem;
}

.m-demand-card  label.input-amount {
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-end;
}

.m-demand-card .input-amount input, .input-amount input {
	width: 4rem;
	/* border: solid 1px var(--color-input-border); */
	border-radius: 0.25rem;
	font: var(--regular2);
	text-align: center;
	color: var(--color-secondary);
}

.m-demand-card .input-amount input:focus, .input-amount input:focus{
	/* border: solid 1px var(--color-light-secondary); */
	background-color: var(--color-white);
}


/* DemandList Table */
.m-demand-list.table {
	width: 100%;

}

.m-demand-list.table tr {
	height: 3rem;
}

.m-demand-list.table td {
	vertical-align: middle;
	padding: 0 0.25rem;
}

.m-demand-list.table td.alg {
	width: 7.5rem;
}
.m-demand-list.table td.alg.byhand .label{
	flex-direction: row-reverse;
}
.m-demand-list.table td.price {
	min-width: 5rem;
}

.m-demand-list.table td.price>div{
	justify-content: center;
}

.m-demand-list.table td label.input-amount {
	display: flex;
	/* flex-direction: row-reverse; */
	align-items: flex-end;
	justify-content: center;
}

.m-demand-list.table td .input-amount input {
	/* width: 2.5rem;  */
	width: 100%;
	height: 2.5rem;
	border: solid 1px var(--color-primary);
	border-radius: 1.5rem;
	font: var(--regular2);
	text-align: center;
	color: var(--color-secondary);
	padding: 0;
}

.m-demand-list.table td .input-amount input:focus {
	outline: none;
	border: solid 1px var(--color-primary)
}
.m-demand-list.table td.alg.byhand .bg-transparent.active>.a-button{
	padding: 0;
}
.m-demand-list.table td.alg.byhand .bg-transparent.active {
	/* border: solid 1px var(--color-primary); */
	/* border-radius: 1.5rem; */
	padding: 0
}

.m-demand-list.table td .input-amount input[type="number"]::-webkit-inner-spin-button,
.m-demand-list.table td .input-amount input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.m-demand-list.table tr:nth-child(even) {
	background-color: var(--color-table-even);
}

.m-demand-list.table tr:nth-child(odd) {
	background-color: var(--color-table-odd);
}

.m-demand-list.table .alg.byhand .bg-transparent {
	padding: 0;
}

.m-demand-list.table tr.header {
	background-color: var(--color-white);
}
.m-demand-list.table th {
	text-align: center;
	background-color: var(--color-white);
	vertical-align: bottom;
}

.m-alg-checkboxgroup{
	flex-wrap: wrap;
	justify-content: space-between;
}

.m-purchase-info .m-chart-checkboxgroup{
	flex-wrap: wrap;
	padding: 0.5rem;
	justify-content: center;
}

.m-purchase-info .m-chart-checkboxgroup > div {
	/* padding: 0.25rem 0.5rem; */
	width: 22.5rem;
	height: 16rem;
}

.m-purchase-info .m-chart-checkboxgroup  div
{
	justify-content: center;
	align-items: center;
}

.m-purchase-info .m-chart-checkboxgroup .label {
	justify-content: space-between;
	gap: 0.25rem;
	padding: 0.25rem 0.5rem;
	border-radius: 0.5rem;
}

.m-purchase-info .m-chart-checkboxgroup .a-checkbox input[type=checkbox]:checked~label{
	background-color: var(--color-primary-light);
}
.m-purchase-info .m-chart-checkboxgroup .a-checkbox input[type=checkbox]:checked~label .ct-chart-line-month-sales-container,
.m-purchase-info .m-chart-checkboxgroup .a-checkbox input[type=checkbox]:checked~label .color-legend,
.m-purchase-info .m-chart-checkboxgroup .a-checkbox input[type=checkbox]:checked~label .ct-chart-line-month-sales-data-range,
.m-purchase-info .m-chart-checkboxgroup .a-checkbox input[type=checkbox]:checked~label .ct-chart-line-month-sales-data-range-container input{
	background-color: inherit;
}


/* PartnerList */
.m-partner-list{

}

/* SettingPartners */
.m-partners {
	/* padding: 0.5rem;
	background-color: var(--color-white); */
}
.m-partners .m-setting-partners .popper-toggle {
	display: flex;
	height: 100%;
}

.m-partners .m-setting-partners .popper-toggle > div {
	align-items: center;
}

/* PartnerAssignmentSelect */
.a-btn-assignment.active {
	box-shadow: 0px 0px 6px #00000080;
}



/* PartnerSumCard */
/* ez nem kell majd */
.a-partner-sum-card2 {
	height: 4.75rem;
}



.a-alg-card2 {
	min-width: 22rem;
	width: 49%;
	background-color: var(--color-white);
	color: var(--color-secondary);
	border: 1px solid var(--color-lighter-secondary);
	justify-content: space-between;
	flex-grow: 1;
	padding: 0.5rem 0.8rem;
	cursor: pointer;
}
.a-partner-sum-card {
	/* padding: 0.2rem 0.8rem; */
}

.a-partner-sum-card .diff {
	opacity: 1;
	transition: opacity 1s ease-in-out;
}

.a-partner-sum-card .diff.hide {
	opacity: 0;
}

.a-alg-card {
	/* align-items: center; */
	/* width: 3.5rem; */
	padding: 0.5rem 1rem;
}

.a-alg-card .diff{
	opacity: 1;
	transition: opacity 1s ease-in-out;
}
.a-alg-card .diff.hide {
	opacity: 0;
}

.m-partner-checkboxgroup {
	flex-wrap: wrap;
	justify-content: space-between;
}


/* PartnerSetting - AlgSettings*/

.alg-settings.c-checkbox-group,
.partner-settings.c-checkbox-group{
	box-shadow: var(--elevation-1);
}

.m-setting-sort {
	padding: 0.2rem 0.5rem;
	border-radius: inherit;
	border: 1px solid var(--color-lighter-secondary);
	width: 12rem;
}

.m-partner-settings div.a-checkbox:has(> input[type=checkbox]:checked),
.m-alg-settings div.a-checkbox:has(> input[type=checkbox]:checked),
.m-setting-sort div.a-checkbox:has(> input[type=checkbox]:checked){
	border: none
}


.m-setting-demand-algrithms {

}

.m-setting-demand-algrithms .shade,
.m-setting-partners .shade {
	position: fixed;
	width: 100%;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: var(--color-secondary);
	z-index: -1;
	opacity: 0;
	cursor: pointer;
	transition: opacity var(--t-transition) ease-in-out;

}
.m-setting-demand-algrithms .shade.active,
.m-setting-partners .shade.active {
	z-index: 12;
	opacity: 0.05;
}
/* PartnerFiltering */

/* .a-partner-filtering div.a-toggle-button:has(>.label input[type=checkbox]:checked) {
	border: var(--color-primary) solid 1px;
	color: var(--color-primary);
	background-color: var(--color-white);

} */

.a-partner-filtering div{
	/* font-weight: 600; */
}


/* STATISTICS */
/* weekSales */
.m-statistics-week-sales {
	gap: 0.25rem;
}

.m-statistics-week-sales .m-table {
	/* border: 1px solid #C5D8FF; */
	width: fit-content;
}

.m-statistics-week-sales .m-table .header{
	display: none;
}

.m-statistics-week-sales .m-table.week-sales.purchase-table .sui-header{
	background-color: var(--color-primary);
	color: var(--color-white);
	& .sui-column>.sui-title{
		color: var(--color-on-surface-variant);
	}
}

.m-statistics-week-sales .m-table.week-sales.purchase-table .inside>.row {
	height: 2rem;
}

.m-statistics-week-sales .m-table .inside>.row>.cell{
	border: 1px solid #C5D8FF;
	justify-content: center;
	margin: 0;
	background-color: var(--color-white);
	padding: 0;
}


/* ORDER */
.a-order-filter-card {
	padding: 0.2rem 0.8rem;
}

.m-order-card {
	padding: 0.5rem 1rem;
	width: calc(50% - 2rem);
	flex-grow: 1;
	/* height: 13.5rem; */
	background-color: var(--color-bg-card);
	cursor: pointer;
	z-index: 5;
	border-radius: 0.5rem;
	justify-content: space-between;
}

.m-order-card.active {
	background-color: var(--color-bg-active-card);
	box-shadow: 0px 0px 6px #00000080;
	z-index: 14;
}


.m-order-list .column {
	padding: 0.5rem;
	gap: 0.5rem;
}

.m-order-list .column > div {
	width: 100%;
}

.m-create-new-order {
	margin: auto 0 0 0;
}

.m-create-new-order .popper-opts{
	border: solid 1px var(--color-lighter-secondary)
}


/* DATA TABLE */

.m-table.purchase-table {
	background-color: #f4f5f9;
	cursor: pointer;

	&.disabled{
		pointer-events: none;
		opacity: var(--opacity-disabled);
		user-select: none;
		cursor: not-allowed;
	}
}

.m-table.purchase-table .sui-inside .sui-row:nth-of-type(even) {
	background-color: var(--color-surface-2);
}
.m-table.purchase-table .sui-inside .sui-row:nth-of-type(odd) {
	background-color: var(--color-surface-3);
}

.m-table.purchase-table .sui-inside .sui-header{
	background-color: var(--color-surface-1);
	& .sui-column>.sui-title {
		color: var(--color-on-surface-variant);
	}
}

.m-table.purchase-table > .sui-toolbar {
	background: transparent;
}

.m-table.purchase-table .sui-inside .sui-row.active {
	background-color: var(--color-surface-5);
	/* box-shadow: 0px 0px 8px #00000080; */
	box-shadow: var(--elevation-3);
	position: relative;
	z-index: 12;
}

.m-table.purchase-table .sui-inside .sui-row .sui-cell {
	color: var(--color-on-surface);
	&:has(.c-select){
		overflow: visible;
	}

	& .c-select{
		/* padding-inline-start: var(--spacing-sm); */
		font-family: var(--label-l-font-family);
		font-size: var(--label-l-font-size);
		line-height: var(--label-l-line-height);
		font-weight: var(--label-l-font-weight);
		letter-spacing: var(--label-l-letter-spacing);
		& span{
			font-family: var(--label-l-font-family);
			font-size: var(--label-l-font-size);
			line-height: var(--label-l-line-height);
			font-weight: var(--label-l-font-weight);
			letter-spacing: var(--label-l-letter-spacing);
		}
		& .c-popper .popper-toggle .toggle{
			width: 7rem !important;
		}
		& .select-message-container > .select-container > .icon-container{
			width: auto;
		}
	}


	& .c-editable-number {
		height: 100%;
		padding-top: 0;
	}
}


.purchase-type-main{
	& .demand-list{
		&>.list{
			display: flex;
			flex-flow: row wrap;
			font-size: 1.5rem;
			line-height: 2.5rem;
			max-height: calc(100vh - var(--s-hdr-line));
			height: 100%;
			overflow: auto;
			padding: var(--spacing-xs);
			gap: var(--spacing-xs);

			&>.placeholder {
				width: calc(50% - 2rem);
				height: 14rem;
				flex-grow: 1;
			}
			& .demand-card{
				width: calc(50% - 2rem);
				flex-grow: 1;
				height: 14rem;
				background-color: var(--color-surface-2);
				cursor: pointer;
				z-index: 5;
				border-radius: 0.5rem;
				justify-content: space-between;
				position: relative;
				padding: var(--spacing-sm);
				border: 1px solid var(--color-outline-variant);
				color: var(--color-on-surface);

				&.active{
					background-color: var(--color-surface-3);
					box-shadow: var(--elevation-2);
					z-index: 14;
					border: 2px solid var(--color-primary);
				}
			}
		}
	}
}


/* CARDS */
/* Patient Card */

.m-patient-card {
    min-width: 34rem;
	height: 14rem;
}
/* Product Card */
.m-product-card {
	min-width: 34rem;
	/* max-width: 40rem; */
	height: 14rem;
}
/* POPPER */


/* DROP_DOWN */
.m-drop-down .m-popper .popper-toggle button {
	height: auto;
}
.m-drop-down .m-popper .popper-opts {
	padding: 0.25rem 0;
	box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
	overflow: hidden;
	min-width: 9rem;
}
.m-drop-down .m-popper .popper-opts ul li {
	padding: 0.25rem 0.5rem;
}
.m-drop-down .m-popper .popper-opts ul li:hover {
	background-color: var(--color-lighter-secondary);
	cursor: pointer;
}


/* SELECT */
.select-wrapper{
	display: flex;
	align-content: center;
	justify-content: center;
}

.select-list button {
	border: none !important;
}

/* Select / MultiSelect Component */

.m-multi-select.circular .a-tag,
.m-select.circular .a-tag,
.m-select-hierarchy.circular .a-tag{
	border-radius: 1.5rem;
}
.m-multi-select.rectangular .a-tag,
.m-select.rectangular .a-tag,
.m-select-hierarchy.rectangular .a-tag {
	border-radius: 0.5rem;
}
.m-multi-select .popper-opts,
.m-select .popper-opts,
.m-select-hierarchy .popper-opts,
.m-select-with-search .popper-opts {
	overflow: hidden;
	box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
}
.m-multi-select .popper-opts ul,
.m-select .popper-opts ul,
.m-select-with-search .popper-opts ul {
	padding: 0.5rem 0;
}
.m-multi-select .popper-opts ul li,
.m-select .popper-opts ul li,
.m-select-with-search .popper-opts ul li{
	padding: 0.25rem 0.5rem;
	cursor: pointer;
}
.m-multi-select .popper-opts ul li:hover,
.m-select .popper-opts ul li:hover,
.m-select-with-search .popper-opts ul li:hover {
	background-color: var(--color-lighter-secondary);
}

.m-select .popper-toggle {
	/* overflow: hidden; */
}

.m-select .popper-toggle .filter-mode{
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.m-select .popper-toggle .filter-mode .tags{
	overflow: hidden;
}

.m-select .popper-toggle .filter-mode .tags .a-tag,
.m-select .popper-opts .filter-mode .tags .a-tag{
	width: fit-content;
	min-width: fit-content;
}
.m-select .popper-opts .filter-mode .tags{
	flex-wrap: wrap;
}

/* SELECT-ONE */
.m-select-one .popper-opts:has(ul.appear){
	animation: appearAnimation 0.5s ease 0s forwards;
	overflow: hidden;
}

@keyframes appearAnimation {
	0% {
		opacity: 0;
		height: 0;
		padding:0;
	}
	100% {
		opacity: 1;
		height: fit-content;
		padding: 0.25rem 0;
	}
}

.m-select-one .m-popper .popper-opts ul {
	padding: 0.25rem 0;
}

.m-select-one .m-popper .popper-opts ul li {
	cursor: pointer;
	padding: 0.15rem 0.5rem;

}

.m-select-one .m-popper .popper-opts ul li:hover {
	background-color: var(--color-neutral-1);
}

/* SELECT-WITH-SERACH */
.m-select-with-search .search-container{
	align-items: center;
}

.m-select-with-search .search-container input{
	/* border: none; */
}

/* CHECKBOX */
.a-checkbox{
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	position: relative;
	cursor: pointer;
	/* padding: 0 0.5rem; */
}

.a-checkbox input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.a-checkbox input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.a-checkbox input[type=checkbox]:checked+.label > .icon-active {
	display: flex;
	justify-content: center;
	align-items: center;
}
.a-checkbox input[type=checkbox]:checked~ .label > div .icon-inactive {
	display: none;
}
.a-checkbox input[type=checkbox]:not(:checked)+ .label > .icon-active {
	display: none;
}
.a-checkbox input[type=checkbox]:not(:checked)~ .label > div .icon-inactive {
	display: flex;
	justify-content: center;
	align-items: center;
}
.a-checkbox input[type=checkbox]:checked~ label{
	color: var(--color-primary);
}

div.a-checkbox:has( input[type=checkbox]:checked){
	border: var(--color-primary) solid 1px;
	color: var(--color-primary);
}
div.a-checkbox.none:has( input[type=checkbox]:checked){
	border: none;
	color: var(--color-primary);
}
/* filterként funkcionáló checkboxok */
div.a-checkbox-filter:has( input[type=checkbox]:checked){
	border: var(--color-primary) solid 1px;
	color: var(--color-secondary-dark);
	background-color: var(--color-primary-light);
}
div.a-checkbox-filter:has( input[type=checkbox]:not(:checked)){
	border: var(--color-lighter-secondary) solid 1px;
	color: var(--color-secondary);
	/* background-color: #f9f7f7; */
}
.a-checkbox-filter input[type=checkbox]:checked~label {
	color: var(--color-secondary-dark);
}


.label{
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: inherit;
}

.a-checkbox label.label.a-checkbox .a-text{
	margin-left: 0.5rem;
}


/* RADIO */
.a-radio {
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	position: relative;
	cursor: pointer;
	width: fit-content;
}
.a-radio input[type=radio] {
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.a-radio input[type=radio]:checked + .label > .icon-active {
	display: flex;
	justify-content: center;
	align-items: center;
}

.a-radio input[type=radio]:checked~ .label > div .icon-inactive {
	display: none;
}

.a-radio input[type=radio]:not(:checked) + .label > .icon-active {
	display: none;
}

.a-radio input[type=radio]:not(:checked)~ .label > div .icon-inactive {
	display: flex;
	justify-content: center;
	align-items: center;
}

.a-radio input[type=radio]:checked~label {
	color: var(--color-primary);
}

div.a-radio:has(> input[type=radio]:checked) {
	border: var(--color-primary) solid 1px;
	color: var(--color-primary);
}
div.a-radio.none:has(> input[type=radio]:checked) {
	border: none
}

.a-radio label.label.a-radio .a-text {
	margin-left: 0.5rem;
}



/* TOGGLE BUTTON */

.a-toggle-button{
	position: relative;
}

.a-toggle-button label input[type=checkbox] {
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.a-toggle-button .label input[type=checkbox]:checked+ div.toggle-active {
	display: flex;
	justify-content: center;
	align-items: center;
}

.a-toggle-button .label input[type=checkbox]:checked~div div.toggle-inactive {
	display: none;
}

.a-toggle-button .label input[type=checkbox]:not(:checked)+div.toggle-active {
	display: none;
}

.a-toggle-button .label input[type=checkbox]:not(:checked)~div div.toggle-inactive {
	display: flex;
	justify-content: center;
	align-items: center;
}

.a-toggle-button .label input[type=checkbox]:checked~label {
	color: var(--color-white);
}

div.a-toggle-button:has(>.label input[type=checkbox]:checked) {
	border: var(--color-primary) solid 1px;
	color: var(--color-white);
	background-color: var(--color-primary);
}


/* fehér alapon toggleButtons - checked */
.bg-white>div.a-toggle-button:has(>.label input[type=checkbox]:checked) {
	border: var(--color-primary) solid 1px;
	color: var(--color-secondary);
	background-color: var(--color-primary-light);
}
.bg-white>div.a-toggle-button:has(>.label input[type=checkbox]:not(:checked)) {
	border: var(--color-lighter-secondary) solid 1px;
	color: var(--color-secondary);
	/* background-color: #f9f7f7; */
	background-color: var(--color-white);
}



.bg-white>.a-toggle-button .label input[type=checkbox]:checked~label {
	color: var(--color-primary);
}
.bg-transparent>div.a-toggle-button:has(>.label input[type=checkbox]:checked) {
	border: var(--color-primary) solid 1px;
	color: var(--color-white);
	background-color: var(--color-primary);
}




/* .bg-transparent>.a-button.none {
	border: none;
} */
/* .bg-transparent>.a-toggle-button .label input[type=checkbox]:checked~label {
	color: var(--color-primary);
} */

/* TOGGLE BUTTON GROUP */
.m-toggle-button-group .a-toggle-button.first{
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	padding-left: 1rem;
}
.m-toggle-button-group .a-toggle-button.last{
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	padding-right: 1rem;
}
.m-toggle-button-group .a-toggle-button.middle{
	border-radius: 0;}

/* DROP-DOWN MENU */

.popper-toggle{
	cursor: pointer;
}

.popper-opts{
	position: absolute;
	z-index: 100;
}

/* TOGGLE SWITCH */
.toggle-switch-container{
	display: flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	padding: 0.5rem;
}

.toggle-switch {
	max-width: 350px;
	height: fit-content;
	position: relative;
	display: flex;
	gap: 0.5rem;
}

.toggle-switch .checkbox {
	display: none;
}

.toggle-switch .label {
	display: block;
	overflow: hidden;
	cursor: pointer;
	border: 0 solid var(--color-lighter-secondary);
	border-radius: 1.5rem;
	width: 5rem;
	height: 2rem;
}
.toggle-switch.normal .label {
	display: block;
	overflow: hidden;
	cursor: pointer;
	border: 0 solid var(--color-lighter-secondary);
	border-radius: 1.5rem;
	width: 1.875rem;
	height: 0.875rem;
}
.toggle-switch.large .label {
	display: block;
	overflow: hidden;
	cursor: pointer;
	border: 0 solid var(--color-lighter-secondary);
	border-radius: 1.5rem;
	width: 10rem;
	height: 2.5rem;
}

.toggle-switch .inner {
	display: block;
	width: 200%;
	margin-left: -100%;
	transition: margin 0.3s ease-in 0s;
}

.toggle-switch .inner:before,
.toggle-switch .inner:after {
	float: left;
	width: 50%;
	height: 2rem;
	padding: 0;
	box-sizing: border-box;
}
.toggle-switch.normal .inner:before,
.toggle-switch.normal .inner:after {
	float: left;
	width: 50%;
	height: 0.875rem;
	padding: 0;
	box-sizing: border-box;
}
.toggle-switch.large .inner:before,
.toggle-switch.large .inner:after {
	float: left;
	width: 50%;
	height: 2.5rem;
	padding: 0 1.8rem;
	box-sizing: border-box;
}


.toggle-switch .inner:before {
	content: "";
	background-color: var(--color-primary);
	color: var(--color-white);
	display: flex;
	align-items: center;
	justify-content: start;

}

.toggle-switch .inner:after {
	content: "";
	background-color: var(--color-secondary);
	color: var(--color-white);
	display: flex;
	align-items: center;
	justify-content: end;

}

.toggle-switch .switch {
	display: block;
	width: 1.5rem;
	height: 1.5rem;
	/* margin-left: 0.25rem; */
	background: var(--color-white);
	position: absolute;
	top: 0.25rem;
	left: 0.25rem;
	border: 0 solid var(--color-lighter-secondary);
	border-radius: 50%;
	transition: all 0.3s ease-in 0s;
	display: flex;
	align-items: center;
	justify-content: center;
}
.toggle-switch.normal .switch{
	width: 0.5rem;
	height: 0.5rem;
	top: 0.1875rem;
	left: 0.1875rem;
}
.toggle-switch.large .switch{
	width: 2rem;
	height: 2rem;
	top: 0.25rem;
	left: 0.25rem;
}

.toggle-switch .checkbox:checked+ span.inner {
	margin-left: 0;
}

.toggle-switch .checkbox:checked~ span.switch {
	left: 3.25rem
}
.toggle-switch.normal .checkbox:checked~ span.switch {
	left: 1.1875rem
}
.toggle-switch.large .checkbox:checked~ span.switch {
	left: 7.75rem
}

/* TextInputGroup */
.a-text-input-group{
	display: flex;
	align-items: center;
	border-radius: 0.5rem;
	border: 1px solid var(--color-lighter-secondary);
	background-color: var(--color-lighter-secondary);
	height: 100%;
	overflow: hidden;
}

.a-text-input-group .left,
.a-text-input-group .right {
	width: fit-content;
}

.a-text-input-group label {
	height: 100%;
	overflow: hidden;
}

.a-text-input-group label input {
	text-align: center;
	color: var(--color-text);
	background-color: var(--color-white);
	border: none;
	border-radius: 0;
	height: 100%;
	width: 2rem;
}

.a-text-input-group label input[type="number"]::-webkit-inner-spin-button,
.a-text-input-group label input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
}

.a-text-input-group label input.is-invalid {
	color: var(--color-danger);
	background-color: var(--color-lighter-danger);
}

/* QuantitySelector */
.a-quantity-selector{

}

.a-quantity-selector .a-button.left{
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
.a-quantity-selector .a-button.right{
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.a-quantity-selector .a-input input{
	text-align: center;
	font: var(--regular2)
}

.a-quantity-selector .a-input{
	height: 2.5rem;
	border-radius: 0;
}

.a-quantity-selector .a-input:focus-within {
	box-shadow: none;
	border: 0;
}

.a-quantity-selector.small .a-input{
	width: 4rem;
}
.a-quantity-selector.normal .a-input{
	width: 8rem;
}
.a-quantity-selector.large .a-input{
	width: 12rem;
}

/* EditableText */
.a-editable-text{

}
.a-editable-text .a-input{

}

.a-editable-number {
	height: 2.5rem;

	& .a-input {
		height: 100%;
	}
}

.a-editable-text .a-input input,
.a-editable-number .a-input input{
	text-align: center;
	font: var(--regular2);
	height: 100%;
}

.a-editable-text .a-input:focus-within,
.a-editable-number .a-input:focus-within {
	box-shadow: none;
	border: 0;
}

.a-editable-number .a-input,
.a-editable-number .a-input input{
	padding: 0;
}


/* TextInput With Unit  -- EZ MAJD NEM LESZ*/
.a-text-input-with-unit {
	display: flex;
	justify-content: start;
}

.a-text-input-with-unit label .a-input {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border-top-left-radius: 0.5rem;
	border-bottom-left-radius: 0.5rem;
	width: 3rem;
	text-align: center;
	color: var(--color-text);
}

.a-text-input-with-unit label .a-input input {
	width: 100%;
}

/* TODO: ezen a stíéuson még lehetne változtatni */
.a-text-input-with-unit label .a-input:focus-within {
	box-shadow: none;
	border: solid 1px var(--color-secondary);
}

.a-text-input-with-unit label input[type="number"]::-webkit-inner-spin-button,
.a-text-input-with-unit label input[type="number"]::-webkit-outer-spin-button,
.a-text-input-with-unit label input[type="number"] {
	-webkit-appearance: none;
	margin: 0;
}

.a-text-input-with-unit label input[type="number"] {
	-moz-appearance: textfield;
}
.a-text-input-with-unit .unit {
	background-color: var(--color-lighter-secondary);
	border-top-right-radius: 0.5rem;
	border-bottom-right-radius: 0.5rem;
	padding: 0 0.5rem;
}
/* TOGGLE TEXT */
.a-toggle-text {
	display: flex;
	align-content: center;
	border: 1px solid var(--color-primary);
	width: fit-content;
	/* border-radius: 0.5rem; */
	overflow: hidden;
	padding: 0;
}

.a-toggle-text.second
{
	border: 1px solid var(--color-light-secondary);
}
.a-toggle-text.second div.a-radio.left:has(> input[type=radio]:checked){
	border-right:  2px solid var(--color-light-secondary);
}
.a-toggle-text.second div.a-radio.right:has(> input[type=radio]:checked){
	border-left:  2px solid var(--color-light-secondary);
}
.a-toggle-text.second div.a-radio:has(> input[type=radio]:checked){
	background-color: var(--color-lighter-secondary);
	color: var(--color-primary);
}
.a-toggle-text.second .a-radio input[type=radio]:checked~label {
	color: var(--color-primary);
	padding: 0.5rem;
}
.a-toggle-text.second div.a-radio input[type=radio]:not(:checked) {
	background-color: var(--color-white);
	color: var(--color-lighter-secondary);
}
.a-toggle-text.second div.a-radio input[type=radio]:not(:checked)~label {
	color: var(--color-lighter-secondary);
	padding: 0.5rem;
}

.a-toggle-text.large {
	height: 2.5rem;
}

.a-toggle-text div.a-radio {
	color: var(--color-primary);
	background: var(--color-white);
	margin: 0;
	padding: 0.25rem 0.5rem;
	justify-content: center !important;
}

.a-toggle-text div.a-radio:has(> input[type=radio]:checked) {
	background-color: var(--color-primary);
	color: var(--color-white);
}

.a-toggle-text .a-radio input[type=radio]:checked~label {
	color: var(--color-white);
}

/* variant: rounded */
.a-toggle-text.rounded,
.a-toggle-text.angular {
	background-color: var(--color-white);
	border: 1px solid var(--color-light-secondary);
}

.a-toggle-text.rounded div.a-radio,
.a-toggle-text.angular div.a-radio {
	/* color: var(--color-primary); */
	color: var(--color-secondary);
	background: var(--color-white);
	margin: 0.1rem;
	padding: 0.25rem 0.5rem;
	justify-content: center !important;
}
.a-toggle-text.rounded div.a-radio label.a-radio,
.a-toggle-text.angular div.a-radio label.a-radio {
	width: 100%;
}

/* Filter */
.a-filter {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
.a-filter .a-filter-drop-down {
	border: solid 1px var(--color-lighter-secondary);
	background-color: var(--color-white);
}

.a-filter .a-filter-drop-down .a-toggle-button {

}

.a-filter .a-filter-drop-down .a-toggle-button:hover {
	background-color: var(--color-lighter-secondary);
}

.a-filter .a-filter-form {
	padding: 0.5rem;
	border: solid 1px var(--color-lighter-secondary);
	background-color: var(--color-white);
}

/* TEMP */
.ws-nowrap {
	width: fit-content;
	white-space: nowrap;
}
/* End of Filter */


/* MenuItem */
.a-menu-item {
	position: relative;
}

.a-menu-item .line{
	width: 86%;
	height: 3px;
	/* background-color: var(--color-primary); */
	background-color: var(--color-white);
	position: absolute;
	left: 7%;
	right: 7%;
	bottom: 0;
	margin: auto;
	border-radius: 0.5rem;
}

/* End of MenuItem */

/* TabbedForm */
.m-tabbed-form {
	display: flex;
	gap: 0.5rem;
	max-width: 76rem;
	height: calc(100% - 6rem);
}

.m-tabbed-form ul.m-main-cat{
	flex: 1;
	min-height: 100%;
	background-color: var(--color-primary);
	color: var(--color-white);
	display: flex;
	flex-direction: column;
}

.m-tabbed-form ul.m-sub-cat {
	/* flex: 1; */
	min-height: 100%;
	width: fit-content;
	background-color: var(--color-white);
	display: flex;
	flex-direction: column;
	position: relative;
}
.m-tabbed-form ul.m-sub-cat::before {
	content:"";
	position: absolute;
	top: 3%;
	bottom: 3%;
	left: 4px;
	height: 94%;
	border-left: 2px dotted var(--color-light-secondary);
}

.m-tabbed-form ul.m-main-cat li,
.m-tabbed-form ul.m-sub-cat li {
	list-style-type: none;
	height: 3.5rem;
	display: flex;
	justify-content: start;
	align-content: center;
	padding: 1rem;
	cursor: pointer;
	flex-wrap: wrap;
}

.m-tabbed-form ul.m-main-cat li.active{
	background-color: var(--color-white);
	color: var(--color-primary);
	position: relative;
}
.m-tabbed-form ul.m-sub-cat li.active {
	color: var(--color-primary);
		position: relative;
}
.m-tabbed-form ul.m-main-cat li.active::before{
	content:"";
	position: absolute;
	left:0;
	top:20%;
	bottom: 20%;
	height: 60%;
	width: 4px;
	border-left: 4px solid var(--color-primary);
}

.m-tabbed-form ul.m-sub-cat li.active::before{
	content:"";
	position: absolute;
	left: 0rem;
	top: 50%;
	bottom: 50%;
	width: 10px;
	height: 10px;
	border: 3px solid var(--color-primary);
	/* background-color: var(--color-primary); */
	background-color: var(--color-white);
	border-radius: 50%;
	transform: translateY(-50%);
}



.m-tabbed-form ul.m-sub-cat li {

}

.m-tabbed-form div.m-form-container {
	flex: 4;
	gap: 0.5rem;
	padding: 0.5rem;
	overflow: auto;
}
.m-tabbed-form div.m-form-container::-webkit-scrollbar {
	width: 0.5rem;
}
.m-tabbed-form div.m-form-container::-webkit-scrollbar-thumb{
	background-color: var(--color-light-secondary);
	border-radius: 1rem;
}
.m-tabbed-form div.m-form-container::-webkit-scrollbar-track {
	background-color: var(--color-lighter-secondary);
}

.m-tabbed-form div.m-form-container p.label,
.m-tabbed-form div.m-form-container label{
	font-weight: 600;
	font-family: "Segoe UI";
	font-size: 0.8rem;
	line-height: 1.2rem;
}
.m-tabbed-form div.m-form-container p.label {
	display: flex;
	justify-content: start;
}

/* .m-tabbed-form div.m-form-container label {
	font-weight: 600;
	font-family: "Segoe UI";
	font-size: 0.8rem;
} */
.m-tabbed-form div.m-form-container label input {
	width: 100%;
	height: 2rem;
	font-size: 1rem;
}
.m-tabbed-form div.m-form-container label .a-text {
	margin-left: 0.5rem;
}

.m-tabbed-form div.m-form-container.preview .row{
	min-height: 3.5rem;
	padding: 0 0.5rem;
}

.m-tabbed-form div.m-form-container.preview .row:nth-child(even){
	background-color: #F4F5F9;
}

.m-tabbed-form div.m-form-container.preview .row:nth-child(odd){
	background-color: var(--color-white);
}

.m-tabbed-form div.m-form-container.preview .row .label {
	flex: 4;
}
.m-tabbed-form div.m-form-container.preview .row .value {
	flex: 7;
}
.m-tabbed-form div.m-form-container.preview .row .icon {
	flex: 1;
}

/* DataTable within the TabbedForm */
.m-tabbed-form .m-form-container .m-table{
	background-color: #f4f5f9;
	cursor: pointer;
}
.m-tabbed-form .m-form-container .m-table>.sui-toolbar-menu .sui-editable {
	padding: 0.25rem 0.5rem;
}

.m-tabbed-form .m-form-container .m-table .sui-inside .sui-header .sui-title {
	text-align: center;
}
.m-tabbed-form .m-form-container .m-table .sui-inside .sui-header>.sui-editable>.sui-divider>.sui-icon {
	border: 1px dashed white;
}
.m-tabbed-form .m-form-container .m-table .sui-inside .sui-header{
	font-weight: 600;
	/* height: 3rem; */
	background-color: var(--color-primary);
	color: white;
}
.m-tabbed-form .m-form-container .m-table.current .sui-inside .sui-header{
	background-color: var(--color-secondary);
}
.m-tabbed-form .m-form-container .m-table .sui-inside .sui-row {
	/* height: 3rem; */
	padding-left: 0.5rem;
}
.m-tabbed-form .m-form-container .m-table>.sui-toolbar {
	background: transparent;
	position: absolute;
	top: 0;
	right: 0.5rem;
}
.m-tabbed-form .m-form-container .m-table>.sui-toolbar svg {
	stroke: var(--color-white);
}


.m-tabbed-form .m-form-container .m-table .sui-inside .sui-row:nth-of-type(even) {
	background-color: #e9edf5;
}

.m-tabbed-form .m-form-container .m-table .sui-inside .sui-row:nth-of-type(odd) {
	background-color: #f4f5f9;
}
.m-tabbed-form .m-form-container .m-table .sui-inside form.sui-row{
	background-color: var(--color-primary-light) !important;
	/* box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.25); */
	box-shadow: 0px 0px 8px #00000080;
	z-index: 20;
	position: relative;
}
.m-tabbed-form .m-form-container .m-table .sui-inside .sui-cell > input{
	padding: 0.25rem 0.5rem;
	border: 1px solid var(--color-light-secondary);
	border-radius: 0.5rem;
}
.m-tabbed-form .m-form-container .m-table .sui-inside .sui-cell>input.qty{
	text-align: center;
}
.m-tabbed-form .m-form-container .m-table .sui-inside .sui-cell>input:focus{
	border-color: var(--color-secondary);
	outline: none;
}
/* TEMP!! */
.temp-tabbed-form-with-header{
	position: relative;
}
.temp-tabbed-form-with-header .a-input {
	width: 50%;
	min-width: 20rem;
	margin: 0 0.5rem;
}
.temp-tabbed-form-with-header .a-input input.search {
	/* width: 450px; */
	width: 100%;
}
/* End of TabbedForm */


/* IntegratedTabbedForm */
.m-integrated-tabbed-form {
	max-width: 76rem;
	/* height: 31rem; */
	height: 100%;
	overflow: hidden;
	border-radius: 0.5rem;
	gap: 0.5rem;
	box-shadow: 2px -2px 4px 0px rgba(0, 0, 0, 0.25);
}

.m-integrated-tabbed-form .header{
	height: 6rem;
	background-color: var(--color-primary-light);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.5rem;
}
/* End of IntegratedTabbedForm */


/* Hierarchy Components */
.m-hierarchy{
	max-height: 20rem;
	overflow: auto;
}

.m-hierarchy::-webkit-scrollbar {
	width: 0.5rem;
}

.m-hierarchy::-webkit-scrollbar-thumb {
	background-color: var(--color-light-secondary);
	border-radius: 1rem;
}

.m-hierarchy::-webkit-scrollbar-track {
	background-color: var(--color-lighter-secondary);
}
.m-hierarchy .item {
	position: relative;
	cursor: pointer;
	width: fit-content;
	padding: 0 0 0 2rem;
}

.m-hierarchy .item .name {
	padding: 0.25rem 0.5rem;
	border-radius: 0.5rem;
	cursor: default;
}

.m-hierarchy .item .a-button{
	margin-left: -0.5rem;
	padding: 0;
	width: 1rem;
	height: 1rem;
	/* border: var(--color-secondary) solid 1px; */
	background-color: transparent;
	border-radius: 50%;
}


.m-hierarchy .item .a-button .icon {
	border-radius: 50%;
	border: var(--color-light-secondary) solid 1px;
}

.m-hierarchy .item.active .name {
	background-color: var(--color-primary-light);
}

.m-hierarchy .item .icon.arrow {
	position: absolute;
	left: 1rem;
	top: 50%;
	transform: translateY(-50%);
}
/* End of Hierarchy Components */

/* PageList */
.m-page-list{
	display: flex;
	width: 50rem;
	background-color: white;
	justify-content: space-between;
	margin: 0 0 .5rem 0;
	/* padding: .25rem .25rem 0; */
	padding: .25rem 0 0;
}

.m-page.active{
	background: var(--color-primary-light);
	border-radius: 1.5rem 1.5rem 0 0;
}

.m-page .title{
	color: var(--color-secondary);
	transition: font-size var(--t-transition) ease-in-out;
	text-align: center;
	width: 100%;
}
.m-page.active .title{

}
.m-page .content{
	color: var(--color-secondary);
	font-size: 1rem;
	display: flex;
	/* align-items: center; */
	justify-content: flex-start;
	flex: 1;
	width: 100%;
	/* height: auto; */
	opacity: 1;
	transition: height var(--t-transition) ease-in-out, opacity var(--t-transition) ease-in-out, flex var(--t-transition) ease-in-out;
	overflow: auto;
}

.m-page.active .content {
	height: 0;
	opacity: 0;
	flex: 0;
}

.m-page .content::-webkit-scrollbar {
	width: 0.3rem;
}

.m-page .content::-webkit-scrollbar-thumb {
	background-color: var(--color-light-secondary);
	border-radius: 1rem;
}

.m-page .content::-webkit-scrollbar-track {
	background-color: var(--color-lighter-secondary);
}

/* TEMP */
.m-page .content .a-widget .a-text{
	text-align: left;
}

.m-page>button.a-button {
	width: 11.5rem;
}

.m-page >button.a-button.page{
	align-items: flex-start;
	margin-top: 0.25rem;
}
.m-page>button.a-button.page.active {
	align-items: center;
}

/* End of PageList Components */

/* CircleProgressChart */
.a-profool-ring {
	width: 2.5rem;
	min-width: 2.5rem;
	height: 2.5rem;
}

.profool-rank .shadow {
	fill: none;
	stroke: var(--color-light-secondary);
}

.profool-rank .progress-bar {
	fill: none;
	stroke: var(--color-success);
	stroke-width: 4;
	transform: rotate(-90deg);
	transform-origin: 50% 50%;
	transition: stroke-dashoffset 0.5s ease-in-out;
}

/* End of CircleProgressChart */

/* FilterGroup */
.a-filter-icon .popper-opts {
	background-color: var(--color-white);
	border-radius: 0.5rem;
	overflow: hidden;
	padding: 0.5rem 0;
	box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
}

.a-filter-icon .popper-opts li {
	padding: 0.5rem 1.5rem;
	cursor: pointer;
}

.a-filter-icon .popper-opts li:hover {
	background-color: var(--color-lighter-secondary);
}

.a-filter-item {
	width: 18rem;
	display: flex;
	flex-direction: column;
}

.a-filter-item.checkbox-group{

}

.a-filter-item .a-filter-component.checkbox-group .popper-toggle,
.a-filter-item .a-filter-component.radiobutton-group .popper-toggle,
.a-filter-item .a-filter-component.select>.popper-toggle,
.a-filter-item .a-filter-component.multi-select>.popper-toggle {
	height: 2rem;
	/* border-radius: var(--s-radius-sm); */
	border: calc(1rem / 16) solid var(--color-header);
	background: var(--color-input-bg);
	display: flex;
	justify-content: space-between;
}

/* /NEW... */
.a-filter-item .m-select .popper-toggle >button{
	justify-content: flex-start;
	padding: 0;
}
.a-filter-item .m-select .popper-opts{
	min-width: 18rem;
}

.a-filter-item .a-filter-component.checkbox-group .popper-toggle .a-values-container,
.a-filter-item .a-filter-component.radiobutton-group .popper-toggle .a-values-container,
.a-filter-item .a-filter-component.select>.popper-toggle .a-values-container,
.a-filter-item .a-filter-component.multi-select>.popper-toggle .a-values-container{
	overflow: hidden;
	display: flex;
	align-items: center;
}

.a-filter-item .a-filter-component.checkbox-group .popper-toggle .a-values-container,
.a-filter-item .a-filter-component.multi-select .popper-toggle .a-values-container{
	max-width: 17rem;
}

.a-filter-item .a-filter-component.radiobutton-group .popper-toggle .a-values-container,
.a-filter-item .a-filter-component.select .popper-toggle .a-values-container{
	max-width: 18rem;
}

.a-filter-item .a-filter-component.checkbox-group .popper-toggle .a-values-container .a-value,
.a-filter-item .a-filter-component.radiobutton-group .popper-toggle .a-values-container .a-value,
.a-filter-item .a-filter-component .m-select .popper-toggle .a-values-container .a-tag,
.a-filter-item .a-filter-component .m-select .popper-toggle .a-tag,
.a-filter-item .a-filter-component.multi-select>.popper-toggle .a-values-container .a-value{
	background-color: var(--color-primary);
	align-items: center;
	padding: 0 0 0 .25rem;
	margin: .25rem 0 .25rem .25rem;
	height: 1.5rem;
	min-width: fit-content;
}

.a-filter-item .a-filter-component.select{

}

.a-filter-item .a-filter-component.checkbox-group .popper-opts,
.a-filter-item .a-filter-component.radiobutton-group .popper-opts,
.a-filter-item .a-filter-component.select>.popper-opts,
.a-filter-item .a-filter-component.multi-select>.popper-opts{
	width: 18rem;
	background: var(--color-white);
	border-radius: 0 0 .5rem .5rem;
	overflow: hidden;
	padding: 0.5rem;
	box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
	z-index: 90;
}

.a-filter-item .a-filter-component.select>.popper-opts .m-select .popper-opts,
.a-filter-item .a-filter-component.multi-select>.popper-opts .m-select .popper-opts{
	min-width: 9rem;
}

.a-filter-item .a-filter-component .m-select .popper-opts .selected-list{
	width: 18rem;
	height: 10rem;
	gap: .5rem;
	padding: .5rem;
	overflow: auto;
}

.a-filter-item .a-input input,
.a-filter-item .a-input input:focus,
.a-filter-item .a-input input:focus-visible,
.a-filter-item input.a-input:focus-visible {
	border: none;
	background: none;
	outline: 0;
	color: var(--color-secondary);
}

.a-filter-item .a-input:focus-within {
	box-shadow: none;
	border: 0;
}

.a-filter-item label.search:focus-within {
	box-shadow: 0 0 0 1px white, 0 0 2px 2px var(--color-light-secondary);
	border: 0;
	border-radius: var(--s-radius-sm);
}
.a-filter-item label.search.filter:focus-within {
	box-shadow: 0 0 0 1px white, 0 0 2px 2px var(--color-light-secondary);
	border: 0;
	border-radius: 1.5rem
}

.a-filter-item input:-webkit-autofill {
	appearance: none !important;
	-webkit-box-shadow: 0 0 0px 1000px var(--color-white) inset !important;
	box-shadow: 0 0 0px 1000px var(--color-white) inset !important;
	-webkit-text-fill-color: var(--color-secondary) !important;
	transition: background-color 5000s ease-in-out 0s !important;
}

.a-filter-item input:-internal-autofill-selected {
	appearance: none !important;
	background-color: var(--color-white) !important;
	color: var(--color-secondary) !important;
}
/* End of FilterGroup */


/* Progress Bar */
.m-progress-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 64px;
	background-color: var(--color-white);
	background-color: var(--color-neutral-1);
	overflow: hidden;
	position: relative;
}

.a-progress-step {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	height: 100%;
	width: 20%;
}

.a-progress-step .arrow-text-container{
	background-color: var(--color-neutral-1);
}

.a-progress-step.odd{
	background-color: var(--color-neutral-2);
}

.a-progress-step.odd .arrow-text-container{
	background-color: var(--color-neutral-2);
}

.a-progress-step.active .arrow-text-container{
	background-color: var(--color-primary);
	height: 4rem;
	border-radius: 0;
}

.a-progress-step .progress-arrow {
	display: flex;
	align-items: center;
	width: 100%;
}

.a-progress-step .progress-arrow .arrow{
	position: relative;
	height: 4rem;
	width: .25rem;
	min-width: .25rem;
	background-color: var(--color-lighter-secondary);
}

.a-progress-step .progress-arrow .arrow:after, .a-progress-step .progress-arrow .arrow:before {
	content: " ";
	position: absolute;
	top: 0;
	width: 0;
	height: 0;
	border-left: 2rem solid var(--color-lighter-secondary);
	z-index: 0;
}

.a-progress-step .progress-arrow .arrow:before{
	left: 0;
	border-top: 2rem solid transparent;
	border-bottom: 2rem solid transparent;
	border-left: 2rem solid var(--color-neutral-1);
	z-index: 2;
}
.a-progress-step .progress-arrow .arrow:after{
	border-top: 2rem solid transparent;
	border-bottom: 2rem solid transparent;
	left: 0.25rem;
}

.a-progress-step.active .progress-arrow .arrow:before,
.a-progress-step.active.odd .progress-arrow .arrow:before{
	border-left: 2rem solid var(--color-primary);
}
.a-progress-step.active .progress-arrow .arrow.last{
	background-color: var(--color-primary);
}

.a-progress-step.odd .progress-arrow .arrow:before{
	border-left: 32px solid var(--color-neutral-2);
}
.a-progress-step.active .progress-arrow .arrow-text-container{
	padding: 0 .5rem;
	height: 4rem;
}

.a-progress-step.active .progress-arrow .arrow-text {
	white-space: nowrap;
	padding: 0 .5rem;
}
/* End of Progress Bar */

/*!
 * Quill Editor v1.3.7
 * https://quilljs.com/
 * Copyright (c) 2014, Jason Chen
 * Copyright (c) 2013, salesforce.com
 */
.ql-container {
  box-sizing: border-box;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
  height: 100%;
  margin: 0px;
  position: relative;
}
.ql-container.ql-disabled .ql-tooltip {
  visibility: hidden;
}
.ql-container.ql-disabled .ql-editor ul[data-checked] > li::before {
  pointer-events: none;
}
.ql-clipboard {
  left: -100000px;
  height: 1px;
  overflow-y: hidden;
  position: absolute;
  top: 50%;
}
.ql-clipboard p {
  margin: 0;
  padding: 0;
}
.ql-editor {
  box-sizing: border-box;
  line-height: 1.42;
  height: 100%;
  outline: none;
  overflow-y: auto;
  padding: 12px 15px;
  tab-size: 4;
  -moz-tab-size: 4;
  text-align: left;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.ql-editor > * {
  cursor: text;
}
.ql-editor p,
.ql-editor ol,
.ql-editor ul,
.ql-editor pre,
.ql-editor blockquote,
.ql-editor h1,
.ql-editor h2,
.ql-editor h3,
.ql-editor h4,
.ql-editor h5,
.ql-editor h6 {
  margin: 0;
  padding: 0;
  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol,
.ql-editor ul {
  padding-left: 1.5em;
}
.ql-editor ol > li,
.ql-editor ul > li {
  list-style-type: none;
}
.ql-editor ul > li::before {
  content: '\2022';
}
.ql-editor ul[data-checked=true],
.ql-editor ul[data-checked=false] {
  pointer-events: none;
}
.ql-editor ul[data-checked=true] > li *,
.ql-editor ul[data-checked=false] > li * {
  pointer-events: all;
}
.ql-editor ul[data-checked=true] > li::before,
.ql-editor ul[data-checked=false] > li::before {
  color: #777;
  cursor: pointer;
  pointer-events: all;
}
.ql-editor ul[data-checked=true] > li::before {
  content: '\2611';
}
.ql-editor ul[data-checked=false] > li::before {
  content: '\2610';
}
.ql-editor li::before {
  display: inline-block;
  white-space: nowrap;
  width: 1.2em;
}
.ql-editor li:not(.ql-direction-rtl)::before {
  margin-left: -1.5em;
  margin-right: 0.3em;
  text-align: right;
}
.ql-editor li.ql-direction-rtl::before {
  margin-left: 0.3em;
  margin-right: -1.5em;
}
.ql-editor ol li:not(.ql-direction-rtl),
.ql-editor ul li:not(.ql-direction-rtl) {
  padding-left: 1.5em;
}
.ql-editor ol li.ql-direction-rtl,
.ql-editor ul li.ql-direction-rtl {
  padding-right: 1.5em;
}
.ql-editor ol li {
  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  counter-increment: list-0;
}
.ql-editor ol li:before {
  content: counter(list-0, decimal) '. ';
}
.ql-editor ol li.ql-indent-1 {
  counter-increment: list-1;
}
.ql-editor ol li.ql-indent-1:before {
  content: counter(list-1, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-1 {
  counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-2 {
  counter-increment: list-2;
}
.ql-editor ol li.ql-indent-2:before {
  content: counter(list-2, lower-roman) '. ';
}
.ql-editor ol li.ql-indent-2 {
  counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-3 {
  counter-increment: list-3;
}
.ql-editor ol li.ql-indent-3:before {
  content: counter(list-3, decimal) '. ';
}
.ql-editor ol li.ql-indent-3 {
  counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-4 {
  counter-increment: list-4;
}
.ql-editor ol li.ql-indent-4:before {
  content: counter(list-4, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-4 {
  counter-reset: list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-5 {
  counter-increment: list-5;
}
.ql-editor ol li.ql-indent-5:before {
  content: counter(list-5, lower-roman) '. ';
}
.ql-editor ol li.ql-indent-5 {
  counter-reset: list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-6 {
  counter-increment: list-6;
}
.ql-editor ol li.ql-indent-6:before {
  content: counter(list-6, decimal) '. ';
}
.ql-editor ol li.ql-indent-6 {
  counter-reset: list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-7 {
  counter-increment: list-7;
}
.ql-editor ol li.ql-indent-7:before {
  content: counter(list-7, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-7 {
  counter-reset: list-8 list-9;
}
.ql-editor ol li.ql-indent-8 {
  counter-increment: list-8;
}
.ql-editor ol li.ql-indent-8:before {
  content: counter(list-8, lower-roman) '. ';
}
.ql-editor ol li.ql-indent-8 {
  counter-reset: list-9;
}
.ql-editor ol li.ql-indent-9 {
  counter-increment: list-9;
}
.ql-editor ol li.ql-indent-9:before {
  content: counter(list-9, decimal) '. ';
}
.ql-editor .ql-indent-1:not(.ql-direction-rtl) {
  padding-left: 3em;
}
.ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
  padding-left: 4.5em;
}
.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
  padding-right: 3em;
}
.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
  padding-right: 4.5em;
}
.ql-editor .ql-indent-2:not(.ql-direction-rtl) {
  padding-left: 6em;
}
.ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
  padding-left: 7.5em;
}
.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
  padding-right: 6em;
}
.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
  padding-right: 7.5em;
}
.ql-editor .ql-indent-3:not(.ql-direction-rtl) {
  padding-left: 9em;
}
.ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
  padding-left: 10.5em;
}
.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
  padding-right: 9em;
}
.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
  padding-right: 10.5em;
}
.ql-editor .ql-indent-4:not(.ql-direction-rtl) {
  padding-left: 12em;
}
.ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
  padding-left: 13.5em;
}
.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
  padding-right: 12em;
}
.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
  padding-right: 13.5em;
}
.ql-editor .ql-indent-5:not(.ql-direction-rtl) {
  padding-left: 15em;
}
.ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
  padding-left: 16.5em;
}
.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
  padding-right: 15em;
}
.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
  padding-right: 16.5em;
}
.ql-editor .ql-indent-6:not(.ql-direction-rtl) {
  padding-left: 18em;
}
.ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
  padding-left: 19.5em;
}
.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
  padding-right: 18em;
}
.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
  padding-right: 19.5em;
}
.ql-editor .ql-indent-7:not(.ql-direction-rtl) {
  padding-left: 21em;
}
.ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
  padding-left: 22.5em;
}
.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
  padding-right: 21em;
}
.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
  padding-right: 22.5em;
}
.ql-editor .ql-indent-8:not(.ql-direction-rtl) {
  padding-left: 24em;
}
.ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
  padding-left: 25.5em;
}
.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
  padding-right: 24em;
}
.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
  padding-right: 25.5em;
}
.ql-editor .ql-indent-9:not(.ql-direction-rtl) {
  padding-left: 27em;
}
.ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
  padding-left: 28.5em;
}
.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
  padding-right: 27em;
}
.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
  padding-right: 28.5em;
}
.ql-editor .ql-video {
  display: block;
  max-width: 100%;
}
.ql-editor .ql-video.ql-align-center {
  margin: 0 auto;
}
.ql-editor .ql-video.ql-align-right {
  margin: 0 0 0 auto;
}
.ql-editor .ql-bg-black {
  background-color: #000;
}
.ql-editor .ql-bg-red {
  background-color: #e60000;
}
.ql-editor .ql-bg-orange {
  background-color: #f90;
}
.ql-editor .ql-bg-yellow {
  background-color: #ff0;
}
.ql-editor .ql-bg-green {
  background-color: #008a00;
}
.ql-editor .ql-bg-blue {
  background-color: #06c;
}
.ql-editor .ql-bg-purple {
  background-color: #93f;
}
.ql-editor .ql-color-white {
  color: #fff;
}
.ql-editor .ql-color-red {
  color: #e60000;
}
.ql-editor .ql-color-orange {
  color: #f90;
}
.ql-editor .ql-color-yellow {
  color: #ff0;
}
.ql-editor .ql-color-green {
  color: #008a00;
}
.ql-editor .ql-color-blue {
  color: #06c;
}
.ql-editor .ql-color-purple {
  color: #93f;
}
.ql-editor .ql-font-serif {
  font-family: Georgia, Times New Roman, serif;
}
.ql-editor .ql-font-monospace {
  font-family: Monaco, Courier New, monospace;
}
.ql-editor .ql-size-small {
  font-size: 0.75em;
}
.ql-editor .ql-size-large {
  font-size: 1.5em;
}
.ql-editor .ql-size-huge {
  font-size: 2.5em;
}
.ql-editor .ql-direction-rtl {
  direction: rtl;
  text-align: inherit;
}
.ql-editor .ql-align-center {
  text-align: center;
}
.ql-editor .ql-align-justify {
  text-align: justify;
}
.ql-editor .ql-align-right {
  text-align: right;
}
.ql-editor.ql-blank::before {
  color: rgba(0,0,0,0.6);
  content: attr(data-placeholder);
  font-style: italic;
  left: 15px;
  pointer-events: none;
  position: absolute;
  right: 15px;
}
.ql-snow.ql-toolbar:after,
.ql-snow .ql-toolbar:after {
  clear: both;
  content: '';
  display: table;
}
.ql-snow.ql-toolbar button,
.ql-snow .ql-toolbar button {
  background: none;
  border: none;
  cursor: pointer;
  display: inline-block;
  float: left;
  height: 24px;
  padding: 3px 5px;
  width: 28px;
}
.ql-snow.ql-toolbar button svg,
.ql-snow .ql-toolbar button svg {
  float: left;
  height: 100%;
}
.ql-snow.ql-toolbar button:active:hover,
.ql-snow .ql-toolbar button:active:hover {
  outline: none;
}
.ql-snow.ql-toolbar input.ql-image[type=file],
.ql-snow .ql-toolbar input.ql-image[type=file] {
  display: none;
}
.ql-snow.ql-toolbar button:hover,
.ql-snow .ql-toolbar button:hover,
.ql-snow.ql-toolbar button:focus,
.ql-snow .ql-toolbar button:focus,
.ql-snow.ql-toolbar button.ql-active,
.ql-snow .ql-toolbar button.ql-active,
.ql-snow.ql-toolbar .ql-picker-label:hover,
.ql-snow .ql-toolbar .ql-picker-label:hover,
.ql-snow.ql-toolbar .ql-picker-label.ql-active,
.ql-snow .ql-toolbar .ql-picker-label.ql-active,
.ql-snow.ql-toolbar .ql-picker-item:hover,
.ql-snow .ql-toolbar .ql-picker-item:hover,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected {
  color: #06c;
}
.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow .ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button:focus .ql-fill,
.ql-snow .ql-toolbar button:focus .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
  fill: #06c;
}
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button:focus .ql-stroke,
.ql-snow .ql-toolbar button:focus .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow .ql-toolbar button.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-snow.ql-toolbar button:hover .ql-stroke-miter,
.ql-snow .ql-toolbar button:hover .ql-stroke-miter,
.ql-snow.ql-toolbar button:focus .ql-stroke-miter,
.ql-snow .ql-toolbar button:focus .ql-stroke-miter,
.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
  stroke: #06c;
}
@media (pointer: coarse) {
  .ql-snow.ql-toolbar button:hover:not(.ql-active),
  .ql-snow .ql-toolbar button:hover:not(.ql-active) {
    color: #444;
  }
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
    fill: #444;
  }
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
    stroke: #444;
  }
}
.ql-snow {
  box-sizing: border-box;
}
.ql-snow * {
  box-sizing: border-box;
}
.ql-snow .ql-hidden {
  display: none;
}
.ql-snow .ql-out-bottom,
.ql-snow .ql-out-top {
  visibility: hidden;
}
.ql-snow .ql-tooltip {
  position: absolute;
  transform: translateY(10px);
}
.ql-snow .ql-tooltip a {
  cursor: pointer;
  text-decoration: none;
}
.ql-snow .ql-tooltip.ql-flip {
  transform: translateY(-10px);
}
.ql-snow .ql-formats {
  display: inline-block;
  vertical-align: middle;
}
.ql-snow .ql-formats:after {
  clear: both;
  content: '';
  display: table;
}
.ql-snow .ql-stroke {
  fill: none;
  stroke: #444;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.ql-snow .ql-stroke-miter {
  fill: none;
  stroke: #444;
  stroke-miterlimit: 10;
  stroke-width: 2;
}
.ql-snow .ql-fill,
.ql-snow .ql-stroke.ql-fill {
  fill: #444;
}
.ql-snow .ql-empty {
  fill: none;
}
.ql-snow .ql-even {
  fill-rule: evenodd;
}
.ql-snow .ql-thin,
.ql-snow .ql-stroke.ql-thin {
  stroke-width: 1;
}
.ql-snow .ql-transparent {
  opacity: 0.4;
}
.ql-snow .ql-direction svg:last-child {
  display: none;
}
.ql-snow .ql-direction.ql-active svg:last-child {
  display: inline;
}
.ql-snow .ql-direction.ql-active svg:first-child {
  display: none;
}
.ql-snow .ql-editor h1 {
  font-size: 2em;
}
.ql-snow .ql-editor h2 {
  font-size: 1.5em;
}
.ql-snow .ql-editor h3 {
  font-size: 1.17em;
}
.ql-snow .ql-editor h4 {
  font-size: 1em;
}
.ql-snow .ql-editor h5 {
  font-size: 0.83em;
}
.ql-snow .ql-editor h6 {
  font-size: 0.67em;
}
.ql-snow .ql-editor a {
  text-decoration: underline;
}
.ql-snow .ql-editor blockquote {
  border-left: 4px solid #ccc;
  margin-bottom: 5px;
  margin-top: 5px;
  padding-left: 16px;
}
.ql-snow .ql-editor code,
.ql-snow .ql-editor pre {
  background-color: #f0f0f0;
  border-radius: 3px;
}
.ql-snow .ql-editor pre {
  white-space: pre-wrap;
  margin-bottom: 5px;
  margin-top: 5px;
  padding: 5px 10px;
}
.ql-snow .ql-editor code {
  font-size: 85%;
  padding: 2px 4px;
}
.ql-snow .ql-editor pre.ql-syntax {
  background-color: #23241f;
  color: #f8f8f2;
  overflow: visible;
}
.ql-snow .ql-editor img {
  max-width: 100%;
}
.ql-snow .ql-picker {
  color: #444;
  display: inline-block;
  float: left;
  font-size: 14px;
  font-weight: 500;
  height: 24px;
  position: relative;
  vertical-align: middle;
}
.ql-snow .ql-picker-label {
  cursor: pointer;
  display: inline-block;
  height: 100%;
  padding-left: 8px;
  padding-right: 2px;
  position: relative;
  width: 100%;
}
.ql-snow .ql-picker-label::before {
  display: inline-block;
  line-height: 22px;
}
.ql-snow .ql-picker-options {
  background-color: #fff;
  display: none;
  min-width: 100%;
  padding: 4px 8px;
  position: absolute;
  white-space: nowrap;
}
.ql-snow .ql-picker-options .ql-picker-item {
  cursor: pointer;
  display: block;
  padding-bottom: 5px;
  padding-top: 5px;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label {
  color: #ccc;
  z-index: 2;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
  fill: #ccc;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
  stroke: #ccc;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  display: block;
  margin-top: -1px;
  top: 100%;
  z-index: 1;
}
.ql-snow .ql-color-picker,
.ql-snow .ql-icon-picker {
  width: 28px;
}
.ql-snow .ql-color-picker .ql-picker-label,
.ql-snow .ql-icon-picker .ql-picker-label {
  padding: 2px 4px;
}
.ql-snow .ql-color-picker .ql-picker-label svg,
.ql-snow .ql-icon-picker .ql-picker-label svg {
  right: 4px;
}
.ql-snow .ql-icon-picker .ql-picker-options {
  padding: 4px 0px;
}
.ql-snow .ql-icon-picker .ql-picker-item {
  height: 24px;
  width: 24px;
  padding: 2px 4px;
}
.ql-snow .ql-color-picker .ql-picker-options {
  padding: 3px 5px;
  width: 152px;
}
.ql-snow .ql-color-picker .ql-picker-item {
  border: 1px solid transparent;
  float: left;
  height: 16px;
  margin: 2px;
  padding: 0px;
  width: 16px;
}
.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
  position: absolute;
  margin-top: -9px;
  right: 0;
  top: 50%;
  width: 18px;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before {
  content: attr(data-label);
}
.ql-snow .ql-picker.ql-header {
  width: 98px;
}
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: 'Normal';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: 'Heading 1';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: 'Heading 2';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: 'Heading 3';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: 'Heading 4';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: 'Heading 5';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: 'Heading 6';
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  font-size: 2em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  font-size: 1.5em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  font-size: 1.17em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  font-size: 1em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  font-size: 0.83em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  font-size: 0.67em;
}
.ql-snow .ql-picker.ql-font {
  width: 108px;
}
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: 'Sans Serif';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
  content: 'Serif';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
  content: 'Monospace';
}
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
  font-family: Georgia, Times New Roman, serif;
}
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
  font-family: Monaco, Courier New, monospace;
}
.ql-snow .ql-picker.ql-size {
  width: 98px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: 'Normal';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
  content: 'Small';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
  content: 'Large';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
  content: 'Huge';
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
  font-size: 10px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
  font-size: 18px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
  font-size: 32px;
}
.ql-snow .ql-color-picker.ql-background .ql-picker-item {
  background-color: #fff;
}
.ql-snow .ql-color-picker.ql-color .ql-picker-item {
  background-color: #000;
}
.ql-toolbar.ql-snow {
  border: 1px solid #ccc;
  box-sizing: border-box;
  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  padding: 8px;
}
.ql-toolbar.ql-snow .ql-formats {
  margin-right: 15px;
}
.ql-toolbar.ql-snow .ql-picker-label {
  border: 1px solid transparent;
}
.ql-toolbar.ql-snow .ql-picker-options {
  border: 1px solid transparent;
  box-shadow: rgba(0,0,0,0.2) 0 2px 8px;
}
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
  border-color: #ccc;
}
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  border-color: #ccc;
}
.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,
.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover {
  border-color: #000;
}
.ql-toolbar.ql-snow + .ql-container.ql-snow {
  border-top: 0px;
}
.ql-snow .ql-tooltip {
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0px 0px 5px #ddd;
  color: #444;
  padding: 5px 12px;
  white-space: nowrap;
}
.ql-snow .ql-tooltip::before {
  content: "Visit URL:";
  line-height: 26px;
  margin-right: 8px;
}
.ql-snow .ql-tooltip input[type=text] {
  display: none;
  border: 1px solid #ccc;
  font-size: 13px;
  height: 26px;
  margin: 0px;
  padding: 3px 5px;
  width: 170px;
}
.ql-snow .ql-tooltip a.ql-preview {
  display: inline-block;
  max-width: 200px;
  overflow-x: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}
.ql-snow .ql-tooltip a.ql-action::after {
  border-right: 1px solid #ccc;
  content: 'Edit';
  margin-left: 16px;
  padding-right: 8px;
}
.ql-snow .ql-tooltip a.ql-remove::before {
  content: 'Remove';
  margin-left: 8px;
}
.ql-snow .ql-tooltip a {
  line-height: 26px;
}
.ql-snow .ql-tooltip.ql-editing a.ql-preview,
.ql-snow .ql-tooltip.ql-editing a.ql-remove {
  display: none;
}
.ql-snow .ql-tooltip.ql-editing input[type=text] {
  display: inline-block;
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0px;
  content: 'Save';
  padding-right: 0px;
}
.ql-snow .ql-tooltip[data-mode=link]::before {
  content: "Enter link:";
}
.ql-snow .ql-tooltip[data-mode=formula]::before {
  content: "Enter formula:";
}
.ql-snow .ql-tooltip[data-mode=video]::before {
  content: "Enter video:";
}
.ql-snow a {
  color: #06c;
}
.ql-container.ql-snow {
  border: 1px solid #ccc;
}

.m-elearning-info .a-input:focus-within {
	box-shadow: 0 0 0 1px white, 0 0 2px 2px var(--color-light-secondary);
	border: 0;
}
.m-elearning-info .text-input input{
	/* width: 25rem; */
	width: 22rem;
}

.m-elearning-info {
	height: 44.25rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background-color: var(--color-primary-light);
	padding-bottom: 0.5rem;
}

.m-elearning-info>.page-list {
	width: 49rem;
	margin: 0.5rem;
	background-color: white;
	justify-content: space-between;
}

.m-elearning-info>.page-list .vbox {
	width: auto;
}

.m-elearning-info>.info {
	height: 100%;
	width: 49rem;
	height: 39.75rem;
	margin: auto;
	/* background-color: var(--color-transparent); */
	background-color: var(--color-white);
	padding: 0.5rem;
}

/* .m-elearning-info>.info{
	background-color: var(--color-transparent);
	padding: 0;
} */

.m-elearning-info>.info .m-test-info-container,
.m-elearning-info>.info .m-course-info-container {
	width: 100%;
}
.m-elearning-info>.info .m-test-info-container .m-test-info-all-tests .m-test-info-all-test-filters .a-filter-container .popper-toggle,
.m-elearning-info>.info .m-course-info-container .m-course-info-all-courses .m-course-info-all-course-filters .a-filter-container .popper-toggle{
	padding-left: 0.5rem;
}

.m-elearning-info>.info .m-test-info-container .m-test-info-all-tests .m-test-info-all-test-filters .a-filter-container div.a-input,
.m-elearning-info>.info .m-course-info-container .m-course-info-all-courses .m-course-info-all-course-filters .a-filter-container div.a-input
{
	height: 2.5rem;
	margin: 0.5rem;
	border-radius: 1.5rem;
	width: 70%;
}
.m-elearning-info>.info .m-test-info-container .m-test-info-all-tests .m-test-info-all-test-filters .a-filter-container div.a-input-label,
.m-elearning-info>.info .m-course-info-container .m-course-info-all-courses .m-course-info-all-course-filters .a-filter-container div.a-input-label {
	align-items: center;
	height: 2.5rem;
	/* margin: 0.5rem; */
	border-radius: 1.5rem;
	overflow: hidden;
	justify-content: space-between;
	border: 1px solid var(--color-lighter-secondary);
	padding-left: 0.5rem;
}

.m-elearning-info>.info .m-test-info-container .m-test-info-all-tests .m-test-info-all-test-filters .a-filter-container div.a-input-label .a-button,
.m-elearning-info>.info .m-course-info-container .m-course-info-all-courses .m-course-info-all-course-filters .a-filter-container div.a-input-label .a-button {
	height: 2.5rem;
	width: 3rem !important;
}

.m-elearning-info>.info .m-test-info-container .m-test-info-all-tests .m-test-info-all-test-filters .a-filter-container div.a-input-label:focus-within,
.m-elearning-info>.info .m-course-info-container .m-course-info-all-courses .m-course-info-all-course-filters .a-filter-container div.a-input-label:focus-within {
	/* border: solid 1px var(--color-primary); */
	box-shadow: 0 0 0 1px white, 0 0 2px 2px var(--color-light-secondary);
	border: 0;
}
.m-elearning-info>.info .m-test-info-container .m-test-info-all-tests .m-test-info-all-test-filters .a-filter-container div.a-input-label input:focus-within,
.m-elearning-info>.info .m-course-info-container .m-course-info-all-courses .m-course-info-all-course-filters .a-filter-container div.a-input-label input:focus-within{
	box-shadow: none;
}
.m-elearning-info>.info .m-test-info-container .m-test-info-all-tests .m-test-info-all-test-filters .a-filter-container div.a-input-label input,
.m-elearning-info>.info .m-course-info-container .m-course-info-all-courses .m-course-info-all-course-filters .a-filter-container div.a-input-label input{
	height: 2.5rem;
	margin: 0.5rem;
	/* border-radius: 1.5rem; */
	border: none;
}
.m-elearning-info>.info .m-test-info-container .m-test-info-all-tests .m-test-info-all-test-filters .a-filter-container div.a-input-label .a-button,
.m-elearning-info>.info .m-course-info-container .m-course-info-all-courses .m-course-info-all-course-filters .a-filter-container div.a-input-label .a-button {
	background-color: var(--color-lighter-secondary);
}

.m-elearning-info>.info .m-test-info-container .m-test-info-all-tests .m-test-info-all-test-filters .a-filter-container div.a-input input,
.m-elearning-info>.info .m-course-info-container .m-course-info-all-courses .m-course-info-all-course-filters .a-filter-container div.a-input input{
	width: 100%;
}

.m-elearning-info>.info .m-test-info-container .m-toggle-text-container,
.m-course-main .header .m-toggle-text-container {
	display: flex;
	justify-content: end;
	/* margin: 0.5rem; */
}

.m-elearning-info>.info .m-test-info-container .m-toggle-text-container .a-toggle-text,
.m-course-main .header .m-toggle-text-container .a-toggle-text{
	/* border: 1px solid var(--color-lighter-secondary); */
	border: 1px solid var(--color-light-secondary);
	border-radius: 1.5rem;
}

.m-elearning-info>.info .m-test-info-container .m-toggle-text-container .a-toggle-text label.a-radio,
.m-course-main .header .m-toggle-text-container .a-toggle-text label.a-radio{
	width: 100%;

}

.m-elearning-info>.info .m-test-info-container .m-toggle-text-container .a-toggle-text div.a-radio,
.m-course-main .header .m-toggle-text-container .a-toggle-text div.a-radio{
	padding: 0 0.5rem;
}

.m-elearning-info>.info .m-test-info-container .icon-role {
	border: solid 1px var(--color-lighter-secondary);
	margin: 0 0.5rem;
}

.m-course-main .header .m-toggle-text-container .a-toggle-text.second div.a-radio:has(>input[type=radio]:checked){
	background-color: var(--color-neutral-1);
}

.m-elearning-info>.info .m-test-info-container .icon-role.draft,
.m-elearning-info>.info .m-test-info-container .icon-role.archived {
	border: solid 1px var(--color-secondary);
}

.m-elearning-info>.info .m-test-info-container .icon-role.active {
	border: solid 1px var(--color-success);
}

.m-elearning-info>.info .m-test-info-container .a-button.link {
	border: none;
	background-color: var(--color-white);
	/* background-color: var(--color-primary-light); */
	color: var(--color-primary);
	padding: 0;

}

/* ONE --> TEST INFO ONE TEST */
.m-elearning-info>.info .m-test-info-container .m-test-info-one-test .m-test-container-properties,
.m-elearning-info>.info .m-course-info-container .m-course-info-one-test .m-course-container-properties{
	width: 100%;
	/* margin: 1rem 0 0.5rem; */
}

.m-elearning-info>.info .m-test-info-container .m-test-info-one-test .m-test-container-properties .sub-title,
.m-elearning-info>.info .m-course-info-container .m-course-info-one-test .m-course-container-properties .sub-title {
	margin: 0.5rem 0;
}

.m-elearning-info>.info .m-test-info-container .m-test-info-one-test .m-test-container-properties .property,
.m-elearning-info>.info .m-course-info-container .m-course-info-one-test .m-course-container-properties .property {
	height: 2.5rem;
	width: 100%;
}

.m-elearning-info>.info .m-test-info-container .m-test-info-one-test .m-test-container-properties .property:nth-child(odd),
.m-elearning-info>.info .m-course-info-container .m-course-info-one-test .m-course-container-properties .property:nth-child(odd){
	background-color: #F4F5F9;

}
.m-elearning-info>.info .m-test-info-container .m-test-info-one-test .m-test-container-properties .property:nth-child(even),
.m-elearning-info>.info .m-course-info-container .m-course-info-one-test .m-course-container-properties .property:nth-child(even){
	background-color: var(--color-white);
}

.m-elearning-info>.info .m-test-info-container .m-test-info-one-test .m-test-container-properties .property div,
.m-elearning-info>.info .m-course-info-container .m-course-info-one-test .m-course-container-properties .property div{
	width: 50%;
}

.m-elearning-info>.info .m-test-info-container .a-button.link .a-text {
	text-decoration: underline;
	margin-left: 0.25rem;
}

.m-elearning-info>.info .m-edit-test-title,
.m-elearning-info>.info .m-edit-course-name {
	justify-content: flex-start;
	align-items: center;
	width: fit-content;
	height: fit-content;
	gap: 0.5rem;
	padding: 0 0.5rem;
}

.m-elearning-info>.info .m-edit-course-name>div.a-text{
	max-width: 25.8rem;
	max-height: 5rem;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	display: inline-block;
}

.m-elearning-info .m-edit-test-questions-container {
	max-height: 20rem;
	/* max-height: 18.4rem; */
	overflow: auto;
	scrollbar-width: thin;
}

.m-elearning-info .m-edit-test-questions-container::-webkit-scrollbar {
	width: 5px;
}

.m-elearning-info .m-edit-test-questions-container::-webkit-scrollbar-thumb {
	background-color: var(--color-light-secondary);
	border-radius: 1rem;
}

.m-elearning-info .m-edit-test-questions-container::-webkit-scrollbar-track {
	background-color: var(--color-lighter-secondary);
}


.m-elearning-info .m-edit-test-questions-container .question-container .a-button {
	padding: 0;
}

.m-elearning-info>.info .title {
	/* width: fit-content; */
	width: 100%;
	white-space: nowrap;
}

.ws-nowrap {
	width: fit-content;
	white-space: nowrap;
}

.m-elearning-info>.info .m-edit-test-title.edit,
.m-elearning-info>.info .m-edit-course-name.edit {
	margin: 1rem 0;
}

.m-elearning-info>.info .m-edit-test-title .text-input input,
.m-elearning-info>.info .m-course-info-edit-course .m-edit-course-name .text-input input {
	height: 3rem;
	width: 25rem;
	font-size: 1.5rem;
	color: var(--color-secondary);
}

.m-elearning-info .question-container {
	width: 98%;
	height: 2.3rem;
	overflow: hidden;
	margin: 0.2rem auto;
	padding: 0.2rem 0.5rem;
	border-radius: 0.5rem;
	/* border: 1px solid var(--color-light-secondary); */
	background-color: var(--color-neutral-1);
	box-shadow: 1px 1px 2px 0px #00000030;
	cursor: pointer;
}

.m-elearning-info .question-container.active {
	background-color: var(--color-primary-light);
	box-shadow: 0px 0px 6px #00000080;
	z-index: 14;
}

.m-test-main {
	height: 100%;
	overflow: hidden;
}

.m-test-main .header .a-input {
	height: 2.5rem;
}

.m-test-main>.container {
	height: 100%;
}

.m-elearning-info .m-test-info-container .m-test-label{
	padding: 0.5rem 0;
	margin: 0.25rem 0 0.5rem 0;
	height: 100%;
	max-height: 5.5rem;
	overflow-y: auto;
}

/* TODO: test --> course */
.m-elearning-info .m-test-info-container .m-test-label .a-tag,
.m-elearning-info .m-test-info-container .a-filter-container .a-tag {
	border-radius: 1.5rem;
	height: 2rem;
}

.m-elearning-info .m-test-info-container .m-test-label .popper-toggle .a-input-label {
	border: solid 1px var(--color-lighter-secondary);
	align-items: center;
	height: 2.5rem;

}
.m-elearning-info .m-test-info-container .m-test-label .popper-toggle .a-input-label:focus {
	border: solid 1px var(--color-primary);
}


.m-elearning-info .m-test-info-container .m-test-label .popper-toggle .a-input-label .a-button {
	background-color: var(--color-lighter-secondary);
}


.m-elearning-info .m-test-info-container .m-test-label input {
	margin: 0 0.25rem;
	border: none;

}
.m-elearning-info .m-test-info-container .m-test-label input:focus-within{
	box-shadow: none;
	/* border: solid 1px var(--color-primary); */
}

.m-elearning-info .m-test-info-container .m-test-label::-webkit-scrollbar {
	width: 5px;
}

.m-elearning-info .m-test-info-container .m-test-label::-webkit-scrollbar-thumb {
	background-color: var(--color-light-secondary);
	border-radius: 1rem;
}

.m-elearning-info .m-test-info-container .m-test-label::-webkit-scrollbar-track {
	background-color: var(--color-lighter-secondary);
}

.m-elearning-info .m-test-info-container .m-test-label .popper-opts {
	box-shadow: 0px 0px 2px 0px #0000005f;
}
.m-elearning-info .m-test-info-container .m-test-label .popper-opts ul.m-list li {
	padding: 0.25rem 0.5rem;
	margin: 0.25rem 0;
}
.m-elearning-info .m-test-info-container .m-test-label .popper-opts ul.m-list li:hover {
	background-color: var(--color-lighter-secondary);
}




/* EditNewQuestion */
.m-edit-new-question>.ql-toolbar>.quill>.ql-container {
	display: none;
}

.m-edit-new-question>.editables-container {
	padding: 0.5rem;
	height: '100vh'
}


.m-editable-area {
	width: 60rem;
	min-height: 16rem;
	border-radius: 0.5rem;
	border: 1px solid var(--color-lighter-secondary);
}

.m-editable-area.question {
	background-color: white;
}

.m-editable-area.answer {
	background-color: var(--color-lighter-secondary);
}

.m-editable-area .editor-parent {
	width: 100%;
	height: 100%,
}

.m-editable-area .editor-content {
	width: 100%;
	height: 100%;
}

/* NEW-NEW-NEW */

.m-edit-test-item {
	width: 100%;
	height: calc( 100% - 40px);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.m-edit-test-item .m-multi-quill-editor {
	width: 100%;
	position: relative;
	/* padding-top: 3rem; */
}

.m-edit-test-item .m-multi-quill-editor #quill-toolbar {
	border: none;
	width: 100%;
	background-color: var(--color-lighter-secondary);
	/* TODO: TEMP left?? */
	left: 1rem;
	top: 0;
	position: absolute;
	z-index: 80;
	transition: top 0.3s ease;
	border-bottom: solid 1px var(--color-light-secondary);
	margin: 0 -1rem;
}

.m-edit-test-item .m-multi-quill-editor .body {
	overflow-y: auto;
	/* TODO: normálisan kiszámolni.. */
	/* height: calc(100vh - 60px); */
	/* padding: var(--spacing-xs) var(--spacing-sm); */
	/* TODO: TeMP--> normálisan meghatározni */
	height: 1016px;
}

.m-edit-test-item .m-multi-quill-editor .body::-webkit-scrollbar {
	width: 5px;
}

.m-edit-test-item .m-multi-quill-editor .body::-webkit-scrollbar-thumb {
	background-color: var(--color-light-secondary);
		border-radius: 1rem;
}

.m-edit-test-item .m-multi-quill-editor .body::-webkit-scrollbar-track {
	background-color: var(--color-lighter-secondary);
}

.m-edit-test-item .m-multi-quill-editor .popper-opts {
	border: solid 1px var(--color-lighter-secondary)
}

.m-edit-test-item .m-multi-quill-editor .popper-opts .a-button:hover {
	background-color: var(--color-lighter-secondary);
}

.m-test-main .m-edit-test-item .m-multi-quill-editor .title {
	margin: 3rem 0 0 0;
}

.m-test-main .header {
	/* position: fixed; */
	z-index: 100;
}

.m-tip-container {
	width: 95%;
	border-radius: 0.5rem;
	padding: 1rem 0;
	margin: 0.5rem 0;

	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.m-tip-container.question {
	background-color: var(--color-white);
}

.m-tip-container.answer {
	background-color: var(--color-lighter-secondary);
	border: 1px solid var(--color-lighter-secondary);
	padding: 0.5rem 1rem;
}

.m-tip-container .point-container {
	justify-content: end;
	align-items: center;
	gap: 0.5rem;
}

.m-tip-container .point-container input {
	width: 4rem;
	height: 2.5rem;
	text-align: center;
	color: var(--color-secondary);
}

.m-tip-container .point-container input[type="number"]::-webkit-inner-spin-button,
.m-tip-container .point-container input[type="number"]::-webkit-outer-spin-button,
.m-tip-container .num-container input[type="number"]::-webkit-inner-spin-button,
.m-tip-container .num-container input[type="number"]::-webkit-outer-spin-button,
.m-test-answer-item-num>div input[type="number"]::-webkit-inner-spin-button,
.m-test-answer-item-num>div input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
}

.m-tip-container .p-1 {
	background-color: var(--color-white);
	/* min-height: 15rem; */
	border-radius: 0.5rem;

	border: 1px solid var(--color-lighter-secondary);
	/* min-height: 15rem; */
	min-height: 5rem;
	padding: var(--spacing-sm);
	&.answer{
		margin: 0.5rem 0;
	}
}

/* .m-tip-container .quill .ql-toolbar {
	border-top-right-radius: 0.5rem;
	border-top-left-radius: 0.5rem;
}

.m-tip-container.question .quill .ql-toolbar{

} */

/* .m-tip-container.answer .quill .ql-toolbar {
	border: none;
	border-bottom: 1px solid var(--color-lighter-secondary);
} */


.m-tip-container .p-1 .container {
	line-height: 1.42;
	height: 100%;
	outline: none;
	overflow-y: auto;
	padding: 12px 15px;
	tab-size: 4;
	-moz-tab-size: 4;
	text-align: left;
	white-space: pre-wrap;
	word-wrap: break-word;
}

.m-tip-container .p-1.answer {
	border: none;
}

.m-tip-container .p-1.answer.yno {
	height: fit-content;
	min-height: 0;
}

.m-tip-container .p-1.question.yno,
.m-tip-container .p-1.question.num {
	margin-bottom: 0;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom: none;
}

.m-tip-container .yno-container,
.m-tip-container .num-container {
	height: 4.5rem;
	background-color: var(--color-primary-light);
	border-bottom-left-radius: 0.5rem;
	border-bottom-right-radius: 0.5rem;
	/* border-bottom: solid 1px var(--color-lighter-secondary);
	border-left: solid 1px var(--color-lighter-secondary);
	border-right: solid 1px var(--color-lighter-secondary); */
	border-bottom: solid 1px var(--color-primary-light);
	border-left: solid 1px var(--color-primary-light);
	border-right: solid 1px var(--color-primary-light);
	display: flex;
	align-items: center;
	justify-content: start;
	padding: 1rem;
}

.m-tip-container .yno-container .a-text {
	margin-left: 0.5rem;
}

.m-tip-container .num-container input {
	width: 50%;
	text-align: center;
	color: var(--color-secondary);
}


/* QUILL COMPONENT CLASSES */
.ql-align-right {
	text-align: right;
}

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

.ql-align-left {
	text-align: left;
}

.ql-align-justify {
	text-align: justify;
}

/* END OF QUILL COMPONENT CLASSES */

.m-tip-container .quill .ql-container {
	/* border-bottom-left-radius: 0.5rem;
	border-bottom-right-radius: 0.5rem; */
	border: none;
}

.m-tip-container.answer .quill .ql-container {
	border: none;
}

.m-tip-container .quill .ql-container .ql-editor {
	/* min-height: 12rem; */
	min-height: 4rem;
}

.m-tip-container .a-checkbox {
	border: none !important;
}

.m-tip-container .a-radio .a-text,
.m-tip-container .a-checkbox .a-text {
	margin-left: 0.5rem;
}

/* TEST PREVIEW */
/* .m-test-preview-wrapper {
	position: fixed;
	background: #0000005f;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 1000;
} */

.m-test-preview {
	width: 100%;
	min-height: calc(100vh - 10rem);
	background-color: var(--color-white);
	display: flex;
}

.m-test-preview.result {
	min-height: 0;
	overflow-y: auto;
	margin-bottom: var(--spacing-xs);
}

.m-test-preview-item-container .nav-buttons {
	width: 53rem;
	align-items: center;
	width: 100%;
	padding: var(--spacing-sm);
	background-color: var(--color-surface-2);
	/* margin: 0 auto; */
}

.m-test-preview .next-button,
.m-test-preview .previous-button,
.m-test-preview .send-button {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 15rem;
	/* margin-top: 2rem; */
}

.m-test-preview-item-container,
.m-test-preview-result-container {
	width: 90%;
	display: flex;
	flex-direction: column;
	/* justify-content: center; */
	/* gap: 1rem; */
	margin: var(--spacing-md) auto var(--spacing-xs);
}


.m-test-preview-item {
	/* width: 53rem; */
	padding: var(--spacing-md);
	border: solid 1px var(--color-outline-variant);
	border-radius: var(--shape-none) var(--shape-none) var(--shape-sm) var(--shape-sm);
	display: flex;
	flex-direction: column;
	gap: 1rem;
	/* margin: 0 auto; */
}

.m-test-preview-item .m-question-item .container {
	margin: .5rem 0 1rem;
	&.question{
		color: var(--color-on-surface);
	}
}

.m-test-preview-item .m-test-answer-item.a-radio label.label.a-radio .letter-index .a-text{
	margin-left: 0;
}


.m-test-answer-item.a-checkbox:has(> input[type=checkbox]:checked),
.m-test-answer-item.a-radio:has(> input[type=radio]:checked) {
	border: none
}



.m-test-answer-item .vbox {
	gap: 0.5rem;
	justify-content: center;
	align-items: center;
}

.m-test-answer-item {
	& .letter-index {
		width: 2rem;
		height: 2rem;
		border: solid 1px var(--color-lighter-secondary);
		/* border-radius: 50%; */
		display: flex;
		justify-content: center;
		align-items: center;
		color: var(--color-on-surface);
	}
	&:has(.c-checkbox){
		& .letter-index{
			border-radius: var(--shape-sm);
		}
	}
	&:has(.c-radio){
		& .letter-index{
			border-radius: var(--shape-full);
		}
	}
}

.m-test-answer-item .list-element {
	width: 50rem;
	padding: var(--spacing-xs) !important;
	border-radius: 0.5rem;
	border: solid 1px var(--color-lighter-secondary);
	color: var(--color-on-surface);
	font-family: var(--body-l-font-family);
	font-size: var(--body-l-font-size);
	line-height: var(--body-l-line-height);
	font-weight: var(--body-l-font-weight);
	letter-spacing: var(--body-l-letter-spacing);
}

.m-test-answer-item .c-checkbox:has(> input[type=checkbox]:checked) .letter-index,
.m-test-answer-item .c-checkbox:has(> input[type=checkbox]:checked) .list-element,
.m-test-answer-item .c-radio:has(> input[type=radio]:checked) .letter-index,
.m-test-answer-item .c-radio:has(> input[type=radio]:checked) .list-element {
	border: solid 1px var(--color-primary);
	background-color: var(--color-primary-light);
}

.m-test-answer-item .c-checkbox:has(> input[type=checkbox]:checked) .list-element,
.m-test-answer-item .c-radio:has(> input[type=radio]:checked) .list-element {
	color: var(--color-on-surface);
}

.m-test-answer-item-num,
.m-test-answer-item-num>div {
	/* background-color: var(--color-primary-light); */
	background-color: var(--color-secondary-container);
	border-radius: 0.5rem;
	display: flex;
	align-items: center;
	height: 8rem;
	width: 100%;
}

.m-test-answer-item-num {
	justify-content: start;
}

.m-test-answer-item-num>div {
	padding: 1rem;
	gap: 0.5rem;
}

.m-test-answer-item-num>div input {
	height: 2.5rem;
	width: 6rem;
	text-align: center;
	color: var(--color-text);
	font-size: 1.375rem;
}


/* CARDS */
.m-elearning-list .list {
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 0.5rem;
	gap: 10px;
	overflow: auto;
	position: relative;
	height: 100%;
	max-height: calc(100vh - var(--s-hdr-line));
	background-color: #f0f2f5;
	border-radius: 0;
}

.m-elearning-card {
	min-width: 33rem;
	width: calc(50% - 2rem);
	flex-grow: 1;
	height: 11rem;
	background-color: var(--color-white);
	/* border: solid 1px var(--color-light-secondary); */
	cursor: pointer;
	z-index: 5;
	border-radius: 0.5rem;
	justify-content: space-between;
	/* box-shadow: 1px 1px 2px 0px #00000030; */
	box-shadow: 0px 0px 2px 0px #0000005f;
}

/* NEW CARD */
.m-elearning-card-new {
	/* min-width: 33rem; */
	width: calc(50% - 2rem);
	flex-grow: 1;
	height: 14rem;
	background-color: var(--color-white);
	/* border: solid 1px var(--color-light-secondary); */
	cursor: pointer;
	z-index: 5;
	border-radius: 0.5rem;
	justify-content: space-between;
	/* box-shadow: 1px 1px 2px 0px #00000030; */
	box-shadow: 0px 0px 2px 0px #0000005f;
	position: relative;
}

.m-elearning-card.active,
.m-elearning-card-new.active {
	background-color: var(--color-primary-light);
	box-shadow: 0px 0px 6px #00000080;
	z-index: 14;
}

.m-elearning-card-new .test-type-icon{
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	border: solid 2px var(--color-light-secondary);
	background-color: var(--color-white);
	position: absolute;
	top: 1.3rem;
	left: 1.8rem;
	display: flex;
	justify-content: center;
	align-items: center;
}

.m-elearning-card-new .test-type-icon.active {
	/* border: solid 2px var(--color-white); */
	border: solid 2px var(--color-secondary);
}

.m-elearning-card-new .test-type-icon div {
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	border: solid 1px var(--color-lighter-secondary);
	display: flex;
	justify-content: center;
	align-items: center;
}

.m-elearning-card-new .test-type-icon.active div{
	/* border: solid 1px var(--color-primary); */
}


.m-card-test-content {
	padding: 0.5rem 0.5rem 0.5rem 0.5rem;
	flex: 4;
	justify-content: space-between;
}

/* NEW CARD */
.m-card-test-content-new {
	padding: 0.5rem;
	flex: 4;
	justify-content: space-between;
	gap: 0.25rem;
}
.m-card-test-content-new .top {
	height: 2rem;
}
.m-card-test-content-new .top .icontext{
	padding: 0.2rem 0.4rem;
	font: var(--semibold3);
}

.m-card-test-content-new .top .icontext.success {
	border: solid 1px var(--color-success);
}


.m-card-header {
	min-height: 3.25rem;
	/* background-color: var(--color-primary-light); */
	/* TODO: erre esetleg új változót bevezetni */
	background-color: #f5fbff;
	width: 100%;
	border-radius: 0.5rem 0.5rem 0 0;
	border-bottom: solid 2px var(--color-light-secondary);
	position: relative;
}

.m-card-header.active {
	/* background-color: var(--color-primary);
	border-bottom: solid 2px var(--color-white); */
	background-color: var(--color-neutral-2);
	border-bottom: solid 2px var(--color-secondary);
}

.m-card-header .top .role {
	position: absolute;
	top: 1.1rem;
	left: 6.5rem;
}


.m-card-test-content .top {
	gap: 0.25rem
}

.m-card-test-content .title {
	max-height: 4rem;
	overflow: hidden;
	/* flex: 3; */
	align-items: start;
}

.m-card-test-content .action-btn {
	/* flex: 2 */
}

.m-card-test-content .middle,
.m-card-test-content-new .middle {
	margin: 0.25rem 0;
}

.m-card-test-content .middle .left,
.m-card-test-content-new .middle .left {
	flex: 3;
}

.m-card-test-content .middle .right,
.m-card-test-content-new .middle .right {
	flex: 4;
}

.m-card-test-content .bottom,
.m-card-test-content-new .bottom {
	height: 1.5rem;
	flex-wrap: wrap;
	gap: 0.5rem;
	overflow: hidden;
}



.m-elearning-list .list .m-elearning-card .m-card-icon {
	/* background-color: var(--color-primary); */
	background-color: var(--color-primary-light);
	position: relative;
	flex: 1;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	justify-content: end;
	min-width: 8.55rem;
}

.m-elearning-list .list .m-elearning-card .m-card-icon.active {
	background-color: var(--color-primary);
}

.m-elearning-list .list .m-elearning-card .m-card-icon .icon-container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/* width: 5rem;
	height: 5rem; */
	width: 8rem;
	height: 8rem;
	/* background-color: var(--color-white); */
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.m-elearning-list .list .m-elearning-card .m-card-icon .icon-container .icon-badge {
	border-radius: 50% !important;
	background-color: var(--color-white);
	right: 0;
	bottom: 0;
}

.m-elearning-list .list .m-elearning-card .m-card-icon .label {
	height: fit-content;
	margin-bottom: 0.5rem;
}

.m-elearning-list .list  .m-elearning-card .m-card-icon .label .icontext {
	padding: 0.4rem 0.5rem;
	border: solid 1px var(--color-light-secondary);
	background-color: #ffffffe3;
	z-index: 2;
	font-weight: 600;
	width: 95%;
}

/* TestSettings*/
.m-elearning-test-setting .shade {
	position: fixed;
	width: 100%;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: var(--color-secondary);
	z-index: -1;
	opacity: 0;
	cursor: pointer;
	transition: opacity var(--t-transition) ease-in-out;
}

.m-elearning-test-setting .shade.active {
	z-index: 12;
	opacity: 0.1
}

.m-elearning-test-setting>.popper-opts {
	border: 1px solid var(--color-lighter-secondary);
	width: 32rem;
	min-height: 18.75rem;
	padding: 1rem;
}

.m-elearning-test-setting>.popper-opts .group {
	padding: 0.5rem;
	margin-bottom: 0.5rem;
}

.m-elearning-test-setting>.popper-opts .group .label {}

.m-elearning-test-setting>.popper-opts .group .a-text {
	margin-left: 0.5rem;
}

.m-elearning-test-setting>.popper-opts .option {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 0.5rem;
	margin: 0.5rem 0;
}

.m-elearning-test-setting .m-settings-type-of-test>.popper-toggle,
.m-elearning-test-setting .m-settings-type-of-test>.popper-opts {
	width: 12.5rem;
}

.m-elearning-test-setting .m-settings-type-of-test>.popper-opts {
	border: solid 1px var(--color-lighter-secondary);
}

.m-elearning-test-setting .m-settings-type-of-test .popper-opts .a-button:hover {
	background-color: var(--color-lighter-secondary);
}

/* SelectUser*/
.m-test-assign-select-user .popper-toggle,
.m-test-assign-select-user .popper-opts {
	width: 16.5rem;
}

.m-test-assign-select-user .popper-opts {
	border: solid 1px var(--color-lighter-secondary);
}

.m-test-assign-select-user .popper-opts .a-button:hover {
	background-color: var(--color-lighter-secondary);
}

/* //////////////// */
/* /////COURSE///// */
/* //////////////// */

.m-course-info-edit-course{
}
.m-elearning-info .m-course-info-container .m-course-info-edit-course .m-chapters-container {
	max-height: 20rem;
	height: fit-content;
	overflow: auto;
}

.m-elearning-info .m-course-info-container .m-course-info-edit-course .m-chapter {
	width: 98%;
	/* min-height: 2.8rem;
	height: 2.8rem; */
	min-height: 3rem;
	height: 3rem;
	overflow: hidden;
	margin: 0.2rem auto;
	padding: 0.2rem 0.5rem;
	border-radius: 0.5rem;
	background-color: var(--color-neutral-1);
	box-shadow: 1px 1px 2px 0px #00000030;
	cursor: pointer;
	flex-grow: 1;
}

.m-elearning-info .m-course-info-container .m-course-info-edit-course .m-chapter.active {
	background-color: var(--color-primary-light);
	box-shadow: 0px 0px 6px #00000080;
	z-index: 14;
}

.m-elearning-info .m-course-info-container .m-course-info-edit-course .m-chapter.open {
	/* min-height: 6rem; */
	height: fit-content;
	/* max-height: 10rem; */
	flex-shrink: 0;
}

.m-elearning-info .m-course-info-container .m-course-info-edit-course .m-chapter.new{
	min-height: 2.5rem;
}

.m-elearning-info .m-course-info-container .m-course-info-edit-course .m-chapter.new .a-input.icon{
	height: 2rem;
	border-radius: 0.5rem;
}

.m-elearning-info .m-course-info-container .m-course-info-edit-course .m-chapter.open .m-material-container {
	/* overflow: scroll; */
}

.m-elearning-info .m-course-info-container .m-course-info-edit-course .m-chapter.open .m-material-container .m-material-item{
	margin: 0.25rem auto;
	gap: 0.25rem;
}

.m-elearning-info .m-course-info-container .m-course-info-edit-course .m-chapter.open .m-material-container .m-material-item.active {
	/* color: var(--color-primary); */
	color: var(--color-secondary);
	/* background-color: var(--color-lighter-secondary); */
	/* background-color: var(--color-neutral-1); */
	background-color: #D3E3FD;

}

.m-elearning-info .m-course-info-container .m-course-info-edit-course .m-chapter.open .m-material-container::-webkit-scrollbar,
.m-elearning-info .m-course-info-container .m-course-info-edit-course .m-chapters-container::-webkit-scrollbar,
.m-elearning-info .m-course-info-container .m-course-view-info .m-chapters-container::-webkit-scrollbar {
	width: 5px;
}

.m-elearning-info .m-course-info-container .m-course-info-edit-course .m-chapter.open .m-material-container::-webkit-scrollbar-thumb,
.m-elearning-info .m-course-info-container .m-course-info-edit-course .m-chapters-container::-webkit-scrollbar-thumb,
.m-elearning-info .m-course-info-container .m-course-view-info .m-chapters-container::-webkit-scrollbar-thumb {
	background-color: var(--color-light-secondary);
	border-radius: 1rem;
}

.m-elearning-info .m-course-info-container .m-course-info-edit-course .m-chapter.open .m-material-container::-webkit-scrollbar-track,
.m-elearning-info .m-course-info-container .m-course-info-edit-course .m-chapters-container::-webkit-scrollbar-track,
.m-elearning-info .m-course-info-container .m-course-view-info .m-chapters-container::-webkit-scrollbar-track {
	background-color: var(--color-lighter-secondary);
}

.m-elearning-info .m-course-info-container .m-course-info-edit-course .m-chapter .a-button.add-material{
	padding: 0.5rem 0.8rem 0.5rem 0.8rem;
	border: solid 1px var(--color-lighter-secondary);
}

.m-elearning-info .m-course-info-container .m-course-info-edit-course .m-chapter .m-material-opts{
	padding: 0.5rem 0;
	box-shadow: 1px 1px 2px 0px #00000030;
	min-width: 8.375rem;
}

.m-elearning-info .m-course-info-container .m-course-info-edit-course .m-chapter .m-material-opts .a-item {
	gap: 0.5rem;
	border-radius: 0;
	padding: 0.25rem 0.5rem;
}

.m-elearning-info .m-course-info-container .m-course-info-edit-course .m-chapter .m-material-opts .a-item:hover {
	background-color: var(--color-lighter-secondary);
}

.m-course-main .header .a-input input{
	width: 23rem;
}

.m-course-main .m-quill-editor .body .ql-editor{
	height: 100vh;
}

.m-course-main .m-test-search {
	background-color: var(--color-primary-light);
	border-radius: 0;
}

.m-course-main .m-test-search .a-filter-container div.a-input {
	height: 2.5rem;
	margin: 0.5rem;
	border-radius: 1.5rem;
}
.m-course-main .m-test-search .a-filter-container div.a-input {
	width: 100%;
}
.m-course-main .m-test-container-properties {
	padding: 0.5rem 1rem;
	background-color: var(--color-neutral-1);
}

.m-course-main .m-test-container-properties .m-test-basic-data .label.modified {
	border-radius: 1rem;
	border: var(--color-light-secondary) solid 1px;
	width: fit-content;
	padding: 0 0.5rem;
	height: 2rem;
}

.m-course-main .m-test-container-properties .m-test-label button.link .a-text{
	text-decoration: underline;
	margin-left: 0.25rem;
}

.m-course-main .m-test-container-test-items{
	padding: 0.5rem 1rem;
	max-height: calc(100vh - 10.5rem);
	overflow-x: hidden;
	overflow-y: scroll;
}
.m-course-main .m-test-container-test-items .item {
	margin: 0.5rem auto 3rem;
}

.m-course-main .m-test-container-test-items::-webkit-scrollbar {
	width: 10px;
}

.m-course-main .m-test-container-test-items::-webkit-scrollbar-thumb {
	background-color: var(--color-light-secondary);
	border-radius: 1rem;
}

.m-course-main .m-test-container-test-items::-webkit-scrollbar-track {
	background-color: var(--color-lighter-secondary);
}
.m-course-main .m-course-main-preview {
	justify-content: space-between;
	height:44.25rem;
	/* ez nem lesz jó... */
	height: calc(100vh - 3.5rem);
	background-color: var(--color-neutral-1);
}

.m-course-main .m-course-main-preview.test{
	background-color: var(--color-white);
}

.m-course-main .m-course-main-preview .content{
	/* TEMP: ezeket majd átszámolni, ha kiderül, mihez igazítunk */
	/* max-height: 40.75rem; */
	max-height: calc(100vh - 7rem);
	height: 100%;
	padding: 0;
	overflow: auto;
}

.m-course-main .m-course-main-preview .content.text .container{
	width: 80%;
	margin: auto;
	background-color: var(--color-white);
	padding: 1.5rem;
}

.m-course-main .m-course-main-preview h1,
.m-course-main .ql-editor h1{
	font-size: 2.5rem;
	font-weight: bold;
	margin-top: 1.25rem;
	margin-bottom: 1.25rem;
	line-height: 1.2;
	letter-spacing: 0.05rem;
}

.m-course-main .m-course-main-preview h2,
.m-course-main .ql-editor h2{
	font-size: 2rem;
	font-weight: semi-bold;
	margin-top: 1rem;
	margin-bottom: 1rem;
	line-height: 1.3;
	letter-spacing: 0.03rem;
}

.m-course-main .m-course-main-preview p,
.m-course-main .ql-editor p{
	font-size: 1rem;
	font-weight: normal;
	margin-top: .5rem;
	margin-bottom:.5rem;
	line-height: 1.6;
	letter-spacing: 0.01rem;
}

.m-course-main .m-course-main-preview ol,
.m-course-main .ql-editor ol {
	font-size: 1rem;
	margin-top: 1.25rem;
	margin-bottom: 1.25rem;
	padding-left: 2.5rem;
	/* list-style-type: decimal; */
}

.m-course-main .m-course-main-preview li,
.m-course-main .ql-editor li {
	margin-bottom: 0.5rem;
	line-height: 1.5;
	letter-spacing: 0.01rem;
}

.m-course-main .m-course-main-preview ul,
.m-course-main .ql-editor ul {
	font-size: 1rem;
	margin-top: 1.25rem;
	margin-bottom: 1.25rem;
	padding-left: 2.5rem;
	/* list-style-type: disc; */
}

/* CourseView - Preview */

.m-elearning-info .m-course-info-container .m-course-view-info .m-chapters-container {
	max-height: 30rem;
	height: fit-content;
	overflow: auto;
}

.m-elearning-info .m-course-info-container .m-course-view-info .m-chapter-view {
	width: 98%;
	min-height: 3.5rem;
	height: 3.5rem;
	overflow: hidden;
	margin: 0.2rem auto;
	padding: 0.2rem 0.5rem;
	border-radius: 0.5rem;
	background-color: var(--color-neutral-1);
	box-shadow: 1px 1px 2px 0px #00000030;
	cursor: pointer;
	flex-grow: 1;
}

.m-elearning-info .m-course-info-container .m-course-view-info .m-chapter-view.active {
	/* background-color: var(--color-primary-light); */
	background-color: var(--color-neutral-2);
	box-shadow: 0px 0px 6px #00000080;
	z-index: 14;
}

.m-elearning-info .m-course-info-container .m-course-view-info .m-chapter-view.open {
	height: fit-content;
	flex-shrink: 0;
}

.m-elearning-info .m-course-info-container .m-course-view-info .m-chapter-view.open .m-material-container .m-material-item {
	margin: 0.25rem auto;
	gap: 0.25rem;
	padding: 0.25rem 0;
}

.m-elearning-info .m-course-info-container .m-course-view-info .m-chapter-view.open .m-material-container .m-material-item.active {
	color: var(--color-secondary);
	background-color: #D3E3FD;
}

.m-course-main .m-course-main-preview .m-wrapper-pop-up-window{
	width: 100%;
	height: 100%;
}

.m-course-main .m-course-main-preview .m-wrapper-pop-up-window .m-pop-up-window{
	position: relative;
}

/* NEW - NEW - NEW - E-LEARNING - NEW - NEW - NEW */
.elearning-info{
	& .c-info-panel .content-container{
		/* overflow-y: hidden; */
	}

	/* TODO: manager-info-container CSS class nem biztos, hogy kell */
	&
	.manager-info-container,
	.course-info-container{
		height: 100%;
		& .course-info-all-courses{
			height: 100%;
		}
		& .course-info-preview-course{
			& .course-view-info{
				height: 31.5rem;
				overflow-y: auto;
				& .chapter-view{
					width: 100%;
					min-height: 3rem;
					height: 3rem;
					overflow: hidden;
					margin: 0.2rem auto;
					padding: var(--spacing-xxs);
					/* padding: 0.2rem 0.5rem; */
					/* border-radius: 0.5rem; */

					cursor: pointer;
					flex-grow: 1;

					&.open {
						height: fit-content;
						flex-shrink: 0;
					}
					&.active{
						/* TEMP */

						background-color:var(--color-secondary-container);
						/* box-shadow: 0px 0px 6px #00000080; */
						z-index: 14;
					}
				}
			}
		}

		& .course-info-edit-course{

			& .chapters-container{
				/* height: 23rem; */
				height: 34.5rem;
				background-color: var(--color-surface-4);
				overflow-y: auto;

				& .chapter{
					padding: var(--spacing-xxs);
					width: 100%;
					min-height: 3.5rem;
					height: 3.5rem;
					overflow: hidden;
					cursor: pointer;
					flex-grow: 1;

					&.active {
						background-color: var(--color-secondary-container);
						box-shadow: var(--elevation-1);
						/* border-radius: var(--shape-md); */
						z-index: 14;
						border-left: 5px solid var(--color-primary);

						& .edit-chapter-title{
							&>.c-text{
								height: inherit;
								max-height: 1.5rem;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								max-width: 23rem;
							}
						}

						& .m-material-item.active{
							background-color: var(--color-primary);
							color: var(--color-on-primary);
							& .c-icon-button.standard>.icon-container, .c-icon{
								color: var(--color-on-primary);
							}
							& .c-text.on-surface{
								color: var(--color-on-primary);
							}


						}
					}
					&.open{
						/* min-height: 6rem; */
						height: fit-content;
						/* max-height: 10rem; */
						flex-shrink: 0;
					}

					& .action-buttons{
						& .c-popper .popper-opts .material-opts{
							background-color: var(--color-surface-3);
							box-shadow: var(--elevation-1);
							border-radius: var(--shape-md);
							& .item{
								padding: var(--spacing-xs);
								cursor: pointer;
							}
						}
					}

			}
			}
			& .course-label{
				height: 7rem;
				overflow-y: auto;
			}
		}
	}

	& .test-info-container.teacher{
		height: 100%;
		/* overflow-y: auto; */
		& .test-info-title{
			& .c-editable-text{
				max-width: 35rem;
				& .c-text {
					max-width: 31rem;
					height: 2rem;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}

		& .edit-test-questions-container{
			/* height: 23rem; */
			height: 34.5rem;
			background-color: var(--color-surface-4);
			overflow-y: auto;
			& .question-container{
				padding: var(--spacing-xxs);
				width: 100%;
				min-height: 3.5rem;
				height: 3.5rem;
				overflow: hidden;
				cursor: pointer;
				flex-grow: 1;

				&.active{
					background-color: var(--color-secondary-container);
					box-shadow: var(--elevation-1);
					/* border-radius: var(--shape-md); */
					border-left: 5px solid var(--color-primary);
					z-index: 14;
				}
				& .question-title{
					font-family: var(--title-s-font-family);
					font-size: var(--title-s-font-size);
					line-height: var(--title-s-line-height);
					font-weight: var(--title-s-font-weight);
					letter-spacing: var(--title-s-letter-spacing);
					color: var(--color-on-surface);
					max-height: 100%;
				}
			}
		}

		& .test-label{
			height: 7rem;
			overflow-y: auto;
			margin-top: var(--spacing-xs);
		}
	}

}


.elearning-main{
	height: 100%;
	&
	.manager-main-container,
	.course-main-container{
		height: 100%;
		display: flex;
		flex-direction: column;
		& .course-list{
			&>.list{
				display: flex;
					flex-flow: row wrap;
					font-size: 1.5rem;
					line-height: 2.5rem;
					max-height: calc(100vh - var(--s-hdr-line));
					height: 100%;
					overflow: auto;
					padding: var(--spacing-xs);
					gap: var(--spacing-xs);

					>.placeholder {
						width: calc(50% - 2rem);
						height: 14rem;
						flex-grow: 1;
					}
				&>.course-card{
					width: calc(50% - 2rem);
					flex-grow: 1;
					height: 14rem;
					background-color: var(--color-surface-2);
					cursor: pointer;
					z-index: 5;
					border-radius: 0.5rem;
					justify-content: space-between;
					position: relative;
					padding: var(--spacing-sm);
					border: 1px solid var(--color-outline-variant);
					color: var(--color-on-surface);

					& .label {
						color: var(--color-on-surface-variant);
					}

					&>.content-container {
						height: 100%;

						& .course-name>.c-text{
							max-width: 20rem;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}
					&.active{
						background-color: var(--color-surface-3);
						box-shadow: var(--elevation-2);
						z-index: 14;
						border: 2px solid var(--color-primary);
					}
				}
			}

		}

		& .m-test-container-test-items{
			& .m-test-preview-item{
				border-radius: var(--spacing-none);
			}
		}

		& .ql-editor{
			padding: var(--spacing-sm);
		}
	}
		/* Quill editor */
		/* TODO: megcsinálni a többi formázást: h1, h2, stb. */
		& .ql-editor, .ql-editor-preview{
			color: var(--color-on-surface);
			padding: var(--spacing-none);
			& p {
				font-family: var(--body-l-font-family);
				font-size: var(--body-l-font-size);
				line-height: var(--body-l-line-height);
				font-weight: var(--body-l-font-weight);
				letter-spacing: var(--body-l-letter-spacing);
			}

			& h1 {
				font-family: var(--title-l-font-family);
				font-size: var(--title-l-font-size);
				line-height: var(--title-l-line-height);
				font-weight: var(--title-l-font-weight);
				letter-spacing: var(--title-l-letter-spacing);
			}

			& h2 {
				font-family: var(--title-m-font-family);
				font-size: var(--title-m-font-size);
				line-height: var(--title-m-line-height);
				font-weight: var(--title-m-font-weight);
				letter-spacing: var(--title-m-letter-spacing);
			}

			& ol {
				& >li{
					color: var(--color-on-surface);
					font-family: var(--body-l-font-family);
					font-size: var(--body-l-font-size);
					line-height: var(--body-l-line-height);
					font-weight: var(--body-l-font-weight);
					letter-spacing: var(--body-l-letter-spacing);
				}
				li[data-list="ordered"] {
					list-style: none;
					counter-increment: ordered-counter;
					position: relative;
					padding-left: 2em;
				}
				li[data-list="ordered"]::before {
					content: counter(ordered-counter) ". ";
					position: absolute;
					left: 1rem;
				}
				li[data-list="bullet"] {
					list-style: none;
					position: relative;
					padding-left: 2em;
				}
				li[data-list="bullet"]::before {
					content: "•";
					position: absolute;
					left: 1rem;
				}
		}}


		& .quill-editor{
			flex-grow: 1;
			display: flex;
			flex-direction: column;
			&>.body{
				flex-grow: 1;
				>.quill {
					height: 100%;
				}
			}
		}

		& .course-main-preview{
			width: 80%;
			margin: 0 auto;
			&:has(.content.test){
				width: 100%;
			}
		}
	}

	/* TEST */
	& .test-main-container, .course-main-container, .manager-main-container{
		height: 100%;
		display: flex;
		flex-direction: column;
		& .test-list{
			&>.list{
				display: flex;
				flex-flow: row wrap;
				font-size: 1.5rem;
				line-height: 2.5rem;
				max-height: calc(100vh - var(--s-hdr-line));
				height: 100%;
				overflow: auto;
				padding: var(--spacing-xs);
				gap: var(--spacing-xs);

				>.placeholder {
					width: calc(50% - 2rem);
					height: 14rem;
					flex-grow: 1;
				}
				&>.test-card{
					width: calc(50% - 2rem);
					flex-grow: 1;
					height: 14rem;
					background-color: var(--color-surface-2);
					cursor: pointer;
					z-index: 5;
					border-radius: 0.5rem;
					justify-content: space-between;
					position: relative;
					padding: var(--spacing-sm);
					border: 1px solid var(--color-outline-variant);
					color: var(--color-on-surface);

					& .label {
						color: var(--color-on-surface-variant);
					}

					&>.content-container {
						height: 100%;

						& .test-name>.c-text{
							max-width: 20rem;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}
					&.active{
						background-color: var(--color-surface-3);
						box-shadow: var(--elevation-2);
						z-index: 14;
						border: 2px solid var(--color-primary);
					}
				}
			}
		}

		& .m-edit-test-item{
			& .m-multi-quill-editor{
				& .m-tip-container{
					&:has(.ql-editor.answer){
						outline: solid 1px var(--color-primary);
					}
					& .ql-editor.question{
						outline: solid 1px var(--color-primary);
					}
					& .ql-editor, .ql-editor-preview{
						padding: var(--spacing-xs);
					}

					.ql-editor.ql-blank::before{
						font-size: 1rem;
					}

					& .question, .answer{
						& p{
							font-family: var(--body-l-font-family);
							font-size: var(--body-l-font-size);
							line-height: var(--body-l-line-height);
							font-weight: var(--body-l-font-weight);
							letter-spacing: var(--body-l-letter-spacing);
							color: var(--color-on-surface);
						}

					}
				}
			}
		}
	}


/* Header */
:root{
    --button-w: 7.5rem;
    --button-h: 2.5rem;
    --title-font-family: 'Segoe UI';
}

div.m-header {
    display: flex;
    /* color: var(--color-text); */
    color: var(--color-on-surafce);
    /* height: var(--s-hdr-size); */
    align-items: center;
    /* background: var(--color-header); */
    background-color: var(--color-surface-3);
    justify-content: flex-start;
    gap: var(--spacing-xs);
    width: 100%;

    & .main-menu-items{
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);
    }
}

.m-header>.m-icon-func {
    height: 3.5rem;
}

.m-header>.m-icon-func>.icon {
    height: 3rem;
    width: 3rem;
    min-width: 3rem;
    border-radius: 50%;
    background: var(--color-icon-header-bg);
    color: var(--color-icon-header);
    border: none;
    z-index: 2;
    cursor: pointer;
}

.m-header>.m-icon-func>.icon.active {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.m-header>.m-icon-func>.title {
    transform: translateX(-1rem);
    text-align: center;
    height: 2.5rem;
    padding: 0 1.2rem;
    min-width: fit-content;
    max-width: 18rem;
    border-radius: 1.5rem;
    background-color: var(--color-label-bg);
    color: var(--color-text-title);
    font-size: 1.5rem;
}

.m-header .m-main-icons {
    display: flex;
}

.m-header:nth-child(2) {
    margin-top: calc(2rem/16)
}

.m-header .popper-opts.user,
.m-header .popper-opts.pharmacy{
    padding: 1rem;
    background-color: var(--color-white);
    box-shadow: 0px 2px 4px #00000045;
    border-radius: 1.5rem;
}

.m-header .popper-opts.user .m-user-info-popup .a-eeszt .a-dot {
    position: static;
    margin: 0.25rem 0.25rem 0 0;
}

.m-header .m-capsule {
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    /* max-width: 14rem; */
    cursor: pointer;
}

.m-header .m-capsule .a-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    z-index: 1;
    background-color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* .m-header .m-capsule .a-time {
    background-color: var(--color-icon-header-bg);
    color: var(--color-icon-header);
    height: 2.75rem;
    width: 6rem;
    font-size: 1.5rem;
    border-top-right-radius: 24px;
    border-bottom-right-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: end;
    opacity: 1;
    padding-right: 0.8rem;
    margin-left: -1.75rem;
    transform: translateX(calc(-3.5rem/2))
} */

.m-header .a-full-capsule {
    font-size: 1.5rem;
    height: 2.5rem;
    overflow: hidden;
    padding: 0 1.5rem 0 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-icon-header-bg);
    border-radius: 24px;
    margin-left: -2.25rem;
    position: relative;
}

.m-header .a-full-capsule .name {
    margin-right: 1.5rem;
}

.m-header .a-full-capsule .a-img-container {
    width: 2rem;
    height: 2rem;
    background-color: rgb(151, 204, 151);
    border-radius: 50%;
    margin: 0 0.25rem 0 0.5rem;
}

.m-header .a-full-capsule .a-img-container img.img-eeszt {
    width: 2rem;
    height: 2rem;
}


.o-content-lg .m-header {
    height: 3.5rem;
    margin-bottom: calc(2rem/16);
    background: var(--color-header);
}


/* TICKETING MODAL */
.m-ticketing-modal-wrapper,
.wrapper {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    /* background: #00000036; */
    z-index: 25;
}
.m-ticketing-modal-container {
    position: fixed;
    top: 4rem;
    width: 35rem;
    max-height: 90%;
    min-height: 340px;
    background: var(--color-ticketing-bg);
    padding: 0.5rem;
    border-radius: 8px;
    opacity: 1;
    overflow-y: scroll;
    overflow-x: hidden;
    z-index: 22;
}

.m-ticketing-header {
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: fit-content;
    padding: 0;
    padding-bottom: 1rem;
}

.m-ticketing-header>.row {
    width: 100%;
    height: 2.5rem;
    display: flex;
    justify-content: space-between;
    background: transparent;
}

.m-ticketing-header>.row>.m-search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 28rem;
    height: 2.5rem;
    background-color: #fff;
    border-radius: 20px;
    overflow: hidden;
}

.m-ticketing-header>.row>.m-search>.a-icon.search,
.m-ticketing-header>.row>.m-search>.a-icon.delete {
    color: var(--color-ticketing-icon);
}

.m-ticketing-header>.row>.m-search .a-input {
    width: 100%;
    border: none;
    background: none;
    outline: none;
}

.m-ticketing-header>.row>.m-box {
    background-color: var(--color-bg);
    border-radius: 4px;
    width: 10.5rem;
    height: 2.5rem;
    cursor: pointer;
    position: relative;
}

.m-ticketing-header>.row>.left>.m-dropdown {
    width: 10.5rem;
    position: absolute;
    left: 0;
    top: 2.5rem;
    background-color: var(--color-bg);
    border-radius: 0 0 0.5rem 0.5rem;
    padding: 0 0.8rem;
    font-size: 1rem;
}

.m-ticketing-header>.row>.left>.m-dropdown hr {
    width: 95%;
    height: 0;
    border: 1px solid #B5B5B5;
    padding: 0;
    margin: 0.5rem auto;
}

.m-ticketing-header>.row>.m-box>.fill {
    max-width: 1.5rem;
}

.m-ticketing-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.o-filter {
    position: absolute;
    top: 1rem;
    left: 12rem;
}

/* Filter Component */
.m-filter-modal-wrapper{
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    z-index: -5;
}

.m-filter-modal-container {
    width: 26rem;
    max-height: 90%;
    background: var(--color-bg);
    border-radius: 0.5rem;
    padding: 0.5rem;
    cursor: auto;
    position: fixed;
    top: 4rem;
    left: 36em;
    z-index: 20;
    /* overflow-y: scroll; */
}

/* End of Filter Component */

/* IconItem */
.m-iconitem {
    display: flex;
    background-color: inherit;
    position: relative;
}

.m-iconitem>.a-icon {
    border-radius: 50%;
    background: var(--color-icon-header-bg);
    color: var(--color-icon-header);
    border: none;
    height: 3rem;
    width: 3rem;
}

.m-iconitem>.a-icon.active {
    background: var(--color-primary);
}

.m-iconitem>.a-number {
    position: absolute;
    background-color: var(--color-icon-number-bg-red);
    right: 0.2rem;
    bottom: -0.2rem;
    width: 1.3rem;
    height: 1.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: var(--color-icon-number);
}

/* Warning Icon Item */
.m-warning {
    position: relative;
    height: 3rem;
    width: 3rem;
    cursor: pointer;
}

.m-warning>.a-icon {
    height: 100%;
    width: 100%;
}

.m-warning>.a-number {
    position: absolute;
    background-color: var(--color-icon-number-bg-red);
    right: -0.4rem;
    bottom: 0;
    width: 1.3rem;
    height: 1.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: var(--color-icon-number);
}

/* Task Card */
.m-task-card {
    width: 33.5rem;
    height: 3rem;

    background-color: #F5FBFF;
    border-radius: 0.5rem;
    border: 1px solid #B5B5B5;
    /* padding: 0.4 0.4rem; */
    cursor: pointer;
}

.m-task-card>.m-task-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 95%;
    height: 3rem;
    margin: 0 auto;
}

.m-task-card>.m-task-top>.a-date {
    font-size: 1rem;
    font-family: Segoe UI;
    color: #707070;
}

.m-task-card>.m-task-top>.m-direction {
    width: 6.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.m-task-card>.m-task-top .m-direction>.a-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    box-shadow: 0px 2px 4px #00000045;
}

.m-task-card>.m-task-top>.m-direction>.a-avatar svg {
    width: 100%;
}

.m-task-card>.m-task-top>.a-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.m-task-card>.m-task-top>.m-direction>.a-arrow {
    height: 1.5rem;
    width: 1.5rem;
    color: var(--color-ticketing-icon);
    text-align: center;
}

.m-task-card>.m-task-top>.a-text {
    font-size: 1rem;
    font-family: Segoe UI;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--color-text-title);
}

.m-task-card>.m-task-top>.a-text.label {
    width: 5rem;
    height: 2.6rem;
}

.m-task-card>.m-task-top>.a-text.status {
    width: 3.5rem;
    height: 1.3rem;
}

.m-task-card>.m-task-top>.a-priority {
    width: 2.5rem;
    height: 2.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.m-task-card>.m-task-bottom>.line {
    width: 100%;
}

.m-task-card>.m-task-bottom>.line hr {
    width: 95%;
    margin: 0 auto;
    height: 1px;
    border: none;
    background-color: var(--color-line-blue);
}

/* End of Task Card */


/* RadioButton */
.a-radio-button {
    min-width: 4.5rem;
    max-width: 9rem;
    width: max-content;
    height: 2.5rem;
    border-radius: 1.5rem;
    border: 1px solid var(--color-radiobutton-border);
    padding: 0 0.5rem;
    gap: 0.3rem;
}

.a-radio-button .icon {
    cursor: pointer;
}

.a-radio-button .content {
    font: normal normal normal 1rem/1rem Segoe UI;
    text-align: center;
}

.a-radio-button .content .default {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: var(--color-radiobutton-bg);
    opacity: 0.5;
}

.clicked {
    border-color: var(--color-clicked-border);
}

/* TaskCardSepcific */
.m-taskcardspecific{
    width: 90%;
    margin: 0 auto;
}

.m-taskcardspecific .left,
.m-taskcardspecific .right{
    flex: 1;
}
/* End of TaskCardSepcific */


/* FILTER */
/* Filter Item Component */
.m-filter-item{
    width: 100%;
    margin: 0.5rem 0;
    color: var(--color-text-title);
    font-weight: bold;
    font-size: 1rem;
}

.m-filter-title>.label{
    width: fit-content;
}
.m-filter-title>.line{
    width: 100%;
}

.m-filter-title>.line hr{
    border: 0;
    height: 1px;
    background: var(--color-line-gray);
    width: 95%;
}
/* End of Filter Item Component */

/* Filter Component */
.m-filter-item>.a-filter-date{
    position: relative;
}

.m-filter-item>.a-filter-date>input[type="date"]{
    width: 10.5rem;
    height: 2.5rem;
    color: var(--color-date-filter);
    border-radius: 0.5rem;
    border: 1px solid var(--color-date-filter);
}
/* https: //isotropic.co/tool/hex-color-to-css-filter/ */
::-webkit-calendar-picker-indicator {
    padding: 5px;
    cursor: pointer;
    border-radius: 3px;

    filter: invert(71%) sepia(3%) saturate(20%) hue-rotate(323deg) brightness(100%) contrast(94%);
}

/* End of Filter Component */


/* Active Task Save - Modal  & TaskCard buttons*/
.a-button{
    /* width: var(--button-w); */
    height: var(--button-h);
    /* border-radius: 10px; */
    color: var(--color-modal-btn);
    font-size: calc(22rem/16);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.green-btn{
    background-color: var(--color-modal-btn-save-bg);
}

.gray-btn{
    background-color: var(--color-modal-btn-delete-bg);
}

.blue-btn{
    background-color: var(--color-modal-btn-other-bg);
}


/* TaskRole Component */
.a-text-role{
    width: 5rem;
    color: var(--color-text-title);
    font-size: 1rem;
    font-weight: bold;
}
/* End of TaskRole Component */


/* Additional Functions Component */

.wrapper .m-additional-functions-content{
    width: 19rem;
    z-index: 1010;
    background-color: var(--color-additional-func-content-bg);
    border-radius: 1.5rem;
    padding: 1rem 0.5rem;
    box-shadow: 0px 2px 4px #00000045;

}

.wrapper .m-additional-functions-content>.item{
    color: var(--color-text-title);
    font-size: 1.5rem;
    width: 90%;
    background-color: var(--color-additional-func-bg);
    border-radius: 1.5rem;
    text-align: center;
    cursor: pointer;
}

.wrapper {
    & .additional-functions-content {
        width: 15.5rem;

        & .item{
            color: var(--color-on-surface-variant);
            margin: var(--spacing-xxs);
            cursor: pointer;
            &.active{
                background-color: var(--color-secondary-container);
                border-radius: var(--shape-full);
                color: var(--color-on-secondary-container);
            }
        }
    }
}
/* End of Additional Functions Component */



/**************/
/* RESPONSIVE */
/**************/
@media screen and (min-width: 118rem
    /*1888px*/
) {
    div.m-header{
        gap: 0.2rem;
    }
    .m-header .a-full-capsule{
        max-width: 14rem;
    }
}