/*IMPORTANT INFO==============z-index values:all loaders have: 10000the top right menu: 9000about me page: 8000overlay: 5000*//* @import url('https://fonts.googleapis.com/css?family=Roboto:400,500'); */@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600');body{/* font-family: 'Roboto', sans-serif; */ font-family: 'Open Sans', sans-serif; /*background:#e0e3e9;*/ background: url('/3.jpeg'); color:rgb(58, 71, 83);}*,*:before,*:after{margin:0; padding:0; box-sizing: border-box;}/* utils */.overlay{position:absolute; top:0; left:0; right:0; bottom:0; z-index: -1000; transition:.2s}.overlay.active{z-index:5000; background: rgba(11, 15, 17, 0.65);}/* utils end */.main{position:absolute; top:50%; left:50%; width:352px; transform: translate(-50%,-50%); padding:40px 30px 10px 30px; background:#fff; border-radius: 4px; background-size:cover; overflow:hidden; backface-visibility: hidden; box-shadow:0 2px 4px 0 rgba(22,26,33,.2);}/*=====================================menu top right */.menu{position:absolute; top:16px; right:16px; z-index:9000;}.menu>.menu-icon{position:absolute; top:0; right:0; height:34px; width:34px; background:rgb(242, 244, 246); border-radius: 999px; display:flex; align-items:center; justify-content: center; transition:.2s;}.menu.active>.menu-icon{background:rgb(168, 180, 190);}.about-wrapper.active .menu.active>.menu-icon{background:rgb(0, 140, 255);}.menu>.menu-icon:hover{background:rgb(168, 180, 190);}.menu>.menu-icon>img{height:48%;}.menu>.menu-items{position:absolute; top:35px; right:-10px; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.38); padding:10px 0; background:#fff; border-radius: 4px; transform:scale(.7); opacity:0; transform-origin:top right; /* border-bottom:2px solid rgb(30, 97, 175); */ transition:.15s;}.menu.active>.menu-items{right:5px; opacity:1; transform:scale(1);}.menu>.menu-items ul{list-style-type: none; /* margin-right:15px; */}.menu>.menu-items ul>li{padding:5px 22px 5px 20px; font-size:14px; font-weight:600; color:rgb(49, 68, 75); /* cursor: pointer; */}.menu>.menu-items ul>li:hover{background: #d4dae0;}/* menu ends */.logo{display: flex; justify-content: center; margin-bottom:10px; margin-top:10px;}.logo>.logo-img{height:35px;}.heading{text-align:center;}.heading > .h_main{/* display:inline-block; */ font-size:24px; font-weight:600;}.heading > .h_sub{/* display:inline-block; */ font-size:16px; font-weight:600; margin-top:8px; height:30px; text-align: center; font-size:14px; line-height:8px; letter-spacing: -0.1px;}/*===========================================user tag (not visible by default)but when sign in is clicked....it displays with the input email value===========================================*/.tag-wrapper{display:flex; justify-content: center;}.user-tag{display: inline-block; position:relative; border-radius: 9999px; background:rgb(248, 254, 255); padding:5px; margin-top:12px; height:30px; /* border: 1px solid rgb(179, 196, 211); */ /* text-align: center; */ font-size:14px; color:#4b4f5a; font-weight: 600; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);}.user-tag:hover,.user-tag:focus{box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);}.user-tag>img:first-child{margin-right:10px;}.user-tag>.email-text{max-width:200px; white-space: nowrap; overflow: hidden !important; text-overflow: ellipsis;}.user-tag>img:last-child{width:10px; margin:10px;}.user-tag>img{height:100%;}/* user tag end */.slide-content{margin-top:18px; overflow:hidden; position: relative; width:100%; height:265px; /* background:rgb(131, 131, 131); */ transition:height .25s 2.5s, margin-top .25s 2.5s;}.slide-content.pass-input{margin-top:24px; height:201px;}.content1{/* background:#9c4e4e; */ position: absolute; left:0; width:100%; transition:.25s 2.5s;}.slide-content.pass-input .content1{position: absolute; left:-100%;}/* content-1 styles start */.forgot{display:inline-block; font-size:14px; font-weight:600; color:rgb(0, 130, 190); text-decoration: none; /* margin-top:10px; */}.info{font-size: 12px; margin-top:1px;}.create-next{display:flex; justify-content: space-between; font-size: 14px; font-weight: 600; margin-top:25px; align-items:center;}.content2 .create-next{display: flex; align-items: center; justify-content: space-around;}/* content-1 styles end */.content2{position: absolute; right:-100%; width:100%; transition:.25s 2.5s;}.slide-content.pass-input .content2{position: absolute; right:0;}.content2 .go-back{background-color: rgb(255, 255, 255); /* Green */ /* border: none; */ color: rgb(0, 0, 0); padding: 8px 26px; text-align: center; text-decoration: none; display: inline-block; font-size: 14px; font-weight:600; background: #e3e6ea; border-radius: 4px; transition: .2s;}.content2 .go-back:hover{background: #babfc5;}.content2 .go-back>img{height:10px; transition: .2s .15s;}.content2 .go-back:hover>img{height:10px; margin-right:5px;}/*================================================about page starts================================================*/.about-wrapper{position:absolute; left:0; bottom:-100%; width:100%; height:100%; z-index:8000; background:#fff; display:flex; align-items: flex-end; justify-content: center; transition:.35s;}.about-wrapper.active{position:absolute; bottom:0; left:0; background: rgb(255, 255, 255); box-shadow:0 -2px 4px 2px rgba(39, 46, 47, 0.2);}.about-wrapper.active .close-about{position:absolute;}.about-wrapper.active .about-header{position:absolute; top:0; left:0; height:180px; /* just for that inclined effect of the about header */ border-bottom:32px solid rgb(255, 255, 255); border-left: 352px solid transparent; background:rgb(231, 255, 217);}/*============================================inputs and buttons are here============================================*//* field */.input-group{position:relative;}.field{width:100%; padding: 12px 20px; margin: 8px 0; outline:none; border:2px solid #b1b1b1; border-radius: 4px; font-size:16px; font-weight:600; color:rgb(97, 111, 119); transition:.2s border; /* background:#364349; */}.field-label{position:absolute; top:50%; transform:translatey(-50%); font-size:14px; font-weight:600; color:rgb(100, 118, 129); margin-left:25px; background:rgb(255, 255, 255); transition: .2s;}.field-label.active{top:13%; margin-left:10px; padding:0 5px; font-size:12px; color:rgb(93, 143, 236);}.field-label.active + .field{border:2px solid rgb(85, 128, 209);}.show-hide-pass{position:absolute; top:50%; transform:translatey(-50%); right:14px; height:24px;}/* buttons */.btn{position: relative; background-color: #4CAF50; /* Green */ border: none; color: white; padding: 9px 26px; text-align: center; text-decoration: none; display: inline-block; font-size: 14px; font-weight:600; border-radius: 4px; box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); outline: none; margin-right:10px; transition: box-shadow 0.2s;}.btn::before{content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(255,255,255,.4); opacity: 0; transition: opacity 0.2s;}/* Ripple */.btn::after{content: ""; position: absolute; left: 50%; top: 50%; border-radius: 50%; padding: 50%; width: 32px; /* Safari */ height: 32px; /* Safari */ background-color: rgba(255,255,255,0.35); opacity: 0; transform: translate(-50%, -50%) scale(1); transition: opacity 1s, transform 0.5s;}.btn:hover,.btn:focus{box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);}.btn:hover::before{opacity: 0.08;}.btn:focus::before{opacity: 0.24;}.btn:hover:focus::before{opacity: 0.3;}/* Active */.btn:active{box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);}.btn:active::after{opacity: 0.32; transform: translate(-50%, -50%) scale(0); transition: transform 0s;}/* disabled bth */.btn:disabled{color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38); background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.12); box-shadow: none; cursor: initial;}.btn:disabled::before{opacity: 0;}.btn:disabled::after{opacity: 0;}/*=============================================inputs end=============================================*//*===========================================LOADER-1============================================*/.preloader{position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 10000; background: rgb(249, 249, 249,0.75);}.preloader-bar{display: inline-block; position: absolute; height: 3.5px; width: 100%; /* background-color: #ff7300; */ overflow: hidden;}.preloader-bar .preloader-bars{/* background-color: #2677a6; */ /* border-radius: 999px; */}.preloader-bar .preloader-bars:before{content: ''; position: absolute; background-color: inherit; top: 0; left: 0; bottom: 0; border-radius:2px; background:rgb(246, 175, 134); will-change: left, right; animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite,animColor 2.5s 1s infinite;}.preloader-bar .preloader-bars:after{content: ''; position: absolute; background-color: inherit; top: 0; left: 0; bottom: 0; background-color: #2677a6; will-change: left, right; animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite,animColor 2.5s infinite; animation-delay: 1.15s;}@keyframes animColor{0%{background: #A3F050; background: hsl(89, 85%, 63%);}10%{background: #53F050; background: hsl(119, 85%, 63%);}20%{background: #50F09D; background: hsl(149, 85%, 63%);}30%{background: #50F0EE; background: hsl(179, 85%, 63%);}40%{background: #50A3F0; background: hsl(209, 85%, 63%);}50%{background: rgb(110, 111, 219); background: hsl(239, 77%, 67%);}60%{background: #9D50F0; background: hsl(269, 85%, 63%);}70%{background: #EE50F0; background: hsl(299, 85%, 63%);}80%{background: #F050A3; background: hsl(329, 85%, 63%);}90%{background: #F05053; background: hsl(359, 85%, 63%);}95%{background: #F09D50; background: hsl(29, 85%, 63%);}100%{background: #A3F050; background: hsl(89, 85%, 63%);}}@keyframes indeterminate{0%{left: -35%; right: 110%;}60%{left: 100%; right: -90%;}100%{left: 100%; right: -90%;}}@keyframes indeterminate-short{0%{left: -200%; right: 100%;}60%{left: 110%; right: -10%;}100%{left: 110%; right: -10%;}}/*===========================================LOADER-2============================================*/#loader-2{position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 10000; background-color: rgba(249, 249, 249, 0.815);}.three-balls{margin: 0 auto; width: 60px; text-align: center; position: absolute; left: 0; right: 0; top: 45%; transform:translatey(-50%)}.three-balls .ball{position: relative; width: 13px; height: 13px; border-radius: 50%; display: inline-block; box-shadow: 0 1px 1px 1px rgba(39, 46, 47, 0.2); animation: bouncedelay 3.0s infinite cubic-bezier(.62, .28, .23, .99) both;}.three-balls .ball1{-webkit-animation-delay: -.16s; animation-delay: -.16s;}.three-balls .ball2{-webkit-animation-delay: -.08s; animation-delay: -.08s;}.loader-2-text{position:absolute; top:55%; left:50%; transform:translate(-50%,-50%); font-weight:600; color:rgb(103, 119, 129);}@keyframes bouncedelay{0%{bottom: 0; background-color: #03A9F4;}16.66%{bottom: 30px; background-color: #FB6542;}33.33%{bottom: 0px; background-color: #FB6542;}50%{bottom: 30px; background-color: #FFBB00;}66.66%{bottom: 0px; background-color: #FFBB00;}83.33%{bottom: 30px; background-color: #03A9F4;}100%{bottom: 0; background-color: #03A9F4;}}