:root {
  --default-font: 'inconsolata';
  --border-radius: 7px;

  --light-main-color: #F1EEE9;
  --light-sub-color: #73777B;
  --light-accent-color: #5fba8d;
  --light-accent-sub-color: #2a293b;
  --light-shadow : 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;

  --dark-main-color: #fffeff;
  --dark-back-color: #243447;
  --dark-sub-color: #5fba8d;
  --dark-accent-color: #5fba8d;
  --dark-accent-sub-color: #243447;
  --dark-shadow :   5px 5px 10px #1f2c3c, -5px -5px 10px #293c52;

}

/*スクロールバー*/
::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

input[type="file"] {
  display: none;
}

input[type="range"] {
  height: 0px;
  margin-top: -15px;
}

input[type="range"]::-webkit-slider-runnable-track {
  background: var(--light-accent-color);
  height: 3px;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 10px;
  width: 10px;
  background: rgb(222, 222, 222);
  border-radius: 50%;
  margin-top: -3px;
  cursor: pointer;
}


/*カラー*/
input[type="color"] {
  vertical-align: -3px;
  width: 100px;
  height: 20px;
  margin-top: 5px;
  border-radius: 7px;
  background: none;
  border: 2px solid #e0e0e0;
  padding: 3px;
  margin-right: 5px;
  margin-bottom: 10px;
}

/*チェックボックス*/
input.uk-checkbox {
  background-color: rgb(255, 255, 255);
}

input.uk-checkbox:checked {
  background-color: var(--light-accent-color);
}
  
input.uk-checkbox:checked:focus {
  background-color: var(--light-accent-color);
}

/*ラジオボタン*/
.form-check-input:checked {
  background-color: var(--light-accent-color);
  border-color: var(--light-accent-color);
}

/*ローディング*/
@keyframes loading {
  0% { transform: rotate( 0deg ); }
  100% { transform: rotate( 360deg ); }
}

.loading {
  position: fixed;
  z-index: 1000;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background:  var(--light-main-color);
}

.loading.hide {
  opacity: 0;
  pointer-events: none;
  transition: opacity 1000ms;
}

.loading .circle {
  display: block;
  position: relative;
  top: calc( 50% - 20px );
  width: 70px;
  height: 70px;
  margin: 0 auto;
  border: 7px solid var(--light-main-color);
  border-top: 7px solid var(--light-accent-color);
  border-radius: 100px;
  animation: loading 1000ms linear 0ms infinite normal both;
}

@media (prefers-color-scheme: dark) {
  .loading {
    background: var(--dark-back-color);
  }
  .loading .circle {
    border: 7px solid var(--dark-back-color);
    border-top: 7px solid var(--light-accent-color);
  }
  /* input[type="range"]::-webkit-slider-runnable-track {
    background: var(--light-main-color);
    height: 5px;
  }

  input.uk-checkbox:checked {
    background-color: var(--dark-sub-color);
  }
    
  input.uk-checkbox:checked:focus {
    background-color: var(--dark-sub-color);
  }
  
  .form-check-input:checked {
    background-color: var(--dark-sub-color);
    border-color: var(--dark-sub-color);
  } */
}