<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/Khairy12/pen/VMNwpj?depth=everything&order=popularity&page=75&q=Overlay&show_forks=false" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' />
<link href="https://fonts.googleapis.com/css?family=Archivo+Narrow|Montserrat" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.css" rel='stylesheet' type='text/css' />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<style class="cp-pen-styles">*{
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
a{
text-decoration: none;
}
a:active, a:visited {
color: inherit;
}
.list-container::-webkit-scrollbar {
width: 5px;
height: 10px;
background-color: #004973
}
.list-container::-webkit-scrollbar-thumb {
background-color: #004973;
height: 125px;
}
.list-container::-webkit-scrollbar-track{
background: #f0f0f0
}
button{
border: none;
background: transparent;
outline: none;
cursor: pointer;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
body{
margin: 0;
padding: 0;
}
.bg{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
background: -webkit-radial-gradient(#eee, #668);
background: -o-radial-gradient(#eee, #668);
background: radial-gradient(#eee, #668);
height: 100vh;
width: 100%;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.todo{
background: #fff;
width: 30em;
position: relative;
border-bottom: 5px solid #004973;
}
.todo:before {
position: absolute;
content: '';
left: 1em;
top: 0;
height: 100%;
width: 1px;
background: #f0f0f0;
}
#overlay{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 3;
display: none;
background: rgba(0,0,0,0.5)
}
#card-main {
position: absolute;
z-index: 5555;
left: 0;
top: 0;
bottom: 0;
right: 0;
display: none;
border-top: 5px solid #004973;
border-bottom: 5px solid #004973;
-webkit-box-shadow: 0 2px 26px rgba(0, 0, 0, .3), 0 0 0 1px rgba(0, 0, 0, .1);
box-shadow: 0 2px 26px rgba(0, 0, 0, .3), 0 0 0 1px rgba(0, 0, 0, .1);
-webkit-animation: animJelly 1s linear;
animation: animJelly 1s linear;
width: 19em;
margin: auto;
height: -webkit-max-content;
height: -moz-max-content;
height: max-content;
overflow: hidden;
padding: 0 15px;
text-transform: capitalize;
background-color: #FBFBFC;
}
@-webkit-keyframes animJelly{0%{-webkit-transform:matrix3d(.7,0,0,0,0,.7,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.7,0,0,0,0,.7,0,0,0,0,1,0,0,0,0,1)}2.083333%{-webkit-transform:matrix3d(.75266,0,0,0,0,.76342,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.75266,0,0,0,0,.76342,0,0,0,0,1,0,0,0,0,1)}4.166667%{-webkit-transform:matrix3d(.81071,0,0,0,0,.84545,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.81071,0,0,0,0,.84545,0,0,0,0,1,0,0,0,0,1)}6.25%{-webkit-transform:matrix3d(.86808,0,0,0,0,.9286,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.86808,0,0,0,0,.9286,0,0,0,0,1,0,0,0,0,1)}8.333333%{-webkit-transform:matrix3d(.92038,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.92038,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}10.416667%{-webkit-transform:matrix3d(.96482,0,0,0,0,1.05202,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.96482,0,0,0,0,1.05202,0,0,0,0,1,0,0,0,0,1)}12.5%{-webkit-transform:matrix3d(1,0,0,0,0,1.08204,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1,0,0,0,0,1.08204,0,0,0,0,1,0,0,0,0,1)}14.583333%{-webkit-transform:matrix3d(1.02563,0,0,0,0,1.09149,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.02563,0,0,0,0,1.09149,0,0,0,0,1,0,0,0,0,1)}16.666667%{-webkit-transform:matrix3d(1.04227,0,0,0,0,1.08453,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.04227,0,0,0,0,1.08453,0,0,0,0,1,0,0,0,0,1)}18.75%{-webkit-transform:matrix3d(1.05102,0,0,0,0,1.06666,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.05102,0,0,0,0,1.06666,0,0,0,0,1,0,0,0,0,1)}20.833333%{-webkit-transform:matrix3d(1.05334,0,0,0,0,1.04355,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.05334,0,0,0,0,1.04355,0,0,0,0,1,0,0,0,0,1)}22.916667%{-webkit-transform:matrix3d(1.05078,0,0,0,0,1.02012,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.05078,0,0,0,0,1.02012,0,0,0,0,1,0,0,0,0,1)}25%{-webkit-transform:matrix3d(1.04487,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.04487,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}27.083333%{-webkit-transform:matrix3d(1.03699,0,0,0,0,.98534,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.03699,0,0,0,0,.98534,0,0,0,0,1,0,0,0,0,1)}29.166667%{-webkit-transform:matrix3d(1.02831,0,0,0,0,.97688,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.02831,0,0,0,0,.97688,0,0,0,0,1,0,0,0,0,1)}31.25%{-webkit-transform:matrix3d(1.01973,0,0,0,0,.97422,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.01973,0,0,0,0,.97422,0,0,0,0,1,0,0,0,0,1)}33.333333%{-webkit-transform:matrix3d(1.01191,0,0,0,0,.97618,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.01191,0,0,0,0,.97618,0,0,0,0,1,0,0,0,0,1)}35.416667%{-webkit-transform:matrix3d(1.00526,0,0,0,0,.98122,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00526,0,0,0,0,.98122,0,0,0,0,1,0,0,0,0,1)}37.5%{-webkit-transform:matrix3d(1,0,0,0,0,.98773,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1,0,0,0,0,.98773,0,0,0,0,1,0,0,0,0,1)}39.583333%{-webkit-transform:matrix3d(.99617,0,0,0,0,.99433,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99617,0,0,0,0,.99433,0,0,0,0,1,0,0,0,0,1)}41.666667%{-webkit-transform:matrix3d(.99368,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99368,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}43.75%{-webkit-transform:matrix3d(.99237,0,0,0,0,1.00413,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99237,0,0,0,0,1.00413,0,0,0,0,1,0,0,0,0,1)}45.833333%{-webkit-transform:matrix3d(.99202,0,0,0,0,1.00651,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99202,0,0,0,0,1.00651,0,0,0,0,1,0,0,0,0,1)}47.916667%{-webkit-transform:matrix3d(.99241,0,0,0,0,1.00726,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99241,0,0,0,0,1.00726,0,0,0,0,1,0,0,0,0,1)}50%{-webkit-transform:matrix3d(.99329,0,0,0,0,1.00671,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99329,0,0,0,0,1.00671,0,0,0,0,1,0,0,0,0,1)}52.083333%{-webkit-transform:matrix3d(.99447,0,0,0,0,1.00529,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99447,0,0,0,0,1.00529,0,0,0,0,1,0,0,0,0,1)}54.166667%{-webkit-transform:matrix3d(.99577,0,0,0,0,1.00346,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99577,0,0,0,0,1.00346,0,0,0,0,1,0,0,0,0,1)}56.25%{-webkit-transform:matrix3d(.99705,0,0,0,0,1.0016,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99705,0,0,0,0,1.0016,0,0,0,0,1,0,0,0,0,1)}58.333333%{-webkit-transform:matrix3d(.99822,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99822,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}60.416667%{-webkit-transform:matrix3d(.99921,0,0,0,0,.99884,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99921,0,0,0,0,.99884,0,0,0,0,1,0,0,0,0,1)}62.5%{-webkit-transform:matrix3d(1,0,0,0,0,.99816,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1,0,0,0,0,.99816,0,0,0,0,1,0,0,0,0,1)}64.583333%{-webkit-transform:matrix3d(1.00057,0,0,0,0,.99795,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00057,0,0,0,0,.99795,0,0,0,0,1,0,0,0,0,1)}66.666667%{-webkit-transform:matrix3d(1.00095,0,0,0,0,.99811,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00095,0,0,0,0,.99811,0,0,0,0,1,0,0,0,0,1)}68.75%{-webkit-transform:matrix3d(1.00114,0,0,0,0,.99851,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00114,0,0,0,0,.99851,0,0,0,0,1,0,0,0,0,1)}70.833333%{-webkit-transform:matrix3d(1.00119,0,0,0,0,.99903,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00119,0,0,0,0,.99903,0,0,0,0,1,0,0,0,0,1)}72.916667%{-webkit-transform:matrix3d(1.00114,0,0,0,0,.99955,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00114,0,0,0,0,.99955,0,0,0,0,1,0,0,0,0,1)}75%{-webkit-transform:matrix3d(1.001,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.001,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}77.083333%{-webkit-transform:matrix3d(1.00083,0,0,0,0,1.00033,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00083,0,0,0,0,1.00033,0,0,0,0,1,0,0,0,0,1)}79.166667%{-webkit-transform:matrix3d(1.00063,0,0,0,0,1.00052,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00063,0,0,0,0,1.00052,0,0,0,0,1,0,0,0,0,1)}81.25%{-webkit-transform:matrix3d(1.00044,0,0,0,0,1.00058,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00044,0,0,0,0,1.00058,0,0,0,0,1,0,0,0,0,1)}83.333333%{-webkit-transform:matrix3d(1.00027,0,0,0,0,1.00053,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00027,0,0,0,0,1.00053,0,0,0,0,1,0,0,0,0,1)}85.416667%{-webkit-transform:matrix3d(1.00012,0,0,0,0,1.00042,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00012,0,0,0,0,1.00042,0,0,0,0,1,0,0,0,0,1)}87.5%{-webkit-transform:matrix3d(1,0,0,0,0,1.00027,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1,0,0,0,0,1.00027,0,0,0,0,1,0,0,0,0,1)}89.583333%{-webkit-transform:matrix3d(.99991,0,0,0,0,1.00013,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99991,0,0,0,0,1.00013,0,0,0,0,1,0,0,0,0,1)}91.666667%{-webkit-transform:matrix3d(.99986,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99986,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}93.75%{-webkit-transform:matrix3d(.99983,0,0,0,0,.99991,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99983,0,0,0,0,.99991,0,0,0,0,1,0,0,0,0,1)}95.833333%{-webkit-transform:matrix3d(.99982,0,0,0,0,.99985,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99982,0,0,0,0,.99985,0,0,0,0,1,0,0,0,0,1)}97.916667%{-webkit-transform:matrix3d(.99983,0,0,0,0,.99984,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99983,0,0,0,0,.99984,0,0,0,0,1,0,0,0,0,1)}100%{-webkit-transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}}
@keyframes animJelly{0%{-webkit-transform:matrix3d(.7,0,0,0,0,.7,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.7,0,0,0,0,.7,0,0,0,0,1,0,0,0,0,1)}2.083333%{-webkit-transform:matrix3d(.75266,0,0,0,0,.76342,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.75266,0,0,0,0,.76342,0,0,0,0,1,0,0,0,0,1)}4.166667%{-webkit-transform:matrix3d(.81071,0,0,0,0,.84545,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.81071,0,0,0,0,.84545,0,0,0,0,1,0,0,0,0,1)}6.25%{-webkit-transform:matrix3d(.86808,0,0,0,0,.9286,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.86808,0,0,0,0,.9286,0,0,0,0,1,0,0,0,0,1)}8.333333%{-webkit-transform:matrix3d(.92038,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.92038,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}10.416667%{-webkit-transform:matrix3d(.96482,0,0,0,0,1.05202,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.96482,0,0,0,0,1.05202,0,0,0,0,1,0,0,0,0,1)}12.5%{-webkit-transform:matrix3d(1,0,0,0,0,1.08204,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1,0,0,0,0,1.08204,0,0,0,0,1,0,0,0,0,1)}14.583333%{-webkit-transform:matrix3d(1.02563,0,0,0,0,1.09149,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.02563,0,0,0,0,1.09149,0,0,0,0,1,0,0,0,0,1)}16.666667%{-webkit-transform:matrix3d(1.04227,0,0,0,0,1.08453,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.04227,0,0,0,0,1.08453,0,0,0,0,1,0,0,0,0,1)}18.75%{-webkit-transform:matrix3d(1.05102,0,0,0,0,1.06666,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.05102,0,0,0,0,1.06666,0,0,0,0,1,0,0,0,0,1)}20.833333%{-webkit-transform:matrix3d(1.05334,0,0,0,0,1.04355,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.05334,0,0,0,0,1.04355,0,0,0,0,1,0,0,0,0,1)}22.916667%{-webkit-transform:matrix3d(1.05078,0,0,0,0,1.02012,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.05078,0,0,0,0,1.02012,0,0,0,0,1,0,0,0,0,1)}25%{-webkit-transform:matrix3d(1.04487,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.04487,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}27.083333%{-webkit-transform:matrix3d(1.03699,0,0,0,0,.98534,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.03699,0,0,0,0,.98534,0,0,0,0,1,0,0,0,0,1)}29.166667%{-webkit-transform:matrix3d(1.02831,0,0,0,0,.97688,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.02831,0,0,0,0,.97688,0,0,0,0,1,0,0,0,0,1)}31.25%{-webkit-transform:matrix3d(1.01973,0,0,0,0,.97422,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.01973,0,0,0,0,.97422,0,0,0,0,1,0,0,0,0,1)}33.333333%{-webkit-transform:matrix3d(1.01191,0,0,0,0,.97618,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.01191,0,0,0,0,.97618,0,0,0,0,1,0,0,0,0,1)}35.416667%{-webkit-transform:matrix3d(1.00526,0,0,0,0,.98122,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00526,0,0,0,0,.98122,0,0,0,0,1,0,0,0,0,1)}37.5%{-webkit-transform:matrix3d(1,0,0,0,0,.98773,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1,0,0,0,0,.98773,0,0,0,0,1,0,0,0,0,1)}39.583333%{-webkit-transform:matrix3d(.99617,0,0,0,0,.99433,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99617,0,0,0,0,.99433,0,0,0,0,1,0,0,0,0,1)}41.666667%{-webkit-transform:matrix3d(.99368,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99368,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}43.75%{-webkit-transform:matrix3d(.99237,0,0,0,0,1.00413,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99237,0,0,0,0,1.00413,0,0,0,0,1,0,0,0,0,1)}45.833333%{-webkit-transform:matrix3d(.99202,0,0,0,0,1.00651,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99202,0,0,0,0,1.00651,0,0,0,0,1,0,0,0,0,1)}47.916667%{-webkit-transform:matrix3d(.99241,0,0,0,0,1.00726,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99241,0,0,0,0,1.00726,0,0,0,0,1,0,0,0,0,1)}50%{-webkit-transform:matrix3d(.99329,0,0,0,0,1.00671,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99329,0,0,0,0,1.00671,0,0,0,0,1,0,0,0,0,1)}52.083333%{-webkit-transform:matrix3d(.99447,0,0,0,0,1.00529,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99447,0,0,0,0,1.00529,0,0,0,0,1,0,0,0,0,1)}54.166667%{-webkit-transform:matrix3d(.99577,0,0,0,0,1.00346,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99577,0,0,0,0,1.00346,0,0,0,0,1,0,0,0,0,1)}56.25%{-webkit-transform:matrix3d(.99705,0,0,0,0,1.0016,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99705,0,0,0,0,1.0016,0,0,0,0,1,0,0,0,0,1)}58.333333%{-webkit-transform:matrix3d(.99822,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99822,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}60.416667%{-webkit-transform:matrix3d(.99921,0,0,0,0,.99884,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99921,0,0,0,0,.99884,0,0,0,0,1,0,0,0,0,1)}62.5%{-webkit-transform:matrix3d(1,0,0,0,0,.99816,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1,0,0,0,0,.99816,0,0,0,0,1,0,0,0,0,1)}64.583333%{-webkit-transform:matrix3d(1.00057,0,0,0,0,.99795,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00057,0,0,0,0,.99795,0,0,0,0,1,0,0,0,0,1)}66.666667%{-webkit-transform:matrix3d(1.00095,0,0,0,0,.99811,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00095,0,0,0,0,.99811,0,0,0,0,1,0,0,0,0,1)}68.75%{-webkit-transform:matrix3d(1.00114,0,0,0,0,.99851,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00114,0,0,0,0,.99851,0,0,0,0,1,0,0,0,0,1)}70.833333%{-webkit-transform:matrix3d(1.00119,0,0,0,0,.99903,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00119,0,0,0,0,.99903,0,0,0,0,1,0,0,0,0,1)}72.916667%{-webkit-transform:matrix3d(1.00114,0,0,0,0,.99955,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00114,0,0,0,0,.99955,0,0,0,0,1,0,0,0,0,1)}75%{-webkit-transform:matrix3d(1.001,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.001,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}77.083333%{-webkit-transform:matrix3d(1.00083,0,0,0,0,1.00033,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00083,0,0,0,0,1.00033,0,0,0,0,1,0,0,0,0,1)}79.166667%{-webkit-transform:matrix3d(1.00063,0,0,0,0,1.00052,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00063,0,0,0,0,1.00052,0,0,0,0,1,0,0,0,0,1)}81.25%{-webkit-transform:matrix3d(1.00044,0,0,0,0,1.00058,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00044,0,0,0,0,1.00058,0,0,0,0,1,0,0,0,0,1)}83.333333%{-webkit-transform:matrix3d(1.00027,0,0,0,0,1.00053,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00027,0,0,0,0,1.00053,0,0,0,0,1,0,0,0,0,1)}85.416667%{-webkit-transform:matrix3d(1.00012,0,0,0,0,1.00042,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00012,0,0,0,0,1.00042,0,0,0,0,1,0,0,0,0,1)}87.5%{-webkit-transform:matrix3d(1,0,0,0,0,1.00027,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1,0,0,0,0,1.00027,0,0,0,0,1,0,0,0,0,1)}89.583333%{-webkit-transform:matrix3d(.99991,0,0,0,0,1.00013,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99991,0,0,0,0,1.00013,0,0,0,0,1,0,0,0,0,1)}91.666667%{-webkit-transform:matrix3d(.99986,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99986,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}93.75%{-webkit-transform:matrix3d(.99983,0,0,0,0,.99991,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99983,0,0,0,0,.99991,0,0,0,0,1,0,0,0,0,1)}95.833333%{-webkit-transform:matrix3d(.99982,0,0,0,0,.99985,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99982,0,0,0,0,.99985,0,0,0,0,1,0,0,0,0,1)}97.916667%{-webkit-transform:matrix3d(.99983,0,0,0,0,.99984,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(.99983,0,0,0,0,.99984,0,0,0,0,1,0,0,0,0,1)}100%{-webkit-transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}}
.card-content{
margin-top: 25px;
}
.card-content02{
margin-bottom: 68px;
}
#close-icon {
background: #004973;
color: #efefef;
position: absolute;
border-radius: 50%;
left: -22px;
top: -25px;
width: 50px;
height: 50px;
overflow: hidden
}
#close-icon .close {
display: inline-block;
font-size: 24px;
text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.78);
position: absolute;
top: 50%;
left: 50%;
right: 0;
margin-left: -6px;
margin-top: -6px;
font-weight: bold;
}
#submit {
background: #004973;
overflow: hidden;
width: 100px;
height: 100px;
border-radius: 50%;
color: #efefef;
position: absolute;
right: -40px;
font-size: 35px;
bottom: -40px;
}
#submit i{
-webkit-transform: translate(-14px, -14px);
-ms-transform: translate(-14px, -14px);
transform: translate(-14px, -14px)
}
#card-main input{
border: none;
font-size: 12px;
color: #444;
margin: 0;
padding: 4px 0;
background: 0 0;
text-align: left;
outline: none;
display: block;
width: 100%;
}
input[type=time]{
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
text-align: right!important;
padding: 0!important;
}
input[type="time"]::-webkit-inner-spin-button{
display: none;
}
input[type=time]::-webkit-clear-button{
display: none
}
input#datepicker {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
text-align: right;
padding: 0!important;
}
input#datepicker::-webkit-input-placeholder{
-webkit-transform: none;
transform: none;
opacity: 1;
text-transform: inherit
}
input#datepicker:-ms-input-placeholder{
-ms-transform: none;
transform: none;
opacity: 1;
text-transform: inherit
}
input#datepicker::-ms-input-placeholder{
-ms-transform: none;
transform: none;
opacity: 1;
text-transform: inherit
}
input#datepicker::placeholder{
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1;
text-transform: inherit
}
input#search::-webkit-input-placeholder{
-webkit-transform: none;
transform: none;
opacity: 1;
color: rgba(0,0,0,.26);
font-size: 12px;
}
input#search:-ms-input-placeholder{
-ms-transform: none;
transform: none;
opacity: 1;
color: rgba(0,0,0,.26);
font-size: 12px;
}
input#search::-ms-input-placeholder{
-ms-transform: none;
transform: none;
opacity: 1;
color: rgba(0,0,0,.26);
font-size: 12px;
}
input#search::placeholder{
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1;
color: rgba(0,0,0,.26);
font-size: 12px;
}
@media screen and (max-width: 480px) {
input#search::placeholder {
font-size: 10px!important;
}
}
.ui-datepicker .ui-datepicker-header {
background: #0a6b8d;
color: #efefef;
}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
cursor: pointer;
}
#card-main input[type=text] {
border-bottom: 2px solid rgba(0,0,0,.12);
}
.test{
position: relative;
padding: 20px 0;
}
.test > label{
bottom: 0;
color: rgba(0,0,0,.26);
font-size: 12px;
left: 0;
right: 0;
pointer-events: none;
position: absolute;
display: block;
top: 24px;
width: 100%;
overflow: hidden;
text-align: left;
-webkit-transition: .2s cubic-bezier(.4,0,.2,1);
-o-transition: .2s cubic-bezier(.4,0,.2,1);
transition: .2s cubic-bezier(.4,0,.2,1);
}
.test label:after{
background-color: rgb(33,150,243);
bottom: 20px;
content: '';
height: 2px;
left: 45%;
position: absolute;
-webkit-transition: .3s cubic-bezier(0.4,0,0.2,1);
-o-transition: .3s cubic-bezier(0.4,0,0.2,1);
transition: .3s cubic-bezier(0.4,0,0.2,1);
visibility: hidden;
width: 10px;
}
.textCounter {
position: absolute;
right: 0;
font-size: 11px;
bottom: 0;
}
.test .effect:after {
background-color: rgb(10, 107, 141);
width: 100%;
left: 0%;
visibility: visible;
}
.test .effect{
color: rgb(10, 107, 141);
font-size: 12px;
top: 4px;
visibility: visible;
}
.search-cont {
position: absolute;
z-index: 2;
width: 38px;
height: 38px;
right: 5px;
top: 5px;
overflow: hidden;
border-radius: 25px;
-webkit-transition: all .5s cubic-bezier(0.18, 0.89, 0.132, 0.98);
-o-transition: all .5s cubic-bezier(0.18, 0.89, 0.132, 0.98);
transition: all .5s cubic-bezier(0.18, 0.89, 0.132, 0.98);
}
.search-cont input#search {
border: none;
outline: none;
width: 100%;
height: 100%;
background: transparent;
padding: 0 20px 0 30px;
color: #99a1a9;
position: absolute;
right: 20px;
-webkit-transition: all .5s cubic-bezier(0.18, 0.89, 0.132, 0.98);
-o-transition: all .5s cubic-bezier(0.18, 0.89, 0.132, 0.98);
transition: all .5s cubic-bezier(0.18, 0.89, 0.132, 0.98);
}
.togglesearchbackground{
background: rgba(0, 0, 0, 0.25)!important;
}
.search-cont .icon {
color: #99a1a9;
position: absolute;
width: 38px;
height: 38px;
z-index: 1;
right: 0;
border-radius: 50%;
background: rgb(0, 60, 95);
-webkit-transition: .5s ease;
-o-transition: .5s ease;
transition: .5s ease;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.icon:active:after{
-webkit-transform: scale(.5);
-ms-transform: scale(.5);
transform: scale(.5)
}
.search-cont .icon:after {
position: absolute;
content: "\f002";
font-family: FontAwesome;
color: #999;
-webkit-transition: all .5s cubic-bezier(0.18, 0.89, 0.132, 0.98);
-o-transition: all .5s cubic-bezier(0.18, 0.89, 0.132, 0.98);
transition: all .5s cubic-bezier(0.18, 0.89, 0.132, 0.98);
}
input::-webkit-input-placeholder {
-webkit-transition: all .3s cubic-bezier(0.4,0,0.2,1);
-o-transition: all .3s cubic-bezier(0.4,0,0.2,1);
transition: all .3s cubic-bezier(0.4,0,0.2,1);
color: rgba(0,0,0,.26);
font-size: 12px;
opacity: 0;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
input:-ms-input-placeholder {
-webkit-transition: all .3s cubic-bezier(0.4,0,0.2,1);
-o-transition: all .3s cubic-bezier(0.4,0,0.2,1);
transition: all .3s cubic-bezier(0.4,0,0.2,1);
color: rgba(0,0,0,.26);
font-size: 12px;
opacity: 0;
-ms-transform: translateX(100%);
transform: translateX(100%);
}
input::-ms-input-placeholder {
-webkit-transition: all .3s cubic-bezier(0.4,0,0.2,1);
-o-transition: all .3s cubic-bezier(0.4,0,0.2,1);
transition: all .3s cubic-bezier(0.4,0,0.2,1);
color: rgba(0,0,0,.26);
font-size: 12px;
opacity: 0;
-ms-transform: translateX(100%);
transform: translateX(100%);
}
input::placeholder {
-webkit-transition: all .3s cubic-bezier(0.4,0,0.2,1);
-o-transition: all .3s cubic-bezier(0.4,0,0.2,1);
transition: all .3s cubic-bezier(0.4,0,0.2,1);
color: rgba(0,0,0,.26);
font-size: 12px;
opacity: 0;
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
}
.togglesearch {
width: 50%
}
input:focus::-webkit-input-placeholder{
-webkit-transform: translateX(0%);
transform: translateX(0%);
opacity: 1
}
input:focus:-ms-input-placeholder{
-ms-transform: translateX(0%);
transform: translateX(0%);
opacity: 1
}
input:focus::-ms-input-placeholder{
-ms-transform: translateX(0%);
transform: translateX(0%);
opacity: 1
}
input:focus::placeholder{
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
transform: translateX(0%);
opacity: 1
}
.search-cont input#search::-webkit-input-placeholder {
color: #99a1a9
}
.search-cont input#search:-moz-placeholder {
color: #99a1a9
}
.search-cont input#search::-moz-placeholder {
color: #99a1a9
}
.search-cont input#search:-ms-input-placeholder {
color: #99a1a9
}
.date-container {
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
z-index: 1;
color: #efefef;
text-shadow: -1px 2px 0px rgba(0, 0, 0, 0.7);
top: 0%;
left: 0%;
right: 0;
bottom: 0;
}
.head {
position: relative;
height: 200px;
overflow: hidden;
}
.head-overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
}
.head:before {
position: absolute;
width: 100%;
height: 100%;
content: '';
background: url(https://goo.gl/gd2UK1) 100% 0%;
background-size: cover;
background-position: bottom;
-webkit-transform-origin: right;
-ms-transform-origin: right;
transform-origin: right;
}
.head:after {
position: absolute;
bottom: -100%;
width: 100%;
height: 100%;
content: '';
background: #f6f7f9;
-webkit-transform: skewy(7deg);
-ms-transform: skewy(7deg);
transform: skewy(7deg);
-webkit-transform-origin: right;
-ms-transform-origin: right;
transform-origin: right;
}
.task-info {
position: absolute;
left: 1em;
padding: 6px 0;
bottom: 0px;
border-bottom: 1px solid #f0f0f0;
z-index: 1;
width: 100%;
}
.counter {
display: inline-block;
font-size: 12px;
color: #ccc
}
.t-day{
font-size: 40px;
color: #fbbc05;
}
.fulldate{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 40px;
margin-left: 20px;
}
.fulldate .date, .fulldate .timing{
font-size: 15px;
}
.list-container{
height: 250px;
padding: 10px 17px;
overflow-y: auto;
position: relative;
}
.list-container:before {
position: absolute;
content: '';
background: #f6f7f9;
left: 0;
height: 100%;
width: 16px;
top: 0;
}
.simulate-container {
width: 100%;
padding-left: 15px;
-webkit-filter: blur(2px);
filter: blur(2px);
}
.simulatepost {
width: 100%;
background: #f6f7f9;
padding: 6px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 10px;
-webkit-transition: .5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
-o-transition: .5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
transition: .5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.circle {
width: 38px;
height: 38px;
border-radius: 50%;
background: #fff;
margin-right: 15px;
}
.right-side > div {
height: 6px;
background: #fff;
}
.right-side >div:not(:last-of-type) {
margin-bottom: 7px;
}
.top-line {
width: 124px;
}
.center-line {
width: 150px;
}
.bottom-line {
width: 107px;
}
.main-cont {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.pre-loading {
color: #444;
height: 100%;
text-align: center;
position: relative;
overflow: hidden;
}
.pre-loading .fa-signal {
color: #004973;
font-size: 9em;
-webkit-animation: pop 1s cubic-bezier(0.18, 0.89, 0.32, 1.28) 1;
animation: pop 1s cubic-bezier(0.18, 0.89, 0.32, 1.28) 1;
text-shadow: -2px 0px 7px rgba(0, 0, 0, 0.46);
}
@-webkit-keyframes pop{
0% {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
@keyframes pop{
0% {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
.pre-loading h1{
text-transform: capitalize;
margin: 0;
font-size: 16px;
font-weight: inherit;
-webkit-animation: fall-b .5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
animation: fall-b .5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.pre-loading h3{
text-transform: capitalize;
margin: 0;
font-size: 10px;
font-weight: inherit;
color: #ccc;
-webkit-animation: fall-c .5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
animation: fall-c .5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.list{
position: relative;
padding: 0 18px 0 15px;
overflow: hidden;
}
.list li {
text-transform: capitalize;
border-left: 2px solid;
margin-bottom: 5px;
-webkit-box-shadow: 2px 2px 1px 0px #ddd;
box-shadow: 2px 2px 1px 0px #ddd;
background: #f6f7f9;
cursor: pointer;
position: relative;
-webkit-animation: fall-b .5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
animation: fall-b .5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
-webkit-transition: .5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
-o-transition: .5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
transition: .5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.list li:nth-child(odd){
border-color: #00aff0
}
.list li:nth-child(even){
border-color: #ffc61b
}
.list li:before {
content: "";
width: 15px;
border-radius: 50%;
height: 15px;
left: 0;
margin-left: -18px;
position: absolute;
top: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.list li:nth-child(odd):before{
background: #00aff0
}
.list li:nth-child(even):before{
background: #ffc61b
}
@-webkit-keyframes fall-b {
0% {
-webkit-transform: translate3d(-5.5em, 0em, -5.5em);
transform: translate3d(-5.5em, 0em, -5.5em);
opacity: 0.6;
}
}
@keyframes fall-b {
0% {
-webkit-transform: translate3d(-5.5em, 0em, -5.5em);
transform: translate3d(-5.5em, 0em, -5.5em);
opacity: 0.6;
}
}
@-webkit-keyframes fall-c {
0% {
-webkit-transform: translate3d(5.5em, 0em, 5.5em);
transform: translate3d(5.5em, 0em, 5.5em);
opacity: 0.6;
}
}
@keyframes fall-c {
0% {
-webkit-transform: translate3d(5.5em, 0em, 5.5em);
transform: translate3d(5.5em, 0em, 5.5em);
opacity: 0.6;
}
}
.list li h3{
margin: 0;
font-size: 12px;
color: #00aff0;
font-family: sans-serif;
}
.at {
color: #444!important;
font-weight: normal
}
.list li p{
font-size: 10px;
font-weight: inherit;
color: #444;
margin-bottom: 0;
}
.listed {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
padding: 17px 7px 13px 7px;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.options {
position: absolute;
right: -16px;
top: 0px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 3px;
-webkit-box-shadow: 2px 2px 1px 0px #ddd;
box-shadow: 2px 2px 1px 0px #ddd;
background: #f6f7f9;
}
.options > a {
width: 10px;
display: block;
height: 10px;
border-radius: 50%;
-webkit-box-shadow: rgba(255,255,255,0.3) 0px 0px 1px, inset rgba(37, 37, 37, 0.34) 0px 1px 1px 0px;
box-shadow: rgba(255,255,255,0.3) 0px 0px 1px, inset rgba(37, 37, 37, 0.34) 0px 1px 1px 0px;
background-image: -webkit-radial-gradient( 9px -4px, #FFF 0px, #fff 2px, rgba(255,255,255,0) 4px), -webkit-linear-gradient(bottom, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
margin-bottom: 3px
}
.options > a:last-child {
margin-bottom: 0;
}
.options .min {
background-color: #f7bf67;
}
.options .max {
background: #dddddd;
}
.options .erase{
background-color: #df4a32;
}
input#datepicker {
position: relative;
color: rgba(68, 68, 68, 0.8);
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
text-align: right;
padding: 0;
}
input#datepicker::-webkit-input-placeholder{
-webkit-transform: none;
transform: none;
opacity: 1;
color: rgba(0,0,0,.26);
font-size: 12px;
}
input#datepicker:-ms-input-placeholder{
-ms-transform: none;
transform: none;
opacity: 1;
color: rgba(0,0,0,.26);
font-size: 12px;
}
input#datepicker::-ms-input-placeholder{
-ms-transform: none;
transform: none;
opacity: 1;
color: rgba(0,0,0,.26);
font-size: 12px;
}
input#datepicker::placeholder{
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1;
color: rgba(0,0,0,.26);
font-size: 12px;
}
input#search::-webkit-input-placeholder{
-webkit-transform: none;
transform: none;
opacity: 1;
color: rgba(0,0,0,.26);
font-size: 12px;
}
input#search:-ms-input-placeholder{
-ms-transform: none;
transform: none;
opacity: 1;
color: rgba(0,0,0,.26);
font-size: 12px;
}
input#search::-ms-input-placeholder{
-ms-transform: none;
transform: none;
opacity: 1;
color: rgba(0,0,0,.26);
font-size: 12px;
}
input#search::placeholder{
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1;
color: rgba(0,0,0,.26);
font-size: 12px;
}
.ui-datepicker .ui-datepicker-header {
background: #0a6b8d;
color: #fff;
}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
cursor: pointer;
}
.list li:after {
content: '';
position: absolute;
width: 10px;
height: 1px;
left: -6px;
top: 50%;
z-index: 0;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.list li:nth-child(odd):after{
background: #00aff0
}
.list li:nth-child(even):after{
background: #ffc61b
}
.listed01 {
-ms-flex-negative: 1;
flex-shrink: 1;
text-align: left;
border-right: 1px solid #e2e2e2;
padding-right: 5px;
-webkit-box-flex: 2;
-ms-flex: 2;
flex: 2;
}
.at {
color: cornflowerblue;
font-weight: normal
}
.rem-status {
font-size: 10px;
color: #777;
display: block;
}
.listed02 {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-ms-flex-negative: 3;
flex-shrink: 3;
text-align: right;
max-height: 47px;
}
.category {
position: relative;
margin-right: 7px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
height: 53px;
width: 42px;
background: transparent;
border-radius: 50%;
-webkit-animation: launch-main-background .5s ease-out backwards;
animation: launch-main-background .5s ease-out backwards;
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s
}
.category p{
margin: 0;
text-align: center;
color: #fff!important;
position: absolute;
bottom: 0px;
opacity: 1;
left: 0;
right: 0;
background: #00aff0;
-webkit-animation: droped-text .5s ease-out backwards;
animation: droped-text .5s ease-out backwards;
-webkit-animation-delay: 1.8s;
animation-delay: 1.8s
}
@-webkit-keyframes droped-text{
0%{
bottom: 10px;
opacity: 0
}
}
@keyframes droped-text{
0%{
bottom: 10px;
opacity: 0
}
}
.category span {
display: block;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
background-image: url(https://goo.gl/d1bNqm);
background-size: cover;
background-repeat: no-repeat;
height: 40px;
width: 40px;
background-position: center;
position: absolute;
-webkit-animation: launch 2s ease;
animation: launch 2s ease
}
.category span:after{
position: absolute;
content: '';
background: url(https://goo.gl/qw2wiU);
width: 100%;
height: 100%;
background-size: cover;
-webkit-animation: launch-background .5s ease backwards;
animation: launch-background .5s ease backwards;
-webkit-animation-delay: 1s;
animation-delay: 1s
}
@-webkit-keyframes launch{
0% {
-webkit-transform-origin: right;
transform-origin: right;
-webkit-transform: rotate3d(0, 0, 1, -240deg) translateX(-50px) scale(0.3);
transform: rotate3d(0, 0, 1, -240deg) translateX(-50px) scale(0.3);
opacity: 0.3;
}
100% {
-webkit-transform-origin: right;
transform-origin: right;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
@keyframes launch{
0% {
-webkit-transform-origin: right;
transform-origin: right;
-webkit-transform: rotate3d(0, 0, 1, -240deg) translateX(-50px) scale(0.3);
transform: rotate3d(0, 0, 1, -240deg) translateX(-50px) scale(0.3);
opacity: 0.3;
}
100% {
-webkit-transform-origin: right;
transform-origin: right;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
@-webkit-keyframes launch-background{
0% {
opacity: 0;
}
}
@keyframes launch-background{
0% {
opacity: 0;
}
}
@-webkit-keyframes launch-main-background{
0% {
background: #fee187;
border-radius: 0%;
}
}
@keyframes launch-main-background{
0% {
background: #fee187;
border-radius: 0%;
}
}
@-webkit-keyframes zoomInDown {
0% {
-webkit-transform: scale(1.2,1.2) ;
transform: scale(1.2,1.2) ;
}
}
@keyframes zoomInDown {
0% {
-webkit-transform: scale(1.2,1.2) ;
transform: scale(1.2,1.2) ;
}
}
.main-message {
border-radius: 15px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: none;
-webkit-box-shadow: 1px 1px 11px rgba(0, 0, 0, .3), 0 0 0 1px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 11px rgba(0, 0, 0, .3), 0 0 0 1px rgba(0, 0, 0, .1);
background-color: rgba(251, 251, 252, 0.89);
width: 18em;
z-index: 3;
height: -webkit-max-content;
height: -moz-max-content;
height: max-content;
overflow: hidden;
margin: auto;
-webkit-animation: zoomInDown .3s ease;
animation: zoomInDown .3s ease;
}
.message {
position: relative;
padding: 8px;
text-align: center;
}
.message{
margin: 8px auto;
}
.message h3{
margin: 0 0 8px 0;
font-size: 16px;
color: #444;
}
.message p{
margin: 0;
font-size: 12px;
font-family: sans-serif;
}
.answer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
border-top: 1px solid #e2e2e2;
position: relative;
overflow: hidden;
}
.answer:before{
content: '';
position: absolute;
background: #e2e2e2;
height: 100px;
width: 1px;
left: 50%;
}
.answer button{
color: cornflowerblue;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
padding: 10px;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.answer button:hover{
background: #e9ebee;
}
.listed .listed02 .listed-date, .listed-time{
display: block;
font-size: 10px;
color: rgba(68, 68, 68, 0.8);
}
.listed-date{
font-weight: bold
}
.listed .listed02 .priority {
margin-top: 1em;
display: block;
font-size: 10px;
}
.set-priority {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 14px auto;
background: #fff;
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.08);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.08);
padding: 7px;
border-radius: 15px;
}
#tmp{
display: none!important
}
.notification{
cursor: pointer;
width: 45px;
border: 1px solid #ebebeb;
background: #fbfbfc;
height: 22px;
border-radius: 13px;
position: relative;
-webkit-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
.notification:after{
content: '';
position: absolute;
top: 50%;
margin-top: -11.5px;
height: 23px;
left: 0;
width: 23px;
background: #fff;
border-radius: 50%;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
-webkit-box-shadow: .5px .5px 0.5px 0px #8c8c8c;
box-shadow: .5px .5px 0.5px 0px #8c8c8c;
}
.notification > span {
position: absolute;
font-size: 13px;
top: 50%;
pointer-events: none;
}
.notification .left {
left: 25%;
margin-left: -5px;
top: 5px;
color: #fff;
top: 3.5px;
text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.78);
-webkit-transform: translateX(0%) ;
-ms-transform: translateX(0%) ;
transform: translateX(0%) ;
}
.animated-checked{
-webkit-animation: checkedit .5s cubic-bezier(0.18, 0.99, 0.46, 1.1) backwards;
animation: checkedit .5s cubic-bezier(0.18, 0.99, 0.46, 1.1) backwards;
}
@-webkit-keyframes checkedit {
0% {
-webkit-transform: translateX(100%) ;
transform: translateX(100%) ;
}
}
@keyframes checkedit {
0% {
-webkit-transform: translateX(100%) ;
transform: translateX(100%) ;
}
}
.notification .right {
right: 25%;
margin-right: -5px;
top: 3.5px;
color: #727272;
}
.checked{
background: #09a5ff;
}
.checked:after{
left: 50%;
}
.set-priority h3 {
margin: 0;
font-size: 13px;
font-weight: inherit;
color: rgba(68, 68, 68, 0.8);
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.priority {
display: inline-block;
direction: rtl;
}
.priority > input[type=radio] {
display: none
}
.priority >label{
color: #ccc;
cursor: pointer;
font-size: 1.3em;
}
.priority > label:before {
content: '\f005';
font-family: fontawesome;
display: inline-block;
margin-left: 2px;
}
.priority .tolip {
background-color: rgba(0, 0, 0, 0.6);
color: #ffffff;
padding: 10px;
border-radius: 2px;
position: absolute;
top: 12px;
right: 7px;
width: 43.8px;
opacity: 0;
pointer-events: none;
visibility: hidden;
font-size: 0.8em;
z-index: 2;
-webkit-transition: .3s ease;
-o-transition: .3s ease;
transition: .3s ease
}
.priority .tolip:before {
content: "";
border-right: 5px solid transparent;
border-left: 5px solid transparent;
border-top: 7px solid #ffb000;
position: absolute;
margin-left: -5px;
bottom: -7px;
left: 50%;
display: block;
-webkit-transition: .2s ease;
-o-transition: .2s ease;
transition: .2s ease
}
.priority .tolip:after{
content: 'Medium!';
position: absolute;
direction: ltr;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
-webkit-transition: .2s ease;
-o-transition: .2s ease;
transition: .2s ease
}
.priority > label:hover ~ .tolip{
opacity: .90;
top: 20px;
visibility: visible;
background: #ffb000
}
.priority label:first-of-type:hover ~.tolip{
background: #df4a32;
}
.priority label:last-of-type:hover ~.tolip{
background: #25d366
}
.priority label:first-of-type:hover ~.tolip:before{
-webkit-transform: translateX(14.06px);
-ms-transform: translateX(14.06px);
transform: translateX(14.06px);
border-top-color: #df4a32;
}
.priority label:last-of-type:hover ~.tolip:before{
-webkit-transform: translateX(-14.06px);
-ms-transform: translateX(-14.06px);
transform: translateX(-14.06px);
border-top-color: #25d366;
}
.priority label:last-of-type:hover ~.tolip:after{
content: 'Normal!';
}
.priority label:first-of-type:hover ~.tolip:after{
content: 'Hight!';
}
.priority > input[type=radio]:checked ~ label,
.priority:not(:checked) > label:hover,
.priority:not(:checked) > label:hover ~ label { color: #FFD700; }
.priority > input:checked + label:hover,
.priority> input:checked ~ label:hover,
.priority> label:hover ~ input:checked ~ label,
.priority> input:checked ~ label:hover ~ label { color: #FFED85; }
.oppener{
position: absolute;
left: 0%;
bottom: 0;
z-index: 1;
width: 100%;
text-align: center;
height: 45px;
overflow: hidden;
pointer-events: none;
}
#open_todo{
position: relative;
width: 50px;
height: 50px;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
background: #004973;
color: #efefef;
text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.78);
pointer-events: auto;
}
.button-overlay {
display: inline-block;
width: 106px;
pointer-events: none;
overflow: hidden;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
#open_todo:before {
content: '';
background: #004973;
width: 50px;
height: 50px;
left: -50px;
position: absolute;
-webkit-mask-image: radial-gradient(circle 10px at 30px 0, transparent 0, transparent 30px, black 31px);
-webkit-mask-image: radial-gradient(circle 10px at 20px 0, transparent 0, transparent 30px, black 31px);
pointer-events: none;
}
#open_todo:after {
content: '';
background: #004973;;
width: 50px;
height: 50px;
left: 50px;
position: absolute;
-webkit-mask-image: radial-gradient(circle 10px at 30px 0, transparent 0, transparent 30px, black 31px);
pointer-events: none;
}
.dot{
margin: 0 4px;
font-size: 18px;
font-weight: bold;
opacity: 0;
-webkit-animation: animate 1s ease infinite;
animation: animate 1s ease infinite;
}
@-webkit-keyframes animate {
0%{
opacity: 1
}
}
@keyframes animate {
0%{
opacity: 1
}
}
.wobble{
-webkit-animation: wobble .8s ease-in-out 1;
animation: wobble .8s ease-in-out 1
}
@-webkit-keyframes wobble{
16.65%{-webkit-transform:translateX(6px);transform:translateX(6px);
}33.3%{
-webkit-transform:translateX(-5px);
transform:translateX(-5px);
}49.95%{
-webkit-transform:translateX(4px);
transform:translateX(4px);
}66.6%{
-webkit-transform:translateX(-2px);
transform:translateX(-2px);
}83.25%{-webkit-transform:translateX(1px);transform:translateX(1px);
}100%{
-webkit-transform:translateX(0);
transform:translateX(0);
}
}
@keyframes wobble{
16.65%{-webkit-transform:translateX(6px);transform:translateX(6px);
}33.3%{
-webkit-transform:translateX(-5px);
transform:translateX(-5px);
}49.95%{
-webkit-transform:translateX(4px);
transform:translateX(4px);
}66.6%{
-webkit-transform:translateX(-2px);
transform:translateX(-2px);
}83.25%{-webkit-transform:translateX(1px);transform:translateX(1px);
}100%{
-webkit-transform:translateX(0);
transform:translateX(0);
}
}
.list-order{
z-index: 1;
overflow: hidden;
bottom: 5px;
position: fixed;
background: -webkit-gradient(linear, right bottom, left top, from(rgba(0, 73, 115, 0.88)),to(#9D50BB));background: -webkit-linear-gradient(bottom right, rgba(0, 73, 115, 0.88),#9D50BB);background: -o-linear-gradient(bottom right, rgba(0, 73, 115, 0.88),#9D50BB);background: linear-gradient(to top left, rgba(0, 73, 115, 0.88),#9D50BB);
-webkit-box-shadow: inset -2px -3px 4px 0px rgba(0, 0, 0, .3);box-shadow: inset -2px -3px 4px 0px rgba(0, 0, 0, .3);
font-size: 20px;
right: 10px;
color: #efefef;
text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.78);
width: 38px;
height: 38px;
border-radius: 50%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-line-pack: center;
align-content: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.fa-ellipsis-h{
-webkit-transition: .2s cubic-bezier(0.45, 0.5, 0, 1.51);
-o-transition: .2s cubic-bezier(0.45, 0.5, 0, 1.51);
transition: .2s cubic-bezier(0.45, 0.5, 0, 1.51);
}
.fa-ellipsis-h:before{
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
position: absolute;
}
.ba {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.icon {
overflow: hidden;
}
.ripple {
background: #cccccc;
border-radius: 50%;
display: inline-block;
position: absolute;
width: 200%;
height: 200%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 0;
}
.click-effect{
-webkit-animation: animate .4s linear ;
animation: animate .4s linear ;
}
@keyframes animate{
0%{
opacity: .6;
width: 0%;
height: 0%;
}
}
@-webkit-keyframes oppened {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 1000px, 0);
transform: translate3d(0, 1000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
75% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
90% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes oppened {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 1000px, 0);
transform: translate3d(0, 1000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
75% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
90% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.credit-list{
position: fixed;
background: #fff;
right: 10px;
bottom: 50px;
border-radius: 3px;
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 0 0 56px rgba(0, 0, 0, 0.075);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 0 0 56px rgba(0, 0, 0, 0.075);
display: none;
-webkit-animation: oppened .8s cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation: oppened .8s cubic-bezier(0.215, 0.610, 0.355, 1.000);
z-index: 2;
width: 200px;
}
.credit-list img{
border-radius: 50%;
height: 50px;
width: 50px;
border: 5px solid #fff;
}
.avatar-50{
position: absolute;
left: 50%;
bottom: -25%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
display: block;
overflow: hidden
}
.ova{
position: absolute;
background: rgba(255, 255, 255, 0.50);
-webkit-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
width: 10px;
display: inline-block;
height: 100%;
left: -50%;
top: -10%;
}
.animateme{
-webkit-animation: flashit .4s cubic-bezier(0.18, 0.99, 0.46, 1.1) ;
animation: flashit .4s cubic-bezier(0.18, 0.99, 0.46, 1.1) ;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
@-webkit-keyframes flashit{
100%{
left: 100%;
}
}
@keyframes flashit{
100%{
left: 100%;
}
}
.list-heading {
background: #f6f7f9;
height: 50px;
margin-bottom: 20px;
position: relative;
text-align: center;
}
.credit-list ul li{
overflow: hidden;
}
.about-me {
position: relative;
text-align: center;
margin-bottom: 35px;
}
.about-me:before {
content: '';
position: absolute;
height: 1px;
background: #f0f0f0;
width: 100%;
left: 0;
top: 50%;
z-index: 0;
}
.about-me:after {
content: 'Application Review';
position: absolute;
background: #fff;
width: 70%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
top: 50%;
z-index: 0;
font-family: sans-serif;
color: #444;
font-size: 12px;
}
.credit-list li a{
font-size: 13px;
font-family: "Archivo Narrow", sans-serif;
display: block;
padding: 11px 12px;
color: #444;
text-transform: capitalize;
background: #fff;
position: relative;
-webkit-transition: all .3s cubic-bezier(0.4,0,0.2,1);
-o-transition: all .3s cubic-bezier(0.4,0,0.2,1);
transition: all .3s cubic-bezier(0.4,0,0.2,1);
}
.credit-list li:first-child a {
padding: 14px;
font-size: 15px;
}
.credit-list li:first-child a:after {
position: absolute;
content: 'App Founder';
font-size: 10px;
color: cornflowerblue;
bottom: 0;
left: 41%;
top: 70%;
opacity: 0;
-webkit-transition: all .4s cubic-bezier(0.4,0,0.2,1);
-o-transition: all .4s cubic-bezier(0.4,0,0.2,1);
transition: all .4s cubic-bezier(0.4,0,0.2,1);
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%)
}
.credit-list li:first-child:hover a:after{
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
transform: translateX(0%);
opacity: 1;
}
.credit-list li:last-child a{
border-top: 1px solid #f0f0f0;
padding: 14px
}
.credit-list li:last-child:hover a{
background: #df4a32;
color: #fff
}
.credit-list li:hover a{
background: #e9ebee;
}
.numric-animated{
-webkit-animation: scaleit .5s cubic-bezier(0.18, 0.99, 0.46, 1.1);
animation: scaleit .5s cubic-bezier(0.18, 0.99, 0.46, 1.1);
-webkit-animation-delay: .3s;
animation-delay: .3s
}
@-webkit-keyframes scaleit{
0% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
color: #444;
-webkit-transform: scale3d(1.08, 1.08, 1.08);
transform: scale3d(1.08, 1.08, 1.08);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes scaleit{
0% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
color: #444;
-webkit-transform: scale3d(1.08, 1.08, 1.08);
transform: scale3d(1.08, 1.08, 1.08);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.morecontent span {
display: none;
}
.morelink {
position: absolute;
bottom: 0;
left: 50%;
margin-left: -7px;
}
.icon-arrow-down {
-webkit-transition: .3s ease;
-o-transition: .3s ease;
transition: .3s ease;
fill: #00aff0;
height: 12px;
width: 12px;
}
.rotated{
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
fill: #ddd;
}
.notice {
position: absolute;
bottom: 0;
display: inline-block;
font-size: 11px;
color: #df4a32;
}
.circular {
-webkit-animation: rotate 2s linear infinite;
animation: rotate 2s linear infinite;
height: 50px;
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
width: 50px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
margin: auto;
display: none
}
.path {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
-webkit-animation: dash 1.5s ease-in-out infinite, color 3s ease-in-out infinite;
animation: dash 1.5s ease-in-out infinite, color 3s ease-in-out infinite;
stroke-linecap: round;
}
@-webkit-keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35px;
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124px;
}
}
@keyframes dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35px;
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124px;
}
}
@-webkit-keyframes color {
100%,
0% {
stroke: #0057e7;
}
40% {
stroke: #00b6f1;
}
66% {
stroke:#c32aa3;
}
80%,
90% {
stroke: #ea4c89;
}
}
@keyframes color {
100%,
0% {
stroke: #0057e7;
}
40% {
stroke: #00b6f1;
}
66% {
stroke:#c32aa3;
}
80%,
90% {
stroke: #ea4c89;
}
} </style></head><body>
<div class='bg'>
<div class='todo'>
<div class="oppener">
<span class="button-overlay">
<button id="open_todo"><i class="fa fa-plus"></i>
</button></span>
</div>
<div id="overlay"></div>
<div id="card-main">
<button id='close-icon'><span class="close" title="Close">×</span></button>
<div class='card-content'>
<div class='test'>
<label>Task</label>
<input id='title' type="text" autocomplete="off" spellcheck="false" maxlength="10" placeholder="e.g. Lunch, Meeting, Party..">
<span data-count='title' class='textCounter'></span>
<span class='notice'></span>
</div>
<div class='test'>
<label>Place</label>
<input id='location' type="text" maxlength="10" placeholder="e.g. Home, Supermarket, Library..">
<span data-count='location' class='textCounter'></span>
<span class='notice'></span>
</div>
<div class='test'>
<label>Note</label>
<input id='description' type="text" maxlength="50" placeholder="e.g. hangout with dudes..">
<span data-count='description' class='textCounter'></span>
</div>
</div>
<div class='card-content02'>
<div class='set-priority'>
<h3>Set Time</h3>
<input type='time'>
</div>
<div class='set-priority'>
<h3>Set date</h3>
<input id='datepicker' placeholder='dd/mm/yyyy' readonly>
</div>
<div class='set-priority'>
<h3>Notify Me</h3>
<input id="tmp" type="checkbox">
<label for="tmp" class="notification">
<span class="left"><i class="fa fa-bell-o" aria-hidden="true"></i></span>
<span class="right"><i class="fa fa-bell-slash-o" aria-hidden="true"></i></span>
</label>
</div>
</div>
<button id='submit' role="button"><i class="fa fa-check"></i>
<span class='ripple'></span>
</button>
</div>
<div class="head">
<div class="head-overlay"></div>
<div class="search-cont">
<button class="icon"><span class='ripple'></span></button>
<input type="search" id="search" maxlength="20" disabled='disabled' placeholder="No tasks so far">
</div>
<div class="date-container">
<span class='t-day'></span>
<span class="fulldate">
<span class="day"></span>
<span class="date"></span>
<span class="timing"></span>
</span>
</div>
<div class='task-info'>
<span class='counter'>No Tasks Pending</span>
</div>
</div>
<div class="list-container">
<div class="pre-loading">
<div class='simulate-container'>
<div class="simulatepost">
<div class="circle"></div>
<div class="right-side">
<div class="top-line"></div>
<div class="center-line"></div>
<div class="bottom-line"></div>
</div>
</div>
<div class="sp_02"></div>
<div class="sp_03"></div>
<div class="sp_04"></div>
<div class="sp_05"></div>
</div>
<div class="main-cont">
<i class="fa fa-signal"></i>
<h1>No tasks for today</h1>
<h3>Enjoy your <span class='wel-day'></span></h3>
</div>
</div>
<ul class="list">
</ul>
</div>
<div class="main-message">
<div class="message">
<h3>Delete Task?</h3>
<p></p>
</div>
<div class="answer">
<button id='no'>Discard</button>
<button id='yes'>Confirm</button>
</div>
<svg class="circular" viewBox="25 25 50 50">
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
</svg>
</div>
</div>
</div>
<div class='credit-list'>
</div>
<button class='list-order'><i class="fa fa-ellipsis-h"></i><span class='ripple'></span></button>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js'></script><script src='https://code.jquery.com/jquery-3.2.1.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script>
<script >$(function() {
'use strict';
$("a[href='#']").click(function(e) {
e.preventDefault();
});
$('.simulatepost').clone().css({
'opacity': '.6'
}).appendTo('.sp_02');
$('.sp_02').clone().css({
'opacity': '.6'
}).appendTo('.sp_03');
$('.sp_03').clone().css({
'opacity': '.6'
}).appendTo('.sp_04');
$("#datepicker").datepicker();
function update() {
var d = new Date(),
currentDay = d.getDate(),
day = d.getDay(),
month = d.getMonth(),
year = d.getFullYear(),
d_names = Array("Sunday", "Monday", "Tuesday",
"Wednesday", "Thursday", "Friday", "Saturday"),
m_names = new Array("January", "February", "March",
"April", "May", "June", "July", "August", "September",
"October", "November", "December"),
hour = d.getHours(),
minutes = d.getMinutes(),
sup = "",
a_p = "";
if (currentDay == 1 || currentDay == 21 || currentDay == 31) {
sup = 'st';
} else if (currentDay == 2 || currentDay == 22) {
sup = 'nd';
} else if (currentDay == 3 || currentDay == 23) {
sup = 'rd';
} else {
sup = "th";
}
if (hour < 12) {
a_p = 'AM';
} else {
a_p = 'PM';
}
if (hour > 12) {
hour = hour - 12;
}
if (hour == 0) {
hour = 12;
}
if (hour < 10) {
hour = '0' + hour;
}
if (minutes < 10) {
minutes = '0' + minutes;
}
$('.date-container .t-day').html(currentDay + '<SUP>' + sup + '</SUP>');
$('.fulldate .day').html(d_names[day]);
$('.fulldate .date').html(m_names[month] + ', ' + year);
$('.fulldate .timing').html(hour + '<span class="dot">:</span>' + minutes + ' ' + a_p);
$('.pre-loading .wel-day').html(d_names[day]);
}
update();
setInterval(update, 1000);
function reseted() {
$("#overlay, #card-main").fadeOut();
$("#card-main input").val('').removeClass('wobble');
$('input[type=text]').css('border-color', 'rgba(0,0,0,.12)');
$('.notification').removeClass('checked');
$('.notification .left').removeClass('animated-checked');
$('.textCounter').html('');
$('.notice').html('').removeClass('wobble');
$('input[type=text]').prev('label').removeClass('effect');
}
$('input[type=text]').on('focus blur', function(e) {
var $this = $(this),
label = $this.prev('label');
if (e.type === 'focus') {
if ($this.val() === '') {
label.addClass('effect');
$this.attr("placeholder");
}
} else if (e.type === 'blur') {
if ($this.val() === '') {
label.removeClass('effect');
} else {
label.addClass('effect');
}
}
});
$('#tmp').on('click', function() {
$('.notification').toggleClass('checked');
$('.notification .left').toggleClass('animated-checked');
});
$('#search').on('keyup', function() {
$.expr[":"].contains = function(a, i, m) {
return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};
var filter = $(this).val();
if (filter) {
$('.list').find(".listed01:not(:contains(" + filter + "))").closest('li').fadeTo('slow', 0.3);
$('.list').find(".listed01:contains(" + filter + ")").closest('li').fadeTo('slow', 1);
} else {
$('.list').find("li").fadeTo('slow', 1);
}
});
$('input[type=text]').on('keyup', function() {
var maxLength = $(this).attr('maxlength'),
textLength = $(this).val().length,
remText = (maxLength - textLength),
moc = $(this).next('.textCounter');
if (remText == 0) {
moc.css('color', '#df4a32');
} else {
moc.css('color', 'initial');
}
if (textLength == 0) {
moc.fadeOut();
} else {
moc.fadeIn().html(remText + ' W/R');
}
});
$('#title, #location').keydown(function(e) {
var key = e.keyCode;
var notice = 'Only Letters (aA-zZ)';
if (e.shiftKey || e.ctrlKey || e.altKey || key == '9') {
return true
}
if (!((key == 8) || (key == 32) || (key == 46) || (key >= 35 && key <= 40) || (key >= 65 && key <= 90))) {
$(this).parent().find('.notice').html(notice).addClass('wobble');
e.preventDefault();
} else {
$(this).parent().find('.notice').html('').removeClass('wobble');
}
});
$('.icon').on('click', function() {
$('.search-cont').toggleClass('togglesearch');
$('input#search').toggleClass('togglesearchbackground');
});
$(document).mouseup(function(e) {
var container = $('.search-cont')
if (!container.is(e.target) && container.has(e.target).length === 0) {
container.removeClass('togglesearch');
$('input#search').removeClass('togglesearchbackground');
}
});
$('#open_todo').on('click', function() {
$('.counter').removeClass('numric-animated');
$('#overlay, #card-main').fadeIn();
});
var counter = 0;
$('#submit').on('click', function() {
counter++;
var myTitle = $('#title').val(),
myLocation = $('#location').val(),
myDescription = $('#description').val(),
myDate = $('input#datepicker').val(),
myTime = $('input[type=time]').val(),
showChar = 25,
ellipsestext = "...";
$('#card-main input').not(':input[type=checkbox]').each(function(e) {
if ($(this).val() == '') {
$(this).css('border-color', '#df4a32').addClass('wobble');
e.preventDefault();
}
});
if (myDescription.length > showChar) {
var c = myDescription.substr(0, showChar);
var h = myDescription.substr(showChar, myDescription.length - showChar);
var html = c + '<span class="moreellipses">' + ellipsestext + '</span><span class="morecontent"><span>' + h + '</span><a href="#" class="morelink"><svg class="icon-arrow-down" viewBox="0 0 32 32"><polygon points="28.2,6.1 16,18.3 3.8,6.1 0,9.9 16,25.9 32,9.9"></polygon></svg></a></span>';
} else {
html = myDescription
}
$('.morelink').click(function(e) {
var hidden = $(e.target).closest('.morecontent');
$(this).find('.icon-arrow-down').toggleClass('rotated');
hidden.find('span').toggle();
});
$('.category p').html('queued').css({'background':'rgba(0,0,0,0.3)'});
if (counter > 0) {
$('.list').prepend("<li><div class='listed'><div class='options'><a href='#' class='erase' title='Erase Task'></a><a href='#' class='min' title='Minimize'></a><a href='#' class='max' title='Maximize'></a></div><div class='category'><span></span><p>New</p></div><div class='listed01'><h3>" + myTitle + "<span class='at'> — in </span>" + myLocation + "</h3><span class='rem-status'>Reminder Mode: on</span><p class='paragraph'>" + html + "</p></div><div class='listed02'><span class='listed-date'>" + myDate + "</span><span class='listed-time'> at <b>" + myTime + "</b></span><span class='priority'><input type='radio' id='star1'><label for='star1'></label><input type='radio' id='star2'><label for='star2'></label><input type='radio' id='star3'><label for='star3'></label><span class='tolip'></span></span></div></div></li>");
$('.pre-loading').hide();
$('#search').prop('disabled', false);
$('#search').attr('placeholder', 'Filter tasks by keywords ..');
$('.counter').addClass('numric-animated');
}
reseted();
$('.options .erase').click(function(event) {
var title = $(event.target).closest('li').find('h3').text();
$(' #overlay, .main-message').fadeIn();
$('.message, .answer').css({
'opacity': '1'
});
$('.message p').html('This task <b>(' + title + ' )</b> will be deleted and you will no longer be able to find it.');
$('.answer button').on('click', function(e) {
if ($('#yes').is(e.target)) {
$('.circular').fadeIn();
$('.message, .answer').animate({
opacity: '0'
});
setTimeout(function() {
$('#overlay, .main-message').fadeOut()
$('.circular').fadeOut();
$(event.target).closest('li').remove();
var co = $('.list li').length;
$('.counter').html(co + ' task(s) pending');
if (co == 0) {
$('.counter').html('No Tasks Pending');
$('.pre-loading').fadeIn();
$('#search').prop('disabled', true);
$('#search').attr('placeholder', 'No tasks so far');
$('#search').val('');
}
}, 2500);
clearTimeout()
} else if ($('#no').is(e.target)) {
$(' #overlay, .main-message').fadeOut();
}
})
});
$('.options .min').on('click', function(e) {
var item = $(e.target).closest('li');
var itm = $('.list').width();
item.css({
'right': itm - 16
})
$(this).css({
'background': '#ddd'
})
item.find(' .max').css({
'background': '#89cb5a'
});
});
$('.options .max').click(function(e) {
var item = $(e.target).closest('li')
item.css({
'right': 0
})
$(this).css({
'background': '#ddd'
})
item.find(' .min').css({
'background': '#f7bf67'
});
});
$('.morelink').click(function(e) {
var hidden = $(e.target).closest('.morecontent');
$(this).find('.icon-arrow-down').toggleClass('rotated');
hidden.find('span').toggle();
});
var co = $('.list li').length;
$('.counter').html(co + ' Task(s) Pending');
});
$('#overlay').mouseup(function(e) {
var container = $("#card-main, .main-message");
if (!container.is(e.target) && container.has(e.target).length === 0) {
$(".main-message").fadeOut();
reseted();
}
});
$('#close-icon').on('click', function() {
reseted();
});
$('.credit-list').html('<div class="list-heading"><a class="avatar-50" href="https://www.facebook.com/Dani4Real" target="_blank"><span class="ova"></span><img src="https://goo.gl/aVijkX" ></a></div><div class="about-me"></div><ul><li><a href="https://www.facebook.com/Dani4Real" target="_blank">Muhammad Khairy</a></li><li><a href="#">Rate the app</a></li><li><a href="#">Terms of use</a></li><li><a href="#">FAQ</a></li><li><a id="collapse" href="#">Collapse The bar</a></li></ul>');
$('#close-icon, .credit-list ul li a').append("<span class='ripple'></span>");
$('#collapse, .list-order').on('click', function() {
$('.ova').toggleClass('animateme');
$('.fa-ellipsis-h').toggleClass('ba');
$('.credit-list').toggle();
});
$('#close-icon, #submit, .credit-list ul li a, .icon, .list-order').on('mouseup mousedown', function(e) {
if (e.type === 'mouseup') {
var ofs = $(this).offset(),
dX = e.pageX - ofs.left,
dY = e.pageY - ofs.top;
$('.ripple').css({
left: dX,
top: dY
});
$(this).find('.ripple').addClass('click-effect');
}
if (e.type === 'mousedown') {
$('.ripple').removeClass("click-effect");
}
});
});
//# sourceURL=pen.js
</script>
</body></html>
