/*배경 교체*/
/* default*/

body {
    background-image: url('/img/log/bg.jpg');
}


.log-box{
  max-width:700px;
}

.header, .theme{
    background-color: #e3068c;
}

.navi-bar .navi-btn {
    background-color: #e3068c;
    position: relative;
    display: inline-block;
}

.list i{
    color: #e3068c;
}

i{
    color: #e3068c;
}


.tippy-box[data-theme~='tippy'] {
    background-color: #e3068c;
    color: white;
  }

.tippy-box[data-theme~='tippy'][data-placement^='top'] > .tippy-arrow::before {
    border-top-color:  #e3068c;
  }
  .tippy-box[data-theme~='tippy'][data-placement^='bottom'] > .tippy-arrow::before {
    border-bottom-color: #e3068c;
  }
  .tippy-box[data-theme~='tippy'][data-placement^='left'] > .tippy-arrow::before {
    border-left-color:  #e3068c;
  }
  .tippy-box[data-theme~='tippy'][data-placement^='right'] > .tippy-arrow::before {
    border-right-color:  #e3068c;
  }


  .editor{
    max-width:700px;
    text-align: left;
    background-color: rgba(255, 255, 255, 0.5);
}



.editor-list{
    padding:15px ;
}

.editor-line{
    border: 0;
    height:1px;
    margin:0;
    background-color:  rgba(209, 213, 219, 0.3);
}

.option-list{
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    align-items: center;
}

.title{
    font-size:25px;
    font-weight: 500;
}

.author{
    font-size:17px;
    font-weight: 300;
}



.option-item.title{
    letter-spacing: -1px;
    font-weight: 500;
    font-size:15px;
}


.option-item.detail{
    font-size: 12px;
    font-weight: 300;
}

.command{
    letter-spacing: -1px;
    font-weight: 500;
    font-size:18px;
}


.edit{
    display: inline-block;
    margin: auto;
    margin-right:10px;
}


/*range*/

.range-input {
    float: right;
    border-radius: 10px;
    margin-top: 3px;
  }
  .range-input input {
    -webkit-appearance:none;
    width:200px;
    height:2px;
    background:#e3068c;
    border:none;
    outline:none;
  }
  .range-input input::-webkit-slider-thumb {
    -webkit-appearance:none;
    width:20px;
    height:20px;
    background:white;
    border:2px solid #ffa9dd;
    border-radius:50%;
  }
  .range-input input::-webkit-slider-thumb:hover {
    background:#ffa9dd;
  }
.value , .range-value {
    float: left;
    color: #e3068c;
    font-size: 20px;
    font-weight: 600;
    line-height: 40px;
    height: 40px;
    overflow: hidden;
    margin-right: 10px;
  }
.value div,.range-value div {
    transition:all 300ms ease-in-out;
  }

  .epub-btn{
    margin:5px;
  }

  .epub-btn>i{
    font-size: 25px;
  }

  .epub-btn-list{
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .filebox{
    display: flex;
    font-size: 12px;
    width: 200px;
    margin: 0px 10px;
    padding: 3px 10px;
    align-items: center;
    justify-content: space-between;
  }

  .filebox>i{
    font-size: 20px;
    color: black;
  }

  .filename{
    width: 150px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .option-value{
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
  }

  .option-value>i{
    text-align: center;
  }
.time-option{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }


  
  
.epub{
  display: flex;
  max-width: 500px;
  padding: 20px;
  align-items: center;
  justify-content: space-between;

}

.epub-data{
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: flex-start;
}


.epubdown-info{
  margin-left:20px;
  text-align: left;
}

.epubdown-title{
  font-weight: 700;
  font-size: 20px;
}

.epubdown-date, .epubdown-user{
  font-size: 12px;
}

.epub-download>i{
  color:black;
  font-size:25px;
}

.epubdown-thumbnail>img{
  width: 100px;
}





.page-data{
  display: flex;
  justify-content: space-between;
  }

  .page-log{
    padding:20px;
  }

.page-item{
  width:100%;
  margin: 10px;
}
.page-option{
  padding: 0 20px;

}
/* profile-setting*/
.page-option-list{

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 280px;
}
.page-option-item{
  margin-top:20px;
  height: 100%;
}
.data.type{
  font-size:17px
}


/*option*/

.option-title{
  padding: 20px; 
  font-size: 20px;
  
  letter-spacing: -1px;
  font-weight: 500;
}

.notice{
  padding:0;
}


.description{
  font-size:12px;
  font-weight: 300;
}


.option-line{
  border: 0;
  height:1px;
  margin:0;
  background-color:  rgba(209, 213, 219, 0.3);
}
.option-item{
  text-align: left;
}
.option-item.title{
  letter-spacing: -1px;
  font-weight: 500;
  font-size:15px;
}


.option-item.manual{
  display: inline;
}


.fa-circle-question{
margin-left:3px;
}

/*mode*/
.active.twit-option{

  display: block;
}

.twit-option{

  display: none;
}

.dark-element::-webkit-input-placeholder {
  color: rgb(182, 182, 182);


}

.dark-element::-moz-placeholder {
  color: rgb(182, 182, 182);

}
textarea.dark-element{
  color:white
}

.active .fa-cloud-sun:before {
  content: "\f6c3";
}
.dark{
  background-color: rgb(0 0 0 / 50%);
  color:white
}


.switch {
  position: absolute;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.switch_label {
  margin: auto 0;
  float: right;
  position: relative;
  cursor: pointer;
  width: 58px;
  height: 28px;
  background: #fff;
  border: 2px solid #ffa9dd;
  border-radius: 20px;
  transition: 0.2s;
}



.switch_label.mini {
  width: 38px;
  height: 18px;
  background: #fff;
  border: 2px solid #ffa9dd;
  border-radius: 20px;
}


.switch_label:hover {
  background: #e1f1ff;
}

.onf_btn {
  position: absolute;
  top: 4px;
  left: 3px;
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  background: #ffa9dd;
  transition: 0.2s;
}

.onf_btn.mini{
  position: absolute;
  top: 3px;
  left: 3px;
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 20px;
  background:   #ffa9dd;
  transition: 0.2s;
}





/* checking style */
.switch:checked+.switch_label {
  background: #e3068c;
  border: 2px solid #e3068c
}

.switch:checked+.switch_label:hover {
  background: #e3068c
}

/* move */
.switch:checked+.switch_label .onf_btn {
  left: 35px;
  background: #fff;
  box-shadow: 1px 2px 3px #ffe8c41f;
}

.switch:checked+.switch_label .onf_btn.mini {
  left: 23px;
  background: #fff;
  box-shadow: 1px 2px 3px #ffe8c41f;
}