:root{--phone-color-primary: rgb(255, 255, 255);--phone-color-opacity: rgba(242, 242, 242, .4);--phone-color-opacity2: rgb(30, 30, 30, .5);--phone-color-highlight: rgb(250, 250, 250);--phone-color-highlight2: rgb(240, 240, 240);--phone-color-highlight3: rgb(220, 220, 220);--phone-highlight-opacity15: rgba(145, 145, 145, .15);--phone-highlight-opacity35: rgba(145, 145, 145, .35);--phone-highlight-opacity45: rgba(145, 145, 145, .45);--phone-highlight-opacity55: rgba(145, 145, 145, .55);--phone-color-input: rgba(241, 241, 241, .656);--phone-text-primary: rgb(0, 0, 0);--phone-text-secondary: rgb(142, 142, 147);--phone-color-hover: rgb(240, 240, 240);--phone-color-border: rgba(200, 200, 200, .4);--phone-color-grey: #8e8e93;--phone-color-blue: #0a84ff;--phone-color-green: #32d74b;--phone-color-green-secondary: #092911;--phone-color-red: #ff3b30;--phone-color-orange: rgb(255, 157, 10);--phone-color-yellow: #cca250;--phone-color-pink: #ff3b30;--instagram-primary: #ffffff;--instagram-blue: rgb(0, 149, 246);--instagram-red: rgb(237, 73, 86);--instagram-primary-text: rgb(38, 38, 38);--instagram-secondary-text: rgb(142, 142, 142);--instagram-stroke: rgb(219, 219, 219);--instagram-border: rgb(219, 219, 219);--instagram-highlight: rgb(239, 239, 239);--tinder-color-pink: #ff4573;--tinder-color-orange: #ff5f65;--tinder-color-mix: #f5547c;--twitter-primary: #f5f8fa;--twitter-secondary: #14171a;--twitter-background-highlight: rgb(239, 243, 244);--twitter-primary-text: #14171a;--twitter-secondary-text: #657786;--twitter-alt-text: #657786;--twitter-border: #bdc5cd75;--twitter-border-secondary: #1d9bf0;--twitter-highlight: #1d9bf0;--twitter-hover: rgba(15, 20, 25, .1);--twitter-action: #14171a;--twitter-blue: #1d9bf0;--tiktok-primary: #ffffff;--tiktok-secondary: #000000;--tiktok-text-primary: #000000;--tiktok-text-secondary: #86878b;--tiktok-color-border: #d0d1d3;--tiktok-color-pink: #fe2c55;--tiktok-color-aqua: #00f2ea;--tiktok-color-yellow: #f8cd14;--tiktok-color-blue: #479fc5;--tiktok-color-unread: rgba(254, 44, 86, .2);--crypto-color-primary: rgb(255, 255, 255);--browser-primary: rgb(245, 245, 245);--browser-secondary: rgba(153, 153, 153, .15);--browser-gradient: linear-gradient(230deg, #f4d6ff, #c5f1ff);--browser-footer: rgba(255, 255, 255, .75);--browser-border: rgba(102, 102, 102, .75);--browser-text-secondary: #696969;--controlcentre-opacity: rgba(255, 255, 255, .15);--controlcentre-opacity2: rgba(255, 255, 255, .2);--controlcentre-active: rgba(255, 255, 255, .5);--notification-primary: rgba(215, 215, 215, .5);--notification-secondary: rgba(215, 215, 215, .1);--lockscreeneditor-background: rgba(255, 255, 255, .75);--lockscreeneditor-secondary: #d9d9d9;--app-bg: #ececec;--app-bg2: #ffffff;--app-secondary: #ffffff;--app-secondary2: #ececec;--app-highlight: #cccccc;--app-highlight2: #999999;--app-highlight3: #ffffff;--app-border: #666666;--app-slider: #cccccc;--app-slider-active: #333333;--app-button: #ffffff;--components-bg: #eeeeee;--components-secondary: #ffffff;--components-highlight: #cccccc}[data-theme=dark]{--phone-color-primary: #000000;--phone-color-opacity: rgb(30, 30, 30, .5);--phone-color-opacity2: rgba(242, 242, 242, .4);--phone-color-highlight: rgb(15, 15, 15);--phone-color-highlight2: rgb(20, 20, 20);--phone-color-highlight3: rgb(25, 25, 25);--phone-highlight-opacity35: rgba(145, 145, 145, .35);--phone-highlight-opacity45: rgba(50, 50, 50, .6);--phone-highlight-opacity55: rgb(60, 60, 60, .8);--phone-color-input: rgba(60, 60, 67, .6);--phone-text-primary: #f2f2f7;--phone-text-secondary: #6f6f6f;--phone-color-grey: #636366;--phone-color-hover: rgb(30, 30, 30);--phone-color-border: rgba(150, 150, 150, .2);--phone-color-blue: #076bcf;--instagram-primary: #000000;--instagram-blue: rgb(0, 149, 246);--instagram-red: rgb(237, 73, 86);--instagram-primary-text: rgb(250, 250, 250);--instagram-secondary-text: rgb(142, 142, 142);--instagram-stroke: rgb(219, 219, 219);--instagram-border: rgb(54, 54, 54);--instagram-highlight: rgb(38, 38, 38);--twitter-primary: #000000;--twitter-secondary: #f5f8fa;--twitter-background-highlight: rgb(20, 20, 20);--twitter-primary-text: #f5f8fa;--twitter-secondary-text: #aab8c2;--twitter-alt-text: #657786;--twitter-border: #38444d;--twitter-border-secondary: #38444d;--twitter-hover: rgba(150, 150, 150, .1);--twitter-highlight: #dcdcdc;--twitter-action: #1d9bf0;--twitter-blue: #1d9bf0;--crypto-color-primary: rgb(24, 26, 32);--tiktok-text-primary: #f2f2f7;--tiktok-text-secondary: #6f6f6f;--tiktok-color-border: #96969633;--browser-primary: rgb(15, 15, 15);--browser-secondary: rgba(153, 153, 153, .15);--browser-gradient: linear-gradient(230deg, #453b48, #2f393d);--browser-footer: rgba(51, 51, 51, .75);--browser-border: rgba(102, 102, 102, .75);--browser-text-secondary: #999999;--controlcentre-opacity: rgba(0, 0, 0, .15);--controlcentre-opacity2: rgba(0, 0, 0, .2);--controlcentre-active: rgba(0, 0, 0, .5);--notification-primary: rgba(0, 0, 0, .1);--notification-secondary: rgba(0, 0, 0, .12);--lockscreeneditor-background: rgba(0, 0, 0, .8);--lockscreeneditor-secondary: #333333;--app-bg: #000000;--app-bg2: #000000;--app-secondary: #141414;--app-secondary2: #141414;--app-highlight: #cccccc;--app-highlight2: #696969;--app-highlight3: #212121;--app-border: #cccccc;--app-slider: #999999;--app-slider-active: #ffffff;--app-button: #333333;--components-bg: #000000;--components-secondary: #141414;--components-highlight: #696969}@keyframes zoomIn{0%{transform:scale(.5)}to{transform:scale(1)}}@keyframes zoomOut{0%{transform:scale(1.5)}to{transform:scale(1)}}@keyframes slideDown{0%{transform:translateY(-20%)}to{transform:translateY(0)}}@keyframes slideUp{0%{transform:translateY(40%)}to{transform:translateY(0)}}@keyframes slideRight{0%{transform:translate(-10%)}to{transform:translate(0)}}@keyframes slideLeft{0%{transform:translate(10%)}to{transform:translate(0)}}@keyframes appJiggle{0%{transform:rotate(-1deg);animation-timing-function:ease-in}50%{transform:rotate(1.5deg);animation-timing-function:ease-out}}@keyframes appJiggle2{0%{transform:rotate(1deg);animation-timing-function:ease-in}50%{transform:rotate(-1.5deg);animation-timing-function:ease-out}}@keyframes widgetJiggle{0%{transform:rotate(-.5deg);animation-timing-function:ease-in}50%{transform:rotate(.5deg);animation-timing-function:ease-out}}@keyframes widgetJiggle2{0%{transform:rotate(.5deg);animation-timing-function:ease-in}50%{transform:rotate(-.5deg);animation-timing-function:ease-out}}.mail-container{position:relative;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:var(--phone-color-primary)}.mail-container .animation-container{height:100%;width:100%;display:flex;flex-direction:column;align-items:center}.mail-container .animation-container.home{background-color:var(--app-bg)}.mail-container .mail-form{width:70%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.5rem}.mail-container .mail-form .item{display:flex;flex-direction:column;gap:.2rem;width:100%}.mail-container .mail-form .item .title{font-size:18px;color:var(--phone-text-primary);font-weight:500}.mail-container .mail-form .item .error{font-size:16px;color:var(--phone-color-red)}.mail-container .mail-form .item .input{display:flex;flex-direction:row;border:2px solid var(--phone-color-border);border-radius:5px;width:100%}.mail-container .mail-form .item .input input{background:transparent;border:none;padding:.5rem;width:100%;color:var(--phone-text-primary);font-size:16px}.mail-container .mail-form .item .input input:focus{outline:none}.mail-container .mail-form .item .input .suffix{padding:.5rem;background-color:var(--phone-color-border);color:var(--phone-text-primary);font-size:16px;font-weight:500}.mail-container .mail-form .button{display:flex;flex-direction:row;justify-content:center;padding:.5rem 1.25rem;border-radius:7px;width:100%;box-sizing:border-box;background-color:var(--phone-color-highlight3);color:var(--phone-text-primary);font-size:18px;font-weight:500;cursor:pointer;transition:.2s all ease-in-out}.mail-container .mail-form .button:hover{filter:brightness(.8)}.mail-container .mail-form .footer{display:flex;align-items:center;gap:.3rem;position:absolute;bottom:3.5rem;font-size:17px;color:var(--phone-text-primary)}.mail-container .mail-form .footer span{color:var(--phone-color-blue);font-weight:500;cursor:pointer;transition:all .2s ease-in-out}.mail-container .mail-form .footer span:hover{filter:brightness(.8)}.mail-container .mail-header{width:94%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:.5rem 0;box-sizing:border-box;margin-top:4rem}.mail-container .mail-header .title{color:var(--phone-text-primary);font-size:28px;font-weight:600;font-style:bold}.mail-container .mail-header svg{font-size:24px;color:var(--phone-color-blue);cursor:pointer}.mail-container .mail-header svg.options{font-size:22px}.mail-container .mail-header svg:hover{filter:brightness(.7)}.mail-container .mail-header .left{display:flex;flex-direction:row;align-items:center;font-size:18px;color:var(--phone-color-blue);cursor:pointer}.mail-container .searchbox{width:81.25%;z-index:1;background-color:var(--app-secondary);padding:.65rem .75rem;border-radius:12px}.mail-container .mail-footer{position:absolute;bottom:0;background-color:var(--app-secondary);width:100%;padding:1rem 0 3rem;display:flex;justify-content:center}.mail-container .mail-footer .footer-wrapper{display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:85%}.mail-container .mail-footer .footer-wrapper .text{display:flex;flex-direction:column;align-items:center}.mail-container .mail-footer .footer-wrapper .text .title{font-size:16px;font-weight:500;color:var(--phone-text-primary)}.mail-container .mail-footer .footer-wrapper .text .count{font-size:15px;font-weight:400;color:var(--phone-text-secondary)}.mail-container .mail-footer .footer-wrapper svg{font-size:33px;color:var(--phone-color-blue);cursor:pointer}.mail-container .mail-wrapper{display:flex;flex-direction:column;align-items:center;-webkit-user-select:text;user-select:text;height:50rem;background-color:var(--phone-color-highlight);padding-bottom:10rem;overflow-y:auto;overflow-x:hidden;width:100%}.mail-container .mail-wrapper::-webkit-scrollbar{display:none}.mail-container .mail-wrapper .item-header{display:flex;align-items:flex-start;justify-content:space-between;border-top:1px solid var(--phone-color-border);width:88%;padding-top:1rem;padding-bottom:.75rem}.mail-container .mail-wrapper .item-header .user{display:flex;flex-direction:column;gap:.2rem}.mail-container .mail-wrapper .item-header .user .name{font-size:18px;font-weight:500;color:var(--phone-text-primary)}.mail-container .mail-wrapper .item-header .user .to{font-size:14px;font-weight:400;color:var(--phone-text-secondary)}.mail-container .mail-wrapper .item-header .user .to span{font-weight:500;color:var(--phone-text-primary)}.mail-container .mail-wrapper .item-header .date{font-size:14px;font-weight:400;color:var(--phone-text-secondary)}.mail-container .mail-wrapper .item{width:88%;padding:.75rem 0;color:var(--phone-text-primary)}.mail-container .mail-wrapper .item.subject{font-size:18px;font-weight:500;border-top:1px solid var(--phone-color-border);padding-bottom:0}.mail-container .mail-wrapper .item.message{height:auto;padding-top:0}.mail-container .mail-wrapper .item.message textarea{width:100%;font-size:16px;font-weight:400;color:var(--phone-text-primary);background:transparent;font-family:inherit;border:none;resize:none;overflow:hidden}.mail-container .mail-wrapper .item.message textarea:focus{outline:none}.mail-container .mail-wrapper .item.message textarea::-webkit-scrollbar{display:none}.mail-container .mail-wrapper .item.attachments{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}.mail-container .mail-wrapper .item.attachments .attachment,.mail-container .mail-wrapper .item.attachments img{width:100%;height:100%;object-fit:cover;border-radius:8px;cursor:pointer}.mail-container .mail-wrapper .item.actions{padding:1.5rem 0;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:1.5rem;width:100%}.mail-container .mail-wrapper .item.actions .action{padding:.75rem 1.5rem;border-radius:8px;background-color:var(--phone-color-highlight3);font-size:18px;cursor:pointer;transition:all .2s ease-in-out}.mail-container .mail-wrapper .item.actions .action:hover{filter:brightness(.9)}.mail-container .mail-list{display:flex;flex-direction:column;max-height:45rem;width:88%;margin-top:1rem;background-color:var(--app-secondary);border-radius:14px;overflow-y:auto;overflow-x:hidden;margin-bottom:6rem}.mail-container .mail-list::-webkit-scrollbar{display:none}.mail-container .mail-list .mail{display:flex;flex-direction:column;align-items:center;width:100%;padding:1rem 5%;box-sizing:border-box;position:relative;border-top:1px solid var(--phone-color-border);cursor:pointer;transition:.2s}.mail-container .mail-list .mail:first-child{border-top:none}.mail-container .mail-list .mail:hover{background-color:var(--phone-color-hover)}.mail-container .mail-list .mail .symbol{position:absolute;left:1.1rem;top:0;bottom:0;margin:auto 0;width:.7rem;height:.7rem;border-radius:50%;background:transparent}.mail-container .mail-list .mail .symbol[data-read=false]{background:#348de9}.mail-container .mail-list .mail .item-header{display:flex;align-items:center;justify-content:space-between;width:100%}.mail-container .mail-list .mail .item-header .user{display:flex;flex-direction:row;align-items:center;gap:.75rem;margin-left:1.7rem}.mail-container .mail-list .mail .item-header .user .sender{color:var(--phone-text-primary);font-size:16px;font-weight:600;line-height:22px;display:flex;align-items:center;gap:.3rem}.mail-container .mail-list .mail .item-header .user .sender span{font-size:16px;font-weight:400;color:var(--phone-text-secondary)}.mail-container .mail-list .mail .item-header .date{display:flex;flex-direction:row;align-items:center;gap:.25rem;color:var(--phone-text-secondary);font-size:14px;font-weight:400}.mail-container .mail-list .mail .item-header .date svg{font-size:18px}.mail-container .mail-list .mail .item-body{width:90%;display:flex;flex-direction:column;gap:.25rem;margin-left:1.5rem}.mail-container .mail-list .mail .item-body .subject{font-size:16px;font-weight:500;color:var(--phone-text-primary);overflow-wrap:break-word}.mail-container .mail-list .mail .item-body .message{font-size:14px;color:var(--phone-text-secondary);overflow-wrap:break-word}.mail-container .new-mail-container{position:absolute;bottom:0;z-index:2;height:100%;width:100%;background-color:var(--phone-color-primary);display:flex;flex-direction:column;align-items:center}.mail-container .new-mail-container .mail-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;padding-top:1.5rem;padding:1rem 5%;border-radius:15px 15px 0 0;background-color:var(--phone-color-highlight2)}.mail-container .new-mail-container .mail-header .title{font-size:18px;font-weight:500;color:var(--phone-text-primary);text-align:center}.mail-container .new-mail-container .mail-header .cancel,.mail-container .new-mail-container .mail-header .send{font-size:16px;font-weight:400;color:var(--phone-color-blue);cursor:pointer}.mail-container .new-mail-container .mail-header .cancel[data-disabled=true],.mail-container .new-mail-container .mail-header .send[data-disabled=true]{color:var(--phone-text-secondary);cursor:not-allowed}.mail-container .new-mail-container .mail-options{width:90%;height:80%;display:flex;flex-direction:column}.mail-container .new-mail-container .mail-options .option{display:flex;flex-direction:row;align-items:center;gap:.25rem;padding:.75rem 0;width:100%;border-top:1px solid var(--phone-color-border);-webkit-user-select:text;user-select:text}.mail-container .new-mail-container .mail-options .option .title{font-size:16px;color:var(--phone-text-secondary)}.mail-container .new-mail-container .mail-options .option.textarea{flex-direction:column;align-items:inherit;position:relative;max-height:37rem}.mail-container .new-mail-container .mail-options .option.textarea .attachments{width:100%;display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}.mail-container .new-mail-container .mail-options .option.textarea .attachments .attachment{position:relative}.mail-container .new-mail-container .mail-options .option.textarea .attachments .attachment img{width:100%;height:100%;object-fit:cover;border-radius:8px;cursor:pointer;filter:brightness(.8)}.mail-container .new-mail-container .mail-options .option.textarea .attachments .attachment svg{position:absolute;top:.5rem;right:.5rem;height:1.5rem;width:1.5rem;padding:.1rem;border-radius:50%;display:flex;align-items:center;justify-content:center;background-color:#000c;color:#fff;cursor:pointer;font-size:13px}.mail-container .new-mail-container .mail-options .option input{width:70%;font-size:16px;border:none;background:transparent;color:var(--phone-text-primary)}.mail-container .new-mail-container .mail-options .option input.blue{color:var(--phone-color-blue)}.mail-container .new-mail-container .mail-options .option input:focus{outline:none}.mail-container .new-mail-container .mail-options .option input:disabled{color:var(--phone-text-secondary)}.mail-container .new-mail-container .mail-options .option textarea{width:100%;background-color:pink;font-size:18px;color:var(--phone-text-primary);font-family:Roboto,sans-serif;resize:none;border:none;background:transparent}.mail-container .new-mail-container .mail-options .option textarea:focus{outline:none}.mail-container .new-mail-container .mail-options .option textarea:disabled{color:var(--phone-text-secondary)}.mail-container .new-mail-container .mail-options .option textarea::-webkit-scrollbar{display:none}
