body { background:#001f3d; }

/* HH customizations */
.base-video-chat-homecare .area-top-menu .module_body { width:100%; }

.area-page-container {
/*        width: unset;*/
}

.area-explicitcomponents { /*   .area-main-container { */
        all:unset;
    justify-self: center;
    align-self: start;
    width: 96%;
    padding: 0;/* 2% 2% 2%;*/
    margin: 1% 0 2% 0;
        display:grid;
        grid-template-columns: auto;
        grid-template-rows: auto auto;
        
        background-image: url('/userfiles/image/HELSINKI_Tunnus_VALKOINEN.png');
        background-repeat: no-repeat;
        background-position: center top;
        background-size: 40%;
	max-width:970px;        
}

body.sv .area-explicitcomponents {
        background-image: url('/userfiles/image/HELSINGFORS_Tunnus_VALKOINEN.png');
}

.area-explicitcomponents .ay-user-change-password input {
        width: 90% !important;
    min-width: 120px;
    max-width: 200px;
}

.area-basemenu{
        all:unset;
        grid-area: 1 / 1 / 2 / 2;
        margin-top:200px; /* make space for logo */
        display:grid;
        grid-template-columns: auto;
        justify-items: center;
        z-index: 1;
}
@media screen and (max-width: 1000px){ .area-basemenu { margin-top:170px; }}
@media screen and (max-width: 900px){ .area-basemenu { margin-top:150px; }}
@media screen and (max-width: 800px){ .area-basemenu { margin-top:120px; }}
@media screen and (max-width: 700px){ .area-basemenu { margin-top:100px; }}
@media screen and (max-width: 650px){ .area-basemenu { margin-top:90px; }}
@media screen and (max-width: 600px){ .area-basemenu { margin-top:80px; }}
@media screen and (max-width: 550px){ .area-basemenu { margin-top:70px; }}
@media screen and (max-width: 500px){ .area-basemenu { margin-top:65px; }}
@media screen and (max-width: 450px){ .area-basemenu { margin-top: 60px; }}
@media screen and (max-width: 400px){ .area-basemenu { margin-top: 60px; }}
@media screen and (max-width: 350px){ .area-basemenu { margin-top: 60px; }}
@media screen and (max-width: 300px){ .area-basemenu { margin-top: 60px; }}

.area-explicitcomponents #statusContainer{
        grid-area: unset;
        position:absolute;
        top:0;
        padding:1%;
}

.area-explicitcomponents .ay_body .ay_container { /* change pw */ 
        min-height: 200px; 
        background: #FFF; 
        padding: 2%; 
        width:96%;
} 

.wrap_ay_sys_mgt { 
        padding:15px;
        background-color: #FFFFFF;
}

.area-emergency-button-container{
        all:unset;
        grid-area: 2 / 1 / 3 / 2;
        z-index: 1;
}

.area-defaultcontainer{
        grid-area: 1 / 1 / 3 / 2;
        z-index: 2;
        margin:0;
        display: none;
        min-height: 545px;/* ensure we cover underlying stuff */
}

@media screen and (max-aspect-ratio: 9/8) {
        .area-defaultcontainer, 
        #video-area-container {
/*        background-color: #003f5d;*/
        }
}

.area-explicitcomponents #app {
        /* TODO: adjust in correct css under group-webrtc */
        width:unset !important;/* don;t limit group-call width, it scales accordingly*/
}

#inputSelectors { 
        color: #FFFFFF; 
        margin-top: 0px !important;
	margin-bottom:10px;
}

.webrtc-role-family #inputSelectors,
.webrtc-role-pro #inputSelectors {
        margin-top: 50px !important;
}

.webrtc-role-family.webrtc-init-call #inputSelectors,
.webrtc-role-pro.webrtc-init-call #inputSelectors,
.webrtc-role-family.webrtc-in-call #inputSelectors,
.webrtc-role-pro.webrtc-in-call #inputSelectors {
	color: var(--text-base);
}

#emergency-call-button { position: relative; bottom:unset; right:unset; text-align:center; }
#emergency-call-button button { font-size:5.0em !important; }
#emergency-call-button button.delete.approve span{padding:16px 24px !important; /*float:none;*/ border-radius: 16px !important;}
#emergency-call-button button.delete.approve span span{float:none;}

/* #call-options-search-container { */
/*      display:grid; */
/* } */

#call-options.call-options-find-room.view-compact { 
        min-height: 240px;
}
        
/* ensure button is not displayed when having a connection open */
.is-webrtc-displayed .area-emergency-button-container {
    display: none;
}

/* >= v1.6.5.1 */
.webrtc-init-call .area-defaultcontainer,
.webrtc-in-call .area-defaultcontainer{
	display:grid !important;
}

.webrtc-role-hcu .homecare-header { display:none; }

.ay-user-change-password {
	background: #fff;
	padding: 5px;
}

/* FS20261007 added for demo on test46 */
.user-info-wrapper { background: #eee; }

div[id^=inlineAjax] .ay_body,
div[id^=inlineAjax] .yg_body { background: #ddd; }

div[id^=inlineAjax] .ay_body { padding:8px; }
div[id^=inlineAjax] .yg_body > * { margin-left:8px; margin-right:8px; }

div[id^=inlineAjax] .yg_body td { background:unset !important; }


.indent-2 .group-name .toggle-group-info { margin-left:40px; }
.indent-3 .group-name .toggle-group-info { margin-left:80px; }
.indent-4 .group-name .toggle-group-info { margin-left:120px; }
.indent-5 .group-name .toggle-group-info { margin-left:160px; }
.indent-6 .group-name .toggle-group-info { margin-left:200px; }
.indent-7 .group-name .toggle-group-info { margin-left:240px; }
.indent-8 .group-name .toggle-group-info { margin-left:280px; }
.indent-9 .group-name .toggle-group-info { margin-left:320px; }
.indent-10 .group-name .toggle-group-info { margin-left:360px; }

.indent-2 .group-info-wrapper { margin-left:80px; }
.indent-3 .group-info-wrapper { margin-left:120px; }
.indent-4 .group-info-wrapper { margin-left:160px; }
.indent-5 .group-info-wrapper { margin-left:200px; }
.indent-6 .group-info-wrapper { margin-left:240px; }
.indent-7 .group-info-wrapper { margin-left:280px; }
.indent-8 .group-info-wrapper { margin-left:320px; }
.indent-9 .group-info-wrapper { margin-left:360px; }
.indent-10 .group-info-wrapper {        margin-left:400px; }

.appVideoChat .call-options-wrapper-display .error { font-size:3em; text-wrap: balance; }

.participant-quit.fas.fa-phone-slash {
  background: #d22d2d;
  width: 48px;
  aspect-ratio: 1;
  border: none;
  border-radius: 8px;
  font-size: 28px;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}

.users-list .role {
	font-size: 0.7em !important;
	line-height:2em;
}