@font-face {
    font-family: Oxygen;
    src: url(oxygen/Oxygen-Regular.ttf);
}
@font-face {
    font-family: Oxygen;
    src: url(oxygen/Oxygen-Bold.ttf);
    font-weight: bold;
}
* {
        -webkit-user-select: none; /* Safari */
        -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* IE10+/Edge */
        user-select: none; /* Standard */
}
html {
    -webkit-text-size-adjust: 100%;
}
html, body {
	height: 100%;
	width: 100%;
    overflow: hidden;
    margin: 0;
    font-family: "Oxygen", Helvetica, Roboto, Arial, sans-serif;
    font-size: 14px;
}
input:focus,
select:focus,
textarea:focus,
button:focus,
span:focus,
div:focus,
img:focus,
a:focus {
    outline: 0;
}
input.radius {
    border-radius: 5px;
}
.label {
	font-weight: bold;
	border-radius: 2px;
}
.selectable-text {
        -webkit-user-select: text; /* Safari */
        -moz-user-select: text; /* Firefox */
        -ms-user-select: text; /* IE10+/Edge */
        user-select: text; /* Standard */
}
#gui-templates {
    display: none;
}
.basic-row {
	display: table;
    table-layout: fixed;
    width: 100%;
}
.basic-row.half-height {
	height: 50%;
}
.basic-column {
    height: 100%;
    overflow: hidden;
    display: table-cell;
    position: relative;
    text-align: center;
    vertical-align: middle;
}
.basic-column-text {
    height: 100%;
    overflow: hidden;
    display: list-item;
    position: relative;
    text-align: center;
    vertical-align: middle;
}
.single-select {
    height: 100%;
    overflow: hidden;
    display: table-cell;
    position: relative;
    text-align: center;
    vertical-align: middle;
 }
.test-version {
    text-align: center;
}
.triangle {
	position: absolute;
	display: none;
	width: 20px;
	height: 20px;
	background-size: 20px;
}
.triangle.triangle-left {
	background: url("images/triangle-left.png") center center no-repeat;
	left: -19px;
}
.triangle.triangle-right {
	background: url("images/triangle-right.png") center center no-repeat;
	right: -19px;
}
.triangle.triangle-top {
	background: url("images/triangle-top.png") center center no-repeat;
	top: -19px;
}
.triangle.triangle-bottom {
	background: url("images/triangle-bottom.png") center center no-repeat;
	bottom: -19px;
	overflow: hidden;
}
.dialog-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    display: none;
    /*cursor: pointer;*/
}
.my-dialog {
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 0;
    right: 0; 
    margin: auto; 
    width: 80%;
    max-width: 300px;
    min-width: 250px;
    max-height: 70%;
    display: none;
}
.my-dialog-custom {
    position: absolute;
    top: 50%;
    left: 0px;
    transform: none;
    max-width: 500px;
    min-width: 25px;
    max-height: 70%;
    display: none;
}
.my-dialog-inner {
    width: 100%;
    border-radius: 5px;
    background: rgb(255, 255, 255);
    box-shadow: rgb(51, 51, 51) 1px 1px 10px;
    border: 1px solid rgb(101, 101, 101);
}
.my-dialog-content {
    padding: 20px;
}
.my-dialog-buttons {
    width: 100%;
    display: none;
}
.my-dialog-buttons-inner {
    padding: 20px;
    padding-top: 0;
}

.alert-dialog-button-ok {
    float: left;
    margin-right: 10%;
}
.alert-dialog-buttons .my-button {
    width: 100%;
    padding: 5px;
    margin-bottom: 15px;
}

.alert-dialog-buttons .my-button:last-child {
    margin-bottom: 0px;
}
.alert-dialog-buttons-link .my-button {
    width: 100%;
    padding: 5px;
    margin-bottom: 15px;
}

.alert-dialog-buttons-link .my-button:last-child {
    margin-bottom: 0px;
}
.alert-dialog-buttons-link-ios .my-button {
    width: 100%;
    padding: 5px;
    margin-bottom: 15px;
}

.alert-dialog-buttons-link-ios .my-button:last-child {
    margin-bottom: 0px;
}
#link-update{
    display: inline-block;
    width:100%;
    font-weight: bold;
    
}
.layout-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.6);
    top: 0;
    display: none;
    z-index: 1;
}
#main-layout {
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column;
    /*display: table;*/
}
#top-layout {
    position: relative;
    min-height: 50px;
    height: 50px;
    width: 100%;
    flex-grow: 3;
    max-height: 70px;
    /*display: table-row;*/
    display: none;
    font-weight: bold;
    background-color: #1b4c6d;
    color: #FFF;
}
.max-content-width.top-layout-inner {
    position: relative;
    vertical-align: middle;
    height: 100%;
}
.max-content-width, .page-content {
    margin: auto;
    max-width: 500px;
}
#center-layout {
    background-color: #F9F9F9;
    background: transparent url(images/greyzz.png) repeat scroll 0% 0%;
    /*display: table-row;*/
    height: 100%;
    color: #555;
    /*top: 50px;
    bottom: 50px;*/
    flex: 1 1 auto;
    position: relative;
}
#bottom-layout {
    height: 60px;
    width: 100%;
    background-color: #E7E7E7;
    /*display: table-row;*/
    display: inline-block;
    height: auto;
    display: none;
    font-size: 12px;
    position: relative;
    box-shadow: 0px 0px 15px 0px #0a0a0a75;
}
#bottom-layout .bottom-container {
	display: none;
	height: 100%;
}
#bottom-layout .warning-text {
    text-align: center;
    vertical-align: middle;
    padding-top: 15px;
    padding-bottom: 15px;
    height: 100%;
    color: #887219;
    background-color: #fdfae5;
    font-weight: bold;
}

