*{
    font-family: 'Tex Gyre Heros';
    -webkit-font-smoothing:antialiased;
    font-synthesis: none;
    /*text-rendering:optimizeLegibility;*/
  }
  
  html{
    min-height: 100%;
    height:auto;
  }
  
  body{
    margin:0;
    padding:0;
    font-size:95%;
    height:auto;
    min-height:100%;
    box-sizing: border-box;
  }

  @font-face{
    font-family: 'Tex Gyre Heros';
    src: url('/fonts/tgh-reg.otf') format("opentype");
    font-weight: 400;
    font-style: normal;
  }

  @font-face {
    font-family: 'Tex Gyre Heros';
    src: url('/fonts/tgh-bold.otf') format("opentype");
    font-weight: 700;
    font-style: normal;
  }
  
  
  /* phone styles */
  .phone{
    position:relative;
    box-sizing: border-box;
  }
  
  .phone i.material-icons-round,.phone i.material-icons-outlined{
    font-size: 2ch;
    vertical-align: -21%;
  }
  
  .phone{
    background-color: rgb(219, 226, 237);
    height:auto;
    box-shadow: 0 0 10px 0.1px rgb(20,20,20);
  }
  
  
  /* sys info */
  .phone .sys-info{
    position: absolute;
    z-index:3;
    top:0;
    display:flex;
    justify-content: space-between;
    background: linear-gradient(to bottom, rgb(237, 244, 247), rgb(195, 203, 207));
    width:100%;
    border-bottom: solid rgb(93, 100, 105);
    border-bottom-width: 1px;
    align-items: center;
  }
  
  #ptime, #ptime p{
    margin:0;
  }
  
  [data-border = "not-notched"] #ptime {
    text-align: center;
    width:auto;
  }
  
  [data-border="notched"] .phone .sys-info{ 
      height:27px;
  }
  
  [data-border="not-notched"] .phone .sys-info{
      width: 100%;
      height: 20px;
      z-index: 2;
  }
  
  .phone .sys-info p{
      font-weight: bold;
      user-select: none;
      -webkit-user-select: none;
  }
  
  .phone .sys-info .conbars{
      display: flex;
      align-items: baseline;
  }
  
  .phone .sys-info #pinfo{
    display: flex;
    gap: 0.4rem;
    height: inherit;
    align-items: center;
  }
  
  .phone .sys-info .conbars div{
      width:4px;
      margin-left:0.05rem;
      margin-right:0.05rem;
      vertical-align: bottom;
      background: linear-gradient(to bottom, rgb(40, 124, 213) 0%, rgb(22, 175, 253) 25%, rgb(2, 114, 241) 100%);
  }
  
  .conbars span[contenteditable]{
      border:0;
      outline: none;
      background: transparent;
      padding: 0;
      margin-top: 0;
      margin-bottom: 0;
      margin-left: 0.15rem;
      
      color:rgb(71, 71, 71);
      font-weight: bold;
      padding-bottom: 0.05rem;
      white-space: nowrap;
  }
  
  .conbars span[contenteditable]:empty {
      border: 2px solid black;
      border-radius: 2px;
      min-width: 5px;
      min-height: 2ch;
  }
  
  [data-bars="0"] #con1, [data-bars="0"] #con2, [data-bars="0"] #con3, [data-bars="0"] #con4, [data-bars="0"] #con5,
  [data-bars="1"] #con2, [data-bars="1"] #con3, [data-bars="1"] #con4, [data-bars="1"] #con5,
  [data-bars="2"] #con3, [data-bars="2"] #con4, [data-bars="2"] #con5,
  [data-bars="3"] #con4, [data-bars="3"] #con5,
  [data-bars="4"] #con5 {
        background-color: rgb(180,180,180);
        height: 2px !important;
  }

  #lte {
    background: linear-gradient(to bottom, rgb(40, 124, 213) 0%, rgb(22, 175, 253) 25%, rgb(2, 114, 241) 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  [data-connection="wifi"] #lte,  
  [data-connection="none"] #lte {
        display:none;
  }
  
  #imgwifi {
    user-select: none;
    -webkit-user-select: none;
  }
  
  [data-connection="data"] #imgwifi, 
  [data-connection="none"] #imgwifi {
        display:none;
  }
  
  .battery{
      border: 1.8px solid rgb(123, 130, 143);
      background: linear-gradient(to bottom, rgb(71, 73, 77) 0%, 
                                rgb(202, 201, 201) 75%, rgb(202, 201, 201) 100%);
      height:10px;
      width:24px;
      border-radius: 1px;
      position: relative;
  }
  
  #batterycont{
      display: flex;
      align-items: center;
  }
  
  #batterycont p{
    width:4ch;
    text-align:right;
    margin-left:auto;
    color: rgb(71, 71, 71);
  }
  
  .battery::after{
    border-top-right-radius: 0.1rem;
    border-bottom-right-radius: 0.1rem;
    background: linear-gradient(to bottom, rgb(179, 181, 186) 0%, rgb(80, 86, 101) 100%);
    width:13%;
    height:55%;
    content:"";
    display:block;
    position:absolute;
    margin: auto;
    top:0;
    bottom:0;
    right:-5px;
  }
  
  .battery .progress{
      background: linear-gradient(to bottom, rgb(121, 191, 83) 0%, rgb(199, 255, 140) 25%, rgb(47, 144, 13) 100%);
      height:100%;
      width:100%;
  }
  
  .battery .progress.charging, .battery .progress.charging.low {
      background: linear-gradient(to bottom, rgb(121, 191, 83) 0%, rgb(199, 255, 140) 25%, rgb(47, 144, 13) 100%)
  }

  .battery .progress.low {
    background: linear-gradient(to bottom, rgb(215, 72, 70) 0%, rgb(231, 106, 114) 25%, rgb(206, 32, 39) 100%);
  }

  .battery .progress.charging::after {
    content: "";
    background-image: url("/images/apple-old/charge-bolt.svg");
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    bottom: 50%;
    left: 50%;
    right: 50%;
    transform: translateY(-50%) translateX(-50%);
    height: 210%;
    width: 85%;
  }
  
  .phone .contact-info{
    position: absolute;
    display:flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(to bottom, rgb(180, 191, 206) 0%, rgb(139, 157, 181) 50%, 
                              rgb(126, 147, 175) 50%, rgb(110, 132, 162) 100%);
    backdrop-filter: blur(110px);
    width:calc(100% - 0.4rem);
    padding-left:0.2rem;
    padding-right:0.2rem;
    z-index:3;
    top:20px;
    border-top: solid rgb(230, 230, 230);
    border-top-width: 1px;
    border-bottom: solid rgb(45, 48, 51);
    border-bottom-width: 1px;
  }
  
  .contact-info .profile{
    display:flex;
    align-items:center;
    flex-direction: column;
    position: relative;
  }
  
  .contact-info input{
    text-align:center;
    background-color: rgba(0,0,0,0);
    color:white;
    outline:none;
    width:fit-content;
    font-weight: 600;
    font-size: 102%;
    border:1px solid transparent;
    transition: border 0.1s;
    border-radius: 0.2rem;
    text-shadow: 0px -2px 0 rgb(70, 89, 113);
    
  }

  .contact-info input::placeholder {
    color: rgb(220, 220, 220)
  }
  
  .contact-info input:hover{
    border:1px solid black;
    transition: border 0.1s;
  }
  
  .contact-info div:first-child i, .contact-info div:first-child p, .contact-info div:last-child i{
    cursor:pointer;
    height:auto;
    font-size: 110%;
    font-weight: 540;
    user-select: none;
    -webkit-user-select: none;
  }
  
  .contact-info div:last-child i{
    font-size:2.6ch;
  }

  .contact-btn {
    color: white; 
    background: linear-gradient(to bottom, rgb(138, 161, 191) 0%, rgb(91, 121, 164) 50%, 
                              rgb(71, 105, 153) 50%, rgb(74, 108, 155) 100%);
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    text-shadow: 0px -2px 0 rgb(70, 89, 113);
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 1);
  }

  div:has(.contact-btn.edit), div:has(.contact-btn.backsec) {
    display: flex;
    justify-content: flex-end;
  }

  .contact-btn.edit, .contact-btn.backsec {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: fit-content;
    overflow-y: clip;
  }

  .contact-btn.backsec span {
    z-index: 2;
    height: max-content;
    white-space: nowrap;
  }

  .contact-btn.backsec::before {
    content: '';
    position: absolute;
    cursor: pointer;
    height: 25px;
    width: 25px;
    background: linear-gradient(135deg, rgb(138, 161, 191) 0%, rgb(91, 121, 164) 50%, 
              rgb(71, 105, 153) 50%, rgb(74, 108, 155) 100%);
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 1);
    transform: rotate(45deg);
    left: 0px;
    z-index: -1;
    border-radius: 5.8px;
  }

  .contact-btn.backsec::after {
    content: '';
    position: absolute;
    cursor:pointer;
    height: 25px;
    width: 25px;
    background: linear-gradient(to bottom, rgb(127, 152, 185) 0%, rgb(91, 121, 164) 50%, 
              rgb(71, 105, 153) 50%, rgb(74, 108, 155) 100%);
    left: 0;
  }
  
  .phone .text-area{
    overflow-y: scroll;
    overflow-x: hidden;
    width:100%;
    position: absolute;
  }
  
  .msg-date{
    position: relative;
    height: fit-content;
    user-select: none;
    -webkit-user-select: none;
    margin: 0.8rem 0;
    padding: 0 10px;
  }
  
  .msg-date p{
    text-align:center;
    color:rgb(136, 146, 165);
    font-size:1.4ch;
    font-weight: bold;
    text-shadow: 0 1.5px rgb(243, 247, 255);
  }
  
  .msg-date button,.msgbox .msgactioncontainer{
    border:none;
    background:transparent;
    border-radius:0.2rem;
    position:absolute;
    top:0;
    margin:0;
    padding:0;
    margin-right:0.2rem;
    height:fit-content;
  }
  
  .msgbox button[action="delete"]{
    border:none;
    background:transparent;
    border-radius:0.2rem;
    margin-right:0.2rem;
    height:fit-content;
  }
  
  .msg-date button, .msgbox button{
    aspect-ratio:1/1;
    margin:0;
    padding:0;
    margin-right:0.2rem;
  }
  
  .msgbox .msgactioncontainer{
    right: 0;
    z-index: 1;
  }

  .msgbox .msgactioncontainer button{
    width:20px;
  }
  
  .msg-date button[data-status="saved"],.msg-date button[data-action="delete"],
  .msgbox .msgactioncontainer {
    display:none;
  }
  
  .msg-date button[data-status="saved"], .msg-date button[data-status="modifying"]{
    right:25px;
    color: black;
  }
  
  .msg-date button[data-action="delete"], .msgbox .msgactioncontainer{
    right:0;
  }
  
  .msg-date button[data-action="delete"], .msgbox button{
    color:red;
  }
  
  .msg-date i, .msgbox i{
    margin:0.15rem;
    font-size:2.5ch;
  }
  
  .msg-date:hover button[data-status="saved"],
  .msg-date:hover button[data-action="delete"], .msgbox:hover .msgactioncontainer{
    display:block;
  }
  
  .msg-date button[data-status="modifying"]{
    display:block;
  }
  
  .msg-date button:hover, .msgbox button:hover{
    background-color:rgb(180,180,180);
    transition:background-color 0.2s;
  }
  
  .msgbox{
    position:relative;
    border-radius: 1.2rem;
    padding: 4px;
    max-width:65%;
    min-width:20px;
    width: max-content;
    margin-bottom: 0.7rem;
  }

  .msgbox.sender:before, .msgbox.receiver:before {
    content: '';
    position: absolute;
    border: 0px solid;
    display: block;
    width: 85%;
    height: 20px;
    background-color: transparent;
    border-radius: 100vw;
    top: 0;
    left: 50%;
    right: 50%;
    transform: translateX(-50%);
  }
  
  .msgbox.sender{
    color: black;
    margin-left: auto;
    margin-right: 0.8rem;
    z-index: 1;
  }
  
  [data-bubble="blue"] .msgbox.sender{
     background: linear-gradient(to bottom,rgb(151, 199, 254) 70%, rgb(188, 228, 254) 95%, rgb(212, 248, 255) 100%);
     border: 1px solid rgb(126, 148, 175);
     caret-color: rgb(173, 173, 175);
  }

  [data-bubble="blue"] .msgbox.sender:before {
    background: linear-gradient(to bottom, rgb(221, 236, 255) 30%, rgb(189, 219, 255) 80%, transparent 100%);
  }
  
  [data-bubble="blue"] .msgbox.sender input {
    accent-color: rgb(173, 173, 175);
  }
  
  [data-bubble="green"] .msgbox.sender{
    background: linear-gradient(to bottom, rgb(113, 192, 58) 70%, rgb(178, 228, 68) 95%, rgb(211, 255, 137) 100%);
    border: 1px solid rgb(49, 103, 59);
    caret-color: black;
  }

  [data-bubble="green"] .msgbox.sender:before {
    background: linear-gradient(to bottom, rgb(207, 233, 202) 30%, rgb(170, 219, 119) 80%, transparent 100%);
  }

  .msgbox.sender.tailed:after{
    content: '';
    position: absolute;
    border: 0px solid;
    display: block;
    width: 38px;
    height: 20px;
    background-color: transparent;
    border-bottom-left-radius: 30%;
    border-bottom-right-radius: 50%;
    border-top-left-radius: 50%;
    transform: translateX(95%) translateY(-50%) rotateY(180deg);
    box-shadow: 12px -1.5px 0 -2.5px rgb(151, 199, 254) /*12px -1.5px 0 -2.5px rgb(151, 199, 254),
                13px -1.9px 0 -3.2px rgb(188, 228, 254),
                14px -2px 0 -4px rgb(212, 248, 255);*/;
    right: 0;
  }
  
  [data-bubble="green"] .msgbox.sender.tailed:after{
    box-shadow: 12px -1.5px 0 -2.5px rgb(113, 192, 58);
  }
  
  .msgbox.receiver{
    background: linear-gradient(to bottom, rgb(222, 222, 222) 30%, rgb(237, 237, 237) 95%, rgb(214, 215, 214) 100%);
    color:black;
    margin-right:auto;
    margin-left:0.8rem;
    border: 1px solid rgb(151, 153, 156);
  }
  
  .msgbox.receiver:before {
    background: linear-gradient(to bottom, rgb(254, 254, 254) 30%, rgb(239, 239, 239) 80%, transparent 100%);
  }

  .msgbox.receiver.tailed:after{
    content: '';
    position: absolute;
    border: 0px solid;
    display: block;
    width: 38px;
    height: 20px;
    background-color: transparent;
    border-bottom-left-radius: 30%;
    border-bottom-right-radius: 50%;
    border-top-left-radius: 50%;
    transform: translateX(-123%) translateY(-50%);
    box-shadow: 12px -1.5px 0 -2.5px rgb(220, 220, 220);
    z-index: 0;
  }
  
  .msgbox.sender p::selection, .msgbox.sender b::selection, .msgbox.sender u::selection, .msgbox.sender i::selection{
    background: rgb(233, 233, 235);
    color: black;
  }
  
  .msgbox.tailed, .msgbox.read, .msgbox.sendfailed{
    margin-bottom:0.2rem;
  }
  
  .msgbox p{
    margin-top:0;
    margin:0;
    transition: margin-top 0.2s;
    font-size: 1.7ch;
    outline:none;
    border:none;
    z-index: 1;
    position: relative;
  }
  
  .msgbox:hover p{
    margin-top:2rem;
    border-radius:0.2rem;
    border: 1px solid black;
    transition: margin-top 0.2s, border 0.2s;
  }
  
  .msgbox:hover{
    width:65%;
  }
  
  /*bottom bar*/
  .bottom-bar {
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    background: linear-gradient(to bottom, rgb(239, 238, 240) 0%, rgb(209, 211, 215) 100%);
    border-top: 1px solid rgb(195, 198, 200);
  }

  .bottom-bar #camera-cont {
    color: white;
    background: linear-gradient(to bottom, rgb(172, 177, 183) 0%, rgb(117, 127, 139) 50%, rgb(94, 105, 119) 50%, rgb(92, 104, 118) 100%);
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  
  .bottom-bar .text {
    border-radius: 100vw;
    border: none;
    outline: none;
  }

  .bottom-bar #send-btn {
    text-align: center;
    border-radius: 100vw;
    font-weight: bold;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  
  
  [data-bubble="blue"] .bottom-bar #send-btn {
    background: linear-gradient(to bottom, rgb(140, 180, 248) 0%, rgb(60, 112, 235) 50%,
                              rgb(55, 106, 233) 50%, rgb(18, 94, 230) 100%);
    border: solid rgb(30, 89, 194);
  }
  
  [data-bubble="green"] .bottom-bar #send-btn {
    background: linear-gradient(to bottom, rgb(152, 196, 93) 0%, rgb(108, 173, 52) 50%, 
                              rgb(88, 161, 30) 50%, rgb(71, 157, 24) 100%);
    border: solid rgb(34, 107, 12);
  }
  
  .bottom-bar:has(input:placeholder-shown) #send-btn{
    color: rgba(255, 255, 255, 0.6)
  }