/********** Width & Sizing **********/
.full_width {
  width: 100%;
}

/********** Borders & Outlines **********/
.std_border,
.med_border,
.sm_border {
  border-radius: 9px;
}

.std_border {
  border: 3px solid white;
}

.med_border {
  border: 2px solid white;
}

.sm_border {
  border: 1px solid white;
}

.debug {
  border: 1px solid red;
}

/********** Rows & Columns **********/
.row {
  display: flex;
  flex-direction: row;
}

.row_space_between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 15px 0px 15px 0px;
}

.column {
  display: flex;
  flex-direction: column;
}

.center {
  align-items: center;
  justify-content: center;
}

/********** Margins & Padding **********/
.margin {
  margin: 15px;
}

.no_margin {
  margin: 0;
}

.top_margin {
  margin-top: 15px;
}

.right_margin {
  margin-right: 15px;
}

.over_right_margin {
  margin-right: 50px;
}

.bottom_margin {
  margin-bottom: 15px;
}

.left_margin {
  margin-left: 15px;
}

.padding {
  padding: 15px;
}

.no_padding {
  padding: 0;
}

.top_padding {
  padding-top: 15px;
}

.right_padding {
  padding-right: 15px;
}

.bottom_padding {
  padding-bottom: 15px;
}

.left_padding {
  padding-left: 15px;
}

/********** FORMS **********/


/********** TODO ITEMS **********/
.todo_display {
  margin: 0 auto;
  margin-top: 25px;
  width: 80%;
  height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#todo_actions {
  padding: 15px;
  border: 2px solid white;
  border-radius: 8px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 25px;

  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.todo_category_window {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  overflow-x: scroll;
  overflow-y: none;
}

.todo_category {
  display: block;
  min-width: 400px;
  margin-right: 50px;
  overflow-y: scroll;
  overflow-x: none;
}

.todo_category h4 {
  text-align: center;
  position: relative;
}

.todo_list {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.todo_item {
  width: 100%;
}

.todo_item_details {
  display: none;
}

.modal_activation_area {}

.modal_activation_area:hover {
  cursor: pointer;
}

/********** Animations **********/
@view-transition {
  navigation: auto;
  animation-duration: 1s;
}

::view-transition-old(root) {
  animation: fade-out 750ms forwards;
}

::view-transition-new(root) {
  animation: fade-in 750ms forwards;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}