*{box-sizing:inherit;margin:0;padding:0}html{box-sizing:border-box;font-family:Source Sans Pro,sans-serif}.App{align-items:center;display:flex;height:100vh;justify-content:center}.mobile-container{background-color:#fbfbff;border-radius:20px;box-shadow:0 4px 4px rgba(0,0,0,.25);height:542px;padding:20px;position:relative;width:300px}.mobile-container .input-wrapper{display:flex}.mobile-container .input-wrapper .phone-number-input{background-color:#fbfbff;border:none;font-size:32px;height:40px;margin:20px 0;outline:none;width:100%}.mobile-container .input-wrapper .phone-number-input::-webkit-input-placeholder{font-size:24px}.mobile-container .input-wrapper .phone-number-input:-ms-input-placeholder{font-size:24px}.mobile-container .input-wrapper .phone-number-input::placeholder{font-size:24px}.mobile-container .input-wrapper .delete-btn{align-items:center;cursor:pointer;display:flex;margin:20px 0}.mobile-container .input-wrapper .delete-btn .delete-icon{color:darkred;font-size:28px}.mobile-container .call-btn{align-items:center;background-color:#5fdd5a;border:none;border-radius:50%;box-shadow:0 0 6px 8px rgba(0,0,0,.05);cursor:pointer;display:flex;height:54px;justify-content:center;margin:auto auto 20px;transition:all .2s ease-in-out;width:54px}.mobile-container .call-btn:hover{-webkit-transform:scale3d(1.1,1.1,1);transform:scale3d(1.1,1.1,1)}.mobile-container .call-btn .call-icon{color:#fff;font-size:26px}.mobile-container .header{align-items:center;display:flex;justify-content:space-between}.mobile-container .header .logo{color:#00008b;font-size:20px;font-weight:700;letter-spacing:1px}.mobile-container .header .history-btn{align-items:center;border-radius:50%;color:#ffb40b;cursor:pointer;display:flex;font-size:22px;transition:all .3s ease-in-out}.mobile-container .header .history-btn:hover{background-color:#e8e8fc;box-shadow:0 0 4px rgba(0,0,0,.25)}.number-keyboard{align-items:center;display:flex;flex-wrap:wrap;justify-content:space-between;margin:20px 0}.number-keyboard .item{margin-bottom:16px;width:30%}.number-item{align-items:center;border:1px solid #ececec;border-radius:50%;box-shadow:0 0 2px rgba(0,0,0,.25);cursor:pointer;display:flex;flex-direction:column;height:56px;justify-content:center;margin:auto;transition:all .3s ease-in-out;width:56px}.number-item:hover{background-color:#ecf8f0}.number-item .number{color:#322;font-size:24px;font-weight:600;line-height:24px}.number-item .letters{color:#555;font-size:12px;letter-spacing:1.4px;line-height:12px;text-transform:uppercase}.call-container{align-items:center;background-color:#fbfbff;border-radius:20px;box-shadow:0 4px 4px rgba(0,0,0,.25);display:flex;flex-direction:column;height:542px;justify-content:space-between;padding:30px 20px 40px;width:300px}.call-container .call-top .avatar{align-items:center;background-color:#ddd;border-radius:50%;display:flex;height:80px;justify-content:center;margin:auto;width:80px}.call-container .call-top .avatar .person-icon{color:#888;font-size:48px}.call-container .call-top .phone-number{color:#555;font-size:22px;font-weight:600;letter-spacing:1px;margin:8px 0 2px}.call-container .call-top .status{color:#999;display:block;letter-spacing:1px;text-align:center}.call-container .keypad{position:relative;width:180px}.call-container .keypad .number-keyboard{margin-bottom:8px;margin-top:8px}.call-container .keypad .number-keyboard .item{margin-bottom:10px}.call-container .keypad .number-keyboard .item .number-item{height:46px;width:46px}.call-container .keypad .phone-number{font-size:22px;font-weight:600;letter-spacing:2px;min-height:28px}.call-container .keypad .close-icon{color:darkred;cursor:pointer;font-size:24px;position:absolute;right:0;top:0}.call-container .call-bottom .actions{display:flex;justify-content:space-between;margin-bottom:20px}.call-container .call-bottom .actions .actions-item{align-items:center;border-radius:50%;cursor:pointer;display:flex;height:36px;justify-content:center;margin:0 20px;transition:all .3s ease-in-out;width:36px}.call-container .call-bottom .actions .actions-item:hover{background-color:rgba(0,0,0,.05)}.call-container .call-bottom .actions .actions-item .actions-icon{font-size:24px}.call-container .call-bottom .actions .actions-item.active{background-color:rgba(0,0,0,.05);box-shadow:0 0 4px 2px rgba(0,0,0,.25)}.call-container .call-bottom .cancel{align-items:center;background-color:#ff5353;border:none;border-radius:50%;box-shadow:0 0 6px 8px rgba(0,0,0,.05);color:#fbfbff;cursor:pointer;display:flex;font-size:32px;height:60px;justify-content:center;justify-self:flex-end;margin:auto;transition:all .2s ease-in-out;width:60px}.call-container .call-bottom .cancel:hover{-webkit-transform:scale3d(1.05,1.05,1);transform:scale3d(1.05,1.05,1)}.history-container{background-color:#fbfbff;border-radius:20px;box-shadow:0 4px 4px rgba(0,0,0,.25);height:542px;padding:30px 0 40px 20px;width:300px}.history-container .header{justify-content:space-between;margin-bottom:4px;width:100%}.history-container .header,.history-container .header .wrapper{align-items:center;display:flex}.history-container .header .wrapper .icon{align-items:center;border:1px solid #fbfbff;border-radius:50%;cursor:pointer;display:flex;justify-content:center;transition:all .3s ease}.history-container .header .wrapper .icon:hover{border-color:green}.history-container .header .wrapper .icon .back-icon{color:green;font-size:18px}.history-container .header .wrapper .title{color:#ffb40b;font-size:24px;margin-left:12px}.history-container .header .delete-icon{align-items:center;border:1px solid #fbfbff;border-radius:50%;color:red;cursor:pointer;display:flex;font-size:18px;margin-right:10px;padding:4px;transition:all .3s ease-in-out}.history-container .header .delete-icon:hover{border-color:red;box-shadow:0 0 4px 2px rgba(0,0,0,.05)}.history-container .lists{height:100%;margin-left:12px;overflow-y:scroll}.history-container .lists p{color:#555;font-size:14px;font-style:italic}.history-container .lists::-webkit-scrollbar{border-radius:4px;width:4px}.history-container .lists::-webkit-scrollbar-thumb{background:#999;border-radius:4px}.history-container .lists::-webkit-scrollbar-track{border-radius:4px}.history-container .lists .history-item{align-items:center;display:flex;justify-content:space-between;margin-bottom:8px}.history-container .lists .history-item .content{display:flex}.history-container .lists .history-item .content .time{font-size:14px;font-weight:600}.history-container .lists .history-item .content .info{display:flex;flex-direction:column;margin-left:20px;position:relative}.history-container .lists .history-item .content .info:before{background-color:#5454f3;border-radius:3px;content:"";height:calc(100% - 16px);left:-10px;position:absolute;top:16px;width:3px}.history-container .lists .history-item .content .info:after{border:1px solid #5454f3;border-radius:50%;content:"";height:3px;left:-11px;position:absolute;top:8px;width:3px}.history-container .lists .history-item .content .info .phone-number{color:#00008b;font-size:18px;font-weight:600}.history-container .lists .history-item .content .info .status{color:#999;font-size:16px}.history-container .lists .history-item .content .info .status.success em{color:green;font-weight:700}.history-container .lists .history-item .content .info .status.fail em{color:red;font-weight:700}.history-container .lists .history-item .content .info .duration{color:#999;font-size:16px}.history-container .lists .history-item .content .info .duration em{color:#555}.history-container .lists .history-item .icon-delete{align-items:center;border-radius:50%;color:red;cursor:pointer;display:flex;height:32px;justify-content:center;margin-right:28px;transition:all .2s ease-in-out;width:32px}.history-container .lists .history-item .icon-delete:hover{background-color:#cad2ff;box-shadow:0 0 2px 4px rgba(0,0,0,.05)}
/*# sourceMappingURL=main.1854ce7e.css.map*/