div, li, table, td {box-sizing:border-box}
body {margin:0; padding:0; overflow-x: hidden; max-width:100%; font-family:'Poppins', Arial;}
body.blue {background-color:#0043ff;}
.wrapper {width:500px; max-width:100%; margin:0px auto; position:relative;  z-index:1; height:100vh; min-height:100%;}

.home__logo {position:absolute; top:15px; right:15px; width:80px; color:#ffffff; text-align:center;}
.home__logos img {display:block; margin-bottom:10px; width:100%;}
.home__welcome {padding:80px 20px 0px 20px; color:#ffffff; font-size:20px; width:400px; max-width:100%}
.home__welcome div {margin-bottom:15px; font-size:55px; font-weight:600; line-height:50px;}

.home__circle {position:absolute; top: 40px; left:-70px; width:180px; height:180px; border-radius:90px; background:#02195a; z-index:-1;}
.home__fakeinput {position:absolute; border:2px dashed #ffffff; width:200px; height:60px; border-radius:30px; }
.home__dot {position:absolute; top:19px; right:19px; height:20px; width:20px; border-radius:10px; background:#ffffff;}
.home__star {position:absolute; top:13px; right:17px; width:28px; }
.home__star img {width:100%; }
.home__btn {position:absolute; top:550px; left:calc(50% - 150px); width:300px; height:80px; border-radius:40px; background:#02195a; color:#ffffff; font-size:26px; cursor:pointer; text-align:center; line-height:80px;}

.home__bg__start {position:absolute; top:0px; left:0px; width:100%;}
.home__bg__form {position:absolute; top:0px; left:400%; width:100%; padding-top:300px;}
.home__bg__form input {display:block; width:80%; height:50px; background:#ffffff; border:0; border-radius:25px; margin:0px auto 20px; padding-left:20px; padding-right:20px;}
.home__hash1 {position:absolute; top:450px; right:50px; width:60px; transform: rotate(-15deg);}
.home__hash1 img {width:100%; }
.home__hash2 {position:absolute; top:370px; left:50px; width:70px; transform: rotate(15deg);}
.home__hash2 img {width:100%; }
.home__hash3 {position:absolute; top:290px; right:20px; width:60px; background:#02195a; height:60px; border-radius:30px;}

.logged1__bg {background-color:#f2f2f2; }
.logged1__hash {position:absolute; z-index:-1; width:200px; opacity:30%;}
.logged1__hash img {width:100%; }

.logged__welcome {padding:80px 20px 0px 20px; color:#02195a; font-weight:300; font-size:24px; width:calc(100% - 40px); max-width:100%; z-index:5}
.logged__welcome span {color:#0043ff}
.logged__welcome div {margin-bottom:25px; font-size:55px; font-weight:700; line-height:50px; z-index:5}
.logged__btn_w1 {width:300px; height:300px; margin:45px auto 0px; border-radius:70px; background:#b2c4f5; padding:15px; cursor:pointer;}
.logged__btn_w2 {width:270px; height:270px; border-radius:60px; background:#83a2f7; padding:25px; cursor:pointer;}
.logged__btn_w3 {width:220px; height:220px; border-radius:45px; background:#0043ff; cursor:pointer; text-align:center; color:#ffffff; font-weight:700; font-size:42px; text-transform:uppercase; line-height:220px; position:relative;}
.logged__loading {position:absolute; width:30px; height:30px; background:#ffffff; border-radius:15px; top:105px;}

.room__wrapper {width:100%; background:#f2f2f2; border-top-left-radius:50px; border-top-right-radius:50px; padding:50px 40px; margin-top:40px; max-width:100%;}
.room__subheader {font-size:22px; font-weight:300; color:#02195a; position:relative; margin-top:10px;}
.room__header {font-size:26px; font-weight:600; color:#02195a; position:relative;}
.room__header img {position:absolute; top:0px; right:0px; width:35px;}
.room__number {background:#ffffff; width:100%; border-radius:20px; text-align:center; line-height:180px; font-size:100px; font-weight:700; color:#0043ff; margin-top:20px;}

.room__persons {background:#ffd9d8; width:100%; border-radius:20px; padding:20px; margin-top:20px;}
.room__persons ul {margin:0px 0px 0px 50px; padding:0px; list-style:none;}
.room__persons ul li {margin:10px 0px; color:#919191; display:block; padding:10px 20px; position:relative; line-height:26px; font-size:16px; background:#ffffff; width:100%; border-radius:20px; }
.room__persons ul li:before {content:' '; position:absolute; left:-50px; top:0px; width:40px; height:40px; border-radius:20px; background:#fe6532; color:#fe6532;
-webkit-box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.2);}

.room__breaker {margin:50px auto 35px; width:calc(100% - 30px); height:0px; border-top:1px solid #cecece; }

.room__task {border-radius:20px; background:#ffffff; padding:30px 20px; margin-top:20px; display:table; width:100%; max-width:100%; table-layout: fixed;}
.room__task__completed {background:#00e799 !important;}
.room__task__hash {display:table-cell; width:65px; font-size:50px; color:#0043ff; font-weight:bold; vertical-align:middle;}
.room__task__name {display:table-cell; color:#02195a; font-size:24px; vertical-align:middle; word-wrap: break-word; padding-right:15px; line-height:30px;}
.room__task__check {display:table-cell; vertical-align:middle; width:60px;}
.room__task__check_btn {width:60px; height:60px; border-radius:30px; background:#d5d5d5; color:#ffffff; font-size:30px; text-align:center; line-height:60px; cursor:pointer;
-webkit-box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.2);}
.room__task__check_btn__completed {background:#ffffff !important; color:#00e799;}
.room__task__check a {text-decoration:none;}