:root{
    --theme-color-bg:#fff;
    --theme-color-bg-dark:#eee;
    --theme-color-bg-blur:rgba(255,255,255,.5);
    --theme-color-bg-blur-dark:rgba(224,224,224,.5);
    --theme-color-border:#aaa;
    --theme-color-border-dark:#888;
    --theme-color-border-blur:#aaa;
    --theme-color-border-blur-dark:rgba(224,224,224,.5);
    --theme-color-border-light:#ccc;
    --theme-color-text:#666;
    --theme-color-text-dark:#333;
    --theme-color-btn:#07F;
    --theme-color-btn-darl:#05d;
    --theme-color-btn-text:#eee;
}

.bg{
    position: absolute;
    width: 100vw;
    height: 100vh;
    background: #eee;
}

@media (prefers-color-scheme:dark){
    .bg{
        background: #444;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
    :root{
        --theme-color-bg:#aaa;
        --theme-color-bg-dark:#eee;
        --theme-color-bg-blur:rgba(192,192,192,.5);
        --theme-color-bg-blur-dark:rgba(224,224,224,.5);
        --theme-color-border:#aaa;
        --theme-color-border-dark:#888;
        --theme-color-border-light:#ccc;
        --theme-color-text:#aaa;
        --theme-color-text-dark:#fff;
        --theme-color-btn:#07F;
        --theme-color-btn-darl:#05d;
        --theme-color-btn-text:#eee;
    }
    
    #spin_device_img{
        content: url("images/spin\ device\ dark.svg");
    }
}

* {
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 200;
    font-size: large;
    color: var(--theme-color-text-dark);
    box-sizing: border-box;
}

body{
    overflow-y: hidden;
    overflow-x: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

html{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

label{
    margin: 10px;
}

input[type="text"]{
    width: 240px;
    height: 30px;
    padding: 5px 10px;
    margin: 10px;
    border: 0.5px var(--theme-color-border) solid;
    border-radius: 15px;
    background-color: var(--theme-color-bg-blur);
}

input[type="text"]:hover{
    outline: none;
    background-color: var(--theme-color-bg-blur-dark);
    border: 0.5px #aaa solid;
}

input[type="text"]:focus{
    outline: none;
    background-color: var(--theme-color-bg-blur);
    border: 0.5px #aaa solid;
}

input[type="button"]{
    width: 250px;
    height: 30px;
    margin: 10px;
    color: var(--theme-color-btn-text);
    border: none;
    border-radius: 15px;
    background-color: var(--theme-color-btn);
}

input[type="button"]:hover{
    outline: none;
    cursor: pointer;
    background-color: var(--theme-color-btn-darl);
}

input[type="button"]:focus{
    outline: none;
}

.container{
    z-index: 1;
    width: 320px;
    height: 320px;
    margin: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--theme-color-bg-blur);
    border: 1px var(--theme-color-border) solid;
    border-radius: 30px;
}

#connect_status{
    margin: 10px;
    display: flex;
    flex-direction: row;
    visibility: hidden;
    vertical-align: middle;
}

.loader {
    display: none;
    border: 4px solid var(--theme-color-border-light);
    border-radius: 50%;
    border-top: 4px solid var(--theme-color-border-dark);
    width: 20px;
    height: 20px;
    -webkit-animation: spin 1s linear infinite; /* Safari */
    animation: spin 1s linear infinite;
    margin-right: 5px;
}
  
/* Safari */
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
  
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.chooseMode{
    background: none;
    border: none;
}

.chooseMode > .container{
    width: 80vw;
    height: 60vh;
    margin: 0px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    background: none;
    border: none;
}

.chooseMode > .container > div{
    width: 100%;
    min-width: 120px;
    max-width: 300px;
    height: 80%;
    margin: 0 10px;
    padding: 0;
    background-color: var(--theme-color-bg-blur);
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    border: none;
}

.chooseMode > .container > div:hover{
    cursor: pointer;
    background-color: var(--theme-color-bg-blur-dark);
}

.chooseMode  label{
    width: 100%;
    text-align: center;
    font-size: x-large;
}

.chooseMode > .container label:hover{
    cursor: pointer;
}

.control{
    display: block;
}

#spin_device_img{
    -webkit-animation: device_spin 2s linear infinite; /* Safari */
    animation: device_spin 2s linear infinite;
    display: none;
}

.spin_device_container{
    display: none;
}

/* Safari */
@-webkit-keyframes device_spin {
    0%   { -webkit-transform: rotate(90deg);
            opacity: 0;}
    10%  { opacity: 0;}
    25%  { -webkit-transform: rotate(90deg);
            opacity: 1;}
    75%  { -webkit-transform: rotate(0deg);
            opacity: 1;}
    90%  { opacity: 0;}
    100% { -webkit-transform: rotate(0deg);
            opacity: 0;}
}
  
@keyframes device_spin {
    0%   { -webkit-transform: rotate(90deg);
            opacity: 0;}
    10%  { opacity: 0;}
    25%  { -webkit-transform: rotate(90deg);
            opacity: 1;}
    75%  { -webkit-transform: rotate(0deg);
            opacity: 1;}
    90%  { opacity: 0;}
    100% { -webkit-transform: rotate(0deg);
            opacity: 0;}
}

.container_ctrl_basic{
    width: auto;
    height: auto;
    background: none;
    border: none;
}

.control{
    width: 100vw;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    background: none;
    border:none;
}

.container_ctrl_basic input{
    width: 80%;
    height: 80%;
    margin: auto;
}

.container_ctrl_basic table{
    width: 30vw;
    height: 30vw;
}

#connect_status_txt{
    display: block;
    position: fixed;
    right: 0;
    top: 0;
}