body {
    font-family: "Helvetica", "Noto Sans TC", "sans-serif";
    position: relative;
    letter-spacing: .125rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

svg.feather {
    transform: translateY(0.5px);
}


.login_input {
    border-right: 0px;
    border-left: 0px;
    border-top: 0px;
    border-bottom: 1px solid #A7A7A7;
    padding: 10px 20px 10px 36px;
    width: 100%;
    border-radius: 0px;
}

.login_input:focus {
    outline: none;
    border-right: 0px;
    border-left: 0px;
    border-top: 0px;
    box-shadow: none;
}

/* sidebar */
#sidebar .nav_link {
    padding: 1.25rem calc(5% + 1rem);
    font-size: 1.25rem;
    font-weight: 400;
}

#sidebar .nav_link.active {
    color: #4063AF;
    font-weight: 700;
}

#sidebar.close {
    left: -90.5%;
}

/* page */
.page_title {
    font-size: 1.5rem;
    font-weight: 700;
    white-space: nowrap;
}

.page_t_block {
    /* padding: calc(9% + 1px) 1.5rem calc(2% + 1px) 1.5rem; */
    padding: calc(9% + 1px) 1.5rem 30px 1.5rem;
    flex-grow: 1;
    display: grid;
    flex-direction: column;
    align-content: space-evenly;
    max-height: 171px;
    border-bottom: 1px solid #989898;
    background-color: #fff;
}

.page_content_block {
    padding: 1.5rem 1.5rem;
}

/* border */
.border_b_transparent {
    border-bottom: transparent;
}


/* button */
[class*="btn_"] {
    letter-spacing: 0.15rem;
    padding: 10px 28px;
    white-space: nowrap;
    border-radius: 3rem;
}

.btn_sm {
    font-size: 16px;
    padding: 5px calc(16px - 0.125rem) 6px 16px;
    transform: translateY(0.625px);
}

.btn_lg {
    font-size: 32px;
    padding: 16px calc(80px - 0.125rem) 16px 80px;
}

.btn_primary {
    position: relative;
    background-color: #5177CB;
    color: #fff;
    font-weight: 500;
}

.btn_main {
    position: relative;
    background-color: #343434;
    color: #fff;
    font-weight: 500;
}

.btn_primary_outline {
    border: 1px solid #5177CB;
    color: #5177CB;
}

.btn_danger_outline {
    border: 1px solid #A40000;
    color: #A40000;
}

.btn_secondary_outline {
    border: 1px solid rgb(0, 0, 0);
}

/* modal */
.modal_style {
    background-color: rgba(0, 0, 0, .6);
    overflow-y: auto;
    overflow-x: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 102;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
}

.modal_container {
    position: relative;
    padding: 1rem 0px;
    width: 100%;
    max-width: 36rem;
    max-height: 100%;

}

.modal_content {
    position: relative;
    background-color: #ffffff;
    border-radius: .5rem;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    width: 95%;
    margin: 0px auto;
}

.modal_body {
    padding: 1.25rem 1.5rem;
}

.modal_header {
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #D6D6D6;
}

.modal_footer {
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 1rem 2rem;
    border-top: 1px solid #D6D6D6;
}

/*toast*/
.toast_style {
    max-width: 20rem;

    display: flex;
    justify-content: center;
    margin: auto;
}

.toast_body {
    background-color: rgba(0, 0, 0, .85);
    color: #fff;
    border-radius: .375rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    padding: 8px 16px;
}

/*accordion*/
.accordion_header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background-color: #fff;
    text-align: left;
    color: black;
}

.accordion_body {
    background-color: #fff;
}

/* input */
.input_style {
    border: 1px solid #000;
    border-radius: 2rem;
    width: 100%;
}

.input_style:focus {
    border-color: #5177CB;
    outline: none;
    box-shadow: none;
}

select.input_style:focus {
    box-shadow: none;
    border-color: #5177CB;
}

.input_style2 {
    border-right: 0px;
    border-left: 0px;
    border-top: 0px;
    border-bottom: 1px solid #A7A7A7;
    padding: 10px 0px 10px 0px;
    width: 100%;
    border-radius: 0px;
    text-align: center;
    color: #414141;
}

select.input_style2:not([size]) {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}

.input_style2:focus {
    outline: none;
    border-right: 0px;
    border-left: 0px;
    border-top: 0px;
    box-shadow: none;
}

/* control_room */
.func_block input {
    display: none;
}

.func_btn {
    position: relative;
    background-color: #fff;
    min-height: 65px;
    /* min-height: 6vh; */
    border-radius: 10px;
    border: 1px solid #dddddd;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, .1);
    display: block;
}

.func_btn div {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
}
#zoom_control{
    background-color: #fff;
}

#sound_icon {
    background-image: url('../src/volume-2.svg');
}

#track_icon {
    background-image: url('../src/crosshair.svg');
}

#video_icon {
    background-image: url('../src/video.svg');
}

.func_btn.active #sound_icon {
    background-image: url('../src/volume-x.svg');
}

.func_btn.active #track_icon {
    background-image: url('../src/x-circle.svg');
}

.func_btn.active #video_icon {
    background-image: url('../src/video-off.svg');
}

input:disabled + label #sound_icon {
    background-image: url('../src/volume-2_disabled.svg');
}

input:disabled + label #track_icon {
    background-image: url('../src/crosshair_disabled.svg');
}

