.calendar-setting-category-list {
  display: none;
}

.calendar-setting-category-list-cell {
  display: block;
  position: relative;
  width: 100%;
}

.calendar-setting-category-list-cell::after {
  content: "";
  display: block;
  clear: both;
}

.calendar-setting-category-list-cell .nd-value-title { font-size: 1rem; font-size: 1rem; float:left; width: calc(100% - 136px); line-height: 1.5rem; margin-bottom: 30px; padding: 8px 0 0 16px;}
.calendar-setting-category-list-cell .nd-value-rank { font-size: 0.75rem; color: rgb(80, 80, 80); margin-top: -4px;}
.calendar-setting-category-list-cell .nd-value-date { font-size: 0.75rem; position: absolute; left:88px; bottom: 8px; }
.calendar-setting-category-list-cell .nd-value-action { font-size: 0.875rem; position: absolute; right:16px; bottom: 8px;}

.spectrum-Table:not(.spectrum-Table--quiet) tbody.spectrum-Table-body .spectrum-Table-row:first-child .spectrum-Table-cell:last-child {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

tbody.spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:last-child {
  border-right-width: 0;
  border-left-width: 0;
}

@media only screen and (min-width:768px) {
  .calendar-setting-category-list {
    display: block;
    width: 100%;
    background: rgb(234,234,234);
    margin-bottom: 8px;
    border-radius: 4px;
    border-right-width: 1px;
    border-left-width: 1px;
    padding-left: 0;
    padding-right: 0;
  }
  .calendar-setting-category-list::after {
    content: "";
    display: block;
    clear: both;
  }
  .calendar-setting-category-list-cell {
    display: flex;
    width: 100%;
    padding: 0;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .calendar-setting-category-list-cell::after {
    content: "";
    display: none;
    clear: both;
  }
  .spectrum-Table-body .spectrum-Table-cell .nd-thumbnail-cell {
    width: 100px;
    min-height: 132px;
  }
  .spectrum-Table-body .spectrum-Table-cell .nd-thumbnail-cell img {
    width: 100px;
  }

  .calendar-setting-category-list .nd-label-title { float:left;  width: calc(100% - 314px); height: 16px;}
  .calendar-setting-category-list .nd-label-date { float:left; width: 130px; }
  .calendar-setting-category-list .nd-label-action { float:right; width: 68px; }

  .calendar-setting-category-list-cell .nd-value-title { font-size: 1rem; font-size: 1rem; float:none; width: calc(100% - 298px); line-height: 1.5rem; margin-bottom: 0; padding: 0px 16px;}
  .calendar-setting-category-list-cell .nd-value-date { font-size: 0.875rem; position: relative; left:0; bottom:0; width:130px; padding: 0; }
  .calendar-setting-category-list-cell .nd-value-action { font-size: 0.875rem; position: relative; top:0; right:0; width: 68px; margin-top: 0; padding: 0;}

  .spectrum-Table:not(.spectrum-Table--quiet) tbody.spectrum-Table-body .spectrum-Table-row:first-child .spectrum-Table-cell:last-child {
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
  }

  tbody.spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:last-child {
    border-right-width: 1px;
    border-left-width: 1px;
  }
}

@media only screen and (min-width:960px) {
  .calendar-setting-category-list {
    display: block;
    width: 100%;
    background: rgb(234,234,234);
    margin-bottom: 8px;
    border-radius: 4px;
    border-right-width: 1px;
    border-left-width: 1px;
    padding-left: 0;
    padding-right: 0;
  }
  .calendar-setting-category-list::after {
    content: "";
    display: block;
    clear: both;
  }
  .calendar-setting-category-list-cell {
    display: flex;
    width: 100%;
    padding: 0;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .calendar-setting-category-list-cell::after {
    content: "";
    display: none;
    clear: both;
  }
  .spectrum-Table-body .spectrum-Table-cell .nd-thumbnail-cell {
    width: 100px;
    min-height: 132px;
  }
  .spectrum-Table-body .spectrum-Table-cell .nd-thumbnail-cell img {
    width: 100px;
  }
  .calendar-setting-category-list .nd-label-title { float:left;  width: calc(100% - 314px); height: 16px;}
  .calendar-setting-category-list .nd-label-date { float:left; width: 130px; }
  .calendar-setting-category-list .nd-label-action { float:right; width: 68px; }

  .calendar-setting-category-list-cell .nd-value-title { font-size: 1rem; font-size: 1rem; float:none; width: calc(100% - 298px); line-height: 1.5rem; margin-bottom: 0; padding: 0px 16px;}
  .calendar-setting-category-list-cell .nd-value-date { font-size: 0.875rem; position: relative; left:0; bottom:0; width:130px; padding: 0; }
  .calendar-setting-category-list-cell .nd-value-action { font-size: 0.875rem; position: relative; top:0; right:0; width: 68px; margin-top: 0; padding: 0;}

  .spectrum-Table:not(.spectrum-Table--quiet) tbody.spectrum-Table-body .spectrum-Table-row:first-child .spectrum-Table-cell:last-child {
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
  }

  tbody.spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:last-child {
    border-right-width: 1px;
    border-left-width: 1px;
  }
}

@media only screen and (min-width:1280px) {
  .calendar-setting-category-list {
    display: block;
    width: 100%;
    background: rgb(234,234,234);
    margin-bottom: 8px;
    border-radius: 4px;
    border-right-width: 1px;
    border-left-width: 1px;
    padding-left: 0;
    padding-right: 0;
  }
  .calendar-setting-category-list::after {
    content: "";
    display: block;
    clear: both;
  }
  .calendar-setting-category-list-cell {
    display: flex;
    width: 100%;
    padding: 8px 0;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .calendar-setting-category-list-cell::after {
    content: "";
    display: none;
    clear: both;
  }

  .calendar-setting-category-list .nd-label-title { float: left; width: calc(100% - 306px); height: 16px; padding: 0 16px; }
  .calendar-setting-category-list .nd-label-status { float: left; width: 80px; padding: 0; text-align: center; }
  .calendar-setting-category-list .nd-label-rank { float: left; width: 80px; padding: 0; text-align: center; }
  .calendar-setting-category-list .nd-label-action { float: right; width: 144px; padding: 0; text-align: center; }

  .calendar-setting-category-list-cell .nd-value-title { font-size: 1rem; font-size: 1rem; float: none; width: calc(100% - 306px); line-height: 1.5rem; margin-bottom: 0; padding: 0 16px; }
  .calendar-setting-category-list-cell .nd-value-status { font-size: 0.875rem; position: relative; left:0; bottom:0; width: 80px; padding: 0; text-align: center; }
  .calendar-setting-category-list-cell .nd-value-rank { font-size: 0.875rem; position: relative; left:0; bottom:0; width: 80px; padding: 0; text-align: center; }
  .calendar-setting-category-list-cell .nd-value-action { font-size: 0.875rem; display: flex; justify-content: space-around; position: relative; top:0; right:0; width: 144px; margin-top: 0; padding: 0; }
  .calendar-setting-category-list-cell .nd-value-update { width: 64px; text-align: center; }
  .calendar-setting-category-list-cell .nd-value-delete { width: 64px; text-align: center; }

  .spectrum-Table:not(.spectrum-Table--quiet) tbody.spectrum-Table-body .spectrum-Table-row:first-child .spectrum-Table-cell:last-child {
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
  }

  tbody.spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:last-child {
    border-right-width: 1px;
    border-left-width: 1px;
  }
}