@charset "UTF-8";

/* スライダー全体のバー（背景） */
.noUi-base {
    background: var(--gray);   /* 背景色 */
    border-radius: .25rem; /* 角丸も一緒に調整 */
    height: .5rem;       /* ここで太さを調整 */
}

/* 選択範囲のバー */
.noUi-connect {
    background: var(--main-color);
    border-radius: .25rem; /* 角丸も一緒に調整 */
}

.noUi-handle:before,
.noUi-handle:after {
    content: none !important;
}

.noUi-horizontal {
    height: .5rem;
}

/* つまみ */
.noUi-horizontal .noUi-handle {
    background: #ffffff;  /* 白色 */
    border: 1px solid var(--main-color); /* 枠線 */
    border-radius: 50%;   /* これで完全な丸 */
    cursor: pointer;
    height: 1.5rem;         /* つまみの高さ */
    width: 1.5rem;          /* つまみの幅 */
    top: -.5rem;            /* トラック中央に合わせる */
}


.noUi-horizontal .noUi-tooltip {
    bottom: -1.75rem;
}

/* 値を表示する吹き出し */
.noUi-tooltip {
    background-color: #fff;
    border: 1px solid var(--main-color);
    border-radius: .25rem;
    color: var(--text-color);
    font-size: .75rem;
    font-weight: bold;
    padding: .25rem .5rem;
}

#id_episode_length,
#id_lastup,
#id_st,
#id_title_length {
    text-align: right;
    width: 4rem;
}

#form input[type="number"], 
#form input[type="text"] {
    transition: border .25s ease;
}

#form input[type="text"] + label {
    color: var(--shadow-color);
    font-size: 1rem;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: .5rem;
    transform: translateY(-50%);
    transition: .25s ease;
}

#form input[type="number"]:focus {
    border: 0;
}

#form input[type="text"]:focus {
    border-bottom-color: var(--main-color);
    outline: none;
}

/* 入力中 or 入力済み */
#form input[type="text"]:focus + label,
#form input[type="text"]:not(:placeholder-shown) + label {
    color: var(--main-color);
    font-size: .75rem;
    top: -.5rem;
}

#form select + label {
    font-size: .875rem;
    left: 0rem;
    position: absolute;
    top: -1.5rem;
}

#form button[type="submit"] {
    cursor: pointer;
}