/* ================================================== /*
 * Typography
/* ================================================== */
@font-face {
  font-family: 'Gilroy_ExtraBold';
  src: url('../fonts/Gilroy/Gilroy_ExtraBold.svg#Gilroy_ExtraBold') format('svg'),
       url('../fonts/Gilroy/Gilroy_ExtraBold.ttf') format('truetype'),
       url('../fonts/Gilroy/Gilroy_ExtraBold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Gilroy_ExtraBold';
  src: url('../fonts/Gilroy/Gilroy_ExtraBold.eot');
  src: url('../fonts/Gilroy/Gilroy_ExtraBold.eot?#iefix') format('embedded-opentype'),
       url('../fonts/Gilroy/Gilroy_ExtraBold.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat_Regular';
  src: url('../fonts/Montserrat/Montserrat_Regular.svg#Montserrat_Regular') format('svg'),
       url('../fonts/Montserrat/Montserrat_Regular.ttf') format('truetype'),
       url('../fonts/Montserrat/Montserrat_Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat_Regular';
  src: url('../fonts/Montserrat/Montserrat_Regular.eot');
  src: url('../fonts/Montserrat/Montserrat_Regular.eot?#iefix') format('embedded-opentype'),
       url('../fonts/Montserrat/Montserrat_Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat_Medium';
  src: url('../fonts/Montserrat/Montserrat_Medium.svg#Montserrat_Medium') format('svg'),
       url('../fonts/Montserrat/Montserrat_Medium.ttf') format('truetype'),
       url('../fonts/Montserrat/Montserrat_Medium.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat_Medium';
  src: url('../fonts/Montserrat/Montserrat_Medium.eot');
  src: url('../fonts/Montserrat/Montserrat_Medium.eot?#iefix') format('embedded-opentype'),
       url('../fonts/Montserrat/Montserrat_Medium.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat_Bold';
  src: url('../fonts/Montserrat/Montserrat_Bold.svg#Montserrat_Bold') format('svg'),
       url('../fonts/Montserrat/Montserrat_Bold.ttf') format('truetype'),
       url('../fonts/Montserrat/Montserrat_Bold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat_Bold';
  src: url('../fonts/Montserrat/Montserrat_Bold.eot');
  src: url('../fonts/Montserrat/Montserrat_Bold.eot?#iefix') format('embedded-opentype'),
       url('../fonts/Montserrat/Montserrat_Bold.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

/* ================================================== /*
 * COMMON STYLES
/* ================================================== */
body {
  background: #d7dee4;
  font-size: 16px;
  font-family: Montserrat_Regular;
  color: #606060;
  user-select: none;
}

/* ================================================== /*
 * HEADER
/* ================================================== */
header {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  width: 65%;
  height: 100px;
  margin: 0 auto;
  background: #fff;
}

.wrLogo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20%;
  border: 1px solid #edf0f5;
  border-top: 3px solid #69e5da;
  padding: 0 3px;
  text-align: center;
  font-size: 2rem;
  font-family: Gilroy_ExtraBold;
  text-transform: uppercase;
}

.wrSearch {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 80%;
  height: 100%;
  border: 1px solid #edf0f5;
  border-top: 3px solid #69e5da;
}

.wrSearch i.fa-search { 
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translate(0, -50%);
  padding: 15px;
  cursor: pointer;
}

.wrSearch i.fa-search {
  font-size: 1rem;
  color: #b6c8d2;
  cursor: pointer;
}

.wrSearch i.fa-search:hover {
  color: #69e5da;
}

.search {
  width: 100%;
  height: 40px;
  border: none;
  margin: 0 15px;
  padding: 0 15px 0 45px;
  border-radius: 5px;
  -webkit-box-shadow: 0px 1px 5px -3px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 1px 5px -3px rgba(0,0,0,0.75);
  box-shadow: 0px 1px 5px -3px rgba(0,0,0,0.75);
  font-size: 0.875rem;
}

/* ================================================== /*
 * CONTENT
/* ================================================== */
.content {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  width: 65%;
  margin: 0 auto;
}

/* -------------------------------------------------- /*
 * Left Bar
/* -------------------------------------------------- */
.leftBar {
  max-width: 256px;
  width: 20%;
  border: 1px solid #edf0f5;
  padding: 0 3px;
  background: #fff;
}

.btnFilter {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  border: 1px solid #edf0f5;
  margin: 1px 0;
  padding: 30px 15px;
  background: #fff;
  font-size: 0.875rem;
  color: #606060;
  cursor: pointer;
}

.btnFilter i {
  margin-bottom: 10px;
  font-size: 1.5rem;
}

.btnFilter:hover,
.activeBtnFilter {
  border: none;
  outline: none;
  background: #69e5da;
  font-family: Montserrat_Medium;
  color: #fff;
}

.btnFilter:active,
.btnFilter:focus {
  border: none;
  outline: none;
}

/* -------------------------------------------------- /*
 * Body Content
/* -------------------------------------------------- */
.bodyContent {
  flex-direction: column;
  width: 80%;
  border: 1px solid #edf0f5;
  background: #fff;
  -webkit-box-shadow: inset 0px 0px 5px -3px rgba(0,0,0,0.75);
  -moz-box-shadow: inset 0px 0px 5px -3px rgba(0,0,0,0.75);
  box-shadow: inset 0px 0px 5px -3px rgba(0,0,0,0.75);
}

/* -------------------------------------------------- /*
 * Start Screen
/* -------------------------------------------------- */
.startScreen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 50px 0;
}

.startScreen img {
  width: 250px;
  height: auto;
}

.startGreeting {
  margin: 15px 0;
  text-align: center;
}

.startGreeting span {
  font-family: Montserrat_Bold;
}

.btnStart {
  border: none;
  border-radius: 25px;
  padding: 15px 30px;
  background: #69e5da;
  font-size: 1rem;
  font-family: Montserrat_Medium;
  color: #fff;
  cursor: pointer;
}

.btnStart:hover {
  -webkit-box-shadow: 0px 0px 5px -2px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 5px -2px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 5px -2px rgba(0,0,0,0.75);
}

.btnStart:active,
.btnStart:focus {
  border: none;
  outline: none;
}

.btnStart i.fa-plus {
  font-size: 1rem;
  margin-right: 15px;
}
/* -------------------------------------------------- /*
 * Start Screen The End
/* -------------------------------------------------- */

.wrTasks {
  display: none;
  border-top: 3px solid #69e5da;
  margin: 50px;
}

.wrHeaderTasks {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #edf0f5;
  padding: 15px;
  background: #fff;
}

.taskStatusTitle {
  font-size: 1rem;
  font-family: Montserrat_Medium;
}

.btnOpenAddForm {
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  background: none;
  font-size: 0.875rem;
  color: #b6c8d2;
}

.btnOpenAddForm i.fa-plus {
  margin-right: 5px;
  font-size: 0.75rem;
  color: #b6c8d2;
}

.btnOpenAddForm:hover,
.btnOpenAddForm:hover i.fa-plus {
  color: #69e5da;
  cursor: pointer;
}

.btnOpenAddForm:focus,
.btnOpenAddForm:active {
  border: none;
  outline: none;
}

/* -------------------------------------------------- /*
 * Task List
/* -------------------------------------------------- */
ul.taskList {
  margin: 0;
  padding: 0;
}

li.wrTask {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 15px;
  border-top: 1px solid #edf0f5;
  border-bottom: 1px solid #edf0f5;
  background: #fff;
}

li.wrTask:hover {
  margin: 3px 0;
  -webkit-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.75);
}

.taskName {
  width: 65%;
}

/* -------------------------------------------------- /*
 * Checkboxes
/* -------------------------------------------------- */
li.wrTask input[type="checkbox"] {
  display: none;
  margin-right: 35px;
  opacity: 0;
}

li.wrTask label {
  display: block;
  position: relative;
  margin-bottom: 0;
  margin-right: 15px;
  margin-left: 50px;
  font-size: 1rem;
  cursor: pointer;
}

li.activeCheck label {
  text-decoration: line-through;
}

li.wrTask label::before,
li.wrTask label::after {
  content: "";
  position: absolute;
  cursor: pointer;
}

li.wrTask label::before {
  top: 50%;
  left: -48px;
  transform: translate(0, -50%);
  width: 20px;
  height: 20px;
  border: 2px solid #69e5da;
  border-radius: 5px;
}

li.wrTask label::after {
  top: 50%;
  left: -45px;
  transform: translate(0, -100%) rotate(-45deg);
  width: 22px;
  height: 10px;
  border-bottom: 2px solid #69e5da;
  border-left: 2px solid #69e5da;
}

li.wrTask input[type="checkbox"] + label::after {
  content: none;
}

li.activeCheck input[type="checkbox"]:checked + label::after,
li.activeCheck input[type="checkbox"] + label::after {
  content: "";
}

li.wrTask input[type="checkbox"]:focus + label::before {
  outline: none;
}
/* -------------------------------------------------- /*
 * Checkboxes The End
/* -------------------------------------------------- */

.priorityTask {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 125px;
}

.indicatorPriority {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 15px;
}

.highPriority {
  background: #fa7974;
}

.mediumPriority {
  background: #fa9e31;
}

.lowPriority {
  background: #f5cb1f;
}

li.activeCheck .indicatorPriority {
  background: #b6c8d2;
}

.labelPriority {
  font-size: 0.75rem;
}

li.activeCheck .labelPriority {
  text-decoration: line-through;
}

.wrBtnTask {
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrBtnTask button:first-child {
  margin-right: 5px;
}

.btnEditTask,
.btnDeleteTask {
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  background: none;
  cursor: pointer;
}

.btnEditTask:focus,
.btnEditTask:active,
.btnDeleteTask:focus,
.btnDeleteTask:active {
  border: none;
  outline: none;
}

.btnEditTask i.fa-edit,
.btnDeleteTask i.fa-trash-alt {
  font-size: 1.125rem;
  color: #b6c8d2;
}

.btnEditTask:hover .fa-edit:before {
  color: #69e5da; 
}

.btnDeleteTask:hover .fa-trash-alt:before {
  color: #ff3d3f;
}

/* ================================================== /*
 * Add Form & Edit Form
/* ================================================== */
#addForm,
#editForm {
  display: flex;
}

.overlayAddForm,
.overlayEditForm {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 100;
  background: #000;
  opacity: .5;
}

.visibleAddForm,
.visibleEditForm {
  border-top: 3px solid #69e5da;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 101;
  max-width: 600px;
  width: 96%;
  overflow: auto;
  padding: 50px;
  background: #fff;
}

.wrInputNewTask,
.wrInputEditTask {
  display: flex;
  position: relative;
}

.wrInputNewTask i.fa-plus,
.wrInputEditTask i.fa-edit {
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translate(0, -50%);
  font-size: 1rem;
  color: #b6c8d2;
}

.newTaskName,
.editTaskName {
  width: 100%;
  height: 40px;
  border: none;
  padding: 0 15px 0 45px;
  border-radius: 5px;
  -webkit-box-shadow: 0px 1px 10px -3px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 1px 10px -3px rgba(0,0,0,0.75);
  box-shadow: 0px 1px 10px -3px rgba(0,0,0,0.75);
  font-size: 0.875rem;
}

.selectPriorityTitle {
  margin: 30px 0 10px;
  font-family: Montserrat_Medium;
}

/* -------------------------------------------------- /*
 * Radio Buttons
/* -------------------------------------------------- */
.wrPrioritySelection {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wrRadioPriority {
  width: 30%;
  text-align: center;
}

.wrRadioPriority input[type="radio"] {
  display: none;
  margin-right: 35px;
  opacity: 0;
}

.wrRadioPriority label {
  position: relative;
  margin: 0 15px 0 50px;
  cursor: pointer;
}

.wrRadioPriority label::before,
.wrRadioPriority label::after {
  content: "";
  position: absolute;
  cursor: pointer;
}

.wrRadioPriority label::before {
  top: 50%;
  left: -50px;
  transform: translate(0, -50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.wrRadioPriority label::after {
  top: 50%;
  left: -43px;
  transform: translate(0, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

#labelLow::before {
  border: 2px solid #f5cb1f;
}

.wrRadioPriority #labelLow::after {
  background: #f5cb1f;
}

#labelMedium::before {
  border: 2px solid #fa9e31;
}

.wrRadioPriority #labelMedium::after {
  background: #fa9e31;
}

#labelHigh::before {
  border: 2px solid #fa7974;
}

.wrRadioPriority #labelHigh::after {
  background: #fa7974;
}

.wrRadioPriority input[type="radio"] + label {
  
}

.wrRadioPriority input[type="radio"] + label::after {
  content: none;
}

.wrRadioPriority input[type="radio"]:checked + label::after {
  content: "";
}

.wrRadioPriority input[type="radio"]:focus + label::before {
  outline: none;
}
/* -------------------------------------------------- /*
 * Radio Buttons The End
/* -------------------------------------------------- */

.btnAddTask,
.btnAcceptEditing {
  width: 100%;
  border: none;
  border-radius: 25px;
  margin-top: 30px;
  padding: 8px 30px;
  background: #69e5da;
  font-size: 1rem;
  font-family: Montserrat_Medium;
  color: #fff;
  cursor: pointer;
}

.btnAddTask:hover,
.btnAcceptEditing:hover {
  -webkit-box-shadow: 0px 0px 5px -2px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 5px -2px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 5px -2px rgba(0,0,0,0.75);
}

.btnAddTask:focus,
.btnAddTask:active,
.btnAcceptEditing:focus,
.btnAcceptEditing:active {
  border: none;
  outline: none;
}

.btnAddTask i.fa-plus,
.btnAcceptEditing i.fa-check {
  margin-right: 15px;
  font-size: 1rem;
}

/* ================================================== /*
 * @MEDIA SCREEN AND (max-width:1439px)
/* ================================================== */
@media screen and (max-width:1439px) {
  
  header,
  .content {
    width: 70%;
  }
  
  .wrTasks {
    margin: 30px;
  }
}

/* ================================================== /*
 * @MEDIA SCREEN AND (max-width:1339px)
/* ================================================== */
@media screen and (max-width:1339px) {
  
  header,
  .content {
    width: 75%;
  }
}

/* ================================================== /*
 * @MEDIA SCREEN AND (max-width:1199px)
/* ================================================== */
@media screen and (max-width:1199px) {
  
  header,
  .content {
    width: 85%;
  }
}

/* ================================================== /*
 * @MEDIA SCREEN AND (max-width:991px)
/* ================================================== */
@media screen and (max-width: 991px) {
  
  body {
    margin: 0;
  }
  
  header,
  .content {
    width: 100%;
  }
  
  .wrLogo {
    border: none;
    border-top: 3px solid #69e5da;
    padding: 0;
  }
  
  .wrSearch {
    height: auto;
    border: none;
    border-top: 3px solid #69e5da;
  }
  
  .btnFilter {
    padding: 15px;
  }
  
  .content {
    flex-direction: column;
  }
  
  .leftBar {
    display: flex;
    max-width: 100%;
    width: 100%;
    border: none;
    padding: 0;
  }
  
  .bodyContent {
    width: 100%;
    border: none;
  }
  
  .visibleAddForm, 
  .visibleEditForm {
    max-width: 400px;
  }
  
  .wrPrioritySelection {
    display: flex;
    flex-direction: column;
  }
  
  .wrRadioPriority {
    width: 100%;
    margin: 10px 0;
    text-align: left
  }
}

/* ================================================== /*
 * @MEDIA SCREEN AND (max-width:667px)
/* ================================================== */
@media screen and (max-width: 667px) {

  header {
    display: flex;
    flex-direction: column;
    height: auto;
  }
  
  .wrLogo {
    width: 100%;
    padding: 15px 0 0 0;
  }
  
  .wrSearch {
    width: 100%;
    border: none;
    margin: 15px 0;
  }
  
  .wrTasks {
    margin: 15px;
  }
  
  li.wrTask {
    display: flex;
    flex-wrap: wrap;
    padding: 15px;
  }
  
  .taskName {
    display: flex;
    justify-content: center;
  }
  
  .taskName {
    width: 100%;
    margin: 10px 0;
  }
  
  .priorityTask,
  .wrBtnTask {
    width: 50%;
    margin: 10px 0;
  }
  
  li.wrTask label {
    width: 100%;
    margin: 0;
    padding-left: 50px;
  }
  
  li.wrTask label::before {
    left: 0;
  }
  
  li.wrTask label::after {
    left: 3px;
  }
  
  .priorityTask {
    justify-content: center;
  }
  
  .visibleAddForm, 
  .visibleEditForm {
    width: 70%;
  }
}

/* ================================================== /*
 * @MEDIA SCREEN AND (max-width:467px)
/* ================================================== */
@media screen and (max-width: 467px) {
  
  .btnFilter i {
    font-size: 1.125rem;
  }
  
  .taskStatusTitle {
    font-size: 0.875rem;
  }
  
  li.wrTask {
    padding: 5px 15px;
  }
  
  li.wrTask label {
    font-size: 0.875rem;
  }
  
  .visibleAddForm, 
  .visibleEditForm {
    padding: 30px;
  }
}