body {padding: 0; margin: 0; background-image: url(../img/cloth.jpg); font-family: 'Montserrat', sans-serif;}
.authContainer {display: flex; justify-content: center; align-items: center; position: fixed; width: 100vw; height: 100vh; background-image: url(../img/background.jpg); background-size: cover; background-repeat: no-repeat;}
.authForm {width: 300px; padding: 10px; background: #fff; border-radius: 10px; box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.28);}
.authH2 {color: #333; margin: 10px; text-align: center; margin-bottom: 10px;}
.authLabel {padding: 0; margin: 0; font-size: 18px;}
.authFormSend {display: flex; justify-content: center; align-items: center; flex-direction: column; align-items: center; }
.authText {width: 80%; padding: 10px; outline: none; border: none; border-bottom: 1px solid #333; margin-bottom: 15px; margin-top: 15px;}
.authText:focus {border-bottom: 1px solid #3498db;}
.authSend {border: none; width: 100%; padding: 10px 0 10px 0; background: #3498db; color: #fff; cursor: pointer; margin-top: 30px; }
.authSend:hover {background: #2980b9;}
.authContainLink {align-items: center; margin: 20px;}
.authReg {text-decoration: none; color: #666;}
.authReg:hover {color: #333;}
.container {display: flex;}
.leftMenu {max-width: 300px; width: 100%; height: 100vh; background: #34495e; box-shadow: 3px 0px 8px 0px rgba(0,0,0,0.33); overflow: auto;}
.leftMenuHeader {background: #2ecc71; padding: 20px 0px 0px 10px; font-size: 22px; color: #fff; text-align: center;}
.leftMenuDate {background: #2ecc71; color: #ddd; font-size: 12px; padding-bottom: 20px; text-align: center;}
.leftMenuItem {display: flex;  cursor: pointer; background: #34495e;}
.leftMenuItemCont{display: flex; color:#222; padding: 10px; justify-content: space-between; position: relative; width: 100%;}
.leftMenuItemIcon {width: 16px; margin-right: 10px;}
.leftMenuItemName {margin-right: 20px;}
.leftMenuAdd {width: 20px; padding: 5px 30px 5px 30px; background: #2ecc71; border-radius: 5px; cursor: pointer;}
.leftMenuAddContain {width: 100%; text-align: center; margin-top: 20px;}
.topMenu {width: 100%; background: #2ecc71; height: 81px; display: flex; justify-content: flex-end;}
.content {width: calc(100% - 280px);}
.topMenuUser {display: flex; color:#fff; margin-right: 20px;}
.topMenuUserImg {width: 65px; padding: 8px;}
.topMenuUserName {font-size: 18px; font-weight: 600; padding-top:20px;}
.topMenuUserOut {cursor: pointer; color: #fff; text-decoration: none;}
.work {position: relative; width: calc(100% - 60px); background: #fff; margin: 20px; box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.33); padding: 10px;}
.addWork {width: calc(100% - 60px); background: #fff; margin: 20px; box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.33); padding: 10px 20px;}
.addWorkInput {max-width: 280px; width: 100%; font-size: 18px; border:none; outline: none; border-bottom: 1px solid #333; margin-bottom: 20px; background: none;}
.addWorkInput:focus {border-bottom: 1px solid #2ecc71;}
.addWorkDescription {max-width: 280px; width: 100%; font-size: 18px; border:none; outline: none; border: 1px solid #333; margin-bottom: 20px;}
.addWorkDescription:focus {border: 1px solid #2ecc71;}
.addWorkButton {border: none; width: 200px; padding: 10px 0; text-align: center; background: #2ecc71; border-radius: 5px; cursor: pointer; color: #fff; margin-top:20px; outline: none;}
.addTaskContainer {display: flex; align-items: center;}
.addClass {width: 15px; height: 15px; padding: 2px; background-color: #2ecc71; border-radius: 3px; margin-left: 10px;}
.addTaskForm {margin-bottom: 20px;flex-direction: column;}
.taskItem {padding-bottom: 10px;  display: flex;}
.taskItemOk {margin-bottom: 10px;text-decoration:line-through; display: flex;}
.taskUserDone {color:#bfbfbf; margin-left: 10px; font-size: 12px;}
.taskDateDone {color:#dc0505; margin-left: 10px; font-size: 12px;}
.workButton {position: absolute; right: 0px; top: 0px; background-color: #2ecc71; }
.workButtonItem {width: 20px; padding: 5px 10px; cursor: pointer;}
.taskButtonEditImg {margin-left: 10px; width: 14px; display: none;}
.taskButtonDeleteImg {margin-left: 10px; width: 14px; display: none;}
.taskItem:hover .taskButtonEditImg  {display: flex;}
.taskItem:hover .taskButtonDeleteImg  {display: flex;}
.taskItemOk:hover .taskButtonDeleteImg  {display: flex;}
.taskItemOk:hover .taskButtonEditImg  {display: flex;}
.taskDescription {margin-top:-10px; margin-bottom: 5px; font-size: 12px; color: #fff;}
.drag {width: 15px; padding: 2px 10px; display: none;}
.tasks {    display: flex; flex-direction: column; align-items: flex-start;}
.taskItemContainer {}
.taskDescription {margin-bottom: 5px; font-size: 12px; color:#888;}
.worksIcons {padding: 10px; display: flex; flex-wrap: wrap;}
.worksIconsItem {width: 20px; padding: 5px; cursor: pointer;}
.worksColors {padding: 10px; display: flex; flex-wrap: wrap;}
.colorItem {width: 30px; height: 30px; margin: 5px; cursor: pointer;}
.colorItemOK {border: 2px solid #2ecc71; border-radius: 2px;}
.bg0 {background: #fff;}
.bg1 {background: #ffc;}
.bg2 {background: #dfc;}
.bg3 {background: #cef;}
.bg4 {background: #fcc;}
.bgl0 {background: #fff;}
.bgl1 {background: #f8f84d;}
.bgl2 {background: #88fa4f;}
.bgl3 {background: #3cb4f0;}
.bgl4 {background: #ff4848;}
#inputEditTaskName {z-index:1000;}
#inputEditTaskDesc {z-index:1000;}
.iconOk {border: 1px solid #2ecc71; border-radius: 2px;}
.description {margin-bottom: 20px; margin-top: -20px; color: #666;}
#rerunWork{padding: 10px 20px; color: #fff; background: #2ecc71; margin-bottom: 20px; cursor: pointer; width: 150px; text-align: center; border-radius: 5px;}
.underline {position: absolute; left: 0px; bottom: 0px; width: calc(100% - 20px); margin-left: 10px; height: 1px;}
@media only screen and (max-width: 900px) and (min-width: 150px) {  

    .container {display: flex; flex-direction: column;}
    .leftMenu {max-width: 100%; height: auto;}
    .content {width: 100%;}
    .topMenu {display: none;}
    .work {width: calc(100% - 20px); margin: 0;}
    .addWork {width: calc(100% - 20px); margin: 0;}
    .taskButtonEditImg {display: flex;}
    .drag {display: block;}
    .taskDescription {display: flex;}
}

@media only screen and (max-width: 890px) and (min-width: 623px) {  

}