#bottom-layout .join-booking-bottom {
    height: 50px;
}

#bottom-layout .join-booking-btn-wrapper {
    text-align: center;
    padding: 10px 0;
    border-bottom: #CCC solid 1px;
    display: "none";
}
#bottom-layout .booking-id-container .join-booking-btn-wrapper {
    text-align: center;
    padding: 10px 0;
    border-bottom: #CCC solid 1px;
    display: "block";
}
.nav-btn {
    display: none;
    font-size: 12px;
}
.nav-btn:hover {
    /*cursor: pointer;*/
}
.nav-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 15px;
    position: absolute;
    height: 100%;
    width: 100%;
    text-align: center;
    vertical-align: middle;
    line-height: 50px;
    font-size: 16px;
}
.nav-button-image {
    width: 20px;
    height: 20px;
    background: url(images/noimage.png) no-repeat left center;
    background-size: 15px;
}
.nav-left-btn {
    /*position: absolute;
    left: 0;*/
    position: relative;
    float: left;
    
    height: 100%;
}
.nav-right-btn {
    position: absolute;
    right: 0;
    height: 100%;
}
.nav-btn.my-button {
	height: 100%;
	padding-top: 12px;
	width: 100%;
}
.nav-systemchooser-btn .my-button-text {
    max-width: 80px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

#navigation-bar {
    background-color: #fefefe;
    border-top: 0.1em solid #a3a3a3
}

#navigation-bar-tabs {
    height: 60px;
    margin: auto;
    max-width: 500px;
    bottom: 0%;
    display: block;
}

.navigation-bar-tab {
    text-align: center;
    cursor: pointer;
}


.navigation-bar-tab-selected-text{
    color : #00b3f9;
}



.tab-icon{
    height: 30px;
    width: 30px;
    margin: auto;
}

#navigation-bar-tab-home-selected {
    background-image: url(images/home_selected.svg);
}

#navigation-bar-tab-home-deselected {
    background-image: url(images/home_deselected.svg);
}

#navigation-bar-tab-chat-selected {
    background-image: url(images/chat_selected.svg);
}

#navigation-bar-tab-chat-deselected{
    background-image: url(images/chat_deselected.svg);
}


#navigation-bar-tab-cases-selected {
    background-image: url(images/case_selected.svg);
}

#navigation-bar-tab-cases-deselected{
    background-image: url(images/case_deselected.svg);
}

#navigation-bar-tab-settings-selected {
    background-image: url(images/settings_selected.svg);
}

#navigation-bar-tab-settings-deselected{
    background-image: url(images/settings_deselected.svg);
}
/* .footer-container {
    position: sticky;
    bottom: 0px;
    margin: auto;
    max-width: 500px;
} */


/* .footer-container {
    position: relative;
    margin: auto;
    max-width: 500px;
    height: 100px;
} */

.footer-container {
    /* max-height: 100px; */
    max-height: 200px;
    margin: auto;
    max-width: 500px;

}

.footer-content {
    position: absolute;
    bottom: 0px;
    max-width: 500px;
    width: 100%;
}

.footer-blur {
    height: 30px;
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom,  from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}

.page {
	display: none;
    left: 100%;
    top: 0;
    bottom: 0;
    position: absolute;
    width: 100%;
    /*height: 100%;*/
}
.page-inner {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: auto;
    

    /* overflow: inherit; */
    /*overflow-y: auto;
	-webkit-overflow-scrolling: touch;*/
}
.page-content-wrapper {
    padding-bottom: 10px;
}


.page-content {
    height: 100%;
    position: relative;
    overflow-y: auto;
    z-index: 1;
	-webkit-overflow-scrolling: touch;
    -ms-overflow-style: none; 
    scrollbar-width: none;
    
}
.login-page .page-content::-webkit-scrollbar {
    display: none;
}

.page-main-header {
	text-align: center;
	font-weight: bold;
	font-size: 20px;
	color: #0071bc;
	padding: 20px 0;
	padding-bottom: 10px;
}
.page-description {
	font-size: 14px;
	text-align: center;
    color: #666;
    padding: 0 20px;
}
#main-loading-view {
	width: 100%;
    height: 100%;
    position: absolute;
    z-index: 100;
    background-color: #F9F9F9;
    /*background: transparent url(images/greyzz.png) repeat scroll 0% 0%;*/
    top: 0;
    left: 0;
}
#main-loading-view .loading-indicator-wrapper {
    position: absolute;
    top: 35%;
    width: 100%;
}
.loading-indicator {
    width: 200px;
    height: 200px;
    background: url(images/snake_loader_blue_trans_100.svg) no-repeat center center;
    background-size: 50px;
    margin: auto;
}
.screen-loading-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.6);
    top: 0;
    display: none;
    z-index: 1;
}
.screen-loading-overlay-image {
    width: 100px;
    height: 20px;
    background: url(images/fountain_loader_blue_trans_100.svg) no-repeat center center;
    background-size: 80px;
    background-color: #FFF;
    border-radius: 50px;
    box-shadow: 1px 1px 10px #CCC;
    top: 0;
    margin: auto;
    margin-top: 20px;
}
.screen-loading-overlay-content {
    margin: auto;
    max-width: 400px;
}
.screen-loading-overlay-info {
    background-color: #444;
    border-radius: 5px;
    box-shadow: 1px 1px 10px #CCC;
    top: 0;
    margin: 20px;
    padding: 10px;
    text-align: center;
    color: #FFF;
}
.menu-list {
    color: #555;
    padding-bottom: 60px;
}
.menu-list-margin {
	margin: 20px 0px;
}
.menu-list .menu-list-element {

}

