@charset "utf-8";

textarea {
  width:100%;
  background: rgb(247,247,247);
  border:1px solid lightgray;
  outline: none;
  padding: 10px;
  border-radius: 3px;
  font-size: 14px;
}
textarea::-webkit-input-placeholder {
  color: #ff637d;
}

textarea:-moz-placeholder { /* Firefox 18- */
  color: #ff637d;
}

textarea::-moz-placeholder {  /* Firefox 19+ */
  color: #ff637d;
}

textarea:-ms-input-placeholder {
  color: #ff637d;
}
input::-webkit-input-placeholder { /* WebKit browsers */
  color: #ff637d;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: #ff637d;
  opacity:  1; /* Firefox gives the placeholder a reduced opacity so we have to increase it */
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #FF627D;
  opacity:  1; /* Firefox gives the placeholder a reduced opacity so we have to increase it */
}
input:-ms-input-placeholder { /* Internet Explorer 10+ */
  color: #ff637d;
}
/* 메테리얼 디자인 header 커스텀 코드 시작 */
.mdl-layout__header-row {
  color: #aa198d;
  padding-left: 13px;
  font-size:19px;
}
.mdl-layout-title, .mdl-layout__title {
  margin-top: 1px;
  margin-left: 8px;
}
.mdl-layout__header-row .mdl-navigation__link {
  color: gray;
  font-size: 20px;
  line-height: 1;
  letter-spacing: .02em;
}
header .material-icons {color:#333}
/* 메테리얼 디자인 header 커스텀 코드 끝 */

.nav-item .active {color:#0056b3}



/* 메테리얼 디자인 아이콘 커스텀 코드 시작 */
.mdl-icon-toggle .material-icons {
  color: #99999a;
}
.mdl-radio.is-checked .mdl-radio__outer-circle {
  border: 2px solid #ff637d;
}
.mdl-radio__inner-circle {
  background: #ff637d;
}
.mdl-switch__ripple-container .mdl-ripple {
  background: #ff637d;
}
.mdl-switch.is-checked .mdl-switch__thumb {
  background: #ff637d;
}
/* 메테리얼 디자인 아이콘 커스텀 코드 끝 */

/* 메테리얼 디자인 card 커스텀 코드 시작 */

.mdl-card {
  min-height: 0;
  border:1px solid rgb(236,236,236);
  border-radius: 7px;
}
.card-padding .mdl-card__supporting-text {
  margin: 20px 20px 18px 20px;
  width: calc(100% - 40px);
}

/* 메테리얼 디자인 card 커스텀 코드 끝 */

/* 메테리얼 디자인 탭 커스텀 시작 */
.mdl-layout__tab-bar {
  background: transparent;
  width: 100%;
}
.mdl-layout__tab-bar-button {
  display: none;
}
.mdl-layout__tab-bar .mdl-layout__tab {
  color:rgb(132,132,136);
}
.mdl-layout.is-upgraded .mdl-layout__tab.is-active {
  color: #ff637d;
}
.mdl-layout.is-upgraded .mdl-layout__tab.is-active:after{
  height: 3px;
}
.mdl-layout__tab-panel {
  padding: 15px;
}
/* 메테리얼 디자인 탭 커스텀 끝 */

/* 메테리얼 디자인 버튼 커스텀 시작 */
.save-button {
  background: #ff637d;
  color: #ffffff!important;
  border-radius: 20px;
}
.mdl-button,.mdl-button--raised.mdl-button--colored {color:#fff;cursor: pointer}
.mdl-card {width:inherit}
.mdl-card .mdl-textfield {width:100%}
.close-button {
  background: rgb(241,241,241);
  color: gray!important;
  border-radius: 20px;
  cursor: pointer;
  border: 1px solid lightgray;
}
/* 메테리얼 디자인 버튼 커스텀 끝 */

/* 일반 모듈 시작 */
.wills-content {
  outline: none;
  border: 1px solid rgb(236,236,236);
  background: rgb(246,246,246);
  border-radius: 5px;
  padding: 7px 15px;
  margin: 15px;
}
.wills-content-white {
  outline: none;
  border-radius: 5px;
  padding: 7px 15px;
  margin: 15px;
}

.wills-grid {
  display: flex;
  justify-content: space-between;
  padding: 7px 0px;
}
.wills-flex {
  display: flex;
}
.wills-flex-between {
  justify-content: space-between;
}
.wills-flex-end {
  justify-content: flex-end;
}
.wills-text-center {
  text-align: center;
}
.wills-padding-normal {
  padding-top: 8px;
}
.wills div {
  margin: 5px 0;
}

.wills-pink-color {
  color: #ff637d!important;
}
.wills-gray-color {
  color: gray;
}
.wills-violet-color {
  color: #aa198d;
}
.wills-font-big {
  font-size: 18px;
}
.wills-font-normal {
  font-size: 16px;
}
.wills-font-small {
  font-size: 14px;
}
.wills-text-right {
  text-align: right;
}
.wills-img-icon-big {
  width: 20px;
}
.wills-img-icon-normal {
  width: 18px;
}
.wills-img-icon-small {
  width: 16px;
}
.wills-product-img {
  width: 70px;
}
.wills-width-100 {
  width: 100%;
}
.wills-width-80 {
  width: 80%;
}
.wills-margin-left {
  margin-left: 5px;
}
.wills-margin-bottom {
  margin-bottom: 5px;
}
.wills-margin-right {
  margin-left: 5px;
}
.wills-margin-top {
  margin-top: 5px;
}
.wills-white-input {
  outline: none;
  border: none;
  font-size: 14px;
  padding-left: 10px;
  margin-left: -5px;
  padding-top:3px;
  color: #000000;
  height: 35px;
  line-height: 35px; /* TODO: This was recommended for cross browser compatability of input height, check if its actually needed in modern browsers */
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
.wills-gray-button {
  background: rgb(250,250,250);
  color: gray!important;
  border-radius: 10px;
  border: 1px solid lightgray;
  margin: 0 5px;
}
.wills-toggle-button.is-checked .mdl-icon-toggle__label {
  color: #ff637d;
}
.wills-border {
  border: 1px solid #ff637d!important;
}
.wills-font-bold {
  font-family: NotoSansCJKkr-Bold, sans-serif;
}
.wills-background-cover {
  background: url('../images/landing_user_info_base.png') center / cover;
}
.wills-background-gray {
  background: rgb(245,245,245);
}
.wills-white-box {
  width: 33.3%;
  border: 1px solid lightgray;
  margin: 2px;
  border-radius: 5px;
  padding: 10px;
  background: #ffffff;
}
.wills-box-wrapper {
  padding: 0;
}
.wills-no-padding {
  padding: 0!important;
}
.wills-input-text-right input::-webkit-input-placeholder {
  text-align: right;
  padding-right: 10px;
}
.wills-footer-transparent {
  background: transparent;
}
.wills-footer-text {
  font-size: 12px;
  margin: 0 auto;
}
.wills-splash-background {
  background: url('../images/splash_image.png') center / cover;
}
.wills-login-title {
  color: #ffffff;
  font-size: 60px;
  margin-top: 150px;
  margin-bottom: 80px;
  text-align: center;
}
.wills-password-lost-text {
  text-align: center;
}
.wills-content-small-margin {
  margin: 7px 15px;
}
/* 일반 모듈 끝 */

/* 제품 등록 시작 */
.product-registration-margin-top {
  margin-top: 40px;
}
/* 제품 등록 끝 */

/* 멤버쉽 스텝 2 시작*/
.sex-icons {
  font-size: 30px;
  color: gray;
  width: 40px;
  margin-bottom: 5px;
}
.sex-button {
  background: #ffffff;
  width: 50%;
  margin: 0 5px;
  border-radius: 5px;
  border: 1px solid lightgray;
  cursor: pointer;
}
.sex-button-text {
  color: gray;
  margin: 7px;
}
.membership-scroll-text {
  font-size: 30px;
  color: gray;
  margin-top: 87px;
  margin-left: -15px;
}
.membership-scroll-text-small {
  font-size: 20px;
  color: gray;
  margin-top: 87px;
  margin-left: -5px;
}
.membership-scroll-circle {
  font-size: 10px;
  margin-top: 90px;
}
/* 멤버쉽 스탭 2 끝 */

/* 렌딩 시작 */
.landing-title {
  letter-spacing: -1.4px;
}
.landing-new-font {
  background: #ff637d;
  color: #fff;
  font-size: 10px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  padding: 0px 3px;
}
.landing-title-name {
  color: #fff;
  font-size: 27px;
  margin: 12px 0 10px 0;
	text-align: right;
}
.landing-title-date {
	font-size: 15px;
	letter-spacing: -1.4px;
	text-align: right;
  color: #fbb5c3;
  padding-top: 5px;
}
.landing-big-text {
  margin-top:40px;
}
.landing-big-text-weight {
  font-size: 23px;
}
.landing-white-box-margin-top {
  margin-top: 20px;
}
.landing-background-gray-padding {
  padding: 1px 0;
}
.landing-text-margin-top {
  margin-top:10px;
}
.landing-text-margin-top-small {
  margin-top: 5px;
}
.landing-small-margin {
  margin: 5px 15px;
}

.course .mdl-button,.rent .mdl-button {display:block}
.course .mdl-card__actions,.rent .mdl-card__actions {padding-top:0}
.course .mdl-card__actions.mdl-card--border {border-top:none}
.refresh {position:absolute;top:1px;right:1px;z-index:9;display:block;width:1px;height:1px}

.sl_w {width: calc(33% - 8px)}
.mdl-cell.sl_w {margin:4px;}
/* 렌딩 끝 */

/* 미션 시작 */
.mission-text-title {
  font-size: 21px;
}
.mission-title-padding {
  padding: 12px 0;
}
.mission-number-text {
  background: rgb(252,238,239);
  color: #ff637d;
  font-size: 22px;
  padding: 0 10px 0 50px;
  margin-right: 3px;
}
.mission-table {
  width: 100%;
  border-spacing: 0px;
  margin-bottom: 10px;
  margin-top: 20px;
}
.mission-table-title {
  color: #ff637d;
  margin-bottom: 5px;
}
.mission-table-title th {
  padding: 5px 0;
  width: 20%;
  text-align: center;
}
.mission-table-content {
  background: #ffffff;
  text-align: center;
  font-size: 13px;
  margin: 3px 0;
  padding: 5px 0;
}
.mission-table-content td {
  padding: 3px;
  width: 20%;
  text-align: center;
  font-size: 12px;
  color: gray;
}
.mission-table-content .td-big {
  padding: 12px 3px;
  width: 40%;
}
.mission-table-gray-background {
  background-color: #f6f6f6;
}
/* 미션 끝 */

/* 무브먼트 시작 */
.movement-title-right {
  font-size: 12px!important;
}
.movement-big-text {
  margin-top: 20px;
}
.movement-box-no-border {
  border: none;
}
.movement-icon-wrapper {
  padding: 3px;
}
.movement-box {
  width: 25%;
  padding: 12px;
}
.movement-white-box {
  background: #ffffff;
  padding: 3px;
  margin-top: 3px;
  border-radius: 5px;
  color: gray;
  font-size: 10px;
  width: 100%;
}
.movement-speed-text {
  font-size: 18px;
}
.movement-box div {
  text-align: center;
}
.movement-gray-box {
  background: rgb(245,245,245);
  text-align: center;
  width: 20%;
}
.movement-big-box {
  width: 40%;
}
.movement-small-margin {
  margin: 0px 15px;
}
.movement-content-pink {
  outline: none;
  border-radius: 5px;
  padding: 7px 15px;
  margin: 0px 15px;
  background: rgb(252,235,239);
}
/* 무브먼트 끝 */

/* 블로그 탭 시작 */
.blog-header .mdl-layout__tab-bar {
  padding-left: 10px;
}
.blog-header .mdl-layout__tab-bar-container {
  height: 55px;
}

.blog-header .mdl-layout__tab-bar .menu-icons {
  width:30px;
  height:30px;
  margin-bottom: 7px;
}
.blog-header .mdl-layout__tab-bar .mdl-layout__tab {
  height: 64px;
  line-height: 20px;
}
@media screen and (max-width: 1024px){
  .blog-header .mdl-layout__tab {
      padding: 0 20px;
  }
}
.blog-header .mdl-layout__tab .tab-divider {
  border-right: 1px solid rgb(236,236,236);
  position: absolute;
  height: 58%;
  bottom: 35%;
  right: 0;
}
.blog-tab.is-active:after {
  background: transparent!important;
}
.mdl-layout__tab .all_icon {
  background: url('../images/all_icon_normal.png') center / cover;
}
.mdl-layout.is-upgraded .mdl-layout__tab.is-active .all_icon {
  background: url('../images/all_icon_select.png') center / cover;
}
.mdl-layout__tab .life_icon {
  background: url('../images/life_icon_normal.png') center / cover;
}
.mdl-layout.is-upgraded .mdl-layout__tab.is-active .life_icon {
  background: url('../images/life_icon_select.png') center / cover;
}
.mdl-layout__tab .eat_icon {
  background: url('../images/eat_icon_normal.png') center / cover;
}
.mdl-layout.is-upgraded .mdl-layout__tab.is-active .eat_icon {
  background: url('../images/eat_icon_select.png') center / cover;
}
.mdl-layout__tab .travel_icon {
  background: url('../images/travel_icon_normal.png') center / cover;
}
.mdl-layout.is-upgraded .mdl-layout__tab.is-active .travel_icon {
  background: url('../images/travel_icon_select.png') center / cover;
}
.mdl-layout__tab .culture_icon {
  background: url('../images/culture_icon_normal.png') center / cover;
}
.mdl-layout.is-upgraded .mdl-layout__tab.is-active .culture_icon {
  background: url('../images/culture_icon_select.png') center / cover;
}
.mdl-layout__tab .people_icon {
  background: url('../images/people_icon_normal.png') center / cover;
}
.mdl-layout.is-upgraded .mdl-layout__tab.is-active .people_icon {
  background: url('../images/people_icon_select.png') center / cover;
}
/* 블로그 탭 끝 */

/* 블로그 카드 시작 */
.blog-grid--no-spacing>.section__text{
  padding-left: 15px;
}
.blog-grid--no-spacing>.section__text {
  flex-grow: 1;
  flex-shrink: 0;
  padding-top: 0px;
  margin-left: 28px;
}
.blog-grid--no-spacing>.section__text button {
  position: absolute;
  right:10px;
  bottom: 15px;
  color:#ff637d;
}
.blog-section{
  position: relative;
  margin-bottom: 10px;
}
@media (max-width: 479px){
  .blog-grid--no-spacing>.mdl-cell--1-col {
      width: 35%;
      height: 35%;
  }
  .blog-grid--no-spacing>.mdl-cell--3-col {
    width: 55%;
    height: 35%;
  }
}
.blog-card-title {
  font-size: 17px;
  font-weight: bold;
  letter-spacing: -1px;
  margin-top:7px
}
.blog-card-content {
  margin-top:8px;
  color: gray;
  font-size: 12px;
}
.blog-card-date {
  margin-top:12px;
  color: lightgray;
  font-size: 11px;
}
/* 블로그 카드 끝 */

/* 보드 탭 시작 */
.board-header .mdl-layout__tab-bar {
  padding: 0px;
}
.board-header .mdl-layout__tab {
  width: 33.3%;
  flex-shrink: unset;
  margin: 0 15px;
}
/* 보드 탭 끝 */

/* 보드 시작 */
.board-section {
  margin-bottom: 5px;
}
.board-card-padding .mdl-card__supporting-text {
  margin: 20px 20px 0px 20px;
  width: calc(100% - 40px);
}
.board-card {
  background: rgb(247,247,247);
}
.board-img {
  width: 64px;
  height: 64px;
  border-radius: 32px;

}
.board-img-small {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  margin: 10px;
}
.board-card-title {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  color: #99999a;
  border-bottom: 1px dotted lightgray;
}
.board-card-title-small-wrapper {
  width: calc(100% - 40px);
}
.board-card-title-small {
  padding:10px 0 0 0;
  font-size:13px;
  border:none;
}
.board-card-content {
  padding: 10px 0;
  color:#77777a;

}
.board-card-content-small {
  padding: 3px 0px;
  font-size: 14px;
}
.board-card-info {
  display: flex;
  justify-content: space-between;
}
.board-card-info a {
  color: #99999a;
}

.board-card-icon {
  font-size:22px;
}
.board-card-toggle {
  display:none;
  overflow: hidden;
  border-top: 1px dotted lightgray;
}


.board-toggle-wrapper.is-checked .material-icons {
  color: #99999a;
  transform: rotate(180deg);
}
.board-action-wrapper {
  padding:0px 15px 15px 15px;
  display: none;
}
.board-action{
  width:100%;
  display: flex;
}
.board-card-reply-button {
  border: 1px solid lightgray;
  background-color: #ffffff;
  border-radius: 5px;
  min-width: 0px;
  padding: 0px;
  width:15%;
}
.board-card-input {
  outline: none;
  border: none;
  width:85%;
  font-size: 14px;
  margin-right: 5px;
  padding-left: 15px;
  padding-top:3px;
  color: #000000;
  height: 35px;
  line-height: 35px; /* TODO: This was recommended for cross browser compatability of input height, check if its actually needed in modern browsers */
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

.board-write-footer {
  padding:0 10px;
  background: #ffffff;
  border-top: 1px solid rgb(236,236,236);
}
.board-write-icon {
  padding: 10px;
}

.board-write-textwrapper {
  padding: 0px 35px 10px 13px;
}
.board-my-gym-content .mdl-layout__tab-bar {
  padding: 20px 0;
  height: 55px;
}

.board-my-gym-content .mdl-layout__tab-bar .menu-icons {
  width:30px;
  height:30px;
  margin-bottom: 7px;
}
.board-my-gym-content .mdl-layout__tab-bar .mdl-layout__tab {
  height: 64px;
  line-height: 20px;
}

@media screen and (max-width: 1024px){
  .board-my-gym-content .mdl-layout__tab {
      padding: 0 20px;
  }
}
.board-my-gym-content .mdl-layout__tab .tab-divider {
  border-right: 1px solid rgb(236,236,236);
  position: absolute;
  height: 58%;
  bottom: 35%;
  right: 0;
}

.board-question-img {
  width: 50px;
}
.board-answer-img {
  width: 30px;
  padding: 12px;
}
.board-answer-text {
  color: #aa198d;
  font-size: 12px;
  margin-bottom: 10px;
}
/* 보드 끝 */

/* 카운셀링 시작 */
.counselling-tab {
  display: flex;
}
.counselling-recording-icon {
  width: 17px;
  height: 17px;
  margin: 16px 5px 0 5px;
  background: url('../images/record_recipe_icon_normal.png') center/cover;
}
.mdl-layout.is-upgraded .mdl-layout__tab.is-active .counselling-recording-icon {
  background: url('../images/record_recipe_icon_select.png') center/cover;
}
.counselling-info-icon {
  width: 17px;
  height: 17px;
  margin: 16px 5px 0 5px;
  background: url('../images/counseling_info_icon_normal.png') center/cover;
}
.mdl-layout.is-upgraded .mdl-layout__tab.is-active .counselling-info-icon {
  background: url('../images/counseling_info_icon_select.png') center/cover;
}

.reservation-tab {
  text-align:center;
  text-decoration:none;
  margin-right:10px;
}

.reservation-tab.active {
  background-color: #43badd;
}

.counselling-tab-panel {
  color: rgb(132,132,136);
}
.counselling-gender-choice {
  display: flex;
  justify-content: space-between;
  margin: 13px;
}
.counselling-gender-title {
  margin-top: 5px;
}
.counselling-gender-check {
  display: flex;
}
.counselling-gender-check div {
  margin: 0 5px;
}
.counselling-icon-toggle.is-checked .mdl-icon-toggle__label {
  color: #ff637d;
}
.counselling-text-input {
  display: flex;
  justify-content: space-between;
  margin: 0 0 10px 13px;
}
.counselling-text-input label {
  margin-top: 6px;
}
.counselling-text-input input {
  width: calc(100% - 70px);
  outline: none;
  border: 1px solid rgb(236,236,236);
  background: rgb(241,241,241);
  height: 30px;
  border-radius: 5px;
  padding-left: 10px;
  font-size: 13px;
}
.counselling-text-input > div {
  width: calc(100% - 70px);
  outline: none;
  border: 1px solid rgb(236,236,236);
  background: rgb(241,241,241);
  border-radius: 5px;
  padding-left: 10px;
}
.counselling-text-input input::-webkit-input-placeholder { /* WebKit browsers */
  color: #ff637d;
}
.counselling-text-input input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: #ff637d;
  opacity:  1; /* Firefox gives the placeholder a reduced opacity so we have to increase it */
}
.counselling-text-input input::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #FF627D;
  opacity:  1; /* Firefox gives the placeholder a reduced opacity so we have to increase it */
}
.counselling-text-input input:-ms-input-placeholder { /* Internet Explorer 10+ */
  color: #ff637d;
}
.counselling-submit-button {
  margin-top:20px;
  height: 61px;
  cursor: pointer;
}

.counselling-radio-wrapper {
  display: flex;
  justify-content: space-between;
  border: none;
  margin: 0 15px 0 5px;
}
.counselling-radio-wrapper label {
  font-size: 13px;
}
/* 카운셀링 끝 */

/* 푸드 다이어리 시작 */
.food-diary-grid {
  display: flex;
  justify-content: space-between;
  padding: 8px 0px;
}
.food-diary-border-bottom {
  border-bottom: 1px dotted #ff637d;
}
.food-diary-grid div {
  margin: 5px 0;
}
.food-diary-content {
  outline: none;
  border: 1px solid rgb(236,236,236);
  background: rgb(246,246,246);
  border-radius: 5px;
  padding: 0 15px;
  margin: 0 15px;
}
.food-diary-icon-img {
  width: 22px;
}
.food-diary-text-right {
  text-align: right;
}
.food-diary-text-color {
  color: #ff637d;
}
.food-diary-button {
  border: 1px solid lightgray;
  background: rgb(245,245,245);
  padding: 5px 10px;
  font-size: 13px;
  border-radius: 5px;
  margin-top: -3px;
  outline: none;
}
.food-diary-red-button {
  background: #ff637d;
  color: #ffffff;
  border: none;
  margin-right: 3px;
}
.food-diary-time {
  font-size: 15px;
  color: #ff637d;
  padding-left: 5px;
}
.food-diary-weight {
  font-size: 19px;
  color: #ff637d;
  padding-left: 3px;
}
.food-diary-yellow {
  background: rgb(254,250,203);
  color: #ff637d;
  margin: 8px 0;
  border-radius: 3px;
  padding-top: 2px;
  font-size: 12px;
}
.food-diary-yellow img {
  width: 26px;
}
/* 푸드 다이어리 끝 */

/* 캘린더 시작 */
.calendar-recipe-icon {
  width: 17px;
  height: 22px;
  margin: 13px 5px 0 5px;
  background: url('../images/recipe_icon_normal.png') center/cover;
}
.mdl-layout.is-upgraded .mdl-layout__tab.is-active .calendar-recipe-icon {
  background: url('../images/recipe_icon_select.png') center/cover;
}
.pignose-calendar {
  width: 100%;
  box-shadow: none;
  max-width: 414px;
  border: none;
}
.pignose-calendar .pignose-calendar-top {
  box-shadow: none;
  border: none;
  background: transparent;
}
.pignose-calendar .pignose-calendar-unit.pignose-calendar-unit-active a {
  background-color: #ff637d;
  box-shadow: none;
}
.pignose-calendar .pignose-calendar-unit a {
  color: gray;
}
.pignose-calendar .pignose-calendar-top .pignose-calendar-top-year {
  margin-bottom: .4rem;
}
.pignose-schedule-info {
  font-size: 12px;
  margin-top: 10px;
}
.pignose-calendar .pignose-calendar-header {
  margin-top: .5em;
}
.calendar-tab-panel {
  padding: 10px 0;
}
.violet-circle {
  display: inline-block;
  background-color: #a132b8;
  width: .7em;
  height: .7em;
  border-radius: 50%;
  margin:0 5px;
}
.gray-circle {
  display: inline-block;
  background-color: gray;
  width: .7em;
  height: .7em;
  border-radius: 50%;
  margin:0 5px;
}
.orange-circle {
  display: inline-block;
  background-color: #f29821;
  width: .7em;
  height: .7em;
  border-radius: 50%;
  margin-left: 10px;
  margin-right: 5px;
}
.blue-circle {
  display: inline-block;
  background-color: #47d0b3;
  width: .7em;
  height: .7em;
  border-radius: 50%;
  margin:0 5px;
}
.pink-circle {
  display: inline-block;
  background-color: #e597c8;
  width: .7em;
  height: .7em;
  border-radius: 50%;
  margin-left: 10px;
  margin-right: 5px;
}
.calendar-folding-button {
  border: 1px solid lightgray;
  background: rgb(245,245,245);
  padding: 5px 10px;
  width: 95%;
  margin: 0 10px;
  font-size: 13px;
  border-radius: 5px;
  outline: none;
}
.calendar-folding-button .material-icons {
  font-size: 15px;
}
.calendar-prescription-content {
  outline: none;
  border: 1px solid rgb(236,236,236);
  background: rgb(246,246,246);
  border-radius: 5px;
  padding: 5px 15px;
  margin: 10px;
}
.calendar-icons {
  width: 22px;
}
.calendar-harim-icons {
  width: 30px;
}
.calendar-toggle-button.is-checked .mdl-icon-toggle__label {
  color: #ff637d;
}
.calendar-table {
  width: 100%;
  border-spacing: 0px;
  margin-bottom: 10px;
}
.calendar-table-title {
  color: #ff637d;
  margin-bottom: 5px;
}
.calendar-table-title th {
  padding: 5px 0;
}
.calendar-table-content {
  background: #ffffff;
  text-align: center;
  font-size: 13px;
  margin: 3px 0;
}
.calendar-table-content td {
  padding: 3px;
  width: 25%;
}
/* 캘린더 끝 */

/* 랭킹 시작 */
.ranking-tab {
  display: flex;
  margin: 0!important;
  padding: 0 10px;
}
.ranking-tab-text {
  margin-left: 3px;
}
.mdl-layout__tab .ranking-all-icon {
  width: 17px;
  height: 17px;
  margin: 16px 5px 0 5px;
  background: url('../images/ranking_all_icon_normal.png') center/cover;
}
.mdl-layout.is-upgraded .mdl-layout__tab.is-active .ranking-all-icon {
  background: url('../images/ranking_all_icon_select.png') center / cover;
}
.mdl-layout__tab .ranking-weight-icon {
  width: 17px;
  height: 17px;
  margin: 16px 5px 0 5px;
  background: url('../images/ranking_weight_icon_normal.png') center/cover;
}
.mdl-layout.is-upgraded .mdl-layout__tab.is-active .ranking-weight-icon {
  background: url('../images/ranking_weight_icon_select.png') center / cover;
}
.mdl-layout__tab .ranking-walk-icon {
  width: 17px;
  height: 17px;
  margin: 16px 5px 0 5px;
  background: url('../images/ranking_walk_icon_normal.png') center/cover;
}
.mdl-layout.is-upgraded .mdl-layout__tab.is-active .ranking-walk-icon {
  background: url('../images/ranking_walk_icon_select.png') center / cover;
}
.mdl-layout__tab .ranking-mission-icon {
  width: 17px;
  height: 17px;
  margin: 16px 5px 0 5px;
  background: url('../images/ranking_mission_icon_normal.png') center/cover;
}
.mdl-layout.is-upgraded .mdl-layout__tab.is-active .ranking-mission-icon {
  background: url('../images/ranking_mission_icon_select.png') center / cover;
}
.ranking-content {
  margin: 0;
}
.ranking-table {
  width: 100%;
  border-spacing: 0px;
  margin-bottom: 10px;
  margin-top: 20px;
}
.ranking-table-title {
  color: #ff637d;
  margin-bottom: 5px;
  font-size: 12px;
}
.ranking-table-title th {
  padding: 5px 0;
  width: 16%;
  text-align: center;
}
.ranking-table-content {
  background: #ffffff;
  text-align: center;
  font-size: 13px;
  margin: 3px 0;
  padding: 5px 0;
}
.ranking-table-content td {
  padding: 3px;
  width: 16%;
  text-align: center;
  font-size: 12px;
  color: gray;
}
.ranking-table-gray-background {
  background-color: #f6f6f6;
}
.ranking-table-pink-background {
  background-color: rgb(252,235,238);
}
/* 랭킹 끝 */

.dot {
  height: 15px;
  width: 15px;
  border-radius: 50%;
  display: inline-block;
  margin-left:10px;
  vertical-align: middle
}

#attendances dl {text-align:center;padding:5px 0}
.mdl-layout__drawer-button {  left: inherit;
  right: 10px;}
.color_attendance {
  background-color : #ef8080
}

.color_pt {
  background-color : #2fabb7;
}

/* 스플래쉬 시작 */
.splash-title {
  margin-bottom: 35px;
}
.splash-download-text {
  text-align: center;
}
.splash-footer {
  margin-top: 220px;
}
.splash-loading {
  text-align: center;
}
/* 스플래쉬 끝 */

/* 다이어리 기록 시작 */
.diary-recording-content {
  outline: none;
  padding: 15px;
  margin: 10px;
}
.diary-recording-content-inner {
  display: flex;
  width: 100%;
  justify-content: space-between;
  color: gray;
  margin: 10px 0;
}
.diary-recording-weight {
  font-size: 22px;
  color: #ff637d;
  margin-left: 10px;
}
.diary-recording-time {
  display: flex;
  margin: 5px 0;
}
.diary-recording-time-input {
  width: 30px;
  outline: none;
  border: 1px solid #ececec;
  background: #f1f1f1;
  height: 25px;
  border-radius: 5px;
  padding-left: 10px;
  padding: 7px;
  padding-left: 10px;
  font-size: 20px;
  margin: -9px 5px 7px 5px;
}
.diary-recording-text-color {
  color: #ff637d;
}
.diary-recording-align-right {
  text-align: right;
}
.diary-recording-date {
  font-size: 20px;
}
.diary-recording-border-bottom-dotted {
  border-bottom: 1px solid lightgray;
}
.diary-recording-right-content {
  width: calc(100% - 80px);
}
.diary-recording-right-inner {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
}
.justify-flexend {
  justify-content: flex-end;
}
.diary-recording-input-weight {
  width: 42px;
  outline: none;
  border: 1px solid #ececec;
  background: #f1f1f1;
  height: 25px;
  border-radius: 5px;
  padding-left: 10px;
  padding: 5px;
  font-size: 20px;
  margin: -9px 5px 0 5px;
}
.diary-recording-write-textarea {
  width: calc(100% - 56px);
  outline: none;
  border: 1px solid #ececec;
  background: #f1f1f1;
  border-radius: 5px;
  padding-left: 10px;
  padding: 10px;
  font-size: 20px;
  margin-top:5px 0 0 0;
}
.diary-recording-toggle-wrapper {
  display: flex;
}
.diary-recording-toggle-wrapper div {
  margin-right: 10px;
}
/* 다이어리 기록 끝 */

/* 트레이닝 리스트 카드 시작 */
.training-very-small-img {
  width: 50px;
}
.training-small-img {
  width: 100px;
  height: 110px;  
}
.training-big-img {
  width: 200px;
}
.training-small-margin {
  margin: 5px 15px;
}
.training-small-small-margin {
  margin: 5px 0px;
}
.training-text-align-right {
  text-align: right;
}
.training-text-center {
  text-align: center;
  margin:0;
  width: 100%;
}
.training-text-center-align {
  text-align: center;
}
.training-gray-title {
  text-align: center;
  font-size: 15px;
}
.training-icon-toggle {
  margin-top: 13px;
}
.training-margin-top {
  margin-top:10px;
}
.training-text-title {
  margin: 0px 0 15px;
}
.card-outer-title {
  text-align: center;
  color:rgb(255,74,117);
  font-weight: bold;
  margin-top:0;
  padding-top:10px;
}
.training-border {
  border: 1px solid rgb(236,236,236);
}
.training-card {
  padding:8px;
  padding-left: 15px;
  margin: 3px 0;
}
.training-card .mdl-card__supporting-text {
  margin: 0px;
  width: calc(100% - 48px);
}
.training-card.mdl-card__supporting-text {
  margin: 0px;
  flex-grow: 1;
  padding: 0;
  color: inherit;
}
.training-button {
  position: absolute;
  top:22px;
  right: 13px;
}
.training-section__text {
  text-align: right;
  padding-right:20px;
  position: relative;
}
.training-divider {
  position: absolute;
  right:0;
  width: 1px;
  background: lightgray;
  height:40px;
  top:10px;
}
.training-white-content {
  background: #ffffff;
  padding: 5px;
  margin: 5px 0;
}
.training-recipe-icon {
  width: 20px;
  height: 16px;
  margin: 15px 5px 0 5px;
  background: url('../images/training_recipe_icon_normal.png') center/cover;
}
.mdl-layout.is-upgraded .mdl-layout__tab.is-active .training-recipe-icon {
  background: url('../images/training_recipe_icon_select.png') center / cover;
}
.check-icon {
  color:rgb(255,74,117);
}
@media (max-width: 479px){
  .training-grid--no-spacing>.mdl-cell--1-col {
      width: 20%;
      height: 20%;
  }
}
.training-card-title {
  margin-top:10px;
  font-size: 20px;
  color: rgb(121,121,121);
}
.training-card-content {
  margin-top:5px;
  color: lightgray;
}
/* 트레이닝 리스트 카드 끝 */

/* weight 시작 */
.weight-main-select {
  background: #ff637d;
  color: #ffffff;
  border: none;
}
.weight-main-text {
  text-align: center;
  margin: 17px 0 0 0;
}
.weight-main-font-big {
  font-size: 23px;
}
.weight-main-grid {
  display: flex;
  width: 100%;
}
.weight-main-grid div {
  width: 20%;
}
.weight-main-big-text {
  margin-top: 5px;
  text-align: center;
}
.weight-main-box div {
  text-align: center;
}
.weight-main-box img {
  margin: 10px;
}
.weight-white-box {
  width: 50%;
  border: none;
  margin: 2px;
  border-radius: 5px;
  padding: 10px;
  background: #fff;
}
.weight-table-pink-background {
  background: rgb(252,233,238);
}
.weight-th-pink {
  background: #ff637d;
  color: #fff;
  border-radius: 5px;
  width: 61px;
  margin: 0 auto;
  font-size: 13px;
}
.weight-th-violet {
  background: #aa198d;
  color: #fff;
  border-radius: 5px;
  width: 61px;
  margin: 0 auto;
  font-size: 13px;
}
.weight-morning-icon {
  width: 20px;
  height: 16px;
  margin: 15px 5px 0 5px;
  background: url('../images/morning_icon_normal.png') center/cover;
}
.mdl-layout.is-upgraded .mdl-layout__tab.is-active .weight-morning-icon {
  background: url('../images/morning_icon_select.png') center / cover;
}
.weight-afternoon-icon {
  width: 20px;
  height: 16px;
  margin: 15px 5px 0 5px;
  background: url('../images/afternoon_icon_normal.png') center/cover;
}
.mdl-layout.is-upgraded .mdl-layout__tab.is-active .weight-afternoon-icon {
  background: url('../images/afternoon_icon_select.png') center / cover;
}
.weight-night-icon {
  width: 20px;
  height: 16px;
  margin: 15px 5px 0 5px;
  background: url('../images/night_icon_normal.png') center/cover;
}
.mdl-layout.is-upgraded .mdl-layout__tab.is-active .weight-night-icon {
  background: url('../images/night_icon_select.png') center / cover;
}
.weight-table-margin-top {
  margin-top: 0px;
}
.weight-table-pink-background {
  background: #ff637d;
}
.weight-table-pink-background td {
  color: #ffffff;
}
.weight-search {
  width: 100%;
  margin: 5px 0;
}
/* weight 끝 */

/* 기록 탭 시작 */
.recording_icon {
  width:45px;
  height:45px;

  background: url('../images/menu_sample_icon.png') center / cover;
}
.recording-tab-bar {
  padding: 0;
}
.recording-tab {
  padding:0;
  font-size:14px;
  color:gray;
  margin-bottom:0px;
}
.recording-tab-inner {
  position: relative;
  padding:0px 5px;
}
.mdl-layout.is-upgraded .recording-tab.is-active {
  color: rgb(121,121,121);
}
.mdl-layout.is-upgraded .recording-tab.is-active .white-cover {
  position: absolute;
  width:100%;
  height: 100%;
  top:0;
  left:0;
  background: rgb(252,133,162);
  opacity: 0.5;
}
.mdl-layout.is-upgraded .recording-tab.is-active .recording-tab-check {
  display: block;
  position: absolute;
  top:18px;
  left: 11px;
}
/* 기록 탭 끝 */

/* 기록 리스트 카드 시작 */
.recording-header .mdl-layout__tab-bar-container {
  height: 65px;
}
.recording-header .mdl-layout__tab-bar .mdl-layout__tab {
  height: 74px;
  line-height: 20px;
}
.recording-section__text {
  padding-right:10px;
  position: relative;
}
.record-card-title {
  text-align: right;
  margin-top:15px;
  font-size: 17px;
  color: rgb(121,121,121);
}
.recording-image{
  height:21px;
}
.recording-button {
  position: absolute;
  top:17px;
  right: 13px;
}
.detail-card {
  padding: 20px 0px 10px 0px;
  background: transparent;
}
.detail-card-times {
  margin-top:10px;
}
.detail-card-number {
  color:rgb(255,74,117);
  font-size:20px;
}
/* 기록 리스트 카드 끝 */

/* 디테일 리스트 시작 */
.detail-section__text {
  text-align: right;
  padding-right:0px;
  position: relative;
}
.detail-img {
  width:120px;
  margin-bottom: 20px;
}

.detail-card-title {
  text-align: center;
  font-size:17px;
}
.detail-card-content {
  margin-top:3px;
  text-align: center;
  color:rgb(255,74,117);
}
.detail-card-top-title {
  margin:20px 0!important;
  text-align: center;
  color:rgb(255,74,117);
}
.detail-card-content-wrapper {
  border-top:1px solid rgb(241,241,241);
}
.detail-section {
  background: #ffffff;
}
.detail-preview-card-title{
  margin-top:0px;
  font-size: 20px;
  color: rgb(121,121,121);
}
.tip-button {
  font-size:8px;
  font-weight: bold;
  background: rgb(255,74,117);
  color: #ffffff;
  padding:1px 5px;
  border-radius: 42%;
}
/* 디테일 리스트 끝 */

/* 팝업 시작 */
dialog {
  padding: 0;
}
dialog::backdrop {
  background: rgba(247, 163, 176, 0.5);
}
.mdl-dialog{
  background: #f0f0f0;
}
.mdl-dialog__content {
  padding: 15px 0px 15px 0px;
  text-align: center;
  font-size: 16px;
}
.dialog-table-header {
  font-size:11px;
  padding-bottom:0;
}
.dialog-table-body input {
 margin-top:0;
 height:30px;
 text-align: center;
 font-size:14px;
 color:rgb(255,74,117);
}
/* 팝업 끝 */

/* 검색바 시작 */
.mdh-expandable-search {
  align-items: center;
  justify-content: center;
}
.blog-header .mdh-expandable-search {
  margin: 5px 15px 25px 15px;
}
.board-my-gym-content .mdh-expandable-search {
  width: 100%;
}
.mdh-expandable-search form {
  max-width: 100%;
}

.mdh-expandable-search,
.mdh-expandable-search form,
.mdh-expandable-search input {
  /* Cross browser flex-grow */
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.mdh-expandable-search,
.mdh-expandable-search form {
  /* Cross browser inline-flex */
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

/* Position search icon */
.mdh-expandable-search .search-icon {
  position: relative;
  right: -39px;
  margin-left: -24px;
  width: 19px;
}
.mdh-expandable-search .search-line {
  position: relative;
  right: -52px;
  height: 18px;
  width: 1px;
  border-right:1px solid #ff637d;
}
.mdh-expandable-search input {
  outline: none;
  border: none;
  font-size: 17px;
  color: #000000;
  background: rgb(255,237,240);
  padding: 0px 35px 0px 60px;
  height: 40px;
  line-height: 40px; /* TODO: This was recommended for cross browser compatability of input height, check if its actually needed in modern browsers */
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
}

.mdh-expandable-search input::-webkit-input-placeholder { /* WebKit browsers */
   color: #ff637d;
}
.mdh-expandable-search input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color: #ff637d;
   opacity:  1; /* Firefox gives the placeholder a reduced opacity so we have to increase it */
}
.mdh-expandable-search input::-moz-placeholder { /* Mozilla Firefox 19+ */
   color: #ff637d;
   opacity:  1; /* Firefox gives the placeholder a reduced opacity so we have to increase it */
}
.mdh-expandable-search input:-ms-input-placeholder { /* Internet Explorer 10+ */
   color: #ff637d;
}

/* Bug fix for badges being in the wrong location */
.mdl-badge[data-badge]:after {
  right: -7px;
  top: -8px;
}
/* 검색바 끝 */

/* 메테리얼 디자인 header 커스텀 코드 시작 */
.add-header-row {
  color: #ffffff;
  background-color: #43badd;
  padding-left: 13px;
  font-size:19px;
}
.add-header-row>.mdl-button--icon {
    position: absolute;
}
.add-header-row>.mdl-layout-title {
    margin: 0 auto;
}
/* 메테리얼 디자인 header 커스텀 코드 끝 */

/* 캘린더 시작 */
.add-layout {
  background: rgb(245,245,245);
}
.pignose2 {
  width: 100%;
  box-shadow: none;
  max-width: 414px;
  background: rgb(245,245,245);
  border: none;
}
.pignose2 .pignose-calendar-top {
  box-shadow: none;
  border: none;
  background: transparent;
  padding: 1.6em 0;
}
.pignose2 .pignose-calendar-unit.pignose-calendar-unit-active a {
  background-color: rgb(175,175,175);
  box-shadow: none;
}
.pignose2 .pignose-calendar-header {
  padding: 0;
  margin-top: .5em;
  border-bottom: 1px solid rgb(226,226,226);
}
.pignose2 .pignose-calendar-body .pignose-calendar-row {
    border-bottom: 1px solid rgb(226,226,226);
}
.pignose2 .pignose-calendar-top .pignose-calendar-top-year {
    font-size: 130%;
    font-weight: 600;
    display: inline-block;
}
.pignose2 .pignose-calendar-body {
    padding: 0;
}
.pignose2 .pignose-calendar-top .pignose-calendar-top-month {
    color: rgba(0,0,0,.5);
    display: inline-block;
    margin-left: 3px;
}
.pignose-year-ko {
    font-size: 130%;
    font-weight: 600;
    color: rgba(0,0,0,.5);
}
.pignose2 .pignose-calendar-unit {
    height: 3.4em;
    line-height: 3.4em;
}
.pignose2 .pignose-calendar-unit .pignose-calendar-button-schedule-container {
    margin-top: -6px;
}
/* 캘린더 끝 */

/* material design tab 시작 */
.add-tab-bar {
    margin-top: 15px;
    border: none;
}
.add-tabs.is-upgraded .mdl-tabs__tab.is-active:after {
    height: 0px;
}
.add-tabs-tab {
    color: #ffffff;
    background: rgb(173,173,173);
    margin: 2px;
    border-radius: 5px;
    height: 37px;
    line-height: 37px;
    width: 45px;
}
.add-tabs.is-upgraded .mdl-tabs__tab.is-active {
    color: #ffffff;
    background: rgb(85,187,221);
}
.add-tabs-panel {
    margin: 0 10px;
}
/* material design tab 끝 */

/* 일반 시작 */
.add-close-button {
  background: rgb(85,187,221);
  height: 45px;
  line-height:45px;
  color: #fff!important;
  border-radius: 3px;
}
.add-calendar-table {
  width: 100%;
  border-spacing: 0px;
  margin-bottom: 10px;
}
.orange-circle {
  display: inline-block;
  background-color: rgb(225,124,31);
  width: .7em;
  height: .7em;
  border-radius: 50%;
  margin:4px;
}
.green-circle {
  display: inline-block;
  background-color: rgb(52,140,35);
  width: .7em;
  height: .7em;
  border-radius: 50%;
  margin:4px;
  margin-left: 15px;
}
.add-calendar-table-title th {
  padding: 15px 0;
}
.add-calendar-table-content {
  background: #ffffff;
  text-align: center;
  font-size: 13px;
}
.add-calendar-table-content td {
  padding: 12px;
  border-bottom: 3px solid rgb(245,245,245);
  border-radius: 5px;
}
.calendar-button-td {
  background: rgb(175,175,175);
  color: #ffffff;
  padding: 4px 2px;
  border-radius: 5px;
}
.add-calendar-table-content.is-active > * {
    color: rgb(85,187,221);
}
.add-calendar-table-content.is-active .calendar-button-td {
    background: rgb(27,93,132);
}
.calendar-schedule-description {
    display: flex;
    justify-content: flex-end;
    margin: 10px 20px 20px 20px;
}
.orange-color {
    color: rgb(225,124,31);
}
.green-color {
    color: rgb(52,140,35);
}
.add-box {
    background: #ffffff;
    margin: 5px 15px;
    padding: 12px 15px;
    border-radius: 5px;
}
.add-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.add-grid div {
    margin: 3px 0;
}
.add-button {
    border-radius: 5px;
    background: rgb(172,172,172);
    color: #ffffff;
    border: none;
    padding: 6px 12px;
    font-size: 14px;
    width: 75px;
}
.add-relax-button.is-active {
    background: rgb(85,187,221);
}
.add-class-button {
    background: rgb(244,244,244);
    color: rgb(190,190,190);
}
.add-class-button.is-active {
    background: rgb(27,94,133);
    color: rgb(102,251,251);
}
.add-padding {
    padding: 7px;
}
.blue-box {
    background: rgb(27,94,133);
    color: #ffffff;
}
.blue-box-month {
    font-size: 30px;
    padding: 5px 0;
}
.blue-box-date {
    color: rgb(48,145,182);
}
.blue-color-number {
    color:  #007297;
    font-size: 25px;
}
.blue-color-number2 {
    color:  #007297;
    font-size: 18px;
}

.add-icon-box > div {
  display: inline-block;
}

.add-icon-box .icon-course,.add-icon-box .icon-facility {
  background-position: top left;
  background-repeat: no-repeat;
  text-indent:40px;
  vertical-align: middle;
  line-height: 25px;
}

.add-icon-box .icon-course {
  background-image : url('/assets/images/icon1.png');
}

.add-icon-box .icon-facility {
  background-image : url('/assets/images/icon2.png');
}

.add-divider {
  color: lightgrey;
  font-size: 20px;
  padding: 10px;
}
.locker-number {
  color: #64c6e3;
}
/* 일반 끝 */


.add-close-button {
  background: rgb(85,187,221);
  height: 45px;
  color: #ffffff;
  border-radius: 3px;
}
.add-close-button-gray {
  background: rgb(172,172,172);
  height: 45px;
  color: #ffffff;
  border-radius: 3px;
}
.add-calendar-table {
  width: 100%;
  border-spacing: 0px;
  margin-bottom: 10px;
}

.add-divider {
  color: lightgrey;
  font-size: 20px;
  padding: 10px;
}
.locker-number {
  color: #64c6e3;
}
.locker-icon {
    width: 20px;
    height: 23px;
}
.laundry-icon {
    width: 20px;
    height: 23px;
}
.washcar-icon {
    width: 25px;
    height: 23px;
}
.cleaner-icon {
    width: 22px;
    height: 24px;
}
.add-signature-text {
  text-align: center;
  font-size: 17px;
  color: #007297;
  margin: 8px 0;
}
.add-vote-subtitle {
  font-size: 16px;
  color: #64c6e3;
}
.add-vote-date {
  font-size: 15px;
  color: #a9a8a9;
}
.add-vote-card-name {
  color: #007297;
  font-size: 18px;
}
.add-vote-card-big-font {
  font-size: 30px;
  color: #007297;
}
.add-vote-card-medium-font {
  font-size: 18px;
  color: #64c6e3;
  margin-left: 5px;
}

.add-maintenance-table {
  margin: 15px;
}
.add-maintenance-table-title {
  color: #646569;
  margin-bottom: 5px;
}
.add-maintenance-table-title th {
  padding: 10px 0;
  width: 20%;
  text-align: center;
}
.add-maintenance-table-content td {
  padding: 10px 0;
  font-size: 13px;
}
.add-maintenance-icon-wrapper {
  display: flex;
  align-items: center;
}
.add-maintenance-blue > * {
  color: #007297;
}
.add-maintenance-pink > * {
  color: #e3007e;
}
.add-maintenance-bluebox {
  background: rgb(27,93,133);
  padding: 20px;
}
.add-maintenance-between {
  display: flex;
  justify-content: space-between;
}
.add-maintenance-bluebox-font {
  font-size: 15px;
  color: #ffffff;
}
.add-maintenance-bluebox-blue {
  color: #64c6e3;
  margin-left: 5px;
}
.add-maintenance-bluebox-white {
  color: #ffffff;
  font-size: 22px;
  margin-left: 5px;
}
.add-maintenance-title {
  font-size: 22px;
}
.add-maintenance-cost-left-text {
  font-size: 15px;
}
.add-maintenance-cost-right-text {
  font-size: 21px;
  color: #007297;
}
.add-maintenance-gray-background {
  background: rgb(246,246,246);
}
.add-maintenance-cost-text {
  background: #ffffff;
  margin: 5px 15px;
  padding: 15px;
  border-radius: 5px;
}
.add-maintenance-cost-text-gray {
  background: rgb(246,246,246);
  margin: 5px 15px;
  padding: 10px;
  border-radius: 5px;
}
.add-maintenance-cost-head th {
  width: 33.3%;
  text-align: center;
  padding-bottom: 10px;
  font-size: 15px;
}
.add-maintenance-cost-body {
  background: rgb(246,246,246);
}
.add-maintenance-cost-body td {
  border: none;
  margin: 0;
  width: 33.3%;
  text-align: center;
  padding: 10px;
  font-size: 15px;
}
.add-maintenance-cost-table {
  width: 100%;
  border-collapse: collapse;
}
.add-maintenance-table-button {
  background: rgb(27,93,133);
  height: 33px;
  color: #ffffff;
  border-radius: 3px;
}
.add-maintenance-cost-table-title {
  font-size: 15px;
}

#messages .alert {position: relative;
  padding: .75rem 1.25rem;
  border: 1px solid transparent;
      border-top-color: transparent;
      border-right-color: transparent;
      border-bottom-color: transparent;
      border-left-color: transparent;
  border-radius: .25rem;}
#messages .alert-success {color: #155724;

  background-color: #d4edda;
  
  border-color: #c3e6cb;}
#messages .alert-danger {color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}

.s-date {
  font-size: 16px;
  border:1px solid #ccc;
  min-width:120px;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  line-height: 150%;
  height: 25px;
}

#c-description {
  font-size: 16px;
  border:1px solid #ccc;
  line-height: 150%;
  padding:10px 7px;
  -webkit-ime-mode:active;
  -moz-ime-mode:active;
  -ms-ime-mode:active;
  ime-mode:active;
}

button.close {
    position: absolute;
    top: 0;
    right: 0;
    padding: .75rem 1.25rem;    
}

.close:not(:disabled):not(.disabled):focus, .close:not(:disabled):not(.disabled):hover {
  color: #000;
  text-decoration: none;
  opacity: .75;
}

.close:not(:disabled):not(.disabled) {
    cursor: pointer;
}

input.form-control[type="text"] {
  display: block;
  width:100%;
  border: 1px solod #ccc;
  padding: 5px 7px;
}

/* sub layout */
header {z-index:1000; width:100%; height:57px; background:#43badd; border-bottom:1px solid #b2e3f1;}
header h1 {margin:0; padding:0; border:0; vertical-align:baseline; font-size:16px; font-family:AppleSDGothicNeo-Light,HelveticaNeue-Light,sans-serif; font-weight:bold; color:#333; letter-spacing:-1px;}
header h1 {line-height:57px;color:#333; font-size:1.312em; font-weight:normal; text-align:center;}
header h1 a img {vertical-align: middle}
header.main_header h1 {line-height:45px}
header .btn_page_back,header .backpress {display:block; position:absolute; left:3.6%; top:19px; width:19px; height:20px; background:url('../images/common/btn_page_back.png') no-repeat; background-size:19px 20px; filter:brightness(0);}
header .btn_page_back:hover,header .backpress:hover {text-decoration:none}
#home dl,#home dt,#home dd {margin:0;padding:0}
#home .main_nav dl {padding-bottom:10px}
#home .my_card h2 {margin:0;padding:0}
#home .my_card h2 img {vertical-align: top}
#barcode_target {height:100px;width:100%}
.pignose2 {background:none}
.btn.active {color:#fff}
.pagination{display:-ms-flexbox;display:flex;padding-left:0;list-style:none;border-radius:.25rem;text-align:center;margin:0 auto}.page-item:first-child .page-link{margin-left:0;border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.page-item:last-child .page-link{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.page-item.active .page-link{z-index:2;color:#fff;background-color:#007bff;border-color:#007bff}.page-item.disabled .page-link{color:#868e96;pointer-events:none;background-color:#fff;border-color:#ddd}.page-link{position:relative;display:block;padding:.5rem .75rem;margin-left:-1px;line-height:1.25;color:#007bff;background-color:#fff;border:1px solid #ddd}.page-link:focus,.page-link:hover{color:#0056b3;text-decoration:none;background-color:#e9ecef;border-color:#ddd}.pagination-lg .page-link{padding:.75rem 1.5rem;font-size:1.25rem;line-height:1.5}.pagination-lg .page-item:first-child .page-link{border-top-left-radius:.3rem;border-bottom-left-radius:.3rem}.pagination-lg .page-item:last-child .page-link{border-top-right-radius:.3rem;border-bottom-right-radius:.3rem}.pagination-sm .page-link{padding:.25rem .5rem;font-size:.875rem;line-height:1.5}.pagination-sm .page-item:first-child .page-link{border-top-left-radius:.2rem;border-bottom-left-radius:.2rem}.pagination-sm .page-item:last-child .page-link{border-top-right-radius:.2rem;border-bottom-right-radius:.2rem}
.justify-content-center{-ms-flex-pack:center!important;justify-content:center!important}

.main_nav {margin-top:20px}

nav ul li:active {
  background-color: #6edcdc;
  border-radius: 0.2em;
}