input:disabled + label #video_icon {
    background-image: url('../src/video_disabled.svg');
}

input:disabled + label.func_btn.active #sound_icon {
    background-image: url('../src/volume-x_disabled.svg');
}

input:disabled + label.func_btn.active #track_icon {
    background-image: url('../src/x-circle_disabled.svg');
}

input:disabled + label.func_btn.active #video_icon {
    background-image: url('../src/video-off_disabled.svg');
}

/**/
.choose_target #first_block, .choose_target #zoom_block, .choose_target #pull_interface{
    display: none;
}
.choose_target #plus_btn span {
    background-image: url('../src/plus_disabled.svg');
}
.choose_target #minus_btn span {
    background-image: url('../src/minus_disabled.svg');
}
input:disabled + label.func_btn{
    background-color: #f4f4f4;
    box-shadow: none;
}
.choose_target #zoom_control{
    background-color: #f4f4f4;
    box-shadow: none;
}
.choose_target .func_desc, 
.choose_target .zoom_desc{
    color: #bcbcbc;
}
.zoom_desc{
    color: #3c3c3c;
}

.func_desc {
    color: #3c3c3c;
    font-weight: 500;
    letter-spacing: .125rem;
    font-size: .875rem;
    padding-top: 8px;
    text-align: center;
}

#sound_icon {
    width: 24px;
    height: 24px;
}

.func_btn.active {
    background-color: #E8E8E8;
}

#record_graphic {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    background-color: #A40000;

}

.distance_btn {
    width: 54px;
    height: 54px;
    display: flex;
    border-radius: 50%;
    position: absolute;
    justify-content: center;
    align-items: center;
    left: 50%;
    transform: translateX(-50%);
}

.distance_btn span {
    width: 28px;
    height: 28px;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

}

.distance_btn:active {
    background-color: rgba(0, 0, 0, .1);
}

#plus_btn {
    top: 3px;
}

#minus_btn {
    bottom: 3px;
}

#plus_btn span {
    background-image: url('../src/plus.svg');
}

#minus_btn span {
    background-image: url('../src/minus.svg');
}

#distance_input {
    color: #000;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

/* Chrome, Safari, Edge, Opera */
#distance_input::-webkit-outer-spin-button,
#distance_input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
#distance_input[type="number"] {
    text-align: center;
    -moz-appearance: textfield;
    margin: 0;
}

.angle_btn {
    background-color: #fff;
    position: absolute;
    height: 97px;
    width: 97px;
}

.angle_btn:active,
.angle_btn:hover,
.angle_btn:target {
    background-color: rgba(0, 0, 0, .1);
}
.angle_btn:disabled:active,
.angle_btn:disabled:hover,
.angle_btn:disabled:target{
    background-color: rgb(255,255,255);
}

#set_view.close {
    bottom: -462px;
    transition: .5s ease-in;
}

#set_view {
    bottom: 0px;
}

#set_view_close_icon:before {
    content: '';
    display: block;
    border-top: 2px solid rgb(200, 200, 200);
    width: 1.625rem;
    transform: rotate(15deg);
    position: absolute;
    top: .375rem;
    left: 0;
}

#set_view_close_icon:after {
    content: '';
    display: block;
    border-top: 2px solid rgb(200, 200, 200);
    width: 1.625rem;
    transform: rotate(-15deg);
    position: absolute;
    top: .375rem;
    right: -1px;
}

/**/
.icon_bg {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

#angle_top_icon {
    background-image: url('../src/caret-up.svg');
}

#angle_right_icon {
    background-image: url('../src/caret-right.svg');
}

#angle_bottom_icon {
    background-image: url('../src/caret-down.svg');
}

#angle_left_icon {
    background-image: url('../src/caret-left.svg');
}

.choose_target #angle_top_icon {
    background-image: url('../src/caret-up_disabled.svg');
}

.choose_target #angle_bottom_icon {
    background-image: url('../src/caret-down_disabled.svg');
}
.choose_target #distance_input{
    color: #c1c1c1;
}
.choose_target #record_graphic{
    background-color: rgba(164, 0, 0,.2);
}
#choose_target_notice{
    display: none;
}
.choose_target #choose_target_notice{
    display: block;
}


@media(min-width: 640px) {
    body {
        font-size: 18px;
    }

    .page_t_block {
        padding: 40px 24px 30px 24px;
        max-height: unset;
        flex-grow: unset;
    }

    .page_title {
        font-size: calc(1.5rem + 2px);
    }

    .page_content_block {
        padding: 1.5rem 1.5rem;
    }

    .angle_btn {
        height: 125px;
        width: 125px;
    }

    .func_btn {
        min-height: 80px;
    }

    .func_btn img {
        width: 24px;
        height: 24px;
    }

    #record_graphic {
        width: 20px;
        height: 20px;
    }

}

@media(min-width: 768px) {
    .page_t_block {
        padding: 40px 52px 30px 52px;
        max-height: unset;
        flex-grow: unset;
    }

    .page_content_block {
        padding: 2rem 52px;
    }
}

@media(min-width: 1024px) {
    .btn_sm {
        font-size: 17px;
        padding: 5px calc(20px - 0.125rem) 6px 20px;
        transform: translateY(0.625px);
    }

    .page_t_block {
        padding: 40px 68px 30px 68px;
    }

    .page_content_block {
        padding: 2rem 68px;
    }
}