oncall.css

@media (min-height: 4.5em) {
  html, body {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    font-size: 10px;
    color: white;
    background: transparent;
    -moz-user-select: none;
  }

  .font-light {
    font-weight: 300;
  }

  #calls:not(.big-duration) .duration {
    padding-left: 1.5rem;
  }

  #calls:not(.big-duration) .duration .font-light {
    font-weight: normal;
    line-height: 8rem;
  }

  #calls:not(.big-duration) > section.ended .duration .font-light {
    line-height: 1.7rem;
  }

  #calls:not(.big-duration) > section.ended:not(.ongoing) .duration .font-light {
    line-height: 3.5rem;
  }

  #calls:not(.big-duration) .duration .total-duration {
    display: none;
    font-weight: normal;
  }

  #calls:not(.big-duration) > section.ended .duration .total-duration {
    display: block;
    padding: 0;
    line-height: 1.7rem;
    text-align: end;
  }

  button::-moz-focus-inner {
    border: 0;
  }

  #phone-number-view {
    width:100%;
    border:0;
    background:transparent;
    cursor:none;
    -moz-user-select: none;
  }
  html[dir="ltr"] #phone-number-view { text-align: left; }
  html[dir="rtl"] #phone-number-view { text-align: right; }

  .grid-wrapper {
    width:100%;
    height:100%;
  }

  .grid-cell {
    display:table-cell;
  }

  .grid {
    display:table;
    table-layout:fixed;
    border:0;
  }

  .grid.hide {
    display: none;
  }

  #keypad-callbar.hide,
  #keypad-hide-bar.hide {
    display: none;
  }

  #call-options.transparent {
    visibility: hidden;
  }

  .center {
    text-align:center;
  }

  #views {
    position: absolute;
    top: 100%;
    height: 100%;
    width: 100%;
    z-index: -1;
    visibility: hidden;
  }

  body.no-handled-calls * {
    pointer-events: none;
  }

  body.showKeypad #views {
    transition: transform var(--transition-duration) ease,
                visibility var(--transition-duration);
    transform: translateY(-100%);
    visibility: visible;
    z-index: 500;
  }

  body.showKeypad #keyboard-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: calc(100% - 16rem);
    background: rgba(255, 255, 255, 0.85);
    position: absolute;
    bottom: 0;
  }

  body.showKeypad.single-line #keyboard-container {
    height: calc(100% - 10rem);
  }

  body.showKeypad #keypad {
    height: 28rem;
  }

  body.showKeypad .duration,
  body.showKeypad .sim  {
    transition: opacity var(--transition-duration) ease;
    opacity: 0;
  }

  body.showKeypad #call-options {
    transition: transform var(--transition-duration) ease,
                opacity var(--transition-duration);
    transform: translateY(16rem);
    opacity: 0;
  }

  body.showKeypad #group-show {
    display: none;
  }

  #views > .view {
    height: 100%;
    width: 100%;
  }

  body.hidden *[data-l10n-id] {
    visibility: hidden;
  }

  #call-screen {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
    background: black;
    z-index: 100;
  }

  #main-container {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: #000;
    background-size: cover; /* Possible memory over-consumption with huge images, it should be removed for improving stability*/
    background-repeat: no-repeat;
  }

  #actions-container {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 14rem;
  }

  #call-options {
    height: 14rem;
    position: absolute;
    bottom: 0;
    visibility: visible;
  }

  #co-advanced {
    height: 8rem;
  }

  .co-advanced-option {
    height: 8rem;
    width: 100%;
    background: rgba(255, 255, 255, 0.85);
    box-sizing: border-box;
    border-radius: 0;
    padding: 0;
  }

  .co-advanced-option:not([disabled]):active {
    background: #94eee9;
  }

  #co-advanced span.grid-cell:first-child .co-advanced-option {
    border-inline-start: 0;
  }

  #co-advanced span.grid-cell:last-child .co-advanced-option {
    border-inline-end: 0;
  }

  #co-advanced.no-add-call #place-new-call-container {
    display: none;
  }

  .co-advanced-option .icon {
    display: inline-block;
    background-size: 4rem;
    width: 4rem;
    height: 4rem;
  }

  button[disabled] .icon {
    opacity: 0.6;
  }

  .icon-mute {
    background-image: url('images/call_screen/actionicon_activecall_mute_40x80.png');
  }

  .icon-keypad-visibility {
    background-image: url('images/call_screen/actionicon_activecall_dialpad.png');
  }

  .icon-place-new-call {
    background-image: url('images/call_screen/actionicon_activecall_add_call.png');
  }

  .icon-speaker {
    background-image: url('images/call_screen/actionicon_activecall_speaker_40x80.png');
  }

  .icon-bt {
    background-image: url('images/call_screen/actionicon_activecall_speaker.png');
  }

  .icon-on-hold {
    background-image: url('images/call_screen/Ico_call_onhold_40x120.png');
  }

  .icon-merge {
    background-image: url('images/call_screen/Ico_call_merge_40x40.png');
  }

  /* When active show the light blue icon */
  .co-advanced-option.active-state .icon.icon-mute,
  .co-advanced-option.active-state .icon.icon-speaker,
  .co-advanced-option.active-state .icon.icon-bt {
    background-position: 0 -4rem;
  }

  /* When pressed show the grey icon if the control is enabled */
  .co-advanced-option:not([disabled]):active .icon.icon-mute,
  .co-advanced-option:not([disabled]):active .icon.icon-speaker,
  .co-advanced-option:not([disabled]):active .icon.icon-bt {
    background-position: 0 0;
  }

  /* When active show the light blue icon */
  .co-advanced-option.active-state .icon.icon-on-hold {
    background-position: 0 -4rem;
  }

  /* When pressed show the grey icon if the control is enabled */
  .co-advanced-option.active-state:not([disabled]):active .icon.icon-on-hold {
    background-position: 0 -8rem;
  }

  #callbar {
    display: flex;
    background: rgba(255, 255, 255, 0.85);
    direction: ltr;
  }

  #callbar > button {
    flex: 1;
    height: 6rem;
    padding: 0;
    border: none;
    background: none;
  }

  .callbar-inner-button {
    display: block;
    height: 4rem;
    border: 0;
    border-radius: 2rem;
    background-size: auto 100%;
    margin: 1rem 1.5rem;
  }

  #callbar-hang-up > .callbar-inner-button {
    background: url('images/handled_call/actionicon_activecall_hangup.png') center / 4rem no-repeat,
                #e00000;
    margin-inline-end: 1rem;
  }

  #callbar-hang-up:active > .callbar-inner-button {
    background: url('images/handled_call/actionicon_activecall_hangup.png') center / 4rem no-repeat,
                #ff5933;
  }

  #callbar-answer > .callbar-inner-button {
    background: url('images/handled_call/actionicon_activecall_pickup.png') center / 4rem no-repeat,
                #00adad;
    margin-inline-start: 1rem;
  }

  #callbar-answer:active > .callbar-inner-button {
    background: url('images/handled_call/actionicon_activecall_pickup.png') center / 4rem no-repeat,
                #94eee9;
  }

  #callbar-hold > .callbar-inner-button {
    background-color: #00adad;
    color: #333;
    text-align: center;
    font-size: 1.7rem;
    line-height: 4rem;
    margin: 0 1.5rem;
    margin-inline-start: 0.5rem;
    font-style: italic;
  }

  #callbar-hold:active > .callbar-inner-button {
    background: #94eee9;
  }

  /* Multiple call handling */
  #calls {
    position: absolute;
    top: 0;
    width: 100%;
    height: 24rem;
    z-index: 500;
    overflow: hidden;
  }

  #calls > section {
    position: relative;
    height: 8rem;
    font-size: 1.8rem;
    background-color: #00adad;
    transition: background-color var(--transition-duration) linear;
    opacity: 1;
    color: white;
  }

  #calls > section.groupended {
    display: none;
  }

  #calls > section div {
    padding-inline-start: 2.5rem;
    padding-inline-end: 2rem;
  }

  #calls.big-duration > section {
    height: 23rem;
    background-color: transparent;
  }

  /* Switch calls button support, used in CDMA call-waiting mode. */

  #calls #switch-calls-button {
    display: none;
  }

  #calls.switch #switch-calls-button {
    display: block;
  }

  #switch-calls-button {
    top: 3rem;
    height: 4rem;
    width: 4rem;
    position: relative;
    background: url('images/handled_call/Ico_call_switchcalls_40x80.png');
    background-position: 0 0;
  }

  #switch-calls-button:active {
    background: url('images/handled_call/Ico_call_switchcalls_40x80.png');
    background-position: 0 -4rem;
  }

  #calls:not(.big-duration) > section .numberWrapper {
    padding-inline-start: 4rem;
    padding-inline-end: 9rem;
  }

  #calls:not(.big-duration) > section:not(.ended) .duration:not(.isTimer) {
    visibility: hidden;
  }

  #calls.big-duration > section .numberWrapper,
  #calls.big-duration > section .additionalContactInfo {
    background: rgba(255,255,255,0.85);
    transition: background-color var(--transition-duration) linear;
  }

  #calls.big-duration > section .numberWrapper .number {
    height: 3.7rem;
    line-height: 3.7rem;
  }

  #calls > section .numberWrapper .number {
    flex-grow: 1;
    height: 2.5rem;
    padding: 2.25rem 0 0;
    font-size: 3.4rem;
    line-height: 1.5rem;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-style: italic;
  }

  body:not(.single-line) #calls > section .numberWrapper .number {
    height: 2rem;
  }

  body:not(.single-line) #calls > section:not(.held) .numberWrapper .number {
    color: #fff;
  }

  body:not(.single-line) #calls > section.ended .numberWrapper .number {
    color: rgba(255, 255, 255, 0.6);
  }

  #calls > section:not(.additionalInfo) .numberWrapper .number {
    height: 9rem;
    line-height: 8rem;
    padding: 1rem 0 0;
  }

  #calls > section.emergency.additionalInfo .numberWrapper .number {
    color: #b90000;
  }

  body:not(.single-line) #calls > section:not(.additionalInfo) .numberWrapper .number {
    height: 8rem;
    line-height: 8rem;
    padding: 0;
  }

  #calls > section .additionalContactInfo {
    height: 2.1rem;
    padding: 0 4.5rem 2rem;
    padding-inline-start: 0;
    line-height: 2rem;
    font-size: 1.6rem;
    font-style: italic;
    color: #333;
    display: flex;
  }

  .additionalContactInfo > * {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .additionalContactInfo > .tel-type {
    min-width: 4rem;
    max-width: 12rem;
  }

  #incoming-number-additional-info-tel-type:not(:empty) ~ .separator::after,
  .tel-type:not(:empty) ~ .separator::after {
    content: ',';
    margin-inline-end: 5px;
  }

  body:not(.single-line) #calls > section .additionalContactInfo {
    height: 3.75rem;
    padding: 0 7rem;
    padding-inline-start: 4rem;
  }

  body:not(.single-line) #calls > section:not(.held) .additionalContactInfo {
    color: #fff;
  }

  body:not(.single-line) #calls > section.ended .additionalContactInfo {
    color: rgba(255, 255, 255, 0.6);
  }

  body:not(.single-line) #calls > section:not(.held) .isTimer {
    color: #fff;
    font-feature-settings: "tnum";
  }

  #calls.big-duration > section .additionalContactInfo {
    padding: 0 2rem 1.9rem;
    padding-inline-start: 2.5rem;
  }

  #calls > section:not(.additionalInfo) .additionalContactInfo {
    display: none;
  }

  #calls:not(.big-duration) > section .duration {
    position: absolute;
    offset-inline-end: 0;
    top: 0;
    color: #333;
    height: 8rem;
    line-height: 8rem;
  }

  #calls.big-duration > section .duration {
    height: 13rem;
    width: 100%;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0));
  }

  #calls.big-duration > section .duration > span {
    font-size: 2.7rem;
    text-shadow: 0 0.2rem 0.1rem rgba(0,0,0,0.3);
  }

  #calls.big-duration > section .duration.isTimer > span {
    font-size: 5.9rem;
    font-feature-settings: "tnum";
  }

  #calls.big-duration .total-duration {
    display: none;
    padding-left: 0;
    padding-right: 0;
    font-size: 1.6rem;
    text-shadow: 0 0.1rem 0 rgba(0,0,0,0.3);
  }

  #calls.big-duration > section.ended .total-duration {
    display: inline;
    font-size: 2.7rem;
    margin-inline-start: 0.5rem;
  }

  #calls:not(.big-duration) > section.incoming {
    background-image: url('images/handled_call/actionicon_callscreen_incomingcall.png');
    background-size: 3rem;
    background-repeat: no-repeat;
  }
  html[dir="ltr"] #calls:not(.big-duration) > section.incoming {
    background-position: left 0.7rem center;
  }
  html[dir="rtl"] #calls:not(.big-duration) > section.incoming {
    background-position: right 0.7rem center;
  }

  #calls:not(.big-duration) > section.outgoing,
  #calls:not(.big-duration) > #group-call:not(.held) {
    background-image: url('images/handled_call/actionicon_callscreen_outgoingcall.png');
    background-size: 3rem;
    background-repeat: no-repeat;
  }
  html[dir="ltr"] #calls:not(.big-duration) > section.outgoing,
  html[dir="ltr"] #calls:not(.big-duration) > #group-call:not(.held) {
    background-position: left 0.7rem center;
  }
  html[dir="rtl"] #calls:not(.big-duration) > section.outgoing,
  html[dir="rtl"] #calls:not(.big-duration) > #group-call:not(.held) {
    background-position: right 0.7rem center;
  }

  #calls:not(.big-duration) > section.held,
  #calls.big-duration > section.held .numberWrapper,
  #calls.big-duration > section.held .additionalContactInfo {
    background-color: rgba(255, 255, 255, 0.85);
  }

  #calls:not(.big-duration) > section.ended,
  #calls.big-duration > section.ended .numberWrapper,
  #calls.big-duration > section.ended .additionalContactInfo,
  #class.big-duration > section.ended .switch-calls {
    background-color: rgba(207, 64, 64, 0.9);
  }

  #calls:not(.big-duration) > section.held {
    background-image: url('images/handled_call/actionicon_activecall_paused.png');
    background-repeat: no-repeat;
    background-size: 3rem;
  }
  html[dir="ltr"] #calls:not(.big-duration) > section.held {
    background-position: left 0.7rem center;
  }
  html[dir="rtl"] #calls:not(.big-duration) > section.held {
    background-position: right 0.7rem center;
  }

  #calls:not(.big-duration) > section.ended {
    background-image: url('images/shared/actionicon_activecall_hangup_small.png');
    background-repeat: no-repeat;
    background-size: 3rem;
  }
  html[dir="ltr"] #calls:not(.big-duration) > section.ended {
    background-position: left 0.7rem center;
  }
  html[dir="rtl"] #calls:not(.big-duration) > section.ended {
    background-position: right 0.7rem center;
  }

  #calls > section.ended .numberWrapper .number,
  #calls > section.ended .additionalContactInfo,
  #calls.big-duration > section.ended .additionalContactInfo {
    color: rgba(255, 255, 255, 0.6);
  }

  #calls.big-duration > section.held .duration {
    display: block;
  }

  #calls > section .numberWrapper {
    display: flex;
    white-space: nowrap;
  }

  body.single-line #calls > section.additionalInfo .numberWrapper {
    height: 6rem;
  }

  body:not(.single-line) #calls > section.held:not(.ended) .duration {
    display: none;
  }

  #calls > section .duration > .direction {
    display: none;
  }

  #calls.big-duration > section .duration > .direction {
    display: inline-block;
    width: 4rem;
    height: 6.5rem;
    padding: 0;
  }

  #calls.big-duration .handled-call .direction:before,
  #calls.big-duration #group-call .direction:before {
    content: "";
    display: block;
    width: 4rem;
    height: 4rem;
    margin: 3.2rem 0 0;
    background-repeat: no-repeat;
    background-size: 2.6rem;
  }

  #calls.big-duration .handled-call.incoming .direction:before {
    background-image: url('images/handled_call/actionicon_callscreen_incomingcall.png');
    background-size: 4rem;
  }

  #calls.big-duration .handled-call.outgoing .direction:before,
  #calls.big-duration #group-call .direction:before {
    background-image: url('images/handled_call/actionicon_callscreen_outgoingcall.png');
    background-size: 4rem;
  }

  #calls.big-duration .handled-call.held .direction:before,
  #calls.big-duration #group-call.held .direction:before {
    background-image: url('images/handled_call/actionicon_callscreen_pausedcall.png');
    background-size: 4rem;
  }

  #calls.big-duration .handled-call.ended .direction:before,
  #calls.big-duration #group-call.ended .direction:before {
    background-image: url('images/handled_call/actionicon_callscreen_hangup.png');
    background-size: 4rem;
  }
  html[dir="ltr"] #calls.big-duration .handled-call.ended .direction:before,
  html[dir="ltr"] #calls.big-duration #group-call.ended .direction:before {
    background-position: left 0 top 0.8rem;
  }
  html[dir="rtl"] #calls.big-duration .handled-call.ended .direction:before,
  html[dir="rtl"] #calls.big-duration #group-call.ended .direction:before {
    background-position: right 0 top 0.8rem;
  }


  #calls:not(.big-duration) > section.ended .duration,
  #calls:not(.big-duration) > section.ended.held .duration {
    color: white;
    font-size: 1.4rem;
  }

  #calls:not(.big-duration) > section.ended .duration {
    line-height: 0;
    margin-top: 2.3rem;
  }

  #calls:not(.big-duration) > section:not(.additionalInfo):not(.ended) .duration .font-light {
    line-height: 3.5rem;
  }

  #incoming-container {
    position: absolute;
    bottom: 0;
    width: 100%;
    transform: translateY(100%);
    transition: transform var(--transition-duration) ease-in-out,
                visibility var(--transition-duration);
    z-index: 500;
    visibility: hidden;
  }

  #incoming-container header {
    margin-bottom: 2rem;
    display: flex;
  }

  #incoming-info {
    position: relative;
    color: #333;
    font-style: italic;
    background-color: rgba(255, 255, 255, 0.85);
    overflow: hidden;
  }

  #incoming-info:not(.additionalInfo) #incoming-number {
    line-height: 5rem;
  }

  html[dir="ltr"] #incoming-info:not(.additionalInfo) .incoming-number-info {
    background-position: left 27.2rem top 3rem;
  }
  html[dir="rtl"] #incoming-info:not(.additionalInfo) .incoming-number-info {
    background-position: right 27.2rem top 3rem;
  }

  #incoming-container.displayed {
    transform: translateY(0);
    visibility: visible;
  }

  #incoming-container button {
    height: 4rem;
    flex: 1;
    padding: 0;
    border:0;
    border-radius:2rem;
    display: block;
    font-size: 1.8rem;
    color: white;
    background-position: center, center;
    background-repeat: no-repeat, repeat-x;
  }

  #incoming-container.hold-and-answer-only #incoming-end {
    display: none;
  }

  #incoming-answer {
    background: url('images/handled_call/actionicon_activecall_hold.png'),
                #00adad;
    background-size: 4rem, auto 100%;
    margin: 0 1rem;
    margin-inline-end: 1.5rem;
  }

  #incoming-end {
    background: url('images/handled_call/actionicon_activecall_hangup.png'),
                #e00000;
    background-size: 4rem, auto 100%;
    margin: 0 1rem;
    margin-inline-start: 1.5rem;
  }

  .incoming-number-info {
    background-image: url('images/handled_call/actionicon_activecall_incomingcall.png');
    background-repeat: no-repeat;
    padding: 1rem 4.5rem 0;
    padding-inline-start: 2.5rem;
    height: 7rem;
    display: flex;
    flex-direction: column;
  }
  html[dir="ltr"] .incoming-number-info {
    background-position: left 27.2rem top 2rem;
  }
  html[dir="rtl"] .incoming-number-info {
    background-position: right 27.2rem top 2rem;
  }

  #incoming-number {
    width: calc(100% - 3rem);
    font-size: 3.4rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-top: 1rem;
    font-weight: 300;
  }

  #incoming-number-additional-info {
    display: block;
    font-size: 1.6rem;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  #incoming-ignore {
    background: #575757;
    font-style: italic;
    width: 90%;
    margin: 1.1rem 1.5rem 0.9rem;
  }

  /* Conference group support */
  #group-call #group-show {
    position: absolute;
    padding: 0;
    offset-inline-end: 0;
    height: 8rem;
    width: 6rem;
    background-repeat: no-repeat;
    background-size: 3rem;
  }
  html[dir="ltr"] #group-call #group-show {
    background-image: url('images/handled_call/actionicon_callscreen_proceed.png');
    background-position: left 2rem center;
  }
  html[dir="rtl"] #group-call #group-show {
    background-image: url('images/handled_call/actionicon_callscreen_proceed_rtl.png');
    background-position: right 2rem center;
  }

  .single-line #group-call #group-show {
    height: 10rem;
  }

  #group-call.held #group-show {
    display: none;
  }

  #group-call.ended #group-show {
    display: none;
  }

  #group-call #group-show:active {
    background-color: #00adad;
    transition: background-color 0.2s ease;
  }

  #calls #group-call-label {
    padding-inline-end: 3rem;
  }

  #group-call .hangup-button,
  #calls:not(.big-duration) #group-call > .duration.isTimer{
    display: none;
  }

  #contact-background {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: transparent;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transition: opacity var(--transition-duration) linear;
  }

  #bluetooth-menu {
    z-index: 751;
  }

  #call-screen[data-layout="dialing"] #callbar-answer,
  #call-screen[data-layout="incoming"] #swiper-wrapper,
  #call-screen[data-layout="incoming-locked"] #callbar-answer,
  #call-screen[data-layout="incoming-locked"] #callbar-hang-up,
  #call-screen[data-layout="incoming-locked"] #call-options,
  #call-screen[data-layout="incoming-locked"] .duration,
  #call-screen[data-layout="connected"] #callbar-answer,
  #call-screen[data-layout="connected-hold"] #callbar-answer,
  #call-screen:not([data-layout="incoming-locked"]) #lockscreen-header,
  #call-screen:not([data-layout="incoming-locked"]) #lockscreen-masked-background,
  #call-screen:not([data-layout="incoming-locked"]) #lockscreen-area,
  #call-screen:not([data-layout="incoming-locked"]) #swiper-wrapper {
    display: none;
  }

  #call-screen[data-layout="connected-hold"] #calls.big-duration .handled-call.ongoing:not(.ended) .number,
  #call-screen[data-layout="connected-hold"] #calls.big-duration .handled-call.ongoing:not(.ended) .additionalContactInfo {
    color: rgba(51, 51, 51, 0.7);
  }

  #call-screen[data-layout="incoming"] #co-advanced,
  #call-screen[data-layout="incoming-locked"] #co-advanced {
    visibility: hidden;
  }

  #call-screen:not(.displayed) #co-advanced,
  #call-screen:not(.displayed) #callbar {
    pointer-events: none;
    opacity: 0.4;
  }

  #call-screen[data-layout="incoming"] #main-container,
  #call-screen[data-layout="incoming"] #main-container:before,
  #call-screen[data-layout="incoming-locked"] #main-container,
  #call-screen[data-layout="incoming-locked"] #main-container:before,
  #call-screen[data-layout="incoming-locked"] #calls *,
  #call-screen[data-layout="incoming-locked"] {
    background-color: transparent;
  }

  #call-screen[data-layout="incoming-locked"] #calls {
    position: absolute;
    top: calc(100% - 19rem);
    height: 9rem;
    color: #333;
    font-weight: normal;
    background: rgba(255, 255, 255, 0.85);
  }

  #call-screen[data-layout="incoming-locked"] .number {
    font-weight: 300;
  }

  #call-screen[data-layout="incoming-locked"] #calls.big-duration section.sim-info .numberWrapper {
    padding-inline-end: 6.5rem;
  }

  #call-screen[data-layout="incoming-locked"] #calls.big-duration .numberWrapper .number {
    line-height: 3.4rem;
    padding-top: 2rem;
  }

  #call-screen[data-layout="incoming-locked"] #calls.big-duration > section:not(.additionalInfo) .number {
    padding-top: 0;
    line-height: 9rem;
  }

  #call-screen[data-layout="incoming-locked"] #calls.big-duration .additionalContactInfo {
    font-weight: normal;
    line-height: 1.6rem;
    padding-bottom: 2rem;
  }

  /* We may need to sync system lockscreen media query part for showing call
     screen on larger screen size*/

  .merge-button {
    display: none;
  }

  body:not(.single-line) #calls .handled-call.held .merge-button,
  body:not(.single-line) #calls #group-call.held .merge-button {
    display: block;
    position: absolute;
    width: 6rem;
    height: 8rem;
    top: 0;
    offset-inline-end: 0;
    background: url(images/handled_call/actionicon_activecall_merge_calls.png) no-repeat center;
    background-size: 4rem;
    border: none;
    font-size: 0;
  }

  body:not(.single-line) #calls .handled-call.ended.held .merge-button {
    display: none;
  }

  /* DSDS SIM indication support */
  .sim .sim-number {
    display: none;
  }

  /* Call screen, only 1 open line */
  .big-duration .sim {
    display: block;
    position: absolute;
    top: 18rem;
    offset-inline-start: 0;

    font-size: 1.6rem;
    line-height: 2rem;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  }

  /* Locked incoming call screen */
  #call-screen[data-layout="incoming-locked"] .sim {
    display: inline-block;
    position: absolute;
    top: 0;
    offset-inline-end: 0;
    padding-inline-end: 2.5rem;
    text-align: end;
    font-size: 1.3rem;
    text-shadow: none;
    line-height: 9rem;
    color: #038282;
  }

  #call-screen[data-layout="incoming-locked"] section.additionalInfo .sim {
    line-height: 3.4rem;
    padding-top: 2rem;
  }

  #call-screen[data-layout="incoming-locked"] .sim .via-sim {
    display: none;
  }

  #call-screen[data-layout="incoming-locked"] .sim .sim-number {
    display: inline;
  }

  /* Call waiting UI */
  #incoming-container .sim {
    display: inline-block;
    position: absolute;
    top: 2.2rem;
    offset-inline-end: 4.4rem;

    text-align: end;
    font-size: 1.3rem;
    line-height: 1.5rem;
  }

  /* Hidden everywhere else */
  .sim {
    display: none;
    color: #ffffff;
    font-weight: normal;
  }

  .cdma-conference-call #group-show {
    display: none;
  }
}