#main-menu-wrapper .menu-list-separator {
    display: none;
}

.menu-list-title-wrapper .menu-title {
    font-size: 1.3em;
}
.menu-list .menu-list-element {
    height: 50px;
    cursor: pointer;
    margin: 10px 0;
    border-radius: 5px;
}
/*.menu-list-element.enabled:hover {
.menu-list-element.enabled {
    cursor: pointer;
    touch-action: none;
}
*/
.menu-list .menu-list-element:active, .booking-card .menu-list-element:active, .files-page-content .file-field:active {
    /*background-color: rgba(0,0,0,.1);*/
    opacity: 0.7;
}

.menu-list-title-wrapper{
    min-width: 250px;
    margin-left: 20px;
}

.menu-list-separator {
    height: 1px;
    background: #E7E7E7;
}
.menu-list-section-divider {
    height: 40px;
}
.menu-list-element .menu-list-element-text {
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 10px;
}
.menu-list-element .menu-list-element-icon-left {
    width: 50px;
    background: url(images/noimage.png) no-repeat center center;
    background-size: 25px;
}
.menu-list-element .menu-list-element-icon-right {
    width: 50px;
}
.menu-list-element.enabled .menu-list-element-icon-right {
    background: url(images/arrow-right-blue_40.png) no-repeat center center;
    background-size: 20px;
}
a.menu-list-element .menu-list-element-text {
	color: #555;
}
a.menu-list-element.enabled .menu-list-element-icon-right {
    background: url(images/external_link_black.svg) no-repeat center center;
    background-size: 20px;
}

	
.menu-list-question .menu-list-question-text {
    text-align: left;
    padding: 15px 10px 15px 0;
}

.menu-list-question .menu-list-question-buttons {
    text-align: right;
    padding: 20px;
    vertical-align: top;
    padding-bottom: 30px;
}
.menu-list-question .menu-list-question-login-text {
    text-align: left;
    padding: 15px 20px 15px 35px;
}
.menu-list-question span {
    display: block;
    color: #999999;
    font-size: 12px;
}


.menu-list-element-with-subtext{
    padding-top: 10px;
    padding-bottom: 10px;
}

.menu-list-element-header{
    font-weight: bold;
}

.menu-list-element-subtext{
    font-weight: normal;
}

.menu-title{
    font-weight: bold;
}

.menu-ingress {
    color: #484848;
    font-weight: normal;
}

.progress-bar {
    width: 100%;
    height: 10px;
    border-radius: 50px;
    background-color: #AAA;
}
.progress-bar-inner {
    width: 0%;
    border-radius: 50px;
    height: 100%;
    border-radius: 50px;
    background-color: #4eabe9;
}

.progress-indicator {
    margin-top: 25px;
    margin-bottom: 20px;
    padding: 0 10px;
    display: none;
}
.progress-indicator > li span {
    font-size: 12px;
}
.mobile-app-toggle {
    border-radius: 25px;
    margin-bottom: 0;
}
.button.bold {
    font-weight: bold;
}
.mobile-app-toggle .button {
    font-weight: bold;
}
.button.round {
    border-radius: 50px;
}
.my-button.border {
    border: 2px solid #fefefe;
}
.my-button {
    /*cursor: pointer;*/
    color: #fefefe;
    transition: background-color 0.25s ease-out, color 0.25s ease-out;
    -webkit-appearance: none;
    padding: 0px 12px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    position: relative;
}
.my-button:active {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5);
    color: #ccc;
}
.my-button-inner {
    display: inline-block;
    vertical-align: middle;
}
.my-button-text {
    display: table-cell;
    padding: 5px 5px;
    font-weight: bold;
}

