/*
 * Copyright (c) Suomen Terveystalo Oy | Ninchat 2024-. All rights reserved.
 */

 @font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('https://ninchat.com/customer/fonts/open-sans-v15-latin-300.woff2') format('woff2'),
       url('https://ninchat.com/customer/fonts/open-sans-v15-latin-300.woff') format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('https://ninchat.com/customer/fonts/open-sans-v15-latin-regular.woff2') format('woff2'),
       url('https://ninchat.com/customer/fonts/open-sans-v15-latin-regular.woff') format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('https://ninchat.com/customer/fonts/open-sans-v15-latin-600.woff2') format('woff2'),
       url('https://ninchat.com/customer/fonts/open-sans-v15-latin-600.woff') format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('https://ninchat.com/customer/fonts/open-sans-v15-latin-700.woff2') format('woff2'),
       url('https://ninchat.com/customer/fonts/open-sans-v15-latin-700.woff') format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: url('https://ninchat.com/customer/fonts/open-sans-v15-latin-800.woff2') format('woff2'),
       url('https://ninchat.com/customer/fonts/open-sans-v15-latin-800.woff') format('woff');
}
@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 300;
  src: url('https://ninchat.com/customer/fonts/dosis-v26-latin-300.woff2') format('woff2'),
       url('https://ninchat.com/customer/fonts/dosis-v26-latin-300.woff') format('woff');
}
@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 400;
  src: url('https://ninchat.com/customer/fonts/dosis-v26-latin-regular.woff2') format('woff2'),
       url('https://ninchat.com/customer/fonts/dosis-v26-latin-regular.woff') format('woff');
}
@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 700;
  src: url('https://ninchat.com/customer/fonts/dosis-v26-latin-700.woff2') format('woff2'),
       url('https://ninchat.com/customer/fonts/dosis-v26-latin-700.woff') format('woff');
}
@font-face {
  font-family: 'Oxygen';
  font-style: normal;
  font-weight: 300;
  src: url('https://ninchat.com/customer/fonts/oxygen-v15-latin-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Oxygen';
  font-style: normal;
  font-weight: 400;
  src: url('https://ninchat.com/customer/fonts/oxygen-v15-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Oxygen';
  font-style: normal;
  font-weight: 700;
  src: url('https://ninchat.com/customer/fonts/oxygen-v15-latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  src: url('https://ninchat.com/customer/fonts/poppins-v13-latin-300.woff2') format('woff2'),
       url('https://ninchat.com/customer/fonts/poppins-v13-latin-300.woff') format('woff');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('https://ninchat.com/customer/fonts/poppins-v13-latin-regular.woff2') format('woff2'),
       url('https://ninchat.com/customer/fonts/poppins-v13-latin-regular.woff') format('woff');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url('https://ninchat.com/customer/fonts/poppins-v13-latin-700.woff2') format('woff2'),
       url('https://ninchat.com/customer/fonts/poppins-v13-latin-700.woff') format('woff');
}
@font-face {
  font-family: 'futuraicg';
  src: url(https://ninchat.com/customer/hivpoint/futuraicg.ttf) format('truetype');
  src: url(https://ninchat.com/customer/hivpoint/futuraicg.eot);
  src: url(https://ninchat.com/customer/hivpoint/futuraicg.eot?#iefix) format('embedded-opentype'),
       url(https://ninchat.com/customer/hivpoint/futuraicg.woff) format('woff');
}


/* Common styles */
 
#ninchat-iframe.ninchat-embed-container.ninchat-bottom.ninchat-open,
#ninchat-iframe.ninchat-embed-container.ninchat-bottom.ninchat-full         { box-shadow: 0 0 20px rgba(0,0,0,0.3); }

#ninchat-iframe.ninchat-embed-container.ninchat-bottom > .ninchat-titlebar .ninchat-action { line-height: 1; padding: 0; }
#ninchat-iframe.ninchat-embed-container.ninchat-bottom.ninchat-full > .ninchat-titlebar > .ninchat-action.ninchat-full-height { transform: rotate(180deg); }
 
body.embedded                             { color: #353535; font: normal 400 14px "futuraicg", 'Oxygen',  Arial, sans-serif; }
body.embedded #main                       { background: #fff; padding: 10px;}
body.embedded #embed-welcome              { padding: 10px; }
body.embedded a                           { color: #E6051E; }
body.embedded a:hover                     { color: #E6051E; }
body.embedded strong                      { font-weight: 600; }
body.embedded .btn, .fa-2x                { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; }


/* Queues */
 
.welcome                                  { padding: 20px 0 30px; text-align: center; font-size: 18px; font-weight: 400; color: #00325a;}
.welcome img                              { display: block; margin: 0 auto 10px; }
 
body.embedded #queues li                  { padding: 5px 0 0; }
 
body.embedded #queues .btn,
nui-questionnaire .nui-btn.highlight      { border: 0; font: normal 700 14px "futuraicg", "Poppins", sans-serif !important; padding: 12px 0; margin: auto; text-transform: uppercase; }
body.embedded #queues .btn-success,
nui-questionnaire .nui-btn.highlight      { background-color: #333; border: solid 2px #333; color: #fff !important; }
body.embedded #queues .btn-success:hover,
nui-questionnaire .nui-btn.highlight:hover{ background-color: #111; border: solid 2px #111; color: #fff !important;}
body.embedded #queues .btn-danger         { background-color: transparent; border: solid 2px #929496; color: #929496; font-weight: 500 !important;}
body.embedded #queues .btn-danger:hover   { background-color: transparent; border: solid 2px #929496; color: #929496;   }
 
.motd                                     { font-size: 14px; padding: 20px 10px; text-align: center; color: #646668;}

 
/* No queues */
 
.no-queues-open                           { text-align: center; margin-top: 20px;}
.no-queues-open h4                        { margin-bottom: 20px; }
.no-queues-open strong                    { font-size: 16px; padding-top: 20px;}

 
/* Chat */
 
.alert                                    { margin-bottom: 0; }
.alert-info                               { background-color: transparent; border: 0; color: #000;  padding: 10px 8px; text-align: center; }
body.embedded .alert.queued               { font: normal 700 18px "futuraicg", "Oxygen", sans-serif !important; color: #313d3f;  padding: 30px 15px 15px; }
body.embedded .alert.queued .fa           { font-size: 24px; color: #333; }
body.embedded .alert.queued .fa + span    { display: block; margin-top: 15px; }
#channels .channel .backlog .username     { padding-top: 2px; font-weight: 600; font-size: 14px; }
#channels .channel .backlog .message      { padding: 5px 8px; line-height: 1.4em; clear: both; }

 
/* Rating */
 
body.embedded #rating                     { padding: 50px 20px 0; text-align: center; }
body.embedded #rating p                   { font-size: 16px; margin-bottom: 20px; }
body.embedded #rating p small             { font-size: 14px; color: #179f96; }
 
body.embedded #rating .fa-2x              { font-size: 3.5em; }
body.embedded #rating .fa-2x:hover        { transform: scale(1.08, 1.08); transition-duration: .5s; }
body.embedded #rating .rate--1            { float: right; }
body.embedded #rating .rate-0             { float: right; }
body.embedded #rating .ratings + div      { margin-top: 50px; font-size: 12px; }
 
 
/* Command */
 
.main nui-commandline .nui-form .action[type=submit]        { border-color: #e6051e; line-height: 28px !important;}
.nui-btn.icon:hover                                         { color: #e6051e; }
.ni-send:before                                             { color: #e6051e; }
.nui-main nui-commandline .nui-form,
nui-commandline .nui-form                                   { background-color: white !important; }


/* Questionnaire */

.nui-form .nui-group label                                  { color: #646464; cursor: default; }
.nui-form .nui-group textarea                               { border: 1px solid #bbb; }
nui-questionnaire .nui-btn.highlight                        { border-radius: 0; padding: 12px; }
.nui-main .nui-form, .nui-view, .nui-form                   { background-color: #fff; }

form[name="questionnaireForm"]                              { text-align: center; padding: 10px 25px; max-width: 400px; margin-top: 0; margin-left: auto; margin-right: auto; padding: 25px 25px 20px; overflow: auto; }
form[name="questionnaireForm"] .nui-group                   { margin-bottom: 25px; text-align: left; }
form[name="questionnaireForm"] img                          { max-width: 90%; }

.nui-main .nui-form .nui-group label,
.nui-view .nui-group label, .nui-form .nui-group label      { color: #000; margin: 10px 0; text-align: left; }
.nui-form p p                                               { font-weight: 400; }                
                                     
body.embedded .no-queues-open:before,
body.embedded #rating > p:before,
.container.audience-registered:before,
body.embedded .alert.queued .fa + span:before,
form[name="questionnaireForm"] > div:first-of-type::before  { content: 'Hivpoint botti'; display: block; background: #fff url(https://ninchat.s3.amazonaws.com/b/hivpoint/hivpoint-bot.png) 0 50% / 40px no-repeat; background-size: 40px 40px; height: 40px; width: auto; border-radius: 0; margin: 0 0 10px; padding: 8px 0 0 50px; font-family: "futuraicg", "Poppins", sans-serif; font-size: 16px; font-weight: 600; text-align: left; line-height: 35px; }
              
body.embedded .no-queues-open:before,              
body.embedded #rating > p:before,              
body.embedded .alert.queued .fa + span:before,              
.container.audience-registered:before                       { position: absolute; top: -50px; left: 0; padding: 11px 0 0 47px; }
              
body.embedded .alert.queued .fa + span                      { background-color: #ebebeb; border: solid 1px #ebebeb; border-radius: 0 15px 15px 15px; margin-top: 60px; margin-bottom: 0; padding: 12px 16px; position: relative; }

body.embedded #rating p,              
body.embedded .bot-bubble,              
body.embedded .nui-form .nui-group:not(.checkbox) label,    
.container.audience-registered,              
form[name="questionnaireForm"] > div > .nui-group > p > p   { background-color: #ebebeb; border: solid 1px #ebebeb; border-radius: 0 15px 15px 15px; margin-top: 0; margin-bottom: 0; padding: 12px 16px; position: relative; }
form[name="questionnaireForm"] > div > .nui-group > p strong{ color: #e6212f; font-weight: 700; }
form[name="questionnaireForm"] > div > .nui-group > p img   { max-width: 100%; }
              
.nui-form .nui-group label                                  { color: #333; text-align: left; margin-bottom: 5px !important; }
.nui-form p                                                 { margin: 0 auto; line-height: 1.45; }
.nui-form hr                                                { border-top: 1px solid #dcc2e2; }
.nui-form .fa                                               { vertical-align: middle; }

form[name="questionnaireForm"] .nui-group:not(.checkbox) .nui-btn.normal:not(.highlight)        { background-color: #fff; border: solid 2px #333; color: #000 !important; padding: 4px !important; border-radius: 0; font: normal 700 14px "futuraicg", "Poppins", sans-serif !important; margin: 10px auto; text-transform: none; }
form[name="questionnaireForm"] .nui-group:not(.checkbox) .nui-btn.normal:not(.highlight):hover  { background-color: #333 !important; border: solid 2px #333 !important; color: #fff !important; }
.nui-btn.normal                                             { background-color: #333; border: solid 2px #333; border-radius: 0; color: #fff !important; font: normal 700 14px "futuraicg", "Poppins", sans-serif !important; padding: 12px 0; margin: 10px auto; text-transform: uppercase; }
.nui-btn.normal:hover                                       { background-color: #111; border: solid 2px #111; color: #fff !important; }

nui-questionnaire .nui-group > button#saitko-tietoa.nui-btn.normal.selected:not(.highlight),
nui-questionnaire .nui-group > button#v-henik-huoli.nui-btn.normal.selected:not(.highlight),
nui-questionnaire .nui-group > button#saitko-tietoa.nui-btn.normal.selected:not(.highlight):active,
nui-questionnaire .nui-group > button#v-henik-huoli.nui-btn.normal.selected:not(.highlight):active { box-shadow: 0 0 0 2px #000 !important; opacity: 1; }

form[name="questionnaireForm"].nui-form .nui-group:not(.checkbox) label { color: #ebebeb; font-weight: 400; cursor: default; }

nui-questionnaire .nui-form .checkbox                       { padding-bottom: 1px; }

.bot-bubble,
form[name="questionnaireForm"].nui-form .nui-group:not(.checkbox) label,
form[name="questionnaireForm"] > div > .nui-group > p > p   {  width: 15%; display: inline-block;  height: 40px; color: #ebebeb; overflow: hidden; animation-name: botBubbleAnimation; animation-fill-mode: forwards; animation-duration: 0.6s; animation-delay: 0.4s; }

.bot-bubble a,
.nui-form .nui-group label a                                { opacity: 0; color: #ebebeb; font-weight: 500; animation-name: botBubbleLinkAnimation; animation-fill-mode: forwards; animation-duration: 0.6s; animation-delay: 0.4s; }

form[name="questionnaireForm"] > div > .nui-group > p a:not(.btn-bordered)     { opacity: 0; color: #e6212f; animation-name: botBubbleLinkAnimation; animation-fill-mode: forwards; animation-duration: 0.6s; animation-delay: 0.0s; }
            
.bot-bubble strong,            
.nui-form .nui-group label strong,            
form[name="questionnaireForm"] > div > .nui-group > p strong { opacity: 0; color: #ebebeb; animation-name: botBubbleStrongAnimation; animation-fill-mode: forwards; animation-duration: 0.6s; animation-delay: 0.4s; }
.bot-bubble h3.alert-title,            
.nui-form .nui-group label h3.alert-title                    { opacity: 0; color: #ebebeb; animation-name: botBubbleAlertAnimation; animation-fill-mode: forwards; animation-duration: 0.6s; animation-delay: 0.4s; }
.bot-bubble::before,            
.nui-form .nui-group:not(.checkbox) label::before,
form[name="questionnaireForm"] > div > .nui-group > p > p::before { color: #333; content: ''; font-weight: 600; animation-name: botBubbleContentAnimation; animation-fill-mode: forwards; animation-duration: 0.4s; }
        
body.embedded .alert.alert-info,        
body.embedded nui-backlog .message                           { opacity: 0; transform: translateY(-20px); animation-name: messageAnimation; animation-fill-mode: forwards; animation-duration: 0.4s; }
        
ul#queues li a,
form[name="questionnaireForm"] .nui-group .nui-btn.normal,
.nui-btn.normal,
.nui-form .nui-group textarea,
.nui-form .nui-group input[type="text"].block,
nui-questionnaire .nui-form .nui-group.checkbox,
nui-questionnaire .nui-form .nui-group select,
nui-questionnaire .nui-form .btn-bordered                                      { transform: translateY(20px); opacity: 0; animation-name: buttonAnimation; animation-fill-mode: forwards; animation-duration: 0.4s; }


/* Animations */

ul#queues li a:nth-of-type(1)                                                  { animation-delay: 0s; }
form[name="questionnaireForm"] > div > .nui-group > p > p:nth-of-type(1)       { animation-delay: 0.0s; } 
form[name="questionnaireForm"] > div > .nui-group > p > p:nth-of-type(2)       { animation-delay: 0.5s; }
form[name="questionnaireForm"] > div > .nui-group > p > p:nth-of-type(3)       { animation-delay: 1.0s; }
form[name="questionnaireForm"] > div > .nui-group > p > p:nth-of-type(4)       { animation-delay: 1.5s; }
form[name="questionnaireForm"] > div > .nui-group > p > p:nth-of-type(5)       { animation-delay: 2.0s; }

nui-questionnaire .nui-form > div:nth-of-type(2) > .nui-group > p > p          { animation-delay: 0.5s; }
nui-questionnaire .nui-form > div:nth-of-type(3) > .nui-group > p > p          { animation-delay: 1.0s; }
nui-questionnaire .nui-form > div:nth-of-type(4) > .nui-group > p > p          { animation-delay: 1.5s; }

nui-questionnaire .nui-form > div:nth-of-type(2) > .nui-group > p > p > a      { animation-delay: 0.5s; }
nui-questionnaire .nui-form > div:nth-of-type(3) > .nui-group > p > p > a      { animation-delay: 1.0s; }
nui-questionnaire .nui-form > div:nth-of-type(4) > .nui-group > p > p > a      { animation-delay: 1.5s; }

.nui-form .nui-group textarea,
.nui-form .nui-group input[type="text"].block,
form[name="questionnaireForm"] .nui-group:not(.checkbox) .nui-btn.normal:not(.highlight):nth-of-type(1),
nui-questionnaire .nui-form .nui-group select,
nui-questionnaire .nui-form > div:nth-of-type(1) .nui-group.checkbox           { animation-delay: 0.8s; }
ul#queues li a:nth-of-type(2),
ul#queues li:nth-of-type(2) a,
form[name="questionnaireForm"] .nui-group:not(.checkbox) .nui-btn.normal:not(.highlight):nth-of-type(2),
nui-questionnaire .nui-form > div:nth-of-type(2) .nui-group.checkbox           { animation-delay: 0.9s; }
form[name="questionnaireForm"] .nui-group:not(.checkbox) .nui-btn.normal:not(.highlight):nth-of-type(3),
nui-questionnaire .nui-form > div:nth-of-type(3) .nui-group.checkbox           { animation-delay: 1.0s; }
form[name="questionnaireForm"] .nui-group:not(.checkbox) .nui-btn.normal:not(.highlight):nth-of-type(4),
nui-questionnaire .nui-form > div:nth-of-type(4) .nui-group.checkbox           { animation-delay: 1.1s; }
form[name="questionnaireForm"] .nui-group:not(.checkbox) .nui-btn.normal:not(.highlight):nth-of-type(5),
nui-questionnaire .nui-form > div:nth-of-type(5) .nui-group.checkbox           { animation-delay: 1.2s; }
form[name="questionnaireForm"] .nui-group:not(.checkbox) .nui-btn.normal:not(.highlight):nth-of-type(6),
nui-questionnaire .nui-form > div:nth-of-type(6) .nui-group.checkbox           { animation-delay: 1.3s; }
form[name="questionnaireForm"] .nui-group:not(.checkbox) .nui-btn.normal:not(.highlight):nth-of-type(7),
nui-questionnaire .nui-form > div:nth-of-type(7) .nui-group.checkbox           { animation-delay: 1.4s; }

form[name="questionnaireForm"] .nui-group:not(.checkbox) .nui-btn.normal:not(.highlight):nth-of-type(8)  { animation-delay: 1.5s; }
form[name="questionnaireForm"] .nui-group:not(.checkbox) .nui-btn.normal:not(.highlight):nth-of-type(9)  { animation-delay: 1.6s; }
form[name="questionnaireForm"] .nui-group:not(.checkbox) .nui-btn.normal:not(.highlight):nth-of-type(10) { animation-delay: 1.7s; }
form[name="questionnaireForm"] .nui-group:not(.checkbox) .nui-btn.normal:not(.highlight):nth-of-type(11) { animation-delay: 1.8s; }
form[name="questionnaireForm"] .nui-group:not(.checkbox) .nui-btn.normal:not(.highlight):nth-of-type(12) { animation-delay: 1.9s; }

@keyframes botBubbleAnimation                               { 0% { width: 15%; height: 40px; color: #ebebeb; } 50% { width: 100%; height: 40px; color: #ebebeb; } 100% { width: 100%; height: 100%; color: #2b333d; } }
@keyframes botSmallBubbleAnimation                          { 0% { width: auto; height: 40px; color: #ebf0f5; } 50% { width: auto; height: 40px; color: #ebf0f5; } 100% { width: auto; height: 100%; color: #2b333d; } }
@keyframes motdAnimation                                    { 0% { width: 0%; height: 0px; color: #ebebeb; padding: 0px; } 50% { width: 100%; height: 40px; color: #ebebeb; padding: 12px 16px; } 100% { width: 100%; height: 100%; color: #2b333d; padding: 12px 16px; } }
@keyframes botBubbleStrongAnimation                         { 0% { opacity: 0; color: #ebebeb; } 50% { opacity: 0; color: #ebebeb; } 100% { opacity: 1; color: #06c; } }
@keyframes botBubbleLinkAnimation                           { 0% { opacity: 0; color: #ebebeb; } 50% { opacity: 0; color: #ebebeb; } 100% { opacity: 1; color: #06c; } }
@keyframes botBubbleLinkAnimation2                          { 0% { opacity: 0; background-color: #ebebeb; color: #ebebeb; border: solid 2px #ebebeb; } 50% { opacity: 0; background-color: #ebebeb; color: #ebebeb; border: solid 2px #ebebeb; } 100% { opacity: 1; background-color: #06c; color: #fff; border: solid 2px #06c; } }
@keyframes botBubbleAlertAnimation                          { 0% { opacity: 0; color: #ebebeb; } 50% { opacity: 0; color: #ebebeb; } 100% { opacity: 1; color: #df412e; } }
@keyframes botBubbleContentAnimation                        { 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
@keyframes messageAnimation                                 { 0% { transform: translateY(-20px); opacity: 0; } 100% { transform: translateY(0px); opacity: 1; } }
@keyframes buttonAnimation                                  { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes viewZoom                                         { 0% { transform: scale(0.25); opacity: 0; } 75% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes viewZoom2                                        { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }


/* WCAG focusing */

#ninchat-iframe.ninchat-embed-container > .ninchat-titlebar > .ninchat-titlebar-toggle:focus, 
#ninchat-iframe.ninchat-embed-container > .ninchat-titlebar .ninchat-action:focus  { box-shadow: none; outline: solid 2px #000; outline-offset: -2px; }

nui-backlog .message>div:focus-visible { outline: solid 2px #000; }

form[name="questionnaireForm"] .nui-group  { padding: 2px; }
body.embedded a:focus-visible,
body.embedded nui-questionnaire .nui-form a:focus-visible { outline: solid 2px #000 !important; box-shadow: none; }
body.embedded .nui-btn:focus { outline: none !important; box-shadow: none; }
body.embedded .nui-btn:focus-visible { outline: solid 2px #000 !important; box-shadow: none; background-color: #fff !important; color: #000 !important; }
body.embedded .nui-btn.highlight:focus-visible { background-color: #fff !important; color: #000 !important; }
body.embedded nui-commandline .nui-form button[type=submit]:focus-visible { background-color: #fff !important; color: #000 !important; }

body.embedded #queues .btn-success:focus-visible { outline: solid 3px #E6051E !important; box-shadow: none; }

body.embedded .nui-btn.icon:focus-visible { background-color: #fff !important; color: #000 !important; }