:root {
  --fontfamily: ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
  --fontheaders: YouShouldAsk,Lora,ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
  --letterspacing: "normal";
	
  --fontweight: 400;
  --fontsize: 13.5px;
  --basecolor: #9c76a8; /* #db2b63 #9c76a8 */
  --basecolor1: #f0eae4; /*#eaecfa; */ /* E8DAB2 */
  --basecolor2: #4F6D7A;
  --basecolor3: #C0D6DF;
  --basecolor4: #EAEAEA;
  --basecolor5: #2C0E37;
  --basecolor6: #ebdfef;
  --basecolor7: #faf8f6;
	--gray-0: #fff;
	--gray-25: #fcfcfd;
	--gray-50: #f7f7f8;
	--gray-75: #f2f2f5;
	--gray-100: #ececf1;
}

/* BEST EEN MOOIE KLEUR: #b6bdb3 */
/* FANTASTIC FOR POPUP BACKGROUND : #212534 */

@font-face {
    font-family: 'Graphik';
    src: url("../fonts/Graphik-Regular-Web.eot");
    src: url("../fonts/Graphik-Regular-Web.eot?#iefix") format("embedded-opentype"),url("../fonts/Graphik-Regular-Web.woff2") format("woff2"),url("../fonts/Graphik-Regular-Web.woff") format("woff"),url("../fonts/Graphik-Regular-Web.ttf") format("truetype");
    font-weight: normal;
    font-style: normal
}


@font-face {
    font-family: 'Graphik';
    src: url("../fonts/Graphik-Bold-Web.eot");
    src: url("../fonts/Graphik-Bold-Web.eot?#iefix") format("embedded-opentype"),url("../fonts/Graphik-Bold-Web.woff2") format("woff2"),url("../fonts/Graphik-Bold-Web.woff") format("woff"),url("../fonts/Graphik-Bold-Web.ttf") format("truetype");
    font-weight: 700;
    font-style: normal
}