.my-button.bold .my-button-text {
	font-weight: 600;
}
.my-button-image {
    display: table-cell;
    width: 20px;
    height: 20px;
    background: url(images/noimage.png) no-repeat left center;
    background-size: 15px;
}
.my-button-image.left-sided {
    background-position: right center;
}
.my-button.round {
    border-radius: 50px;
}
.my-button.small {
    line-height: normal;
}
.my-button.medium {
    font-size: 16px;
}
.my-button.medium .my-button-image {
    width: 30px;
    background-size: 20px;
    background-position: right center;
}
.my-button.large {
    font-size: 16px;
    width: 100%;
    max-width: 300px;
    padding: 2px 0;
}
.my-button.gray {
    background-color: #666;
}
.my-button.blue {
    background-color: #1779ba;
}
.my-button.red {
    background-color: #FF002B;
}
.my-button.green {
    background-color: #2AB558;
}
.my-button-spinner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background: url(images/loading_fff_100.gif) no-repeat center;
    background-size: contain;
    animation: rotating 3s linear infinite;
}
@-webkit-keyframes rotating /* Safari and Chrome */ {
    from {
      -webkit-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @keyframes rotating {
    from {
      -ms-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -ms-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -webkit-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
.action-dialog-button {
    display: table;
    margin: 0 auto;
}
.action-dialog-button:not(:last-child) {
    margin-bottom: 15px;
}
.select-dialog-button {
    border-radius: 5px;
    padding: 5px 5px;
}
.select-dialog-button:hover {
    background-color: lightcyan;
    cursor: pointer;
}
.impersonate-dialog-button {
    border-radius: 5px;
    padding: 5px 5px;
    background: url(images/arrow-right-blue_40.png) no-repeat center right;
    background-size: 20px;
}
.impersonate-dialog-button:hover {
    background-color: lightcyan;
    cursor: pointer;
}

/* file upload section */

.file-upload {
	display: none;
	/*
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
	*/
}

.file-upload-btn {
	/*background-color: #1779ba;
	font-size: 16px;*/
	line-height: 1.9;
	padding-left: 19px;
	padding-right: 19px;
	padding-bottom: 1px;

}

.menu-list-question-input:last-child > * {
	margin-bottom: 20px;
}

.center-content {
	text-align: center;
}

.file-item {
	margin-bottom: 15px;
}

.file-item .preview {
	background-color: transparent;
	width: 70px;
	padding: /*19px */0;
	vertical-align: middle !important;
	text-align: center;
} 
.file-item .file-name {
	padding-left: 25px;
	padding-top: 23px;
	font-weight: bold;
	word-break: break-word;
}

.upload-file-delete {
	width: 30px/*25px*/;
}

.thumb {
	/*height: 75px;*/
	/*border: 1px solid #000;*/
	margin: 0/*10px 5px 0 0*/;
    object-fit:contain;
    max-width:70px;
}

.menu-list-question .thumb {
    height: 75px;
	margin: 10px 5px 0 0;
}

.max-number-of-files-info{
	display: none;
}

.rotated90 {
	-webkit-transform: rotate(90deg);/* translate(0, -100%);*/
	-moz-transform: rotate(90deg);/* translate(0, -100%);*/
	-o-transform: rotate(90deg);/* translate(0, -100%);*/
	-ms-transform: rotate(90deg);/* translate(0, -100%);*/
	transform: rotate(90deg);/* translate(0, -100%);*/
}
.rotated180 {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
}
.rotated270 {
	-webkit-transform: rotate(270deg);
	-moz-transform: rotate(270deg);
	-o-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	transform: rotate(270deg);
}


/* end file upload section */

.tooltip-container {
    position: absolute;
    max-width: 250px;
    display: none;
    text-align: left;
    padding: 5px 10px;
    background-color: #444;
    color: #FFF;
    font-size: 12px;
}

.overlay-style {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: 0 4px 16px rgba(0,0,0,.2);
    -moz-box-shadow: 0 4px 16px rgba(0,0,0,.2);
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
    background-clip: padding-box;
    border-radius: 3px;
    outline: 0;
}

.nav-back-btn .back-image {
    background-image: url(images/arrow-left-white_30.png);
}

.nav-warning-btn .warning-image {
    background-image: url(images/attention_red_white_border.svg);
    width: 25px;
    height: 25px;
    background-size: 25px;
    vertical-align: middle;
    filter: drop-shadow(0px 0px 10px #000);
}

.warning-dialog .warning-image-container {
    height: 50px;
    margin-bottom: 10px;
}
.warning-dialog .warning-image {
    background: url(images/attention-orange_50.png) no-repeat center center;
    width: 50px;
    background-size: 40px;
}
.warning-dialog .text-left {
    text-align: left;
}

.nav-cancel-btn .cancel-image {
    background-image: url(images/cross-white_30.png);
}
.nav-logout-btn .logout-image {
    background-image: url(images/logout-white_50.png);
}
.nav-download-btn .download-image{
    background-image: url(images/arrow-down-blue_40.png);
}

.continue-image {
    background-image: url(images/arrow-right-white_30.png);
}

input.invalidvalue {
 /*   background-color: #e36363 !important;
    border-color: black !important;
    */
 	border-color: #e36363 !important;
}

.no-result {
	display: none;
}
.profile-image {
    background: url(images/profile_image_placeholder_30.png) no-repeat center center;
    background-size: 30px;
    width: 30px;
    height: 30px;
    border-radius: 50px;
    margin: auto;
    top: 5px;
    left: 10px;
    position: absolute;
}

.info-icon-column {
    width: 40px;
    background: url(images/infoicondiscreet.png) no-repeat center center;
    background-size: 20px;
}

.max-width-and-center {
    max-width: 300px;
    margin: auto;
}

.page-standard-padding {
    padding: 0 20px;
    padding-bottom: 60px;
    /*padding-bottom: env(safe-area-inset-bottom);*/
}

.page-safe-area-top-padding {

}

.total-counter {
    padding-top: 20px;
    text-align: center;
}

.menu-list-element-indication {
    width: 15px;
    height: 15px;
    background: #ffce00;
    border-radius: 50px;
    display: none;
    position: absolute;
    top: 5px;
    right: 5px;
    border: 1px solid #ffd900;
    -webkit-box-shadow: 0 5px 2px rgb(0 0 0 / 30%);
    -moz-box-shadow: 0 5px 2px rgba(0,0,0,.3);
    box-shadow: 0 5px 2px rgb(0 0 0 / 30%);
}

.tab-indication {
    width: 15px;
    height: 15px;
    background: #ffce00;
    border-radius: 50px;
    display: none;
    position: absolute;
    top: -5px;
    left: 53%;
    border: 1px solid #ffd900;
    z-index: 1;
    -webkit-box-shadow: 0 5px 2px rgb(0 0 0 / 30%);
    -moz-box-shadow: 0 5px 2px rgba(0,0,0,.3);
    box-shadow: 0 5px 2px rgb(0 0 0 / 30%);
}

/* call-view */
#videoview {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 110;
    display: none;
    /*background: linear-gradient(#000, rgba(74, 74, 74, 0.6));*/
    background: #111;
    left: 100%;
}

video#remoteVideo {
    width: 100%;
    height: 100%;
    background-color: black;
}

.video-controls-bar {
    position: absolute;
    display: flex;
    flex-direction: row;
    padding: 0 10px;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    /*height: 40px;
    bottom: 0;
    right: 0;
    left: 0;*/
    z-index: 1000;
    /*background-color: #222;*/
    background: linear-gradient(#161616, #282828);
}
.video-controls-bar div {
    margin-left: 5px;
    margin-right: 5px;
}

.video-controls-bar div:hover:not(:last-child) {
    opacity: 0.7;
    cursor: pointer;
}
.video-controls-bar div:active:not(:last-child) {
    opacity: 0.5;
    cursor: pointer;
}

.video-controls-text {
    color: #eee;
    font-size: 11px;
    transform: translateY(-4px);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.video-controls-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100px;
}

.has-parts-with-no-video .video-elements-inner {
	top: 91px;
}

.video-elements-inner {
	position: absolute;
	top: 40px;
	bottom: 0px;
	left: 0;
	right: 0;
	display: grid;
	grid-template-columns: auto auto;
  	grid-gap: 5px;
	grid-template-columns: repeat(1, minmax(95%, 1fr));
	grid-template-rows: repeat(1, minmax(95%, 1fr));
}

.video-elements-inner .video-grid,
.video-shared-wrapper .video-grid { 
    width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	background: #000;
    object-fit: cover;
}

.video-elements-inner .video-grid.screenshare,
.video-shared-wrapper .video-grid.screenshare { 
    object-fit: contain;
}

.video-elements-inner .video-grid-wrapper {
    position: relative;
}

#videoview .call-part-mic-muted-indicator {
    position: relative;
	display: inline-block;
	visibility:	hidden;
    /*background: rgb(0, 0, 0);*/
	background-image: url(images/mic_muted_white.svg);
	background-size: 15px;
    background-position: center;
	background-repeat: no-repeat;
    border-radius: 5px;
    width: 15px;
	height: 15px;
	vertical-align: text-bottom;
	margin-left: 2px;
    margin-bottom: 1px;
	opacity: 0.9;
}

#videoview .conf-parts-without-track .call-part-mic-muted-indicator {
    visibility:	hidden;
	vertical-align: text-bottom;
	margin-left: 4px;
}

.webrtc-video-bottom {
    position: absolute;
    height: 60px;
    right: 0;
    left: 0;
    bottom: 0;
}

.webrtc-video-container {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 60px;
}

.webrtc-video-container .video-grid-label {
    position: absolute;
    top: 10px;
    padding: 0px 5px 2px 5px;
    left: 10px;
    background: rgba(0, 0, 0, .8);
    border-radius: 5px;
    color: #CCC;
    max-width: 80%;
}

.webrtc-video-container .video-shared-wrapper .video-grid-label {
    top: 5px;
    left: 5px;
    padding: 2px 7px;
    background: rgba(0, 0, 0, .5);
    white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#videoview .webrtc-video-container .video-shared-wrapper .call-part-mic-muted-indicator {
    margin-left: 4px;
    width: 13px;
    height: 13px;
}
.webrtc-video-container .video-shared-wrapper .video-grid-label span {
    font-size: 12px;
}



#videoview .call-part-talking-border {
	position: absolute;
	display: none;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	background-color: rgba(0, 0, 0, 0);
	border-style: solid;
	border-color: #08e;
	border-width: 5px;
	pointer-events: none;
	/*box-shadow: inset 0 0 15px #08e;*/
}

.webrtc-video-container .video-grid-video-muted {
	position: absolute;
	display: none;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	background-image: url(images/video_off_bordered_white.svg);
	background-repeat: no-repeat;
	background-position: center center;
    transform: scale(0.3);
    opacity: 0.2;
}

.webrtc-video-container .conf-parts-without-track {
	position: absolute;
    top: 41px;
    width: 100%;
    height: 50px;
    display: none;
	border-collapse: separate;
    border-spacing: 5px;
}

.has-parts-with-no-video .webrtc-video-container .conf-parts-without-track {
	display: table;
}

.webrtc-video-container .conf-part-without-track {
    display: table-cell;
    vertical-align: middle;
    position: relative;
	background-color: #484848;
}

.webrtc-video-container .conf-part-label {
    padding: 0 20px;
    padding-left: 45px;
    color: #FFF;
}

.video-shared-wrapper {
	display: none;
	position: absolute;
    width: 20%;
    bottom: 115px;
	top: 40px;
    right: 0;
    overflow-x: hidden;
	overflow-y: auto;
}

.webrtc-video-container .video-shared-wrapper .video-grid-wrapper {
	display: inline-block;
    position: relative;
    /*width: 200px;*/
    width: 100%;
	height: 115px;
}

/*.self-view-wrapper {*/
    /*position: absolute;
    width: 20%;
    bottom: 10px;
    right: 10px;*/
    /*position: absolute;
    height: auto;
	max-height: 20%;
    width: 20%;
	max-width: 300px;
    bottom: 10px;
    right: 10px;
	top: auto;
	left: auto;
	border: 2px solid #000;
    box-shadow: 0 0 10px 1px;
}
.self-view-wrapper.not-floating {
	width: 200px;
	height: 115px;
	right: 0;
	bottom: 0;
	top: auto;
	left: auto;
    border: none;
	box-shadow: none;
}*/
/*#video-tags-container #selfView {	
	height: auto;
	max-height: 20%;
    width: 20%;
	max-width: 300px;
    min-width: 150px;
    bottom: 10px;
    right: 10px;
	top: auto;
	left: auto;
	border: 2px solid #000;
    box-shadow: 0 0 10px 1px;
	transform: rotateY(180deg);
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
}*/
#video-tags-container #selfView {
	/*height: fit-content;*/
	max-height: 20%;
	width: 20%;
	max-width: 300px;
    bottom: 10px;
    right: 10px;
	top: auto;
	left: auto;
	border: 2px solid #000;
    box-shadow: 0 0 10px 1px;
	box-sizing: border-box;
    z-index: 1;
    border-radius: 10px;
}
#video-tags-container #selfView:hover {
	cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}
