/** * Call window */ #callsTarget { position: fixed; width: 100%; height: 100%; top: 0px; visibility: hidden; z-index: 1000; } .call-window { width: 338px; min-width: 300px; max-width: 100%; min-height: 174px; position: absolute; top: 100px; right: 10px; z-index: 100; border: 1px black solid; display: flex; flex-direction: column; background-color: #000000b3; visibility: visible; } .call-window .head { color: white; padding: 5px; margin-left: 5px; margin-right: 5px; } .call-window .head .fa-phone { margin-right: 5px; vertical-align: middle; } .call-window .head a { color: inherit; } .call-window .members-area { color: white; font-size: 80%; text-align: center; display: flex; flex-direction: row; justify-content: center; } .call-window .members-area span { margin: 0px 5px; } .call-window .members-area span.ready { color: rgb(1, 218, 1); } .call-window .videos-area { display: flex; flex-direction: row; max-width: 100%; height: 126px; flex-wrap: wrap; } .call-window .videos-area video { flex-shrink: 1; flex: 1; max-height: 100%; max-width: 100%; } .call-window .window-bottom { height: 40px; display: flex; justify-content: space-around; align-items: center; } .call-window .window-bottom div { color: #fff6; flex: 1; text-align: center; height: 100%; display: flex; align-items: center; justify-content: center; } .call-window .window-bottom div.selected { color: white; } .call-window .window-bottom div:hover { background-color: #ffffff4d; } .call-window .window-bottom div:active { background-color: #fff3; } .call-window .window-bottom div.hang-up-button { color: #dd4b39; }