/* 1e94a0 */

body
{
	color: #111212;	
}

.framecolumn_content .title
{
	color: #111212;
}

svg
{
	/*filter: drop-shadow(0px 0px 10px rgb(0 0 0 / 0.15));*/
}

h1 i
{
	color:#2eae91;	
}

.framework_menu_left 
{
    background: linear-gradient(129deg, #2c333e, #2a4d78);
	background: linear-gradient(167deg, #2c3747, #31517f, #126787);
	background: #ffffff;
	/*background: linear-gradient(223deg, #d7e5f5, #d5efe2);*/

    background-size: 100% 100%;
	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.0504);

	background: #ffffff;
	
    background-size: 100% 100%;

    border-right: 0px solid #04040417;
	border-radius: 0px 20px 0px 0px;

	border-right: 0.5px solid #04040417;
}

.framework_main
{
	border:0px;
	border: 0.5px solid #04040417;
	box-shadow: inset 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
}

.framework_menu_left .title
{
	color: #132133;
	font-weight: 600;
	left: -173px;

}

.menu_icon_ring 
{
    background: linear-gradient(129deg, #1e94a0, #1e94a0);
	background: linear-gradient(129deg, #1d94a0, #2a65a4);
	background: #348ece;
	background: linear-gradient(129deg, #1d94a0, #348ece);
	background: linear-gradient(129deg, #9363cb, #348ece);
	background: linear-gradient(129deg, #2eae91, #348ece);
    background-size: 100% 100%;
}

.my_profile 
{
    color: #212534;
}

.framework_bar_left 
{
    background: linear-gradient(129deg, #2c3747, #153863);
	background: #f4f7fa00; /*#f5f7fa;*/
    background-size: 100% 100%;
    border-right: 0px solid #eef0f4;
	border-radius: 0px 0px 0px 0px;
	/*box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);*/
}

body.conversations .framework_bar_left
{
	box-shadow: none;
}

.conversations_inbox_left
{
	background-color: #ffffff00 !important;
}

.conversation_inbox_header
{
	background-color: #ffffff00 !important;
}

.conversations_inbox_left_search
{
	background-color: #ffffff00;
	backdrop-filter: none;
    border-right: 1px solid #1321330a;
	box-shadow: none;
}

.conversations_inbox_left_search input 
{
	border-radius: 50px;
    box-shadow: 2px 3px 3px 0px rgba(0, 0, 0, 0.03);
    border: 1px solid #13213322;
    background-color: #ffffff;
}

.framework_bar_left .menu ul li a 
{
    color: #081245;
}

.framework_bar_left .menu ul li i 
{
    color: #132133;
}

.framework_bar_left .menu h2 
{
    color: #132133;
	font-weight:600;
	font-size: 16px;
}

.conversations_inbox_item:hover, .conversations_inbox_item.active 
{
    border-top: 1px solid #eaecf0;
    background-image: none; /*url(../img/chat_icon_opacity.png); */
    background-size: 300px;
    background-position: left 100px bottom -10px;
    background-repeat: no-repeat;
	background: #081245;
    color: #ffffff;
	color: #132133;
	border-radius: 0px;

	background: linear-gradient(223deg, #cde0ed, #d5efe2);
	background: #eaf4f5;
	background-color: rgb(232, 246, 240);
}

.conversations_inbox_item:hover .time, .conversations_inbox_item.active .time
{
	color: #1321339e !important;
}

.conversations_inbox_item.active::before
{
	border:0px;
	height:32px;
	background: linear-gradient(129deg, #2eae91, #348ece);
	width:5px;
	border-radius:3px 0px 0px 3px;
}

.framework_bar_left .menu ul li:hover, .framework_bar_left .menu ul li.active 
{
    color: #ffffff;
    background-color: #1e94a0;
	background: linear-gradient(129deg, #1d94a0, #2a65a4);
	background: #348ece;
	background: linear-gradient(129deg, #1d94a0, #348ece);
	background: linear-gradient(129deg, #9363cb, #348ece);
	background: linear-gradient(129deg, #2eae91, #348ece);
	background: #132133;
	border-radius: 50px;
}

.framework_bar_left .menu ul li:hover
{
	background: linear-gradient(129deg, #2eae91, #348ece);
	background: #80b5a2;
}

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







.box 
{
	width: calc(75% - 22px);

    color: #212534;
    background: #cbe0ef;
    background-image: none; /* url(../img/chat_icon_opacity.png); */
    background-size: 300px;
    background-position: left 100px bottom -10px;
    background-repeat: no-repeat;
	
	background: linear-gradient(223deg, #cde0ed, #fee6fb);
	background: linear-gradient(225deg, #cde0ed, #e8f6f0);
	background: #e8f6f1;

	/*background: #ffffff;*/
	background-position:center;
	background-size:auto;
	
	/*box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.05);*/
}

.box.user
{
	margin-left: calc(25% + 20px);
}

.user {
    background: #132133;
}

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

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

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

.box:not(.internal):after
{
	background: #ffffff;
}

.box.system
{
	/*background: linear-gradient(225deg, #cde0ed, #f6e8f6);*/
	background: #fafafa;
    border: 0px dashed #13213333;
}

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

.xhr_history_line_start::after 
{
    border-top: 8px solid #132133;
}

.xhr_history_line_start 
{
    background-color: #cbe0ef;
	background: #132133;
    border: 1px solid #132133;
    color: #ffffff;
}

#xhr_history_line 
{
    background-color: #dceeec;
}

.xhr_history_line_end
{
	background-color: #cbe0ef;
	background: #132133;
    border: 1px solid #132133;
    color: #ffffff;
}

#conversation_message
{
	background-color: #f5f7fa;
	border-radius: 7px;
}

.framecolumn_content {
    background-color: #f5f7fa;

	border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.03) 2px 3px 3px 0px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    background-color: #ffffff;
}

.white .framecolumn_content {
    background-color: #ffffff;
	padding: 20px 0px;
}

.framework_main.insights .framecolumn_content:not(.color1):not(.color2):not(.color3):not(.color4):not(.color5):not(.color6) {
    background-color: #f5f7fa;

	border-radius: 10px;
    box-shadow: 2px 3px 3px 0px rgba(0, 0, 0, 0.03);
    border: 1px solid #1321330d;
    background-color: #ffffff;


	box-shadow: none;
    border: 1px solid #e3e2db8f;
}

.conversations_inbox_left_search_menu li
{
	border-radius: 10px;	
}

.conversations_inbox_left_search_menu li.active {
    background-color: #1e94a0;
	background: #348ece;
	background: linear-gradient(270deg, #1d94a0, #348ece);
	background: linear-gradient(129deg, #9363cb, #348ece);
	background: linear-gradient(129deg, #2eae91, #348ece);
	background: #132133;
    color: #ffffff;
	border-radius: 10px;
}

.conversations_inbox_left_search_menu li:hover {
    background-color: #f7f7f7;
    color: #213753;
}

.page select,
.page textarea,
.page input:not([type='checkbox'])
{
    background-color: #fdfdfd;
    border: 1px solid #edf0f5;
	border-radius: 7px;
}

.page .submit, .submit, .btn
{
	background-color: #1e94a0;
	background: linear-gradient(45deg, #70be01, #43961b);
	background: linear-gradient(129deg, #1d94a0, #2a65a4);
	background: #348ece;
	background: linear-gradient(129deg, #1d94a0, #348ece);
	background: linear-gradient(129deg, #9363cb, #348ece);
	background: linear-gradient(129deg, #2eae91, #348ece);

	background: #80b5a2;
}

.page .submit:hover, .submit:hover, .btn:hover
{
	background-color: #1e94a0;
    background: linear-gradient(129deg, #1d94a0, #2a65a4);
	background: linear-gradient(129deg, #9363cb, #348ece);
	background: linear-gradient(129deg, #2eae91, #348ece);

	background: #132133;
	color:#ffffff;
}

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

.page table.table tr td
{
	padding-left:5px;
}

.page table.table tbody tr:hover
{
	background-color: #f2f9f6;
}

.page table.table tbody tr:hover td {
    color: #102838;
    background-color: #f5f4ed;
}

.page table.table tbody tr td
{
	background-color: #ffffff;
	border-radius: 2px;
	padding-left:5px;
}

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

.page table.table
{
	background-color: #f7f7f7;
    border-radius: 7px;
    padding: 1px;	
}

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

input.toggle:checked + label.toggle
{
	background-color: #348ece;
	background: #348ece;
	background: linear-gradient(129deg, #1d94a0, #348ece) !important;
	background: linear-gradient(129deg, #9363cb, #348ece) !important;
	background: linear-gradient(129deg, #2eae91, #348ece) !important;
	background: linear-gradient(129deg, #132133, #132133) !important;
}

p.info {
    background-color: #fff;
    /* background: linear-gradient(180deg, #ffffff, #eef0f6); */
    /* background: #f5f7fa !important; */
    border: 0px solid #e8e0d3;
    color: #6b6b6b !important;
    padding: 0px;
	padding-bottom:20px;
	border-radius: 10px;
}

p.info.green
{
	background: linear-gradient(223deg, #d5efe28a, #d5efe28a) !important;
	color:#132133 !important;
	padding:10px 20px;

	/*background: #ffffff !important;
    border: 1px solid #e6e6e6;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.05);*/
}

p.info.purple
{
	background: linear-gradient(223deg, #eae1f387, #eae1f387) !important;
	color:#132133 !important;
	padding:10px 20px;

	/*background: #ffffff !important;
    border: 1px solid #e6e6e6;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.05);*/
}

.info.black
{
	background: #132133 !important;
	padding:10px 20px;
}

/*
p.light, div.light, div.green {
    background-color: #d7e6f4;
    color: #081245 !important;
	background-image: url(https://staging.youshouldask.ai/img/ysa_logo_blob_blue.png);
	background-position: calc(100% + 30px) calc(100% - 10px);
	background-repeat: no-repeat;
	background-size:200px;
	padding-right:200px !important;
}*/

p.light, div.light, div.green {
    background-color: #e8f6f0;
    color: #081245 !important;
    /*background-image: url(https://staging.youshouldask.ai/img/floortje_persona.png);*/
    background-position: calc(100% + 0px) calc(100% + 20px);
    background-repeat: no-repeat;
    background-size: 200px;
	padding:10px 20px;
    padding-right: 200px;
	margin-top: 3px;
}

p.darkblue, div.darkblue {
    background-color: #081245;
    color: #ffffff !important;
	background-image: url(https://staging.youshouldask.ai/img/ysa_logo_blob_blue.png);
	background-position: calc(100% + 30px) calc(100% - 10px);
	background-repeat: no-repeat;
	background-size:200px;
	padding-right:200px !important;
}

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

	color: #111212 !important;
    background: linear-gradient(223deg, #d7e5f5, #d5efe2);
}

div.green {
	background-color: #d3eae7;
    color: #314854 !important;
}

div.info.lightgreen,
p.info.lightgreen,
.lightgreen
{
	border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.03) 2px 3px 3px 0px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    background-color: rgb(232, 246, 240) !important;
	color:#132133 !important;
	padding:10px 20px !important;
}


p.info.yellow
{
	background: #fef3c7 !important;
    color: #132133 !important;
    margin-bottom: 10px;
    font-weight: normal;
	padding:10px 20px;
}

.redalert
{
	background-color: #f4d7d7 !important;
}

#datetimerange-selection
{
	-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;
}

#datetimerange-selection:hover
{
	background-color: #ffffff !important;
}



.color1,.color2,.color3,.color4,.color5 {
    background: #132133;
    background-color: #132133;
	color:#ffffff;
	border-radius: 10px;
    box-shadow: 2px 3px 3px 0px rgba(0, 0, 0, 0.03);
    border: 1px solid #132133;
    /* background-color: #ffffff;*/
}

.framecolumn_content .smalltitle {
    color: #80b5a2;
	font-weight: bold;
}

.framecolumn_content.color1 .smalltitle,
.framecolumn_content.color2 .smalltitle,
.framecolumn_content.color3 .smalltitle,
.framecolumn_content.color4 .smalltitle,
.framecolumn_content.color5 .smalltitle
{
    color: #ffffff;
}



.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;
	font-weight: 600;
}

.color1, .color2, .color3, .color4, .color5 {
    background: #132133;
    background-color: #132133;
    color: #ffffff;
    border-radius: 10px;
    box-shadow: 2px 3px 3px 0px rgba(0, 0, 0, 0.03);
    border: 1px solid #e7e7e7;
    /* background-color: #ffffff; */
}

.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;
	font-weight: 600;
}

.framecolumn_content.color1 .smalltitle,
.framecolumn_content.color2 .smalltitle,
.framecolumn_content.color3 .smalltitle,
.framecolumn_content.color4 .smalltitle,
.framecolumn_content.color5 .smalltitle
{
    color: #ffffff;
}



.page .label
{
	background-color: #348ece;
	font-weight: 400;
}

.page .label, .conversations_inbox_left .label, .conversation .label
{
	background-color: #132133;
    font-weight: 900;
    color: #ffffff;
    border-radius: 50px;
}

/*.agentloop .label {
	background: linear-gradient(129deg, #2eae91, #348ece);
}*/

#deal_thread, #manualmode_thread, #aimode_thread, #conversation_add_message_form .submit
{
	background-color: #348ece !important;
	background: #348ece;
	/*background: linear-gradient(129deg, #1d94a0, #348ece);*/
	background: linear-gradient(129deg, #9363cb, #348ece);
	background: linear-gradient(129deg, #2eae91, #348ece);
	color:#ffffff !important;
}

#conversation_add_message_form .submit
{
	background-color: #132133 !important;
	background: #132133;
	color:#ffffff !important;
	border-radius:50px !important;
	padding:7px 12px !important;
	margin-top:5px;
}

#conversation_message
{
	border-radius:12px;
}

p.light a.button, div.light a.button
{
	/*background: linear-gradient(170deg, #2eae91, #348ece);*/
	text-shadow: none;
}

.trial_period_message 
{
    background-color: #d5e0ed52;
    color: #213753 !important;
}

.debug_info, .debug_info a
{
	color: #213753 !important;
}

.framecolumn_content .display-counter,
.framecolumn_content .display-fixed
{
	font-weight:600;	
}

.submit.grey {
    background: #f2f6fa;
    color: #132133;
}

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

.framework_frame_left
{
	background-color: #ffffff00;	
	background: #ffffff00;
	/*background: linear-gradient(223deg, #d7e5f5, #d5efe2);*/
	border-right: 1px solid #eef0f4;
	border-radius: 20px 0px 0px 20px;
	/*box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);*/
	background: #f7f7f7;
	left: 270px;
    bottom: 5px;
	top: 40px;
	border-radius: 0px 0px 20px 20px;
}

.conversation_add_message
{
	background-color: #ffffff;
	border-top: 1px solid #eef0f4;
}

.popup.conversation
{
	box-shadow: none;	
	border-left: 1px solid #eef0f4;
}

.xhr_conversation_profile
{
	border-left: 0.5px solid #e3e2db;
    background-color: #f7f7f7;
	box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.05) !important;
}

.page .submit.delete
{
	/*background: #132133;*/
}

code 
{
    border: 0px;
    border: 1px solid #eef0f4;
    background-color: #f2f7fa;
    /* background: linear-gradient(129deg, #2eae91, #348ece); */
    color: #202433;
    border-radius: 7px;
}

.color6 .title {
    color: #ffffff;
	font-weight:bold;
}

.multiselect-dropdown span.optext {
    background: linear-gradient(129deg, #59a9e3, #59a9e3) !important;
	background: linear-gradient(129deg, #1d94a0, #348ece) !important;
	background: linear-gradient(129deg, #9363cb, #348ece) !important;
	background: linear-gradient(129deg, #2eae91, #348ece) !important;
	background: #132133 !important;
	color: #ffffff !important;
	padding: 5px 0.75em !important;
}

.multiselect-dropdown
{
	background-color:#fdfdfd !important;	
}

div.popup_close_button:hover {
    opacity: 1;
    background-color: #59a9e3;
}

.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
{
	background: linear-gradient(129deg, #9363cb, #348ece) !important;
	background: linear-gradient(129deg, #2eae91, #348ece) !important;
}

div.popup.conversation
{
	background: #f9fffd;
	background: #ffffff !important;
}

.xhr_stats.xhr_loading
{
	background-color: #f5f7fa;
}

.insights .xhr_stats.xhr_loading
{
	background-color: #ffffff;
}

.ui-tabs .ui-tabs-nav li
{
	border-radius: 10px !important;
}

.ui-tabs .ui-tabs-nav li.ui-state-active
{
	background: #132133 !important;
	border-radius: 10px;
}

.richText hr
{
	border:0px;
	border-bottom:1px solid #13213355;
	height:1px;
	margin-top:20px;
	margin-bottom:20px;
}	

.form_response
{
	height: 20px;
    width: 20px;
}

.form_response_waiting
{
	height: 20px;
	width: 20px;
}

.submit_bar .form_response_waiting
{
	height: 35px;
	width: 35px;
}

.submit_bar .form_response
{
	height: 35px;
    width: 35px;
}

.submit_bar .form_response_success
{
	height: 35px;
	width: 35px;
}

/*
body.channel .form_response
{
	height: 18px;
	width: 18px;
}
*/

.submit_bar .form_response_waiting
{
	box-shadow: none;
	border:0px;
}

/* Alleen als de class 'animated' erop zit */
.animated,
.page .submit.animated, 
.submit.animated,
.button.animated,
a.animated,
p.light a.button.animated, div.light a.button.animated
{
	animation: gradientMove 4s ease infinite;
	background-size: 200% 200% !important;
	transition: background-position 0.2s !important;
	background: linear-gradient(129deg, #9363cb, #2eae91, #348ece);

	background: #80b5a2;
}

.animated:hover{
	background: #132133 !important;
	color:#ffffff;
}

#welcome
{
    background-color: var(--rootcolor) !important;
    background-image: none !important;
    color: #000 !important;
    background: linear-gradient(43deg, #dfc6f5, #b8e5dd) !important;
}

.search_form
{
	background: #ffffff59 !important;
	border:0px !important;
	box-shadow: 0px -15px 15px -15px rgba(0, 0, 0, 0.1);
	border-right: 1px solid #f5f5f5 !important;
	border-top: 1px solid #f5f5f5 !important;
	width:240px !important;
	backdrop-filter: blur(5px);;
}

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


@media (max-width: 1520px) {
    .framework_bar_left {
        background: linear-gradient(129deg, #2c3747, #153863);
		background: linear-gradient(167deg, #2c3747, #31517f, #126787);
		background: #f4f7fa !important;
    }
}