#video-tags-container #selfView:active {
	cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}
#selfViewVideo {
	object-fit: cover;
	width: 100%;
	height: 100%;
	transform: rotateY(180deg);
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    border-radius: 10px;
}
.self-view-muted-indicator {
	display: none;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(0,0,0,0.5);
}
.self-view-muted-indicator-img {
	position: absolute;
    opacity: 0.7;
    top: 7px;
    right: 7px;
    width: 25px;
    height: 25px;
    background-image: url(images/video_off_bordered_white.svg);
    background-size: 25px;
    background-position: center;
    background-repeat: no-repeat;
}
.self-view-muted-indicator.enabled {
	display: block;
}
#selfView {
	position: absolute;
	width: 100%;
	height: 100%;
	background: #000;
	top: 0;
	left: 0;
}
#selfView.not-floating {
	width: 20%;
	height: 115px;
	right: 0;
	bottom: 0;
	top: auto;
	left: auto;
}

video#selfView {
    height: 100%;
    width: 100%;
    background-color: black; 
    transform: rotateY(180deg);
    -webkit-transform:rotateY(180deg); /* Safari and Chrome */
    -moz-transform:rotateY(180deg); /* Firefox */
}



/*#call-view {
    display: none;
    position: absolute;
    width: 450px;
    background-color: gray;
    z-index: 100;
    left: 50%;
    bottom: 50%;
    margin-left: -225px;
    margin-bottom: -250px;
    border-radius: 3px;
    min-height: 500px;
    color: white;
    box-shadow: 0 4px 16px rgb(0 0 0 / 50%);
}

.call-view-inner {
    position: relative;
    width: 100%;
    height: 100%;
}*/

