.App{display:flex}.event-bar{flex-shrink:1;min-width:220px;text-align:center;width:300px;height:100vh;border-right:2px solid #ededed}.task-box{flex:1;min-width:1070px;background-color:#fefefe}.add-button{width:80%;height:45px;font-size:1.3em;line-height:45px;background-color:#eaf1f0;margin:0 auto 20px;border-radius:10px;cursor:pointer;transition:.5s;outline:none}.add-button:hover{background-color:#dfe2e2}.event-bar-title{font-size:2.5em;padding:25px 0;font-weight:400;font-style:italic}.event-container{height:700px;padding:0 30px;overflow:auto}.selected-event{color:#fff;background-color:#e86a3d}.event{font-size:1.5em;line-height:1.5em;max-width:230px;font-weight:400;border-radius:10px;padding:5px 10px;margin-bottom:10px;transition:.5s;cursor:pointer}.event:hover{color:#fff;background-color:#e86b3dc4;transition:.5s}.over-hide{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.task-box-header{display:flex;align-items:center;padding:22px 50px 0}.task-box-title{font-size:2.5em;padding:25px 0;font-weight:500}.remove-button{font-size:1.1em;font-style:italic;margin-left:35px;padding:10px;background:none;border:2px solid red;border-radius:10px;cursor:pointer;transition:.3s;outline:none}.remove-button:hover{color:#fff;background-color:red;transition:.3s}.task-box-body{display:flex;justify-content:space-evenly;align-items:flex-start;width:100%;height:700px;margin-top:20px}.column{width:300px;max-height:700px;background-color:#f6f9fa;border-radius:15px;padding:17px 25px;font-size:1.4em;font-weight:400;font-style:italic;transition:1s}.add-task-button{width:300px;height:40px;font-size:1.3em;line-height:40px;background-color:#ebf1f1;border-radius:10px;cursor:pointer;transition:.5s;outline:none;text-align:center;font-style:normal;margin:15px auto;font-size:1.1em}.add-task-button:hover{background-color:#dee4e4}.task-container{width:100%;min-height:30px;max-height:600px;overflow:auto}.task{position:relative;width:calc(100% - 33px);background-color:#fff;padding:15px;border-radius:10px;margin-bottom:18px;cursor:pointer;transition:.2s;user-select:none;border:1px solid #ccc;outline:none}.task:hover{background-color:#0077ff04;transition:.2s}.task-name{font-style:normal;font-size:.9em;font-weight:300;line-height:1.1em}.task-name:before{content:"\25cf";font-style:normal;color:#f19737;margin-right:10px}.task-details{font-style:normal;font-weight:300;font-size:.8em;color:#9c9c9c;word-wrap:break-word;margin-top:10px;line-height:1.1em}.remove-bar{position:absolute;bottom:15px;right:15px;text-align:end;font-size:3.5em;font-weight:300;color:#888;line-height:.1em;transition:.5s}.remove-bar:hover{color:red;font-size:8em;line-height:.01em;transition:.5s}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1;font-family:Roboto,sans-serif}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}