:root {
    --aml-primary-color: #0a50a2;
    --bs-body-font-size: 0.9rem;
    --primary-background-color: #f8f8f8;
    --primary-text-color: #101010;
    --bs-secondary-subtle: #D3D3D3;
    --bs-info-subtle: rgb(207, 244, 252);
    --request-background-color: rgb(160,212,242);
    --reply-background-color: rgb(245,245,245);
}

body {
	background-color:#f8f9fa;
}

.app {
	background-color: white
}

/* ===================================================================================== */
/* Elements in AmlContent                                                                */
/* ===================================================================================== */
.btn-dof-standard {
    --bs-btn-font-weight: 400;
    --bs-btn-color: var(--primary-text-color);
    --bs-btn-bg: var(--primary-background-color);
    --bs-btn-border-color: var(--aml-primary-color);
    --bs-btn-border-radius: .5rem;
    --bs-btn-hover-color: var(--primary-background-color);
    --bs-btn-hover-bg: var(--aml-primary-color);
    --bs-btn-hover-border-color: #f0f0f0;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: var(--primary-background-color);
    --bs-btn-active-bg: var(--aml-primary-color);
    --bs-btn-active-border-color: var(--aml-primary-color);
    box-shadow: none;
}

label.btn-dof-standard:hover {
    --bs-btn-color: var(--primary-background-color);
    --bs-btn-bg: var(--aml-primary-color);
}

.dragonflow_image {
    height: 100px;
    background-image: url('dragonflow_mid.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}




.header-logo {
	width: 4.5em;
    height: 2.1em;
    background-image: url('logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}



/* ========================================== */
.chat-panel {
	opacity: 1;
	  background-image: url('turquoise-1540436_1280.png'); ;
  background-repeat: no-repeat;
  background-size: cover;
}





/*.chat-panel {
    background-color: #f8f8f8;
    background-repeat: repeat;
    background-size: 300px;
}*/


.dof-request-segment-class {
    /* Class list for request */
    content: 'border rounded-start-2 rounded-bottom-2 position-relative bg-info-subtle p-2 km-request-ex me-2 shadow-sm';
}

.km-request-ex {
    background-color: var(--request-background-color) !important;
}


/* no avatar */
.request_avatar_img, .reply_avatar_img, .avatar-place-holder {
    display: none;
}



.dof-reply-segment-class {
    /* Class list for reply */
    content: 'border rounded-end-2 rounded-bottom-2 position-relative bg-light  p-2 km-reply-ex ms-3 shadow-sm';
}

.km-reply-ex {
    background-color: var(--reply-background-color) !important;
}




.km-request-ex:after {
    content: '';
    position: absolute;
    display: block;
    width: 0;
    z-index: 1;
    border-style: solid;
    border-width: 7px 7px 0px 11px;
    border-color: transparent var(--request-background-color) transparent transparent;
    top: -6px;
    right: 0;
    margin-right: auto;
}

.km-request-ex:before {
    content: '';
    position: absolute;
    display: block;
    width: 0;
    z-index: 1;
    border-style: solid;
    border-width: 7px 7px 0 11px;
    border-color: transparent var(--bs-secondary-subtle) transparent transparent;
    top: -8px;
    right: -1px;
    margin-right: auto;
}



.km-reply-ex:after {
    content: '';
    position: absolute;
    display: block;
    width: 0;
    z-index: 1;
    border-style: solid;
    border-width: 7px 0 0 11px;
    border-color: transparent transparent transparent var(--reply-background-color);
    top: -6px;
    left: 0;
    margin-left: auto;
}

.km-reply-ex:before {
    content: '';
    position: absolute;
    display: block;
    width: 0;
    z-index: 1;
    border-style: solid;
    border-width: 7px 0 0 11px;
    border-color: transparent transparent transparent var(--bs-secondary-subtle);
    top: -8px;
    left: -1px;
    margin-left: auto;
}