#call-view {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 100;
    background: black;
    opacity: .98;
}

.call-view-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(#000, rgba(74, 74, 74, 0.6));
}

.call-view-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.call-view-inner {
    position: relative;
    height: 100%;
    color: white;
    /*box-shadow: 0 4px 16px rgb(0 0 0 / 50%);*/
    margin: auto;
}

.call-view-devices {
    position: absolute;
    top: 5px;
    left: 7px;
    color: white;
    font-size: 10px;
    line-height: 1.2;
}

.video-view-controls {
    display: none;
	position: absolute;
	width: 200px;
	height: 43px;
	bottom: 45px;
	left: 0;
	right: 0;
	margin: 0 auto;
	/*background-color: rgb(134, 134, 134);*/
    background: linear-gradient(0deg, rgba(49,53,56,1) 0%, rgba(53,61,91,1) 100%);
	border-radius: 25px;
	border: 1px solid rgb(10, 10, 10);
	padding: 0 5px;
	/* -webkit-transition: border-radius 0.8s ease, width 0.8s ease; */
}

.video-view-controls:hover {
	cursor: default;
}

.video-controls-image {
    display: flex;
    width: 35px;
    height: 35px;
    background-size: 23px;
}

.video-controls-hangup {
	width: 35px;
	height: 40px;
	background: no-repeat center url(images/case_state_phone_fail_40.png);
	background-size: 25px;
	vertical-align: center;
}
.video-controls-mute {
	width: 35px;
	height: 40px;
	background: no-repeat center url(images/mic_muted_white.svg);
	background-size: 25px;
	vertical-align: center;
}
.video-controls-cam-mute {
	width: 35px;
	height: 40px;
	background: no-repeat center url(images/video_bordered_white.svg);
	background-size: 25px;
	vertical-align: center;
}
.video-controls-cam-unmute {
	width: 35px;
	height: 40px;
	background: no-repeat center url(images/video_off_bordered_white.svg);
	background-size: 25px;
	vertical-align: center;
}
.video-controls-unmute {
	width: 35px;
	height: 40px;
	background: no-repeat center url(images/mic_active_white.svg);
	background-size: 25px;
	vertical-align: center;
}
.video-controls-vol {
	width: 35px;
	height: 40px;
	background: no-repeat center url(images/speaker_white.png);
	background-size: 25px;
	vertical-align: center;
}
.video-controls-switch-cam {
	width: 35px;
	height: 40px;
	background: no-repeat center url(images/switch_cam_white.svg);
	background-size: 25px;
	vertical-align: center;
}
.video-controls-open-chat {
	width: 35px;
	height: 40px;
	background: no-repeat center url(images/chat_bordered_white.svg);
	background-size: 25px;
	vertical-align: center;
}
.video-controls-more {
	width: 35px;
	height: 40px;
	background: no-repeat center url(images/element_menu.png);
	background-size: 25px;
	vertical-align: center;
}

#webrtc-video-vol {
    display: none;
}
#webrtc-video-switch-cam {
    display: none;
}
#webrtc-video-open-chat {
    display: none;
}


.video-control {
	display: inline-block;
}

.video-control:hover {
	opacity: 0.7;
	cursor: pointer;
}

.video-control:active {
	opacity: 0.5;
	cursor: pointer;
}

#video-call-info-overlay {
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: black;
    z-index: 9999;
}

