* {box-sizing:border-box;}



body {font-family:sans-serif; font-weight:100; margin:0;}
html,body {height:100%;}
div#container {height:100%; background-color:#000D; color:#FFF; display:flex; flex-direction:column; justify-content:space-between; user-select:none;}



/* Caller ID Section */

div#container section#callerid {padding:4rem 0; text-align:center;}

div#container section#callerid h1.head {font-size:2.5rem; font-weight:100; margin:0; margin-bottom:1rem;}
div#container section#callerid h1#name {display:block;}
div#container section#callerid h1#number {display:none;}
div#container section#callerid h1#number span#areacode:before {content:'(';}
div#container section#callerid h1#number span#areacode::after {content:')';}
div#container section#callerid h1#number span#countrycode:before {content:'+';}

/* Show phone number when no name available */
div#container section#callerid h1#name:empty {display:none;}
div#container section#callerid h1#name:empty + h1#number {display:block;}

div#container section#callerid h2.locale {font-size:1.25rem; font-weight:100; margin:0; margin-top:1rem;}
div#container section#callerid h2.locale span#locale {display:block;}
div#container section#callerid h2.locale span#device {display:none;}

/* Show indicator when remote device */
div#container.remote section#callerid h2.locale span#locale {display:none;}
div#container.remote section#callerid h2.locale span#device {display:block;}



/* Action Section */


div#container section.action {padding:1rem 3rem;}
div#container section.action main {max-width:16rem; margin:0 auto;}
div#container.in section.action main {/*max-width:22rem;*/}


div#container section.action div.later {display:flex; flex-direction:row; justify-content:space-between;}
div#container section.action div.later div.btn {display:flex; flex-direction:column; align-items:center; cursor:pointer;}
div#container section.action div.later div.btn svg {font-size:1.5rem;}
div#container section.action div.later div.btn div.label {font-size:.75rem; margin-top:.65rem; text-align:center;}


div#container section.action div.decide {padding:3px; margin:3rem 0;}
div#container section.action div.decide {display:flex; flex-direction:row;}
div#container section.action div.decide div.btn {display:flex; flex-direction:column; align-items:center; cursor:pointer; position:relative;}
div#container section.action div.decide div.btn div.icon {background-color:#FFF8; border-radius:50%; min-width:4rem; min-height:4rem;}
div#container section.action div.decide div.btn div.icon {display:flex; flex-direction:column; justify-content:center; align-items:center;}
div#container section.action div.decide div.btn div.icon svg {font-size:1.75rem;}
div#container section.action div.decide div.btn div.label {font-size:.75rem; margin-top:.5rem;}
div#container section.action div.decide div.btn div.label {position:absolute; top:100%; width:100%; text-align:center;}

div#container section.action div.decide div.btn#accept div.icon {background-color:#35C759;}
div#container section.action div.decide div.btn#decline div.icon {background-color:#FD3D30;}
div#container section.action div.decide div.btn#decline div.icon svg {transform:translateY(.125rem) rotate(135deg);}

div#container section.action div.decide div.slidebar {background-color:#FFF4; border-radius:50rem; padding:.25rem; cursor:pointer; flex-basis:1 0 100%;}
div#container section.action div.decide div.slidebar {display:flex; flex-direction:row; justify-content:stretch; align-items:center;}
div#container section.action div.decide div.slidebar div.dot {background-color:#FFF; border-radius:50%; min-width:4rem; min-height:4rem; transform:translateX(0);}
div#container section.action div.decide div.slidebar div.dot {display:flex; flex-direction:column; justify-content:center; align-items:center;}
div#container section.action div.decide div.slidebar div.dot svg {font-size:1.75rem; color:#30D158;}
div#container section.action div.decide div.slidebar div.text {padding: 0 2rem; font-size:1.25rem; white-space:nowrap;}


/* Custom Action Section for Unlocked Screen */
div#container section.action div.decide {justify-content:center;}
div#container section.action div.decide div.btn {display:none;}
div#container section.action div.decide div.slidebar {display:flex;}
div#container.in section.action div.decide {justify-content:space-between;}
div#container.in section.action div.decide div.btn {display:flex;}
div#container.in section.action div.decide div.slidebar {display:none;}