@font-face {
    font-family: 'Graphik';
    src: url("../fonts/Graphik-RegularItalic-Web.eot");
    src: url("../fonts/Graphik-RegularItalic-Web.eot?#iefix") format("embedded-opentype"),url("../fonts/Graphik-RegularItalic-Web.woff2") format("woff2"),url("../fonts/Graphik-RegularItalic-Web.woff") format("woff"),url("../fonts/Graphik-RegularItalic-Web.ttf") format("truetype");
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Graphik';
    src: url("../fonts/Graphik-Black-Web.eot");
    src: url("../fonts/Graphik-Black-Web.eot?#iefix") format('embedded-opentype'),url("../fonts/Graphik-Black-Web.woff2") format('woff2'),url("../fonts/Graphik-Black-Web.woff") format('woff'),url(/template/fonts/Graphik-Black-Web.ttf) format('truetype'),url(/template/fonts/Graphik-Black-Web.svg#Graphik-Black-Web) format('svg');
    font-weight: 900;
    font-style: normal
}

@font-face {
  font-family: 'Averta';
  src: url('../fonts/AvertaStd-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Averta';
  src: url('../fonts/AvertaStd-Regular.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Averta';
  src: url('../fonts/AvertaStd-Regular.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: 'Averta';
  src: url('../fonts/AvertaStd-Semibold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Averta';
  src: url('../fonts/AvertaStd-Semibold.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Light.woff2') format('woff2'),
       url('../fonts/Satoshi-Light.woff') format('woff'),
       url('../fonts/Satoshi-Light.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-LightItalic.woff2') format('woff2'),
       url('../fonts/Satoshi-LightItalic.woff') format('woff'),
       url('../fonts/Satoshi-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Regular.woff2') format('woff2'),
       url('../fonts/Satoshi-Regular.woff') format('woff'),
       url('../fonts/Satoshi-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Italic.woff2') format('woff2'),
       url('../fonts/Satoshi-Italic.woff') format('woff'),
       url('../fonts/Satoshi-Italic.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Medium.woff2') format('woff2'),
       url('../fonts/Satoshi-Medium.woff') format('woff'),
       url('../fonts/Satoshi-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-MediumItalic.woff2') format('woff2'),
       url('../fonts/Satoshi-MediumItalic.woff') format('woff'),
       url('../fonts/Satoshi-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Bold.woff2') format('woff2'),
       url('../fonts/Satoshi-Bold.woff') format('woff'),
       url('../fonts/Satoshi-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-BoldItalic.woff2') format('woff2'),
       url('../fonts/Satoshi-BoldItalic.woff') format('woff'),
       url('../fonts/Satoshi-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Black.woff2') format('woff2'),
       url('../fonts/Satoshi-Black.woff') format('woff'),
       url('../fonts/Satoshi-Black.ttf') format('truetype');
  font-weight: 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-BlackItalic.woff2') format('woff2'),
       url('../fonts/Satoshi-BlackItalic.woff') format('woff'),
       url('../fonts/Satoshi-BlackItalic.ttf') format('truetype');
  font-weight: 900;
  font-display: swap;
  font-style: italic;
}

@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit.woff2') format('woff2');
  font-weight: 200;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}

@font-face {
    font-family: Outfit;
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(../fonts/outfit-latin-ext-wght-normal.woff2) format("woff2-variations");
    unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF
}

@font-face {
    font-family: Outfit;
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(../fonts/outfit-latin-wght-normal.woff2) format("woff2-variations");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

@font-face {
  font-family: 'InterVariable';
  src: url('../fonts/InterVariable.woff2') format('woff2');
  font-weight: 200;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'InterVariable';
  src: url('../fonts/InterVariable.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'NeueMontreal';
  src: url('../fonts/NeueMontreal-Bold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'NeueMontreal';
  src: url('../fonts/ppneuemontreal-bold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'NeueMontreal';
  src: url('../fonts/ppneuemontreal-medium.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'NeueMontreal';
  src: url('../fonts/ppneuemontreal-book.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
	font-family: 'NeueMontreal';
	src: url('../fonts/ppneuemontreal-thin.otf') format('opentype');
	font-weight: 200;
	font-style: normal;
}

@font-face {
	font-family: 'YouShouldAsk';
	src: url('../fonts/YouShouldAsk-Bold.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
}

@font-face {
	font-family: 'YouShouldAsk';
	src: url('../fonts/YouShouldAsk-DemiBold.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'YouShouldAsk';
	src: url('../fonts/YouShouldAsk-Medium.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: 'LexendDeca';
	src: url('../fonts/LexendDeca-SemiBold.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
}

@font-face {
	font-family: 'LexendDeca';
	src: url('../fonts/LexendDeca-Medium.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'LexendDeca';
	src: url('../fonts/LexendDeca-Light.woff2') format('woff2');
	font-weight: 200;
	font-style: normal;
}

@font-face {
	font-family: 'ProductSans';
	src: url('../fonts/ProductSans-Regular.woff2') format('woff2');
	font-weight: 200;
	font-style: normal;
}

@font-face {
	font-family: 'ProductSans';
	src: url('../fonts/ProductSans-Regular.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: 'ProductSans';
	src: url('../fonts/ProductSans-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'ProductSans';
	src: url('../fonts/ProductSans-Regular.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
}

@font-face {
	font-family: 'ProductSans';
	src: url('../fonts/ProductSans-Regular.woff2') format('woff2');
	font-weight: 800;
	font-style: normal;
}

@font-face {
	font-family: 'TripSans';
	src: url('../fonts/TripSans-VF.woff2') format('woff2');
	font-weight: 200;
	font-style: normal;
}

@font-face {
	font-family: 'TripSans';
	src: url('../fonts/TripSans-VF.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: 'TripSans';
	src: url('../fonts/TripSans-VF.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'TripSans';
	src: url('../fonts/TripSans-VF.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
}

@font-face {
	font-family: 'TripSans';
	src: url('../fonts/TripSans-VF.woff2') format('woff2');
	font-weight: 800;
	font-style: normal;
}



@font-face {
	font-family: 'GT';
	src: url('../fonts/GT-Eesti-Pro-Display-Light.woff2') format('woff2');
	font-weight: 200;
	font-style: normal;
}

@font-face {
	font-family: 'GT';
	src: url('../fonts/GT-Eesti-Pro-Display-Light.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: 'GT';
	src: url('../fonts/GT-Eesti-Pro-Display-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'GT';
	src: url('../fonts/GT-Eesti-Pro-Display-Medium.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
}

@font-face {
	font-family: 'GT';
	src: url('../fonts/GT-Eesti-Pro-Display-Bold.woff2') format('woff2');
	font-weight: 800;
	font-style: normal;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
    filter: rotate(360deg);
  }
}

* 
{
	box-sizing: border-box;	
	text-size-adjust: none;
}

html
{
    width:100%;
    height: auto;
    min-height: 100%;
    margin:0px;
    padding:0px;
}

html {
  -webkit-text-size-adjust: 100%; /* of 'none' */
  text-size-adjust: 100%;
}

body
{
    width:100%;
    height: auto;
    min-height: 100%;
    margin:0px;
    padding:0px;
    font-family: var(--fontfamily); /* Inter */
	font-weight: var(--fontweight);
    font-size: var(--fontsize);
	-webkit-font-smoothing: antialiased !important;
    overflow-x: hidden;
	
	background: #212534;
	color:#48484a; /*212534;*/
	text-size-adjust: none;
	
	background-attachment: fixed;
	
	/*background-image: url(../img/ai_loading_2.gif);
    background-repeat: no-repeat;
    background-position: 55% 45%;
    background-size: 300px;*/
	background-color: #f6f7fa;
	/*background: linear-gradient(17deg, #e5e6f1, #d6f1eb);
	background: linear-gradient(17deg, #f4f5fc, #e6f4f1);*/
	
	/*-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;*/
	
	letter-spacing: var(--letterspacing);

	animation: gradientMove 12s ease infinite !important;
    transition: background-position 0.2s !important;
    background: linear-gradient(129deg, #eae1f34a, #d5f1eb6e, #c9ddec63, #eae1f35c, #d5f1eb6b, #c9ddec52);
    background-size: 300% 100% !important;
}

h1, h2, h3, h4
{
	font-family: var(--fontheaders);
	font-weight: 600;
}

h1
{
	font-size: 26px;	
	font-weight: 600;
}

	.popup_content h1
	{
		font-size: 23px;
	}

h2
{
	font-size: 16px;	
}

h4
{
    font-size: 14px;
    font-weight: 600;
    margin: 0px;
    padding: 0px;
    margin-block-end: 16px;
    margin-block-start: 16px;
}

strong
{
	font-weight: 600;
}

.clickable:hover
{
	cursor: pointer;
	/*box-shadow: 0px 0px 20px 0px rgba(200, 223, 245,0.9);*/
}

.logo
{
	background-image: url("../img/favicon.png");
	width:50px;
	height:50px;
	background-size: contain;
	background-position: center center;
	
	position: fixed;
	z-index:3;
	right:30px;
	top:30px;
	border-radius: 100px;
	
	display:none;
}

.loading
{
	position: fixed;
	right:0px;
	left:270px;
	top:40px;
	bottom:0px;
	background-color: #ffffffdd;
	z-index:5;
	display:none;
	border-radius: 20px 0px 0px 0px;

	/*_green_blue.gif");
	background-repeat: no-repeat;
	background-position: center center;
	background-size:30px;*/

	/*backdrop-filter: blur(5px);*/
}

.top_platform_bar {
	position: fixed;
	top: 0;
	left: 60px;
	width: auto;
	right: 0px;
	height: 40px;
	background-color: #f5f7fa;
	background: linear-gradient(90deg, #f5f7fa00, #00000008);
	border-bottom: 0px solid #00000011;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding-right: 20px;
	z-index: 4;
	box-shadow: none;
	/*box-shadow: 10px 0px 10px 0px rgba(0, 0, 0, 0.1);*/
}

	.profile_company {
		position: absolute;
		left: 240px;
		font-weight: 300;
		top: 15px;
		height: 25px;
		font-family: var(--fontfamily);
		font-size: 12px;
		background-color: #000000;
		background: linear-gradient(129deg, #cbe0ec, #e8e3f2);
    	color: #050505;
		text-align: center;
		padding: 5px 18px 6px 18px;
		/* width: 230px; */
		border-radius: 10px 10px 0px 0px;
		/* z-index: 2; */
	}
	
		.profile_company i {
			font-weight: 100;
		}

.framework_menu_left
{
    display: block;
    position: fixed;
    left:0px;
    top:0px;
    bottom:0px;
    width:60px;
	border-radius: 0px 20px 0px 0px;
    background-color: var(--basecolor5); /*#ffffff;*/
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    z-index:5;
	
	/*background: linear-gradient(129deg, #ffffff, #fee6fb, #f8eedc, #ffffff);*/
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    height: 100vh;
	
	-webkit-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	-kthtml-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

    #menu_icon
    {
        display: block;
        background-image: url("../img/ysa_logo_blob_blue.png");
		background-repeat: no-repeat;
        width:35px;
        height:35px;
        background-size: 100%;
        position: fixed;
        top:24px;
        left:12px;
        cursor:pointer;	
		z-index:3;
    }

		.menu_icon_ring {
			content: "";
			display: block;
			width: 36px;
			height: 36px;
			position: fixed;
			top: 17px;
			left: 11px;
			cursor: pointer;
			background: linear-gradient(129deg, #a20d96, var(--basecolor));
			background-size: 100% 100%;
			animation: rotate 1.5s linear infinite;
			border-radius: 100px;
			z-index: 2;
			
			display: none;
		}

    .framework_menu_left .title
    {
        display: block;
        position: fixed;
        left: -171px;
		top: 285px;
		width: 400px;
        /*text-transform: uppercase;*/
        transform: rotate(-90deg);
		text-align: right;
        color: #ffffff;
        font-size: 18px;
        font-weight: bold;
		opacity: 1;
		font-family: var(--fontheaders);
		font-weight: 600;
    }

.framework_bar_left
{
    position: fixed;
    left:0px;
    top:40px;
    bottom:0px;
    width:115px;
	padding-left:60px;
	
	/*background: linear-gradient(129deg, #995bc9, #59a9e3, #995bc9, #59a9e3);*/
	background: linear-gradient(129deg, #995bc9, #eba9a9, #995bc9, #7093dd);
	background: linear-gradient(129deg, #7a84a7, #7a84a7, #a37aa7, #7a84a7);
	background: linear-gradient(129deg, #7a84a7, #7a84a7, #a64792, #7a84a7);
	background: linear-gradient(129deg, #393f55, #393f55, var(--basecolor), #393f55);
	background: #d6daed;
	background: var(--basecolor1);
	background-size: 400% 400%;
	/*animation: gradient 15s ease infinite;
	height: 100vh;	*/
	
	/*background: linear-gradient(335deg, #b5a26c, #e9d9b2);*/
    background-size: 200% 200%;
	
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    /*box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.4);*/
    z-index:4;
	border-radius: 0px 20px 0px 0px;
	border-right: 0px solid #e8dfd5;
	
	background-image: url(../img/chat_icon_opacity.png);
	background-size: 300px;
	background-position: left 70px bottom 0px;
	background-repeat: no-repeat;
	
	overflow-y: auto;
	overflow-x: hidden;
}

    .framework_bar_left .menu
    {
        padding: 10px 20px 180px 20px;
    }

	.framework_bar_left .menu h2
	{
		font-size:16px;
		font-weight:400;
		opacity: 1;
		color:#212534;
		
		-webkit-transition: all 0.2s linear;
		-o-transition: all 0.2s linear;
		-moz-transition: all 0.2s linear;
		-ms-transition: all 0.2s linear;
		-kthtml-transition: all 0.2s linear;
		transition: all 0.2s linear;
	}

    .framework_bar_left .menu ul
    {
        list-style: none;
        margin:0px;
        padding:0px;
		overflow-y: auto;
		width:15px;
    }

        .framework_bar_left .menu ul li
        {
            margin:0px;
            padding: 7px 0px 7px 0px;
            border-bottom:0px solid #eeeeee;
			margin-top:1px;
			cursor: pointer;
			border-radius:50px;
			
			display: table;
    		width: 100%;
			
			-webkit-transition: all 0.2s linear;
			-o-transition: all 0.2s linear;
			-moz-transition: all 0.2s linear;
			-ms-transition: all 0.2s linear;
			-kthtml-transition: all 0.2s linear;
			transition: all 0.2s linear;
        }

            .framework_bar_left .menu ul li a
            {
                color:#212534;
                text-decoration: none;
			}

			.framework_bar_left .menu ul li i
            {
                margin-right:10px;
				width:23px;
				text-align: center;
				margin-left:-3px;
				color:#212534;
			}

			.framework_bar_left .menu ul li:hover,
			.framework_bar_left .menu ul li.active
			{
				/*background-color: #718394;
				border-radius: 50px;
				padding-left:20px;
				padding-right:10px;*/
				color:#ffffff;
            }

			.framework_bar_left/*:hover*/ .menu ul li:hover,
			.framework_bar_left/*:hover*/ .menu ul li.active
			{
				background-color: #7681b8;
				border-radius: 50px;
				padding-left:10px;
				padding-right:0px;
				color:#ffffff;
				
				/*background-color: #ffffff40;*/
				background-color: var(--basecolor);
            }

			.framework_bar_left/*:hover*/ .menu ul li:hover
			{
				background-color: var(--basecolor5);
			}

			.framework_bar_left/*:hover*/ li:hover a,
            .framework_bar_left/*:hover*/ li.active a,
			.framework_bar_left/*:hover*/ li:hover i,
            .framework_bar_left/*:hover*/ li.active i
            {
                color: #ffffff !important;
				font-weight: 200;
            }

    .framework_bar_left .icon
    {
        width:25px;
        height:36px;
        background-image: url("../img/icon.png");
        background-repeat: no-repeat;
        background-size: 100%;
        position: absolute;
        right:0px;
        top:10px;
    }

    .framework_bar_left .avatar
    {
        width:120px;
        height:120px;
        border-radius: 200px;
        position: relative;
        top:30px;
        left:80px;
        background-size: 250px;
        background-repeat: no-repeat;
        background-position: top center;
        box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    }

    .framework_bar_left .avatar_more
    {
        position: relative;
        top:40px;
        left:0px;
        right:0px;
        width:auto;
        padding-left:20px;
        padding-right:20px;
        text-align: left;
    }

			/*:hover*/
			.framework_bar_left/*:hover*/
			{
				width:270px;
				/*box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);*/
			}

			.framework_bar_left/*:hover*/ .menu ul
			{
				width:auto;
			}

			.framework_bar_left ul li a
			{
				display: none;
				width:120px;
				font-weight: var(--fontweight);
			}

			.framework_bar_left/*:hover*/ h2
			{
				opacity: 1;
			}

			.framework_bar_left/*:hover*/ ul li a
			{
				display: inline-block;
			}
			/*:hover*/

	li strong{
		font-weight: 600;
		font-family: var(--fontheaders);
	}

    .avatar_example
    {
        position: relative;
        display: block;
        font-size: var(--fontsize);
        
        width:100%;
        margin:0px;
        margin-bottom:10px;
        cursor: pointer;
        padding-top:10px;
        border-top:1px solid #eeeeee;
    }

    .avatar.small
    {
        top:5px;
        left:auto;
        right:auto;
        position: relative;
        display: inline-block;
        border:1px solid #cccccc;
        width:50px;
        height:50px;
        margin:0px;
        background-image: url("../avatars/avatar_1.png");
        background-size: 100px;
        background-repeat: no-repeat;
        background-position: top center;
        box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        margin-right:10px;
        cursor:pointer;
    }

    .avatar_small
    {
        width:200px;
        height:200px;
        border-radius: 200px;
        position: relative;
        top:30px;
        left:30px;
        margin-bottom:70px;
        background-size: 350px;
        background-repeat: no-repeat;
        background-position: top center;
        box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    }

    .avatar_very_small
    {
        width:80px;
        height:80px;
        border-radius: 200px;
        position: relative;
        top:0px;
        left:0px;
        margin-bottom:0px;
        background-size: 150px;
        background-repeat: no-repeat;
        background-position: top center;
        /*box-shadow: inset 0 0 5px rgba(0,0,0,0.2);*/
    }

    .avatar_description
    {
        position: absolute;
        top:20px;
        width:100%;
        padding-left:20px;
        padding-right:20px;
        text-align: center;
    }

    .avatar_description h2
    {
        font-size:16px;
        font-weight: bold;
        text-transform: uppercase;
        color:#212534;
        margin:0px;
        text-align: center;
    }

    .avatar_description h3
    {
        font-size:20px;
        font-weight: bold;
        text-transform: uppercase;
        color:#212534;
        margin:0px;
        text-align: center;
    }

    .avatar_description p
    {
        line-height:20px;
        font-size: var(--fontsize);
        color:#212534;
        
    }

.framework_main 
{
    position: fixed;
    left: 270px;
    padding-left: 30px;
    padding-right: 30px;
    right: 0px;
    width: auto;
    padding-top: 11px;
    overflow-x: hidden;
	overflow-y: auto;
	bottom:0px;
	background-color:#ffffff;
	/*min-height: 100%;*/
	top:40px;
	border-radius: 20px 20px 0px 20px;
	
	padding-bottom:100px;
	background-image:url(../img/ysa_logo_grey.png);
	background-position: calc(100% - 30px) calc(100% - 60px);
	background-size: 100px auto;
	background-repeat: no-repeat;

	/* box-shadow: 7px 0px 20px 0px rgba(0, 0, 0, 0.1); */
	border: 1px solid #d8e6e6;
}

.framework_main.insights
{
	background-color:#ffffff;
	
	-webkit-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	-kthtml-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

    .framework_main h1
    {
		font-size:26px;
		font-weight: 600;
		/*background-color: rgba(255,255,255,0.9);
		backdrop-filter: blur(5px);
    	-webkit-backdrop-filter: blur(5px);*/
    }

	.framework_main h2
    {
		font-size:16px;
		font-weight: 600;
		/*background-color: rgba(255,255,255,0.9);
		backdrop-filter: blur(5px);
    	-webkit-backdrop-filter: blur(5px);*/
    }

    .framework_main .avatar
    {
        width:600px;
        height:100%;
        position: fixed;
        top:0px;
        left:0px;
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: top center;
    }

    .framework_main .avatar .avatar_description
    {
        display: block;
        position: absolute;
        left:135px;
        top:370px;
        background-color: #ffffff;
        border-radius:300px;
        width:250px;
        height:250px;
        padding:40px;
        text-align: center;
        
    }

	#persona_edit
	{
		text-align:center; 
		border:1px solid #dddddd; 
		width:140px; 
		height:140px; 
		border-radius:1400px; 
		position:relative; 
		box-sizing: border-box; 
		display: inline-block; 
		margin-right:20px;
		background-size:200%; 
		background-position: top center;
		
		-webkit-transition: all 0.2s linear;
		-o-transition: all 0.2s linear;
		-moz-transition: all 0.2s linear;
		-ms-transition: all 0.2s linear;
		-kthtml-transition: all 0.2s linear;
		transition: all 0.2s linear;
	}

	#persona_edit:hover
	{
		border:1px solid #dddddd; 
		box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
		cursor:pointer;
	}

.chat
{
    position: relative;
    top:-30px;
    left:0px;
    bottom:0px;
    width:auto;
	height:auto;
    right:0px;
    padding-top:0px;
	padding-bottom:50px;
}

    #chat_content
    {
        margin-bottom:0px;
    }

    .chat h2
    {
        padding-left:0px;    
    }

    .box {
		width: calc(50% - 22px);
		margin: 20px;
		margin-left: 0px;
		margin-right: 35px !important;
		padding: 20px 30px 20px 30px;
		text-align: left;
		color: #ffffff;
		position: relative;
		border-radius: 20px;
		box-sizing: border-box;
		border: 0px solid rgba(255, 255, 255, 0.2);
		/* background: linear-gradient(129deg, var(--basecolor), #f96a34); */
		background: linear-gradient(129deg, #63a1e0, #975eca);
		background: #dce0f8;
		color: #212534;
		background: linear-gradient(306deg, #dce0f8, #fee6fb, #f8eedc);
		background: var(--basecolor1);
		line-height: 18px;
		word-break: break-word;
		margin-bottom: 35px;
		
		background-image: url(../img/chat_icon_opacity.png);
		background-size: 300px;
		background-position: left 100px bottom -10px;
		background-repeat: no-repeat;
		
		background: #ffffff;
		z-index: 5;
	}

		.box.assistant
		{
			/*background: linear-gradient(223deg, #2fa89b, #3591c8);
			color: #ffffff;*/
		}

		.box.user
		{
			margin-left: calc(50% + 20px);
			margin-right: 0px;
			color:#ffffff;
			border-radius: 20px;
		}

		.box.note
		{
			background:#dfd1183b;
			background: linear-gradient(223deg, #dfd1183b, #ff6e003b);
		}

		.box.user.pageview
		{
			background:transparent;
			color:#2c0e37;
			margin-top:40px;
			margin-bottom:40px;
			border: 0px;
			box-shadow: none;
			padding: 10px;
		}

		.box.user.automation
		{
			background:#9c76a8;
			color:#ffffff;
			margin-top:40px;
			margin-bottom:40px;
			border: 0px;
			box-shadow: none;
		}

		.box.user.review
		{
			background:#e6dbe9;
			color:#2c0e37;
			margin-top:40px;
			margin-bottom:40px;
		}

		.box.user.endpoint
		{
			background:#d8f0ea;
			color:#286253;
			margin-top:40px;
			margin-bottom:40px;
		}


		.box.internal
		{
			background:#faf1cb;
		}

		.box.agent
		{
			background:#e9e8f6;
		}

		.box.use_for_training
		{
			background:#886bc5;
			color:#ffffff;
		}

			.box.use_for_training a
			{
				color:#ffffff;
				text-decoration: underline;
			}

			.box.internal .time
			{
				
			}

		.box .name
		{
			font-weight:600;
			margin-bottom:7px;
		}

        .box .details
        {
            position: absolute;
			right: -50px;
			width: 200px;
			top: 16px;
			text-align: right;
        }

            .box .details h3
            {
                font-size:16px;
                font-weight: bold;
                color:#ffffff;
                margin:0px;
                text-align: left;
                margin-bottom:5px;
            }

            .box .details p
            {
                font-size:12px !important;
                font-weight: 600 !important;
                color:#ffffff;
                margin:0px;
                text-align: left;
            }

			.box.assistant .details h3
            {
                color:#212534;
            }

            .box.assistant .details p
            {
                color:#212534;
            }

			.box .media
			{
				width:100%;
				border-radius: 5px;
			}


		.user {
			/*border: 1px solid #e7e9f4;*/
			background: var(--basecolor5);
			/* box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1); */
		}

/*
    .user:before {
      content: "";
      width: 0px;
      height: 0px;
      position: absolute;
      border-left: 10px solid #303d49;
      border-right: 10px solid transparent;
      border-top: 10px solid #303d49;
      border-bottom: 10px solid transparent;
      right: -19px;
      top: 16px;
    }

    .assistant:before {
      content: "";
      width: 0px;
      height: 0px;
      position: absolute;
      border-left: 10px solid transparent;
      border-right: 10px solid #eaedf9;
      border-top: 10px solid #eaedf9;
      border-bottom: 10px solid transparent;
      left: -19px;
      top: 16px;
    }
*/
    .box.form:before
    {
        display: none;
    }


        .box h2
        {
            font-size:18px;
            font-weight: bold;
            color:#212534;
            margin:0px;
            text-align: left;
            margin-bottom:10px;
        }

        .box p
        {
            font-size: var(--fontsize);
            font-weight: var(--fontweight);
            color:#212534;
            margin:0px;
            text-align: left;
        }

        .box.user p
        {
            font-size: var(--fontsize);
            font-weight: var(--fontweight);
            color:#ffffff;
            margin:0px;
            text-align: left;
        }

		.box.user p strong
        {
			margin-bottom:10px;
		}

        .box.form {
			position: relative;
			margin-top: 50px;
			border-top: 2px solid #ffffff;
			padding-bottom: 10px;
			background-color: #1e2539;
			color: #ffffff;
		}

        .box.form textarea
        {
            -webkit-appearance: none; /* remove default appearance on Webkit-based browsers */
            -moz-appearance: none; /* remove default appearance on Mozilla-based browsers */
            appearance: none; /* remove default appearance on all other browsers */

            box-sizing: border-box;
            background-color:#ffffff;
            border:0px;
            border-radius: 20px;
            width:100%;
            
            margin-right:20px;
            min-height:120px;

            font-family:var(--fontfamily);
            font-size: var(--fontsize);
            color:#212534;
            
            padding:20px;
            outline: none;
            margin-top:20px;

            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
            
            resize: none;
        }

        .box.form .submit
        {
            -webkit-appearance: none; /* remove default appearance on Webkit-based browsers */
            -moz-appearance: none; /* remove default appearance on Mozilla-based browsers */
            appearance: none; /* remove default appearance on all other browsers */
            
            border-radius: 20px;
            border:0px;
            background-color: #3a86b1;
            color:#ffffff;
            font-weight: var(--fontweight);
            font-size: var(--fontsize);
            padding: 8px 30px;
            float:right;
            margin-top:10px;
            
            cursor: pointer;
			
			border-bottom: 3px solid #276a8f;
            border-right: 3px solid #276a8f;
            text-align: center;
			
			-webkit-transition: all 0.2s linear;
			-o-transition: all 0.2s linear;
			-moz-transition: all 0.2s linear;
			-ms-transition: all 0.2s linear;
			-kthtml-transition: all 0.2s linear;
			transition: all 0.2s linear;
			
			/* new color */
			border-bottom: 3px solid #c900a6;
			border-right: 3px solid #c900a6;
			background: linear-gradient(45deg, var(--basecolor), #ff6000);
			background: linear-gradient(45deg, #7983a7, #977da7);
			
			font-family: var(--fontfamily); /* Inter */
			font-size: var(--fontsize);
        }

			.box.form .submit:hover
			{
				border-bottom: 3px solid #63b20e;
				border-right: 3px solid #63b20e;
				background: linear-gradient(45deg, #70be01, #43961b);
			}

			.box.form .submit.delete
			{
				background-color:#dd0000; 
				border-bottom-color:#ff0000; 
				border-right-color:#ff0000;
			}

		.box .time {
			color: #081245;
			font-size: 10px;
			margin-top: -13px;
			margin-left: 98%;
			width: 200px;
			position: absolute;
			left: 0px;
			line-height: 12px;
			opacity: 1;
			padding-right: 10px;
			text-align: right;
			margin-top: 28px;
			width: 100%;
			margin-left: 0px;
			margin-right: 0px;
			margin-bottom:10px;
			height: 13px;
			/* border: 1px solid #ddd; */

			opacity:0;

			-webkit-transition: all 0.2s linear;
			-o-transition: all 0.2s linear;
			-moz-transition: all 0.2s linear;
			-ms-transition: all 0.2s linear;
			-kthtml-transition: all 0.2s linear;
			transition: all 0.2s linear;
		}

		.box:hover .time
		{
			opacity:1;
		}

		.box .feedback
		{
			position: absolute;
			font-size: 10px;
			margin-top: -41px;
			opacity: 0;

			-webkit-transition: all 0.2s linear;
			-o-transition: all 0.2s linear;
			-moz-transition: all 0.2s linear;
			-ms-transition: all 0.2s linear;
			-kthtml-transition: all 0.2s linear;
			transition: all 0.2s linear;
		}

			.box:hover .feedback
			{
				opacity: 1;
			}

		.box .feedback a {
			text-decoration: none;
			background-color: #f1f7fa;
			border-radius: 10px 10px 0px 0px;
			padding: 7px 10px;
			box-shadow: inset 0px -5px 5px -5px rgba(0, 0, 0, 0.1);
			cursor: pointer;
		}

		.box .feedback a:hover
		{
			background-color: #cbe0ef;
		}

		.box.user .time {
			color: #081245;
			text-align: left;
			padding-left: 10px;
		}

		.box.pageview .time {
			margin-top:7px;
		}
		
		.box .icon 
		{
			width: 36px;
			height: 36px;
			border-radius: 60px 60px 60px 60px;
			color: #ffffff;
			background-color: #fb6b35;
			background: linear-gradient(129deg, #2eae91, #348ece);
			border: 3px solid #f9fffd;
			text-align: center;
			padding-top: 6px;
			font-weight: 600;
			font-size: var(--fontsize);
			position: absolute;
			margin-top: -9px;
			left: -38px;
			z-index: 5;
		}

		.box .content i
		{
			margin-right:5px;
			margin-bottom:20px;
		}

		.box.note .icon
		{
			right:-40px;
			left:auto;
		}

		.box.assistant .icon
		{
			width:40px;
			height:40px;
			border-radius:60px;
			color:#ffffff;
			background-color: #fb6b35;
			text-align: center;
			padding-top:7px;
			font-weight: 600;
			font-size: var(--fontsize);
			position: absolute;
			left:-10px;
    		margin-top: -40px;
		}
			
		.box:hover, .box:active
		{
			/*box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5);*/
		}

		.box.assistant a
		{
			color:#081245;
		}

		.box.user a
		{
			color:#ffffff;
		}

		.box .chat_image {
			border-radius: 20px;
			width: 100%;
			margin-top: 15px;
			margin-bottom: 10px;
			/* right: -70px; */
			/* margin-bottom: 45px; */
			/* position: absolute; */
			/*box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);*/
			background-color: #ffffff00;
		}

		.box img.inline
		{
			width: 100%;
			margin-top: 20px;
			margin-bottom: 10px;
			border-radius: 15px;
			box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, .1);
		}

		.box .link_button
		{
			color: #19454f;
			text-decoration: underline;
			border-radius: 10px;
			display: inline-block;
			background-color: #ffffff;
			padding: 4px 10px 10px 10px;
			margin-top: 10px;
		}

			.box .link_button i
			{
				margin-bottom: 0px;
			}

		.box .mail_link_button 
		{
			color: #19454f;
			text-decoration: none;
			border-radius: 4px;
			display: inline-block;
			background-color: rgba(255,255,255,0.3);
			padding: 0px 4px;
			/* margin-top: 10px; */
			color: #ffffff !important;
		}

			.box .mail_link_button i
			{
				display:none;
				margin-bottom: 0px;
			}


		.box .product_block
		{
			margin-top:15px;
			margin-bottom:15px;
		}

		.box .product_objects
		{
			list-style: none;
			padding: 0px;
			margin: 0px;
			display: flex;
			overflow-x: auto;
			border-radius: 0px;	
			margin-left: -30px;
    		width: calc(100% + 60px);
			padding-left:10px;
			padding-bottom:10px;
			margin-bottom: -10px;
		}

		.box .product_object
		{
			margin-top:10px; 
			margin-right:10px;
			border-radius:20px;
			background-color:#f1f7fa; 
			padding:5px 15px 15px 15px;
			box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
		}

			.box .product_object .chat_button
			{
				text-decoration:none !important; 
				text-align:center; 
				border:0px; 
				border-radius:20px; 
				padding: 7px 15px; 

				background: #ffffff;
				color: #2c333e;
				font-weight:bold;
			}

			.box .product_object .product_object_title
			{
				margin-top:15px !important;
				font-family: var(--fontheaders);
				width: 200px;
			}

			.product_objects.items_1 .product_object .product_object_title {
				width: 100%;
			}

			.product_image
			{
				width: calc(100% + 30px);
				height:220px; 
				background-position: center center;
				background-repeat: no-repeat;
				background-size: cover;
				border-radius: 20px;
				margin-left: -15px;
				margin-right: -15px;
				margin-top: -5px;
				margin-bottom:15px;
				border: 0px solid #eaecef;
			}

			.product_object_title {
				width: 200px;
			}

			.product_objects.items_1 .product_object {
				width: 100%;
			}

			.product_objects.items_1
			{
				width: 420px;	
			}

			.product_objects.items_1 .product_object .product_image {
				width: calc(100% + 30px);
			}

			.product_object img {
				width: calc(100% + 30px);
				left: -15px;
				margin-bottom: 0px;
				margin-top: -15px;
				height: auto;
				box-shadow: none;
				border-radius: 20px 20px 0px 0px
			}

			.swipe_right, .swipe_left
			{
				display:none;
			}

        .lds-ellipsis {
          display: inline-block;
          position: relative;
          width: 30px;
          height: 10px;
        }
        .lds-ellipsis div {
          position: absolute;
          top: 0px;
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background: #3a86b1;
          animation-timing-function: cubic-bezier(0, 1, 1, 0);
        }
        .lds-ellipsis div:nth-child(1) {
          left: 8px;
          animation: lds-ellipsis1 0.6s infinite;
        }
        .lds-ellipsis div:nth-child(2) {
          left: 8px;
          animation: lds-ellipsis2 0.6s infinite;
        }
        .lds-ellipsis div:nth-child(3) {
          left: 32px;
          animation: lds-ellipsis2 0.6s infinite;
        }
        .lds-ellipsis div:nth-child(4) {
          left: 56px;
          animation: lds-ellipsis3 0.6s infinite;
        }
        @keyframes lds-ellipsis1 {
          0% {
            transform: scale(0);
          }
          100% {
            transform: scale(1);
          }
        }
        @keyframes lds-ellipsis3 {
          0% {
            transform: scale(1);
          }
          100% {
            transform: scale(0);
          }
        }
        @keyframes lds-ellipsis2 {
          0% {
            transform: translate(0, 0);
          }
          100% {
            transform: translate(24px, 0);
          }
        }


        .page
        {
            /*background-color: #ffffff;;*/
            border:0px solid #cccccc;
            padding:0px;
            margin-bottom:50px;
            border-radius: 0px 0px 0px 0px;
            position: relative;
            width:auto;
            box-shadow: none;
        }

        .page h2
        {
            margin: 30px 0px 10px 0px;
        }

        .page p
        {
            margin:0px;
            padding:0px 0px 10px 0px;
        }

		table.config_table
		{
			padding: 10px 20px;
			border: 1px solid #e6e6e6;
			border-radius: 14px;
			background: #fff;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
		}

		table.config_table tr
		{
			height:49px;
		}

		.page table.table thead tr td
		{
			font-weight:bold;
		}

		.page table tr td label
		{
			margin:0px;
            padding:0px 0px 0px 0px;
			display: block;
			font-weight: var(--fontweight);
		}

		.page table.table tr td
		{
			padding:10px;
		}

		.page table.table tr td:first-child
		{
			padding-left:0px;
		}

		.page table.table tr td label.toggle
		{
			margin-top: -19px !important;
		}

		tr td .show_on_tr_focus {
			opacity: 0;
			max-height: 0;
			overflow: hidden;
			margin-top:0px !important;
			transition: opacity 0.2s linear, max-height 0s linear;
		  }
		  
		  tr:hover td .show_on_tr_focus {
			opacity: 1;
			max-height: 100px; /* adjust depending on expected content */
			margin-bottom:0px;
			margin-top:10px !important;
			transition: opacity 0.2s linear, max-height 0.2s linear;
		  }
		  

        .page input:not([type='checkbox'])
        {    
            -webkit-appearance: none; /* remove default appearance on Webkit-based browsers */
            -moz-appearance: none; /* remove default appearance on Mozilla-based browsers */
            appearance: none; /* remove default appearance on all other browsers */

            box-sizing: border-box;
            background-color:#faf5f1;
            border: 1px solid #f1e8e1;
            border-radius: 20px;
            width:100%;
            
            
            font-size: var(--fontsize);
            color:#2c0e37;
            
            padding: 10px 20px ;
            outline: none;
            margin-top:0px;
            
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
            
            resize: none;
			
			font-family: var(--fontfamily); /* Inter */
			font-size: var(--fontsize);
			font-weight: var(--fontweight);
        }

		.page input:disabled
		{
			color:#7986a9;
			cursor:not-allowed;
		}

		.page select
        {    
            -webkit-appearance: none; /* remove default appearance on Webkit-based browsers */
            -moz-appearance: none; /* remove default appearance on Mozilla-based browsers */
            appearance: none; /* remove default appearance on all other browsers */

            box-sizing: border-box;
            background-color:#faf5f1;
            border: 1px solid #f1e8e1;
            border-radius: 20px;
            width:100%;
            
            
            font-size: var(--fontsize);
            color:#2c0e37;
            
            padding: 10px 20px ;
            outline: none;
            margin-top:0px;
            
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
            
            resize: none;
			
			font-family: var(--fontfamily); /* Inter */
			font-size: var(--fontsize);
			font-weight: var(--fontweight);
        }

        .page textarea
        {
            -webkit-appearance: none; /* remove default appearance on Webkit-based browsers */
            -moz-appearance: none; /* remove default appearance on Mozilla-based browsers */
            appearance: none; /* remove default appearance on all other browsers */

            box-sizing: border-box;
            background-color:#faf5f1;
            border: 1px solid #f1e8e1;
            border-radius: 20px;
            width:100%;
            
            margin-right:0px;
            min-height:120px;

            font-family:var(--fontfamily);
            font-size: var(--fontsize);
            color:#2c0e37;
            
            padding:10px 20px;
            outline: none;
            margin-top:0px;

            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
            
            resize: none;
			
			font-family: var(--fontfamily); /* Inter */
			font-size: var(--fontsize);
			font-weight: var(--fontweight);
        }

		.page input.radio
		{
			-webkit-appearance: radio:  /* remove default appearance on Webkit-based browsers */
            -moz-appearance: radio; /* remove default appearance on Mozilla-based browsers */
            appearance: radio;  /* remove default appearance on Mozilla-based browsers */
			width:20px;
		}

        .page .submit, .submit {
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;
			border-radius: 50px;
			border: 0px;
			background-color: #7681b8;
			background: linear-gradient(129deg, #59a9e3, #995bc9);
			background: linear-gradient(45deg, #7983a7, #977da7);
			background: linear-gradient(129deg, #995bc9, #59a9e3, var(--basecolor), #59a9e3);
			background: var(--basecolor);
			background-size: 500% 500%;
			animation: gradient 25s ease infinite;
			color: #ffffff;
			font-weight: 200;
			font-size: var(--fontsize);
			padding: 10px 20px;
			margin-top: 10px;
			cursor: pointer;
			width: auto;
			display: inline-block;
			/*border-bottom: 3px solid #55619b;
			border-right: 3px solid #55619b;*/
			text-align: center;
			-webkit-transition: all 0.2s linear;
			-o-transition: all 0.2s linear;
			-moz-transition: all 0.2s linear;
			-ms-transition: all 0.2s linear;
			-kthtml-transition: all 0.2s linear;
			transition: all 0.2s linear;
			
			font-family: var(--fontfamily); /* Inter */
			font-size: var(--fontsize);
			font-weight: var(--fontweight);
		}

			.submit.blackline
			{
				background: #ffffff;
				border: 1px solid #000000;
				color: #000000;
				font-weight: 600;
			}

			.submit.grey 
			{
				background: var(--basecolor1);
				color: #000000;
				width:100%;
			}

			.submit.black
			{
				background: #000000 !important;
				color: #ffffff;
			}

			.page .submit:hover
			{
				/*border-bottom: 3px solid #63b20e;
				border-right: 3px solid #63b20e;*/
				background: linear-gradient(45deg, #70be01, #43961b);
			}

			.submit.blackline:hover
			{
				/*background: linear-gradient(45deg, #70be01, #43961b);*/
				color:#ffffff;
				border-color:#b6d3c6;
			}

			.page .submit.delete
			{
				color:#ffffff;
				background:#ff0000; 
				border-bottom-color:#dddddd; 
				border-right-color:#dddddd;
			}

			.page .submit.delete:hover
			{
				color:#ffffff;
				background:#dd0000; 
				border-bottom-color:#ff0000; 
				border-right-color:#ff0000;
			}

			.page .waiting_action
			{
				display:none !important;
			}

			.page .submit.purple
			{
				background: #9c76a8;
				color:#ffffff;
			}

			.submit.form
			{
				margin: 0px;
				border-radius: 50px;
				width: 100%;
			}

		.divcustom textarea
		{
			-webkit-appearance: none; /* remove default appearance on Webkit-based browsers */
            -moz-appearance: none; /* remove default appearance on Mozilla-based browsers */
            appearance: none; /* remove default appearance on all other browsers */

            box-sizing: border-box;
            border-radius: 7px;
            width:100%;
            
            margin-right:0px;
            min-height:120px;

            font-family:var(--fontfamily);
            font-size: var(--fontsize);
            color:#2c0e37;
            
            padding:10px 20px;
            outline: none;
            margin-top:0px;

            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
            
            resize: none;
			
			font-family: var(--fontfamily); /* Inter */
			font-size: var(--fontsize);
			font-weight: var(--fontweight);
		}

		.popup textarea, 
		.popup select,
		.popup input:not([type='checkbox'])
		{
			background-color:#faf5f1;
			border: 1px solid #f1e8e1;
		}

		.form_response {
			display: none;
			color: #ffffff;
			background-image: url(../img/ok_icon.png);
			background-size: 100%;
			border-radius: 50px;
			height: 35px;
			width: 35px;
			margin-left: 5px;
			margin-top: 2px;
		}

        .form_response_waiting
        {
			display: none;
			color: #ffffff;
			background-image: url("../img/loading_green_blue.gif");
			background-size: 100%;
			border-radius: 50px;
			height: 33px;
			background-position: center center;
			background-repeat: no-repeat;
			width: 33px;
			margin-left: 5px;
			margin-top: 8px;

			border-radius: 10px;
			box-shadow: rgba(0, 0, 0, 0) 2px 3px 3px 0px;
			border: 0px solid rgba(0, 0, 0, 0.05);
			background-color: rgb(255, 255, 255) !important;
        }

		.form_response_waiting.small
        {
			display: none;
			color: #ffffff;
			background-image: url("../img/loading_green_blue.gif");
			background-size: 100%;
			border-radius: 50px;
			height: 18px;
			background-position: center center;
			background-repeat: no-repeat;
			width: 18px;
			margin-left: 5px;
			margin-top: 8px;
        }

		.form_response_waiting_small
        {
			display: none;
			color: #ffffff;
			background-image: url(../img/loading_green_blue.gif);
			background-size: 100%;
			border-radius: 50px;
			height: 20px;
			background-position: center center;
			background-repeat: no-repeat;
			width: 20px;
			margin-left: 5px;
			margin-bottom: 18px;
			bottom:0px;
			border:2px solid rgba(255,255,255,0.7);
			position: absolute;
        }

			.form_response_waiting_small.ok
        	{
				background-image: url(../img/loading_ok.png);
				background-size: 110%;
			}

.conversations_inbox_left_search {
	left: 270px;
	bottom: 85px;
	overflow-y: auto;
	overflow-x: hidden;
	border-radius: 20px 0px 0px 0px;
	z-index: 3;
	position: fixed;
	width: 240px;
	padding: 20px;
	padding-bottom: 200px;
	padding-left: 30px;
	background-color: #ffffff;
	/* box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); */
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
	top: 40px;
}

	.conversations_inbox_left_search input
	{
		background-color:var(--basecolor6); 
		color:var(--basecolor5);
		border-radius:40px; 
		width:100%; 
		padding:10px; 
		padding-left:40px; 
		border:0px;
		/*box-shadow: inset 0px 0px 2px 0px rgba(0,0,0,0.1);*/
	}

	.conversations_inbox_left_search input::placeholder
	{
		color:#2c0e3754;
	}

	.conversations_inbox_left_search i.fa-search
	{
		opacity:0.5; float:left; margin-top:-25px; margin-left:16px;
	}

	.conversations_inbox_left_search i.fa-calendar-alt
	{
		opacity:0.5; float:left; margin-top:-25px; margin-left:16px;
	}


	.conversations_inbox_left_search_menu
	{
		display: block;
		list-style: none;
		padding:0px;
		margin:0px;
		width:180px;
		margin-left:0px;
	}

	.conversations_inbox_left_search_menu li {
		display: flex;
		align-items: center;
		width: 200px;
		padding: 7px 10px;
		border-radius: 20px;
		margin-left: -10px;
		cursor: pointer;
		margin-bottom: 1px;
		font-family: var(--fontfamily);
		font-weight: var(--fontweight);
		position: relative; /* nodig voor fade */


		-webkit-transition: all 0.2s linear;
		-o-transition: all 0.2s linear;
		-moz-transition: all 0.2s linear;
		-ms-transition: all 0.2s linear;
		-kthtml-transition: all 0.2s linear;
		transition: all 0.2s linear;
	}
	
	.conversations_inbox_left_search_menu li a {
		display: inline-block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		flex: 1; /* tekst neemt beschikbare ruimte */
		padding-right: 20px; /* ruimte voor fade */
	}
	
	.conversations_inbox_left_search_menu li::after {
		content: "";
		position: absolute;
		right: 0;
		top: 0;
		height: 100%;
		width: 40px; /* breedte fade */
		/*background: linear-gradient(to right, transparent, white); */
		border-radius: 20px;
		pointer-events: none;
	}

	.ui-tabs-anchor a,
	.conversations_inbox_left_search_menu li a
	{
		font-family: var(--fontfamily);
		font-weight: var(--fontweight);
		font-size: var(--fontsize);
	}

	.conversations_inbox_left_search_menu li:hover
	{
		background-color:var(--basecolor6);
		color:var(--basecolor5);
		width:100%;
		margin-left:0px;
	}

	.conversations_inbox_left_search_menu li.active
	{
		background-color:var(--basecolor); /*#625d7b;*/
		color:#ffffff;
		width:100%;
		margin-left:0px;
	}

		.conversations_inbox_left_search_menu li.active::after 
		{
			content: 'x';
			display: block;
			position: absolute;
			margin-left: 147px;
			margin-top: -18px;
			width: 12px;
			height: 12px;
			font-weight: bold;
			font-size: 12px;
			color: #ffffff;
			background-color: rgb(255 255 255 / 46%);
			border-radius: 20px;
			padding: 3px;
			padding-top: 0px;
			padding-bottom: 6px;
			text-align: center;
			
			display:none;
		}

		.conversations_inbox_left_search_menu li.active a span
		{
			color:#ffffff !important;
		}

	.conversations_inbox_left_search li i
	{
		margin-left: 0px;
		margin-right: 7px;
		width: 20px;
		text-align: center;
	}

.conversations_inbox_left 
{
    display: block;
    position: fixed;
    top: 41px;
    left: 510px;
    width: 330px;
    z-index: 2;
    right: auto;
    /*box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
	box-shadow: 5px 0px 5px 0px rgba(0, 0, 0, 0.05);*/
    border-right: 1px solid #f5f5f5;
    bottom: 0px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    padding-top: 15px;
    border-radius: 0px 0px 0px 0px;
    background-color: #ffffff;
}

	.conversations_inbox_item {
		width: auto;
		min-height: 100px;
		padding: 20px 10px 10px 10px;
		margin-bottom: 0px;
		border-bottom: 0px solid #eaedf9;
		background-color: #ffffff;
		border-radius: 0px;
		margin-left: -20px;
		margin-right: -20px;
		line-height: 18px;
		border-top: 1px solid #eaedf9;
		/*border-left: 5px solid transparent;*/
	}
	
	.conversations_inbox_item:hover, 
	.conversations_inbox_item.active 
	{
		background-color: #d4e0ea;
		cursor: pointer;
		border-bottom: 0px;
		border-radius: 0px;
		background: #636883;
		/*border-left: 5px solid var(--basecolor);*/
		background: var(--basecolor1); /*#dce0f836;*/
		color: #212534;
		/*box-shadow: inset -5px 0px 10px 0px rgba(0, 0, 0, 0.05);*/
		border-top: 0px solid #e3dad1;
		
		background-image: url(../img/chat_icon_opacity.png);
		background-size: 300px;
		background-position: left 100px bottom -10px;
		background-repeat: no-repeat;
	}

	.conversations_inbox_item.active::before
	{
		content:"";
		display: block;
		position: absolute;
		width: 0; 
		height: 0; 
		border-top: 12px solid transparent;
		border-bottom: 12px solid transparent; 
		border-right:12px solid #ffffff; 
		right:0px;
	}

	.conversations_inbox_item:hover .time,
	.conversations_inbox_item.active .time
	{
		color:#212534 !important;
	}
	
		.conversations_inbox_item .icon
		{
			width:15px;
			height:15px;
			border-radius:60px;
			color:#ffffff;
			background-color: #fb6b35;
			text-align: center;
			padding-top:8px;
			font-weight: 600;
			font-size: 0px; /*var(--fontsize);*/
			float:left;
			margin-left:5px;
			margin-top:2px;
		}
		
		.conversations_inbox_item .content
		{
			width:100%;
			margin-left:40px;
			padding-right:50px;
		}
		
		.conversations_inbox_item .time
		{
			color:#bdbdbd;
			font-size:10px;
			margin-top:10px;
		}
		
		.conversations_inbox_item .text
		{
			margin-top:4px;
			padding-right:20px;
			width:100%;
			word-break: break-word;
			/*height:48px;*/
			overflow:hidden;
		}
		
		.conversations_inbox_item .sentiment
		{
			position:absolute;
			right:30px;
			/*filter: grayscale(100%);*/
			margin-top:-13px;
		}
		
		.conversations_inbox_item .messages
		{
			color:#718394;
			font-size:10px;
			margin-top:3px;
		}

		.conversations_inbox_item i
		{
			margin-right:5px;
		}

		.conversations_inbox_item strong
		{
			word-break:break-all;
		}



p.information
{
	border-bottom: 0px solid #fa8472;
	border-right: 0px solid #ff441a;
	/*background: linear-gradient(45deg, #333333, #212534);	*/
	color:#e50184;
	padding:10px 0px;
	border-radius: 10px;
	margin-top:20px;
	line-height: 17px;
	font-size: var(--fontsize);
}

p.important
{
	border-bottom: 0px solid #fa8472;
	border-right: 0px solid #ff441a;
	/*background: linear-gradient(45deg, var(--basecolor), #ff6000);*/
	background-color:#313e4a;
	color:#ffffff;
	padding:10px 20px;
	border-radius: 10px;
	margin-top:20px;
	line-height: 17px;
}

p.light, div.light
{	
	background-color: var(--basecolor1);
    padding: 10px 20px;
    border-radius: 10px;	
	line-height: 17px;
	margin-bottom: 5px;
}

	p.light a.button, div.light a.button
	{
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		border-radius: 50px;
		border: 0px solid #081245;
		background: #348ece;
		color: #ffffff;
		padding: 10px 20px;
		margin-top: 10px;
		cursor: pointer;
		width: auto;
		display: inline-block;
		text-align: center;
		-webkit-transition: all 0.2s linear;
		-o-transition: all 0.2s linear;
		-moz-transition: all 0.2s linear;
		-ms-transition: all 0.2s linear;
		-kthtml-transition: all 0.2s linear;
		transition: all 0.2s linear;
		font-family: var(--fontfamily);
		font-size: var(--fontsize);
		font-weight: var(--fontweight);
	}

	p.light a.button:hover, div.light a.button:hover
	{
		background: #2870a4;
	}

p.info, div.info
{
	background-color: #faf1cb;
    padding: 10px 20px;
    border-radius: 10px;	
	line-height: 17px;
	margin-bottom: 5px;
	color:#212534 !important;
}

.info.blue {
    background-color: #348ece29;
    color: #081245 !important;
}

.info.purple
{
	background-color: #d7e6f4;
    color: #203250 !important;
}

.info.white 
{
    background-color: #ffffff;
    background: #ffffff !important;
    color: #081245 !important;
    padding: 10px;
    border: 1px solid #ebebeb;
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.info.lightblue
{
	background-color: #d7e6f4;
	color: #081245 !important;
}

.info.verylight
{
	background-color: #f2f9f6;
}

.info.black
{
	background-color: #111212;
	color: #ffffff !important;
}

.info.black a 
{
	color:#ffffff;
}

.info.gradient
{
	color: #ffffff !important;
    background: linear-gradient(129deg, #2eae91, #348ece);
}

.nobg
{
	background-image:none !important
}

p.red
{
	background-color: #bb0010 !important;	
	color:#ffffff !important;
	cursor:pointer;
}

	p.red a.submit
	{
		background: #860000 !important;
	}

	div.popup.conversation p.info
	{
		background-color: #faf1cb;
		color: #212534;
		padding: 10px 20px;
		border-radius: 10px;
	}

p.info.degraded_performance
{
	background: #ffebde !important;
	color:#000000 !important;
}

p.info.partial_outage
{
	background: #ffebde !important;
	color:#000000 !important;
}

p.info.major_outage
{
	background: #e20000 !important;
	color:#ffffff !important;
}

p.info a
{
	color:#212534 !important;
	text-decoration:underline !important;
}

p.info.partial_outage a
{
	color:#ffffff !important;
}

p.dark
{
	background-color: #081245;
    padding: 20px 20px;
    border-radius: 10px;
    line-height: 17px;
    color: #ffffff;	
}

div.small_info
{
	font-size:10px;	
	margin-top:5px;
	margin-left:20px;
}

div.small_info_label
{
	font-size:10px;	
	margin-top:5px;
	padding:3px 5px;
	background-color:#f2f6fa;
	display: inline-block;
	border-radius: 5px;
	margin-right:3px;
}

code 
{
    background-color: #eedef4;
    color: #212534;
    padding: 10px 20px;
    border-radius: 20px;
    border: 1px solid #dec8e6;
    margin-top: 0px;
    font-family: var(--fontfamily);
    font-size: var(--fontsize);
    word-break: break-all;
    display: block;
    width: 100%;
}

/*
p a, td a
{
	background-color:#eaedf9;
	color:#212534;
	padding:10px 20px;
	border-radius: 10px;
	margin-top:0px;
	font-size: var(--fontsize);
	word-break: break-all;
	display: block;
    width: 100%;
	cursor:pointer;
}
*/

textarea.code
{
	width:100%;
	background-color:#eaedf9;
	color:#212534;
	padding:15px 20px 15px 20px;
	border-radius: 10px;
	font-family: "Courier New";
	font-size: var(--fontsize);
	word-break: break-all;
	border:0px;
	min-height:35px;
}

hr
{
    border: 0px;
    border-bottom: 1px solid #e6e8f2;
    width: auto;
    margin-top: 10px;
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 10px;
    display: block;
    height: 10px;
    /*box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.1);*/
}

hr.shadow {
    border: 0px;
    border-bottom: 0px;
    width: auto;
    margin-top: 10px;
    margin-right: -30px;
    margin-left: -30px;
    margin-bottom: 10px;
    display: block;
    height: 10px;
    box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.1);
}

.microcopy
{
	font-size:12px;
	color:#aaaaaa;
}

.prompt_suggestions
{
	margin-left:100px;
	margin-right:140px;
	margin-top:60px;
}

#question_form
{
	margin-bottom:60px;	
}

#prompts ul
{
	list-style:disc;	
	padding:0px;
	margin:0px;
}

#prompts ul li
{
	display: block;
	width:100%;
	padding-top:15px;
	padding-bottom:15px;
	border-bottom:1px solid #eeeeee;
	text-decoration: none;
	color:#1d2539;
	
	cursor:pointer;
	
	-webkit-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	-kthtml-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

#prompts ul li:hover
{
	background-color: #eaedf9;
	border-radius: 10px;
	padding-left:10px;
	color:#212534;
	margin-right:20px;
}

.page table.table tr td
{
	border-bottom: 1px solid #eeeeee;	
}

.page table.table tbody tr:hover
{
	background-color: var(--basecolor1);
	cursor:pointer;
	
	-webkit-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	-kthtml-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

pre
{
	background-color: #f5f7fa;
    color: #081245;
	font-family: monospace;
	font-size: var(--fontsize);
	
	border-radius: 10px;
	padding:0px;
	overflow-x: auto;
	/*margin-top:0px;
	margin-bottom:-10px;*/
}

div.popup {
    display: none;
    z-index: 10;
    position: fixed;
    right: 0px;
    bottom: 0px;
    width: auto;
    height: auto;
    left: 400px;
    top: 40px !important;
    margin-left: auto;
    margin-top: auto;
    border-radius: 20px 0px 0px 0px;
    color: #212534;
    background-color: #ffffff;
    box-shadow: 0px 10px 20px 0px rgb(0 0 0 / 20%);
    padding: 30px 60px 30px 60px;
    overflow-y: auto;
    overflow-x: hidden;
}

	.popup label
	{
		color: #212534;
		font-size: var(--fontsize);
	}

	div.popup.conversation {
		background-color: #f5f7fa; /*#f5f7ff;*/
		box-shadow: none;
		box-shadow:  0px 3px 10px 0px rgba(0, 0, 0, 0.1);
		top: 40px !important;
		right: 0px;
		bottom: -20px;
		left: 844px;
		padding-left: 20px;
		height: auto;
		width: auto;
		margin-top: 0px;
		margin-left: -5px;
		border-radius: 0px 0px 0px 0px;
		color: #212534;
		z-index:6;
		border-left: 1px solid #eaedf9;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	body.conversations div.popup.conversation {
		box-shadow:  0px 0px 0px 0px rgba(0, 0, 0, 0.1);
	}

	div.popup.delete_thread
	{
		left:auto;
	}

	div.popup.external_url
	{
		left:auto;
		width:400px;
		right:20px !important;
		top:20px !important;
		bottom:20px !important;
		border-radius: 20px;
	}

	div.popup_close_button {
		position: fixed;
		right: 30px;
		top: 73px;
		width: 25px;
		height: 25px;
		opacity: 1;
		z-index: 100000;
		cursor: pointer;
		background-color: #313d49;
		border-radius: 100px;
	}

	div.popup_close_button:hover {
	  opacity: 1;
		background-color: var(--basecolor);
	}
	div.popup_close_button:before, div.popup_close_button:after {
	  position: absolute;
	  left: 11.5px;
	  top:7px;
	  content: ' ';
	  height: 11px;
	  width: 2px;
	  background-color: #fff;
		border-radius: 5px;
	}
	div.popup_close_button:before {
	  transform: rotate(45deg);
	}
	div.popup_close_button:after {
	  transform: rotate(-45deg);
	}

		div.popup.conversation .popup_close_button
		{
			right: 20px;
    		top: 60px;
		}

		div.popup.external_url .popup_close_button
		{
			display:none;
		}

	body.conversations div.popup.conversation .popup_close_button
	{
		display:none;
	}

.frametable
{
    width:calc(100%);
    margin-top:0px;
    display:table;
    height:100%;
}

.framerow
{
    width:calc(100%);
    display:table;
}

    .framecolumn
    {    
        padding:0px;
        margin:0px;
        vertical-align: top;
        display:table-cell;
        height:100%;
                
        -webkit-transition: all 0.2s linear;
        -o-transition: all 0.2s linear;
        -moz-transition: all 0.2s linear;
        -ms-transition: all 0.2s linear;
        -kthtml-transition: all 0.2s linear;
        transition: all 0.2s linear;    
    }

    .framecolumn.w_1_2
    {
        width:50%;
    }

    .framecolumn.w_2_3
    {
        width:67%;
    }

    .framecolumn.w_1_3
    {
        width:33%;
    }

    .framecolumn.w_1_4
    {
        width:25%;
    }

    .framecolumn.w_1_5
    {
        width:20%;
    }

    .framecolumn.w_1_1
    {
        width:100%;
    }

    .framecolumn_content
    {
        border-radius: 10px;
        /*box-shadow: rgba(200, 223, 245, 0.5) 0px 8px 16px;*/
        padding:20px;
        background-color:var(--basecolor7);
        margin:10px;
        margin-right: 5px;
        margin-left: 0px;
        height: calc(100% - 20px);
		min-height: 88px;
		
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
		
		/*border: 1px solid rgba(0,0,0,0.1);*/
    }

        .framecolumn:last-of-type .framecolumn_content {
          margin-right: 0px;
        }

    .framecolumn_content .title
    {
        color:#171c5b;
        font-weight: 400;
        font-size:16px;
        font-family: var(--fontheaders);
        margin-bottom:0px;
        display:inline-block; 
        width:auto;
    }

        .framecolumn_content .display-counter
        {
            font-size:32px;
        }

		.framecolumn_content .display-fixed
        {
            font-size:32px;
        }

    .framecolumn_content .smalltitle
    {
        color:#ab188c;
        
        font-size:16px;
        font-family: var(--fontheaders);
        margin-bottom:0px;
    }

	.framecolumn_content p
    {
        color:#ffffff;
        font-size: var(--fontsize);
    }

    .color1
    {
        background-color:#ffffff;
		background: linear-gradient(129deg, #55abe4, #778bda);
        color:#212534;
    }

    .color2
    {
        background-color:#ffffff;
		background: linear-gradient(129deg, #778bda, #8c6fd0);
        color:#212534;
    }

    .color3
    {
        background-color:#ffffff;
		background: linear-gradient(129deg, #8c6fd0, #9e54c7);
        color:#212534;
    }

    .color4
    {
        background-color:#ffffff;
		background: linear-gradient(129deg, #9e54c7, #b71db7);
        color:#212534;
    }

    .color5
    {
        background-color:#ffffff;
		background: linear-gradient(129deg, #b71db7, #db2b63);
        color:#212534;
    }

    .color6
    {
        background-color:#212534;
        color:#ffffff;
    }

	.color7
    {
        background-color:#ffffff;
		background: linear-gradient(129deg, #fee6fb, #f8eedc);
        color:#212534;
    }

    .color1 .title,
    .color1 .smalltitle,
    .color2 .title,
    .color2 .smalltitle,
    .color3 .title,
    .color3 .smalltitle,
    .color4 .title,
    .color4 .smalltitle,
    .color5 .title,
    .color5 .smalltitle,
    .color6 .title,
    .color6 .smalltitle,
	.color7 .title,
    .color7 .smalltitle
    {
        color:#ffffff;
    }

	.color6 .title,
	.color6 .smalltitle
    {
        color:#61a2e0;
    }

	.color1,
	.color1 .title, .color1 .smalltitle
	{
		color: #ffffff;
	}

	.framecolumn_content.dark
    {
		background-color: #171c5b;
		
		background-image: url(../../img/illustration_1.png);
		background-position: right bottom;
		background-size: auto 100%;
		background-repeat: no-repeat;
		border:0px;
	}

		.framecolumn_content.dark .smalltitle,
		.framecolumn_content.dark .title
		{
			color: #ffffff;
		}

		.framecolumn_content.dark p
		{
			color: #ffffff;
		}
		
.framecolumn_content.connector
{
	background-color: #ffffff;
    color: #000000;

	-webkit-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	-kthtml-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

	.framecolumn_content.connector:hover
	{
		background-color: #e8f6f0;
	}

	.framecolumn_content.connector img {
		filter: invert(1);
	}

	.framecolumn_content.connector .title {
		color: #081245;
	}

.framecolumn_content.active
{
	background: linear-gradient(168deg, #2eae91, #348ece);
	color: #ffffff !important;
}

.framecolumn_content.connector.active img {
	filter: invert(0);
}

.framecolumn_content.active .title,
.framecolumn_content.active .smalltitle
{
	color:#ffffff !important;
}

.framecolumn_content.active .submit 
{
	background: #fff;
    color: #000;
}

.framecolumn_content.active i.fa-check-circle
{
	color: #ffffff3d !important;
    font-size: 100px !important;
    float: right !important;
    right: 20px !important;
    margin-top: 15px !important;
}

.sentiment_analysis
{
	margin-top:20px;	
	width:100%;
	line-height: 1px;
}

.sentiment_score
{
	display:inline-block; 
	border-radius:30px; 
	margin-right:1px; 
	margin-bottom:1px; 
	width:25px; 
	height:25px; 	
	
	opacity:0;
}

.greyscale
{
	filter: grayscale(1);
}

#xhr_history_line {
    position: fixed;
    background-color: #ebdfef;
    width: 2px;
    height: auto;
    top: 40px;
	z-index:4;
    bottom: 60px;
    left: calc(50% + 415px);
}

.xhr_history_line_start 
{
    display: block;
    margin-bottom: 50px;
    position: relative;
    margin-top: -17px;
    width: 170px;
    margin-left: calc(50% - 85px);
    background-color: #ebdfef;
    padding: 3px 15px;
    border: 1px solid #d3b5dd;
    text-align: center;
    color: #7d4392;
    font-size: 11px;
    border-radius: 0px 0px 45px 45px;
    z-index: 5;
	
}

	.xhr_history_line_start::after {
		display: block;
		content: '';
		height: 0px;
		width: 0px;
		border: none;
		border-top: 8px solid #d3b5dd;
		border-left: 8px solid rgba(0, 0, 0, 0);
		border-right: 8px solid rgba(0, 0, 0, 0);
		position: absolute;
		margin-top: 3px;
		margin-left: 62px;
	}

.xhr_history_line_end
{
    display: block;
    margin-bottom: 10px;
    position: relative;
    margin-top: 105px;
    width: 170px;
    margin-left: calc(50% - 85px);
    background-color: #ebdfef;
    padding: 3px 15px;
    border: 1px solid #d3b5dd;
    text-align: center;
    color: #7d4392;
    font-size: 11px;
    border-radius: 45px 45px 45px 45px;
    z-index: 5;
	
}

	.xhr_history_line_end::before {
		/*display: block;
		content: '';
		height: 0px;
		width: 0px;
		border: none;
		border-bottom: 8px solid #d3b5dd;
		border-left: 8px solid rgba(0, 0, 0, 0);
		border-right: 8px solid rgba(0, 0, 0, 0);
		position: absolute;
		margin-top: -12px;
		margin-left: 62px;*/
	}

#xhr_conversations 
{
	margin-top:68px;
}

#xhr_conversation 
{
    margin-right: 0px;
    margin-bottom: 0px;
    padding-right: 30px;
    margin-left: 0px;
    width: -webkit-fill-available;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 17px;
    padding-left: 20px;
    padding-bottom: 250px;
    position: absolute;
    bottom: 60px;
    top: 0px;
    right: 0px;
	/*box-shadow: inset 10px 0px 10px -10px rgba(0, 0, 0, 0.1);*/
}

.conversation_header 
{
    display: block;
    position: fixed;
    background-color: #000000;
	background: linear-gradient(223deg, #cde0edd6, #d5efe2bf);
    color: #000000;
    left: 865px;
    right: 25px;
    top: auto;
	bottom:100px;
    padding-top: 5px;
    border-radius: 20px 20px 0px 0px;
	border: 1px solid #c4dbe3;
    height: 84px;
    padding-left: 20px;
    box-shadow: 0px;
    z-index: 6;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
	box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 0.1);
}

.conversation_inbox_header
{
    display: block;
    position: fixed;
    background-color: #fafafc;
    margin-left: -20px;
	width:330px;
    top: 41px;
	padding-top:10px;
	height:84px;
    padding-left: 30px;
    box-shadow: none;
    z-index: 6;
	backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
}

.xhr_conversation_profile {
    position: fixed;
    width: 250px;
    padding: 20px;
    right: -235px;
    top: 0px;
    padding-top: 3px;
    bottom: 0px;
	overflow-y: auto;
	overflow-x: hidden;
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.05);
	border-left: 0px solid #e6e8f2;
	background-color: #ffffff;
    border-radius: 0px 0px 0px 0px;
	z-index:7;

	/*-webkit-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	-kthtml-transition: all 0.2s linear;
	transition: all 0.2s linear;  */
}

	

	.xhr_conversation_profile::after {
		content: "\f7a4"; /* Unicode for the "fas fa-grip-lines-vertical" icon */
		font-family: "Font Awesome 6 Pro"; /* Ensure the correct Font Awesome font is loaded */
		font-weight: 900; /* Use the "solid" version of the font */
		position: absolute;
		right: 235px;
		top: calc(50% - 7px);
		transform: rotate(90deg);
		font-size: 16px;
		color: #888888;
		opacity: 0.5;
		display: block;
	}

	.xhr_conversation_profile:hover::after
	{
		opacity: 0;
		cursor: pointer;
	}

.xhr_conversation_profile:hover{
	right:0px;	

	border-radius: 0px;
	padding-bottom: 20px;
	top: 40px;
    height: auto;
	bottom: 0px;
}

.xhr_conversation_profile h3
{
	font-size:16px;	
}

.xhr_conversation_profile .table
{
	color:#212534;
}

.xhr_conversation_profile .table tr
{
	height:25px;
}

	.xhr_conversation_profile .conversations_inbox_item {
		width: auto;
	}

.link_object
{
	border-radius: 10px;
    padding: 5px;
    background-color: #ffffff;
    border: 1px solid rgba(255,255,255,0.2);
    margin-top: 15px;
    margin-bottom: 15px;
    font-size: 10px;
    width: 300px;
    min-height: 40px;
    padding-top: 4px;
    padding-bottom: 4px;
    word-break: break-all;
}

.link_object img
{
	height:30px;
	display: inline-block;
	margin-right:10px;
}

a.link
{
	border-radius: 10px;
    padding: 5px 10px;
    background-color: #eeeeee;
    border: 1px solid #dddddd;
    margin-top: 15px;
    margin-bottom: 15px;
    font-size: 10px;
    width: 100%;
    word-break: break-all;
	color:#212534;
	display: block;
	font-size: var(--fontsize);
}

.page .label, .conversations_inbox_left .label, .conversation .label
{
	font-size:9px; 
	display:inline-block; 
	width:auto; 
	padding: 4px 8px; 
	border-radius:5px; 
	background-color: var(--basecolor);
	color: #ffffff;
	font-weight: 200;
	line-height: 11px;
	text-transform: uppercase;
	/*box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.1);*/
}

.label.label-success
{
	background-color: #348ece !important;
}

.label.label-danger
{
	background-color: #9c76a8 !important;
}

.api_label
{
	font-size:9px; 
	display:inline-block; 
	width:auto; 
	padding: 4px 8px; 
	border-radius:15px; 
	background: #212534;
	color: #ffffff;
	font-weight: 200;
	line-height: 12px;
}

.conversations_inbox_item .review
{
	font-size:9px; 
	display:inline-block; 
	width:auto; 
	padding: 4px 8px; 
	border-radius:50px; 
	background: #000000;
    color: #ffffff;
	font-weight: 600;
	line-height: 11px;
	text-transform: uppercase;
	margin-top:0px;
	margin-right:-12px;
	/*box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.1);*/
	
}

.my_profile {
    display: block;
    position: fixed;
    bottom: -2px;
    height: auto;
    background: #ffffff00;
    border-top: 0px solid #f2f2f2;
    width: 209px;
    text-align: left;
    padding: 20px;
	padding-bottom: 44px;
    left: 60px;
    color: #212534;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
	z-index: 5;
}

	.my_profile a
	{
		cursor: pointer;
	}

	.profile_avatar
	{
		width:50px;
		height:50px;
		background-size: cover;
		background-position: center center;
		border-radius:100px;
		box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.2);
		border:0px solid #ffffff;
		margin-left:0px;
	}

	.my_profile .profile_title
	{
		text-align: left;
		font-weight:600;
		margin-bottom:3px;
		margin-top:15px;
	}

	.my_profile .profile_email
	{
		text-align: left;
		margin-bottom:10px;
		font-size: 10px;
	}

	.my_profile .profile_company
	{
		text-align: left;
		margin-bottom:10px;
		font-weight:bold;
		margin-top:15px;
	}

.logout
{
	display:none !important;
}

/*
[contenteditable]:hover {
    outline: 1px dotted rgba(255, 255, 255, 0.4);
    border-radius: 5px;
    background-color: #ffffff17;
    padding: 0px;
	border:0px;
}
*/

.search_keyword
{
	margin:0px;
	padding-left:0px;
	padding-right:0px;
	background-color:#faf1cb;
	color:#212534;
	border-radius: 2px;
}

.search_form
{
	background-color:#fafafc !important;
}

.submit_bar {
    position: fixed;
    bottom: 20px;
    left: 300px;
    right: 20px;
    height: auto;
    padding-top: 15px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 30px;
    border-radius: 50px;
    background-color: rgb(255 255 255);
    box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.1);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    z-index: 2;
    /* margin: 20px; */
    border-top: 1px solid #e6e6e6;
}

	.page .submit_bar .submit
	{
		margin-top:-5px;
		border-radius: 50px;
	}


	.conversation_add_message {
		background-color: #ffffff00;
		border-radius: 20px;
		/* border: 1px solid #e6e8f2; */
		padding: 20px;
		/* position: absolute; */
		/* bottom: 20px; */
		/* left: 0px; */
		/* right: 250px; */
		width: 70%;
		margin-left: 50px;
		box-shadow: 0px -20px 30px -10px rgba(0, 0, 0, 0.1);
		/* z-index: 6; */
		backdrop-filter: blur(25px);
		-webkit-backdrop-filter: blur(25px);
		margin-top: 40px;
		background-color: #393f55;
		color: #212534;
		border-radius: 10px;
		/* border: 1px solid #e6e8f2; */
		padding: 10px;
		padding-left: 20px;
		padding-right: 20px;
		position: fixed;
		bottom: 30px;
		left: -30px;
		color: #ffffff;
		right: 270px;
		width: auto;
		margin-left: 50px;
		box-shadow: 0px -20px 30px -10px rgba(0, 0, 0, 0.1);
		z-index: 6;
		backdrop-filter: blur(15px);
		-webkit-backdrop-filter: blur(15px);
		margin-top: 40px;
		background-color: #ffffff;
		color: #212534;
		box-shadow: none;
		left: 840px;
		margin: 0px;
		right: 0px;
		bottom: 0px;
		border-top: 1px solid #ebedf9;
		border-radius: 0px;
		margin-top: 30px;
		border-radius: 0px 0px 0px 0px;
		position: fixed;
		background-color: #ffffff;
		/* border: 1px solid #d3b5dd; */
		/* box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1); */
		color: #212534;
		margin: 20px;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.1);
		border-radius: 20px;
	}

#quick_answers {
    display: none;
    position: fixed;
    bottom: 120px;
    right: 250px;
    width: auto;
    height: auto;
    left: 840px;
    padding: 20px;
    z-index: 5;
    background-color: #ffffff;
    -webkit-box-shadow: 0px -5px 5px -3px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px -5px 5px -3px rgba(0, 0, 0, 0.1);
    box-shadow: 0px -5px 5px -3px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid #ebedf9;
    border-radius: 0px 0px 0px 0px;
}
	.quick_answer
	{
		padding:7px;
		background-color:#f5f7ff;
		border-radius: 5px;
		margin-bottom:1px;
	}

	.quick_answer:hover
	{
		background-color:#eadceb;
		cursor:pointer;
	}

#sort_order
{
	color:#212534; 
	cursor:pointer; 
	position:absolute; 
	right:20px; 
	top:31px;
}

#sort_order:hover
{
	color:#212534;
}

#conversation_message 
{
    font-family: var(--fontfamily);
    font-size: var(--fontsize);
    color: #212534;
    resize: none;
    background-color: #f3ecf5;
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 0px;
    border-radius: 10px;
    border: 0px solid #eeeeee;
    /* box-shadow: inset 0px 0px 3px 0px rgba(0, 0, 0, 0.2); */
    width: 100%;
    height: 36px;
    -webkit-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -kthtml-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
	#conversation_message.message_type_internal
	{
		background-color:#faf1cb;
	}

	#conversation_message.message_type_already_edited
	{
		background-color: #f5f7f9;
    	color: #309fab;
	}

.replied_on {
    height: 30px;
    width: 25px;
    overflow-y: auto;
    padding: 6px;
    margin-top: 15px;
    cursor: pointer;
	border-radius: 30px;
    background-color: #eadceb;
	color: var(--basecolor5);
}

	.replied_on .mail_link_button
	{
		background-color: rgb(44 14 55);
		color: #ffffff !important;
		padding: 0px 1px;
	}

	.replied_on i
	{
		color: var(--basecolor);
	}

.replied_on/*:hover*/
{
	width:100%;
	height:300px;
	padding: 20px;
	
	background-color: #eadceb;
	border-radius: 10px;
	margin-bottom:20px;
}

	/*.replied_on:hover i
	{
		display: none;
	}*/

#label_popup
{
    padding: 0px 20px 20px 20px;
    right: 0px;
    top: 0px;
	bottom:0px;
    position: fixed;
    z-index: 20;
    width: 249px;
    height: auto;
    background-color: rgb(255, 255, 255);
    border-radius: 0px 0px 10px 10px;
    box-shadow: rgba(0, 0, 0, 0.2) 20px 10px 20px 0px;
    opacity: 1;
    display: none;
}

.labelform:hover
{
	background-color:#f5f7ff;
}

.labelform.active
{
	background-color:#dce0f8;
}

.conversation_summary
{
	max-height:65px;
	max-height:100%;
	overflow:auto;
	
	-webkit-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	-kthtml-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

.conversation_summary:hover
{
	max-height:100%;
}

.framework_frame_left {
    left: 271px;
    bottom: 0px;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 0px 0px 0px 0px;
    /* box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); */
    top: 41px;
    z-index: 3;
    position: fixed;
    width: 238px;
    padding: 20px;
    padding-left: 30px;
    background-color: #ffffff;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-right: 1px solid #e6e8f2;
}

	.framework_frame_left input
	{
		background-color:#eaecfa; 
		border-radius:40px; 
		width:100%; 
		padding:10px; 
		padding-left:40px; 
		border:0px;
		/*box-shadow: inset 0px 0px 2px 0px rgba(0,0,0,0.1);*/
	}

	.framework_frame_left i.fa-search
	{
		opacity:0.5; float:left; margin-top:-25px; margin-left:16px;
	}

	.framework_frame_left i.fa-calendar-alt
	{
		opacity:0.5; float:left; margin-top:-25px; margin-left:16px;
	}


	.framework_frame_left_menu
	{
		display: block;
		list-style: none;
		padding:0px;
		margin:0px;
		width:200px;
		margin-left:-10px;
	}

	.framework_frame_left_menu li
	{
		padding:7px 0px;
		display: block;
		width:100%;
		padding-left:10px;
		padding-right:0px;
		border-radius: 20px;
		cursor:pointer;
	}

	.framework_frame_left_menu li:hover
	{
		background-color:#dce0f8;
		color:#212534;
	}

	.framework_frame_left_menu li.active
	{
		background-color:#393f55; /*#625d7b;*/
		color:#ffffff;
	}

		.framework_frame_left_menu li.active::after
		{
			content: 'x';
			display: block;
			position:absolute;
			margin-left:167px;
			margin-top:-17px;
			width:12px;
			height:12px;
			font-weight:bold;
			font-size:12px;
			color:#ffffff;
			background-color:rgba(255,255,255,0.2);
			border-radius: 20px;
			padding:3px;
			padding-top:1px;
			padding-bottom:5px;
			text-align: center;
		}

	.framework_frame_left li i {
		margin-left: 0px;
		margin-right: 7px;
		width: 20px;
		text-align: center;
	}


.framework_frame_right
{
	margin-left:220px;
	overflow-y: auto;
	overflow-x: hidden;
}

.panel_right
{
	padding:0px 20px 220px 20px; 
	position:fixed; right:0px; top:0px; 
	bottom:0px; overflow:auto; 
	width:350px; 
	top:40px;
	border-left:1px solid #edf0f5; 
	box-shadow: none;	
	color: #000000;
    background-color: #ffffff;
	backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
	/*box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.1);*/
}

	.panel_right .submit
	{
		width:auto;
		border-radius:50px;
		background:#000000 !important;
	}

	.panel_right:hover .submit
	{
		width:auto;
	}

	.panel_right:hover
	{
		/*width:50%;*/
		z-index:3;
		box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);	
		border-radius: 20px 0px 0px 20px;
	}

	.panel_right p.info
	{
		background-color: #faf1cb !important;
		color: #212534 !important;
	}

body.message .framework_main,
body.message .framework_frame_left,
body.message .framework_bar_left,
body.message .framework_menu_left,
body.message .conversations_inbox_left_search,
body.message .conversations_inbox_left,
body.message div.popup
{
	top:30px!important;
}
body.message div.popup.conversation
{
	top:70px!important;
}
body.message .menu_icon_ring
{
	top:47px!important;
}
body.message #menu_icon
{
	top:50px!important;
}
body.message .framework_menu_left .title
{
	top:164px!important;
}
body.message .my_profile
{
	bottom: 30px!important;	
}

body.message .conversation_header
{
	top: 30px!important;	
}

body.message .conversation_inbox_header
{
	top: 30px!important;	
}

body.message .xhr_conversation_profile
{
	top: 30px!important;	
}

body.message .xhr_history_line_start
{
	margin-top: -17px;
}

body.message #xhr_history_line
{
	top: 113px;
}

body.message .panel_right
{
	top:30px;	
}

.trial_period_message 
{
    position: fixed;
    top: 18px;
    left: 50%;
    right: auto;
    height: 30px;
    width: 700px;
    border-radius: 20px;
    margin-left: -350px;
    background-color: #faf1cb;
    /* background: linear-gradient(129deg, #56aae3, var(--basecolor)); */
    background-color: #2c0e37;
    padding: 6px 20px;
    /* border-radius: 0px; */
    line-height: 17px;
    margin-bottom: 5px;
    color: #ffffff !important;
    z-index: 999;
    text-align: center;
    font-size: 11px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.trial_period_message:hover
{
	
}




/* creates part of the curve */
.box:before {
	content: "";
	position: absolute;
	z-index: 2;
	top: 12px;
	right: -8px;
	height: 20px;
	border-right: 20px solid var(--basecolor1);
	border-left:none;
	border-bottom-left-radius: 16px 14px;
	-webkit-transform: translate(0, -2px);
}

/* creates part of the curved pointy bit */
 .box:not(.internal):after {
	content: "";
	position: absolute;
	z-index: 3;
	top: 12px;
	right: 10px;
	width: 20px;
	height: 20px;
	background: #f9fffd;
	border-top-left-radius: 14px;
	-webkit-transform: translate(30px, -2px);
}

/* creates part of the curve */
.box.user:before {
	content: "";
	position: absolute;
	z-index: 2;
	top: 12px;
	left: -8px;
	height: 20px;
	border-left: 20px solid var(--basecolor5);
	border-right:none;
	border-bottom-right-radius: 16px 14px;
	-webkit-transform: translate(0, -2px);
}

/* creates part of the curved pointy bit */
 .box.user:after {
	content: "";
	position: absolute;
	z-index: 3;
	top: 12px;
	left: 4px;
	width: 26px;
	height: 20px;
	background: #ffffff;
	border-top-right-radius: 14px;
	-webkit-transform: translate(-30px, -2px);
}

.box.user.pageview:before
{
	border-left: none;
}

.box.user.automation:before
{
	border-left: none;
}

.box.user.review:before
{
	border-left: 20px solid #e6dbe9;
}

.box.agent:before
{
	border-right: 20px solid #e9e8f6;
}

.box.note:before
{
	border-right: 20px solid #faf1cb;
}

.box.assistant:before
{
	border-right: 20px solid #ffffff;
}

.box.user.endpoint:before
{
	border-left: 20px solid #d8f0ea;
}

.box.internal:before,
.box.internal:after{
	border:none;
}

.box.not_approved 
{
	background:#ffffff !important;
	border:1px dashed #dddddd !important;
	color:#999999;
}

.box.not_approved:before,
.box.not_approved:after
{
	display:none;
}

.box div.button_option
{
	display: inline-block;
	padding: 7px 10px;

	background: #ffffff;
	color: #081245;
	box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1);

	border-radius: 10px;
	margin-right:5px;
	cursor:pointer;
	margin-top:10px;
}

.notifications_popup
{
	position: fixed;
	width:300px;
	height:auto;
	right:20px;
	bottom:20px;
	background-color: #ffffff;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(4px);
	border-radius: 10px;
	box-shadow: 0px 0px 13px 0px rgba(0,0,0,0.2);
	padding:20px;
	z-index:999;
}

	.notifications_popup .timebar
	{
		position: absolute;
		bottom:0px;
		left:0px;
		right:0px;
		width:300px;
		height:7px;
		background-color:#000000;
		border-radius: 5px 5px 5px 5px;
		z-index:1000;
	}

	.notifications_popup h4
	{
		padding:0px;
		margin:0px;
		margin-bottom:5px;
		font-size:14px;
		font-weight:800;
	}

	.notifications_popup p
	{
		padding:0px;
		margin:0px;
		line-height:18px;
	}

	.notifications_popup i
	{
		font-size:14px !important;
	}

.richText-editor a
{
	color: #1e94a0;	
}

#xhr_searchinbox_loading
{
    display: block;
    position: absolute;
    background-color: #ffffff40;
    left: 0px;
    top: 0px;
    width: 219px;
    bottom: 0px;
    z-index: 4;
    background-image: url("../img/loading_green_blue.gif");
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: center center;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

#xhr_conversations_loading
{
	display: block;
	position: absolute;
    background-color: #ffffff40;
    left: 0px;
    top: 0px;
    width: 350px;
    bottom: 0px;
    z-index: 4;
    background-image: url("../img/loading_green_blue.gif");
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: center center;
	backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* tabs */

.ui-widget-header {
    border: 0px;
    background: #ffffff00;
    color: #081245;
    font-weight: bold;
}

.ui-tabs .ui-tabs-nav {
    margin: 0px 0px 0px 20px;
    padding: 0px;
	margin-bottom:0px;
}

.ui-widget.ui-widget-content {
    border: 0px solid #c5c5c5;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    background-color: #ffffff00;
    border: 1px solid #edf0f5;
    font-weight: normal;
    color: #212534;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    border: 1px solid #348ece;
    background: #348ece;
	background: linear-gradient(129deg, #1d94a0, #348ece) !important;
    font-weight: normal;
    color: #ffffff;
}

.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited, a.ui-button, a:link.ui-button, a:visited.ui-button, .ui-button
{
	color: #212534;
}

.ui-tabs-tab
{
	-webkit-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	-kthtml-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

.ui-tabs-tab:hover
{
	background-color: #eef0f4;
}

.ui-tabs .ui-tabs-panel {
    display: block;
    border-width: 1px;
    padding: 2em 2.4em;
    background: none;
    border-radius: 10px;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}

.ui-widget-content {
    border: 1px solid #eef0f4;
    background: #ffffff;
    color: #081245;
}

.ui-tabs .ui-tabs-nav li {
    border-radius: 5px 5px 0px 0px;
    margin-bottom: 0px;
    /*box-shadow: inset 0px -1px 3px rgba(0, 0, 0, 0.1);*/
}

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    font-weight: var(--fontweight);
}

.ui-tabs-panel h2
{
	margin: 10px 0px 10px 0px;	
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor
{
	cursor: text;
    color: #fff;
    font-weight: bold;
}

/* Styling for input borders */
.valid {
	border: 2px solid #71a10a !important;
}

.invalid {
	border: 2px solid #dd0000 !important;
}

.multiselect-dropdown-list-wrapper
{
	left: 201px !important;
}

.multiselect-dropdown-list div:hover
{
	background-color:#e1d5f1;
	border-radius:20px;	
}

.multiselect-dropdown-list div label
{
    margin-top: 2px !important;
    position: absolute !important;	
}

.multiselect-dropdown span.optext, .multiselect-dropdown span.placeholder
{
	padding-left: 10px !important;
}

.range_output {
    display: block;
    position: absolute;
    margin-top: -41px;
    /* margin-left: 10px; */
    background-color: #ffffff;
    color: #081245;
    border: 1px solid #f3f4f7;
    padding: 11px 5px;
    border-radius: 5px;
    max-width: 35px;
    width: 35px;
    height: 38px;
    text-align: center;
}

/* The slider itself */
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 37px; /* Specified height */
  background: #f5f7fa; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
  border: 1px solid #edf0f5;
  padding-left: 33px !important;
  padding-right: 0px !important;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 6px; /* Set a specific slider handle width */
  height: 37px; /* Slider handle height */
  background: #2eae91;/*9363cb;*/
  cursor: pointer; /* Cursor on hover */
  border-radius: 10px;
}

.slider::-moz-range-thumb {
  width: 6px; /* Set a specific slider handle width */
  height: 37px; /* Slider handle height */
  background: #2eae91;/*9363cb;*/
  cursor: pointer; /* Cursor on hover */
  border-radius: 10px;
}

.xhr_stats.xhr_loading
{
	width:100%;
	height:100%;
	background-image: url("../img/loading_green_blue.gif");
	background-repeat: no-repeat;
	background-position: center center;
	background-size:30px;
	min-height:190px;
	background-color: #f5f7fa;
	border-radius: 10px;
}

@keyframes skeleton {
    0% {
        background-position: -200px 0
    }

    to {
        background-position: calc(200px + 100%) 0
    }
}

.skeleton {
    background-color: var(--gray-75);
    background-image: linear-gradient(90deg, var(--gray-50) 25%, var(--gray-100) 50%, var(--gray-50) 75%);
    background-size: 400% 100%;
    background-repeat: no-repeat;
    border-radius: 10px;
    animation: skeleton 1.5s infinite linear;
    display: inline-block;
    line-height: 1;
    width: 100%;
}

.richText-editor code
{
	display: inline-block;
    padding: 0px 5px;
    font-size: 13px;
	width:auto;
}


.debug_info
{
	z-index: 10;
    word-break: break-all;
    position: relative;
    height: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    opacity: 0.0;
    /* bottom: 30px; */
    /* right: 10px; */
    width: 100%;
    color: #d3b5dd;
    font-size: 10px;

	-webkit-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	-kthtml-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

.debug_info:hover
{
	opacity: 1.0;
}

.box.assistant .debug_info_box
{
	-webkit-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	-kthtml-transition: all 0.2s linear;
	transition: all 0.2s linear;

	display: block;
    color: #081245 !important;
    background: #f1f7fa;
    border-radius: 10px;
    padding: 20px;
    margin-top: 10px;	
	font-size: 12px;
	width: calc(100vw - 730px);
}

.box.assistant .debug_info_box_type_2
{
    -webkit-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -kthtml-transition: all 0.2s linear;
    transition: all 0.2s linear;
    display: block;
    color: #081245 !important;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
    background: #feffff;
    border-radius: 20px;
    padding: 20px;
    margin-top: 10px;
    font-size: 12px;
}

.box.assistant .debug_info_box_type_2.show
{
	display:block !important;
}

.box.assistant .debug_info_box pre,
.box.assistant .debug_info_box_type_2 pre
{
	background-color:#f1f7fa;
	padding:0px;
	font-family: "NeueMontreal";
	color:#081245;
	font-size: 12px;
}

.fa-solid, .fas
{
	font-weight:400;	
}

.ui-widget {
    font-family: var(--fontfamily);
    font-size: 1em;
}

@-webkit-keyframes LoginAnimation {
    0%{background-position:2% 0%}
    50%{background-position:99% 100%}
    100%{background-position:2% 0%}
}
@-moz-keyframes LoginAnimation {
    0%{background-position:2% 0%}
    50%{background-position:99% 100%}
    100%{background-position:2% 0%}
}
@keyframes LoginAnimation {
    0%{background-position:2% 0%}
    50%{background-position:99% 100%}
    100%{background-position:2% 0%}
}
@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.module-border-wrap {
    padding: 1rem;
    box-sizing: border-box;
    position: relative;
    background: linear-gradient(129deg, #2eae91, #348ece);
    background-size: 300% 300%;
    animation: gradient-animation 2s ease infinite;
    padding: 3px;
    /* padding-bottom: 0px; */
    border-radius: 10px;
}

#ask_linda_question::placeholder
{
	font-style:italic;
	color:#666666;
}

ul.menu div.error {
    width: 7px;
    height: 7px;
    border-radius: 100%;
    background-color: #DE0003;
    margin-top: -19px;
    margin-left: 12px;
    position: absolute;

    animation: blinkFade 1.5s infinite ease-in-out;
}

ul.menu div.no_error {
    width: 7px;
    height: 7px;
    border-radius: 100%;
    background-color: #3ba204;
    margin-top: -19px;
    margin-left: 12px;
    position: absolute;
}

ul.menu li.active div.no_error {
	display: none;
}

@keyframes blinkFade {
    0%, 100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

.multiselect-dropdown
{
	background-color:#eceef7;
	cursor:pointer;
}

.multiselect-dropdown-list
{
	height:auto !important;
	padding-bottom:5px;
}

.multiselect-dropdown-list-wrapper
{
	left:1px;
	box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.1);
	
	left: 241px !important;
	background: #f5f7fa;
	border-radius: 7px;
	margin-top: 39px;
	border: 1px solid #eef0f4;
}

.multiselect-dropdown span.optext {
	background: linear-gradient(129deg, #59a9e3, #59a9e3);
	padding: 6px 12px;
	color:#ffffff;
	font-size: 12px;
}

.multiselect-dropdown-list div:hover
{
	background: linear-gradient(129deg, #2eae91, #348ece);
	color: #ffffff;
}
.avatar-wrapper {
	position: absolute;
	top: 0;
	right: 0;
	width: 200px;
	height: 100%;
	pointer-events: none;
	overflow: hidden;
	z-index: -1;
}

.avatar_float {
	position: absolute;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	border: 2px solid #ffffff;
	transform-origin: center center;
	animation: floatZoom 12s ease-in-out infinite;
	will-change: transform;
	filter: blur(4px);
}

/* Per-avatar variatie */
.avatar_float:nth-child(1) {
	z-index: 6;
	width: 80px !important;
	height: 80px !important;
	top: 15%;
	left: 20%;
	animation-delay: 0s;
	animation-duration: 12s;
}
.avatar_float:nth-child(2) {
	z-index: 5;
	width: 80px !important;
	height: 80px !important;
	top: 35%;
	left: 40%;
	animation-delay: 0s;
	animation-duration: 14s;
}
.avatar_float:nth-child(3) {
	z-index: 4;
	width: 80px !important;
	height: 80px !important;
	top: 50%;
	left: 10%;
	animation-delay: 0s;
	animation-duration: 11s;
}
.avatar_float:nth-child(4) {
	z-index: 3;
	width: 80px !important;
	height: 80px !important;
	top: 75%;
	left: 30%;
	animation-delay: 0s;
	animation-duration: 13s;
}
.avatar_float:nth-child(5) {
	z-index: 2;
	width: 80px !important;
	height: 80px !important;
	top: 20%;
	left: 50%;
	animation-delay: 0s;
	animation-duration: 10s;
}
.avatar_float:nth-child(6) {
	z-index: 1;
	width: 80px !important;
	height: 80px !important;
	top: 60%;
	left: 60%;
	animation-delay: 0s;
	animation-duration: 9s;
}

/* Gecombineerde animatie: zweven + zoomen + vervagen */
@keyframes floatZoom {
	0% {
		transform: translateY(0px) translateX(0px) scale(0.6);
		filter: blur(4px);
		/*opacity: 0.3;*/
	}
	25% {
		transform: translateY(-20px) translateX(10px) scale(0.8);
		filter: blur(2px);
		/*opacity: 0.5;*/
	}
	50% {
		transform: translateY(-25px) translateX(20px) scale(1.0);
		filter: blur(0px);
		/*opacity: 1.0;*/
	}
	75% {
		transform: translateY(-25px) translateX(10px) scale(0.8);
		filter: blur(2px);
		/*opacity: 0.6;*/
	}
	100% {
		transform: translateY(0px) translateX(0px) scale(0.6);
		filter: blur(4px);
		/*opacity: 0.3;*/
	}
}

.admin_empty_conversations
{
	background: #dd0000 !important;
    color: #ffffff !important;
}

.admin_empty_conversations p.info {
    background-color: #ffffff40;
    color: #ffffff !important;
}

.admin_empty_conversations .submit {
	background: #fff;
    color: #dd0000;
}

@keyframes pulseFade {
0% {
	opacity: 0.3;
	transform: scale(0.95);
}
50% {
	opacity: 1;
	transform: scale(1.1);
}
100% {
	opacity: 0.3;
	transform: scale(0.95);
}
}

.pulse-fade {
animation: pulseFade 2s ease-in-out infinite;
}

.debug_icon_container
{
	position: fixed;
	bottom: 45px;
	left: 18px;
	color: #000000;
	background: #ffffff;
	box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 1);
	padding: 6px 5px 5px 5px;
	border-radius: 100%;
	width: 25px;
	font-size: 11px;
	height: 25px;
	text-align: center;
	vertical-align: middle;
	cursor:pointer;
}

	.fa-debug
	{
		font-weight: 600;
	}

	.fa-bug
	{
		font-weight: 600;
	}

.sound_icon_container
{
	position: fixed;
	bottom: 15px;
	left: 18px;
	color: #ffffff;
	background: #000000;
	padding: 6px 5px 5px 5px;
	border-radius: 100%;
	width: 25px;
	font-size: 11px;
	height: 25px;
	text-align: center;
	vertical-align: middle;
	cursor:pointer;
}

	.fa-volume-mute
	{
		font-weight: 200;
	}

	.fa-volume-up
	{
		font-weight: 600;
	}

	.logout_button {
		font-size: 11px;
		background-color: #000000;
		display: inline-block;
		/* width: 100%; */
		border-radius: 30px;
		margin-top: 8px;
		border: 1px solid #000000;
		color: #fff;
		padding: 3px 8px;
		right: 30px;
		position: fixed;
		-webkit-transition: all 0.2s linear;
		-o-transition: all 0.2s linear;
		-moz-transition: all 0.2s linear;
		-ms-transition: all 0.2s linear;
		-kthtml-transition: all 0.2s linear;
		transition: all 0.2s linear;
	}

	.logout_button:hover
	{
		background-color: #000000;
		color: #ffffff;
		border: 1px solid #333333;
	}

/*
body.logout_user .framework_main
{
	background-color: #000000;
	color: #ffffff;
}

body.logout_user .framework_main h1
{
	color: #ffffff;
}

body.logout_user .framework_main p.light
{
	background-color: #2c2c2c;
	color: #ffffff !important;
}*/

div.thin
{
    font-weight: 200;
    margin-top: 5px;
}

.gradient-text {
	background: linear-gradient(129deg, #9363cb, #2eae91, #348ece);
	-webkit-background-clip: text; /* nodig voor Chrome/Safari */
	-webkit-text-fill-color: transparent; /* tekst doorzichtig maken */
	background-clip: text; /* voor Firefox */
	color: transparent;
	width: fit-content;
  }



  .ysa_weight_explainer {
	--bg: #ffffff;
	--card: #ffffff;
	--text: #000000;
	--muted: #6b7280;
	--accent: #9363cb;
	--border: rgba(0,0,0,0.08);

	background: var(--bg);
	color: var(--text);
	padding: 0px;
	border-radius: 12px;

	display: grid;
	grid-template-columns: 1fr 1fr; /* always 2 columns */
	gap: 16px;
}

.ysa_weight_explainer h2 {
	grid-column: 1 / -1;
	margin: 0 0 16px;
	font-size: 16px; /* max 20px */
	font-weight: 600;
}

.ysa_weight_card {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 16px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
	transition: transform .15s ease, box-shadow .15s ease;
}

.ysa_weight_card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.ysa_weight_header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.ysa_weight_badge {
	display: inline-grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 6px;
	background: rgba(37,99,235,0.1);
	color: var(--accent);
	font-weight: 700;
	border: 1px solid rgba(37,99,235,0.2);
	flex: 0 0 auto;
}

.ysa_weight_card h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
}

.ysa_weight_list {
	margin: 0;
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: 6px 14px;
}

.ysa_weight_list dt {
	color: var(--muted);
	font-weight: 600;
}

.ysa_weight_list dd {
	margin: 0 0 6px 0;
}

.ysa_weight_card code {
	background: rgba(0,0,0,0.04);
	border: 1px solid var(--border);
	padding: 0 .35em;
	border-radius: 4px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 0.9em;
	display: inline;
}

.ysa_weight_card em { 
	color: var(--accent); 
	font-style: normal; 
}

/* Responsive: collapse to 1 column on small screens */
@media (max-width: 1468px) {
	.ysa_weight_explainer {
	grid-template-columns: 1fr;
	}
}

/* ---------- Weights explainer styles ---------- */
.ysa_training_frame_explainer{display:grid;gap:20px;margin:20px 0}
.ysa_training_frame_explainer h2{margin:0 0 8px 0}
.ysa_training_frame_card{border:1px solid #e6e6e6;border-radius:14px;padding:16px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,0.04)}
.ysa_training_frame_header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ysa_training_frame_badge{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#111;color:#fff;font-weight:700}
.ysa_training_frame_list{margin:0}
.ysa_training_frame_list dt{font-weight:600;margin-top:8px}
.ysa_training_frame_list dd{margin:0 0 6px 0;color:#444}
/*.ysa_training_frame_explainer .ysa_training_frame_card { background: linear-gradient(223deg, #ecf2fa, #e7f5ef) !important; }*/

/* ---------- Training items grid & cards ---------- */
.ysa_training_grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:16px;margin:15px 0}
.ysa_training_card{border:1px solid #e6e6e6;border-radius:14px;background:#fff;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 2px 8px rgba(0,0,0,0.06); transition:box-shadow 0.15s ease-in-out; z-index: 1; background: #ffffff7d; backdrop-filter: blur(5px);}
.ysa_training_card:hover{box-shadow:0 4px 12px rgba(0,0,0,0.2)}
.ysa_training_header{display:flex;gap:12px;padding:12px 14px;border-bottom:1px solid #f0f0f0;align-items:center}
.ysa_avatar{width:40px;height:40px;border-radius:50px;background-size:cover;background-position:center center;flex:0 0 40px}
.ysa_training_title{font-size:15px;font-weight:600;margin:0; margin-bottom: -10px !important;}
.ysa_training_body{padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.ysa_training_body input[type="text"], .ysa_training_body textarea{width:100%;border:1px solid #ddd;border-radius:10px;padding:10px;font:inherit}
.ysa_training_body textarea{min-height:220px;resize:vertical;background-color:#f1faf6;}
.ysa_training_footer{display:flex;gap:8px;justify-content:flex-end;padding:10px 14px;border-top:1px solid #f4f4f4;background:#fafafa}
.ysa_btn{border:1px solid #d0d0d0;background:#fff;border-radius:10px;padding:8px 12px;cursor:pointer;font:inherit; font-size:13px;}
.ysa_btn.save{background:#111;color:#fff;border-color:#111}
.ysa_btn.delete{background:#fff;color:#c5362d;border-color:#e0c9c8}
.ysa_btn:disabled{ 
  /* opacity: .6; */
  cursor: not-allowed;
  background-color: #2eab98;
  color: #fff;
  border: 1px solid #319688;
}

.ysa_btn_animated /* slow blinking button to indicate saving */
{
	/*animation: pulseFade 2s ease-in-out infinite;*/
	background-color: #2eab98;
	background: linear-gradient(129deg, #2eae91, #348ece);
	color: #fff;
	border: 1px solid #319688;
}

.ab-wrap{ position: relative; }

#ab_wires, #ab_wires_flow{
  position: absolute;
  inset: 0;
  z-index: 0;           /* achter de cards */
  pointer-events: none; /* niet klikbaar */
}

.ab-wire{
	stroke: #2eab98;
	stroke-width: 3;
	fill: none;
	opacity: .9;
	/* stroke-dasharray: 6 4;  // optioneel */
  }

.ysa_training_card code {
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid var(--border);
    padding: 0 .35em;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.9em;
    display: inline;
}

/* Subtle inline feedback */
.ysa_card_status{font-size:12px;color:#666;margin-left:auto;display:flex;align-items:center;gap:6px}
.ysa_card_status .dot{width:8px;height:8px;border-radius:50%;background:#dd0000}
.ysa_card_status.ok .dot{background:#2e7d32}
.ysa_card_status.err .dot{background:#c62828}

/* Responsiveness for narrow screens */
@media (max-width:540px){
  .ysa_training_grid{grid-template-columns:1fr}
}

.experiment_frame
{
	background-image: url(../img/square-grid-patterns.jpg);
    background-size: 350px;
    background-repeat: repeat;
	background-color: rgba(255, 255, 255, 0.3); /* overlay color */
  	background-blend-mode: lighten; /* or multiply, overlay, etc. */
	border: 1px solid #e6e6e6;
	border-radius: 15px;
	padding: 20px;
}

.animated_bg {
    animation: gradientMove 12s ease infinite !important;
    transition: background-position 0.2s !important;
    background: linear-gradient(129deg, #eae1f3, #d5f1eb, #c9ddec, #eae1f3, #d5f1eb, #c9ddec);
    background-size: 300% 100% !important;
}