.video-call-info-text {
    position: relative;
    color: #eee;
    top: 45%;
    text-align: center;
}

#webrtc-video-info {
	display: inline-block;
	margin: 4px 0;
	height: 32px;
	width: 55px;
	border-left: 1px solid rgb(120, 120, 120);
	vertical-align: top;
	line-height: 32px;
	padding-left: 4px;
}

.video-info {
	color: white;
	font-family: 'Lato', sans-serif;
	font-weight: 500;
	font-size: 14px;
	text-align: center;
}

.video-controls-hangup:hover {
	opacity: 0.7;
	cursor: pointer;
}

.video-controls-hangup:active {
	opacity: 0.5;
	cursor: pointer;
}

.video-view-window-controls {
	position: absolute;
	top: 5px;
	right: 5px;
}

.window-control-minimize {
	width: 30px;
	height: 30px;
	background: url(images/minimize_white.png) no-repeat center 60%;
	background-size: 25px;
}

#softphone-volume-slider-wrapper {
    float: left;
    width: 150px;
}

#softphone-dialog-volume {
    display: table;
}

#softphone-volume-slider {
    margin: 10px;
}

#call-banner {
    position: relative;
    display: none;
    width: 100%;
    height: 50px;
    background-color: #5c5;
    color: white;
    font-weight: bold;
    font-size: 16px;
}

#call-banner:hover {
    cursor: pointer;
    opacity: 0.9;
}

.call-banner-inner {
    max-width: 450px;
    height: 100%;
    vertical-align: middle;
    margin: auto;
    line-height: 50px;
}

.call-banner-element {
    height: 40px;
}

.call-banner-info {
    text-align: left;
    padding-left: 20px;
}

.call-banner-text {
    display: inline-block;
    vertical-align: top;
}
.call-banner-video-img {
    display: inline-block;
    vertical-align: top;
    width: 35px;
    height: 50px;
    background: url(images/video_white.svg) no-repeat center center;
    background-size: 25px;
}

.call-banner-duration {
    width: 75px;
}

#join-call-banner {
    background-color: #f7f7f7;
    position: relative;
    display: none;
    width: 100%;
    height: 50px;
    color: white;
    font-weight: bold;
    font-size: 16px;
}
#join-call-banner .join-call-banner-inner {
    max-width: 450px;
    height: 100%;
    vertical-align: middle;
    margin: auto;
    line-height: 50px;
    padding-right: 15px;
    padding-left: 15px;
}
#join-call-banner .join-call-banner-info {
    display: inline-block;
}
#join-call-banner .join-call-banner-btn {
    float: right;
    height: 35px;
    top: 50%;
    position: relative;
    transform: translateY(-50%);
    line-height: 35px;
}
#join-call-banner .call-banner-text {
    color: #888;
}

.call-view-top-bar {
    height: 30px;
    width: 100%;
}

.call-view-hide {
    float: right;
    /*width: 30px;
    height: 30px;
    background: url(images/minimize_white.png) no-repeat center 80%;
    background-size: 25px;*/
}

.call-view-hide-image {
    background: url(images/minimize_white.png) no-repeat center 80%;
    background-size: 25px;
}

.call-view-main-content-outer {
    display: table;
    position: absolute;
    top: 30px;
    left: 0;
    width: 100%;
    height: 100%;
}

.call-view-main-content-middle {
    display: table-cell;
    vertical-align: middle;
}

.call-view-main-content {
    max-width: 400px;
    margin: 0 auto;
    text-align: center;
}

.call-view-main-content > div {
    margin-bottom: 25px;
}

.call-main-info {
    font-size: 17px;
}

.call-duration {
    font-size: 16px;
}

.call-video-view-wrapper {
    position: relative;
    max-width: 360px;
    height: 240px;
    margin: auto;
    padding: 5px;
}

.call-video-view-wrapper:hover {
    cursor: pointer;
}

.call-video-view {
    display: none;
    position: relative;
    max-width: 360px;
    height: 240px;
    background-color: black;
    margin: 0 auto;
    border: 1px solid lightgray;
}

.call-secondary-actions > div {
    margin: 0 10px;
}

.call-secondary-actions .call-set-volume,
.call-secondary-actions .call-open-video,
.call-secondary-actions .call-toggle-mic.call-unmuted,
.call-secondary-actions .call-toggle-mic.call-muted
{
    width: 60px;
    display: inline-block;
}

/*@media (max-width: 500px) {
	#call-view {
        top: 0px;
        left: 0px;
        margin: 0px;
		width: 100%;
		height: 100%;
		max-width: 100%;
        min-height: 100px;
        border-radius: 0px;
	}
}

@media (max-height: 520px) {
    #call-view {
        top: 0px;
        left: 0px;
        margin: 0px;
		width: 100%;
		height: 100%;
		max-width: 100%;
        min-height: 100px;
        border-radius: 0px;
	}
    .call-secondary-actions {
        margin-top: 0px;
    }
}*/

#call-view .action-icon {
    width: 60px;
    height: 50px;
}

#call-view .call-actions .action-icon {
    width: 60px;
    height: 60px;
}

.call-toggle-mic.call-unmuted .action-icon {
    background: url(images/mic_active_white.svg) no-repeat center;
    background-size: 25px;
}
.call-toggle-mic.call-muted .action-icon {
    background: url(images/mic_muted_white.svg) no-repeat center;
    background-size: 25px;
}

.call-open-video .action-icon {
    background: url(images/open_video_white.png) no-repeat center;
    background-size: 25px;
}

.call-set-volume .action-icon {
    background: url(images/speaker_white.png) no-repeat center;
    background-size: 25px;
}

.call-actions {
    margin-top: 40px;
}

.call-actions > div {
    display: inline-block;
    width: 60px;
    height: 60px;
}

.call-secondary-actions {
    height: 65px;
    margin-top: 40px;
    margin-bottom: 50px;
}

#call-view .my-button-text {
    color: white;
}

/*.call-actions .action-icon {
    border: 2px solid #6fbd44;
    border-radius: 50px;
}

.call-actions .call-hangup .action-icon {
    border: 2px solid #d60000;
    border-radius: 50px;
}*/

#call-view .call-actions > div:hover,
#call-view .call-secondary-actions > div:hover,
#call-view .call-view-hide:hover,
#videoview .window-control-minimize:hover {
    opacity: 0.7;
    cursor: pointer;
}

#call-view .call-actions > div:active,
#call-view .call-secondary-actions > div:active,
#call-view .call-view-hide:active,
#videoview .window-control-minimize:active {
    opacity: 0.5;
    cursor: pointer;
}

.call-actions .action-icon {
    background-color: black;
    box-shadow: 0px 0px 10px #333;
    background-size: 35px;
    border-radius: 50px;
}

.call-actions .call-answer .action-icon {
    background: url(images/phone_up_white.svg) no-repeat center;
    background-size: 40px;
    width: 50px;
    height: 50px;
    background-color: #48b64e;
}

.call-actions .call-answer-video .action-icon {
    background: url(images/video_white.svg) no-repeat center;
    background: url(images/video_white.svg) no-repeat center;
    background-size: 40px;
    background-color: #48b64e;
}

.call-actions .call-hangup .action-icon {
    background: url(images/cross_white.svg) no-repeat center;
    background-size: 35px;
    background-color: #d0262e;
}

.call-actions .call-answer, .call-actions .call-answer-video {    
    margin-right: 20%;
}

.call-view-bottom-bar {
    height: 10px;
}

.call-view-volume-dialog {
    width: 125px;
    height: 55px;
    padding: 5px;
}

.call-view-volume-dialog .slider {
    /*width: 125px;*/
}

.call-view-volume-dialog .slider-handle {
    width: 20px;
    height: 20px;
}


/* call-view end */

.sub-tab-bar-wrapper {
    height: 50px;
    margin: auto;
    max-width: 500px;
    display: none;
    border-bottom: 1px solid #E7E7E7;
}

.sub-tab-bar-wrapper .sub-tab-bar-inner {
    height: 100%;
}

.sub-tab-bar-wrapper .sub-tab-bar-inner-row {
    height: 100%;
}

.sub-tab-bar-wrapper .sub-tab-bar-tab {
    height: 100%;
    vertical-align: middle;
    cursor: pointer;
}

.sub-tab-bar-wrapper .sub-tab-bar-tab.active {
    font-weight: bold;
    border-bottom: 3px solid;
    bottom: -2px;
}

.sub-tab-bar-wrapper .sub-tab-bar-tab:active {
    animation: blink 0.5s linear;
    animation-iteration-count: 1;
}

.web-instructions-link {
    word-break: break-all;
    background-color: lightgray;
    border-radius: 5px;
    padding: 10px;
    margin: 20px 2px;
    font-size: 12px;
}

.warning-text-box {
    color: #a33400;
    background-color: rgb(238, 226, 186);
    padding: 5px 10px;
    margin: 20px 0 20px 0;
    border-radius: 3px;
}

.bad-browser-page {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: white;
    z-index: 1000;
}

.bad-browser-content {
    text-align: center;
    font-size: 20px;
    margin-top: 100px;
}



.all-elements-locked {
	pointer-events: none;
	background-color: transparent;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	filter: alpha(opacity=70);
	opacity:0.7;
    cursor: wait;
}
.prevent-multi-click {
    pointer-events: none;
}
.prevent-multi-click input,
.prevent-multi-click select,
.prevent-multi-click textarea {
    pointer-events: initial;
}
.prevent-multi-click .allow-multi-click {
    pointer-events: initial;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number]{
    -moz-appearance: textfield;
}

.animate-push-screen-to {
    transform: translate(-100%);
    -webkit-transition: 0.5s ease-in-out;
}
.animate-push-screen-from {
    transform: translate(-200%);
    -webkit-transition: 0.5s ease-in-out;
}

    .pager-container {
    margin-bottom: 40px;
}

.flex-container {
    display: flex;
    flex-direction:row;
}

.flex-row-element {
    flex: 1 1 0px;
}

.dots {
    text-align: center;
    flex: 0 1 0px;
}

.pager-page-selector{
    text-align: center;
    margin: auto;
    font-size: 16px;
    
}

.pager-page-selector:active {
    animation: blink 0.5s linear;
    animation-iteration-count: 1;
}

.pager-current-page {
    font-weight: bold;
    color: #00b3f9
}

.pager-left-arrow{
    background: url(images/arrow-left-blue_40.png) no-repeat center center;
    background-size: 30px;
    height: 30px;
    width: 30px;
    margin: auto;
}

.pager-left-arrow:active {
    animation: blink 0.5s linear;
    animation-iteration-count: 1;
}

.pager-right-arrow{
    background: url(images/arrow-right-blue_40.png) no-repeat center center;
    background-size: 30px;
    height: 30px;
    width: 30px;
    margin: auto;
}

.pager-right-arrow:active {
    animation: blink 0.5s linear;
    animation-iteration-count: 1;
}



@keyframes blink {
    0% {
      opacity: 0;
    }
    50% {
      opacity: .5;
    }
    100% {
      opacity: 1;
    }
  }