/*
http://patorjk.com/software/taag/#p=display&f=Small&t=detail%20page
https://htmlcolorcodes.com/color-names/
https://www.w3schools.com/colors/colors_names.asp

   __                    
  / _|_ _ __ _ _ __  ___ 
 |  _| '_/ _` | '  \/ -_)
 |_| |_| \__,_|_|_|_\___|
                         

*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap');
* { font-family:'Noto Sans',Arial,sans-serif; }
* { box-sizing:border-box; margin:0; padding:0; font-family:PingFangTC-Regular,'微軟正黑體','Arial','Hiragino Sans GB','Source Han Sans','PingFangTC-Regular',sans-serif; 
font-size:1em; -webkit-font-smoothing:antialiased; font-smoothing:antialiased; }
html,body { margin:0; padding:0; width:100%; height:100%; position:relative; }
body { overflow:hidden; }
body.dev:before { content:'TEST VERSION'; display:block; padding:3em 6em 1em 6em; font-size:.8em; transform:translate(-50%,-50%) rotate(-30deg); position:fixed; top:1.5em; left:3em; background:#1ee526; color:#ff5722; font-weight:bold; z-index:99999; }
body.dev {}
body.dev .header .menuset {}
a { cursor:pointer; }

.row { padding:0; display:flex; width:100%; }
.copyright { color:white; font-size:.6em; position:absolute; bottom:0; left:0; padding:.5em 1.5em; line-height:160%; }

.btn { display:inline-block; vertical-align:middle; font-size:.94em; color:white; background:gray; border-radius:2px; margin:.2em; padding:.5em 1.5em; vertical-align:middle; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.1); }
.btn:hover { background:#555; }

.btn-addnew { background:mediumaquamarine; }
.btn-save { background:orangered; }
.btn-addnew,
.btn-save,
.btn-delete,
.btn-edit,
.btn-edit-pop,
.btn-cancel { padding:.4em 1.3em; }
.btn-logout { display:block; font-size:.94em; color:white; background:#c1c2c5; margin:0; padding:.5em 1em; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.1); text-shadow:0 -1px 1px rgba(0,0,0,.1); position:absolute; bottom:0; left:0; border-radius:2px; }
.btn-logout:hover { background:orange; }






/*

  _           _      
 | |___  __ _(_)_ _  
 | / _ \/ _` | | ' \ 
 |_\___/\__, |_|_||_|
        |___/        

*/

.loginframe { display:block; width:100vw; height:100vh; background:#121212; position:fixed; top:0; left:0; }
    .loginframe .bg { display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:102%; height:102%; object-fit:cover; opacity:.6; }
    .loginframe .logo { display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(-25deg); width:90vw; height:90vw; object-fit:cover; opacity:.1; z-index:10; }
    .loginframe .loginbox { display:block; width:100%; background:white; padding:2em; position:absolute; top:0; left:0; z-index:12; }
    .loginframe .loginbox h2 { display:block; position:absolute; top:50%; right:2em; transform:translateY(-50%); font-size:1.5em; font-weight:900; font-style:italic; color:dodgerblue; letter-spacing:-.05em; font-family:Arial; }
    .loginframe .loginbox .flex { display:flex; justify-content:left; }
    .loginframe .loginbox .flex .row.input { display:block; width:300px; padding:0 .5em; }
    .loginframe .loginbox .flex .row.input label { display:block; }
    .loginframe .loginbox .flex .row.input input { display:block; width:100%; font-size:1.2em; margin:.2em 0; padding:.4em .7em; border-radius:.2em; background:white; border:1px solid #ccc; color:#333; }



/*

                     _              
  _ __  ___ _ _ _  _| |__  __ _ _ _ 
 | '  \/ -_) ' \ || | '_ \/ _` | '_|
 |_|_|_\___|_||_\_,_|_.__/\__,_|_|  
                                    

*/
.sidebar { display:block; box-sizing:border-box; vertical-align:top; width:240px; padding:0; height:100vh; overflow-y:scroll; position:fixed; top:0; left:0; overflow:hidden; }
    .sidebar .bg { display:block; width:100%; height:100vh; position:absolute; top:0; left:0; background:#333; z-index:1; }
    .sidebar .bg img { display:block; height:100%; width:100%; object-fit:cover; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); opacity:.4; }
    .sidebar .logo { display:block; position:relative; margin:1em 0 1em -1em; height:2em; width:11em; border-radius:0 30px 30px 0; overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.2); z-index:2; }
    .sidebar .logo img { display:block; width:100%; position:absolute; top:50%; left:0; transform:translateY(-50%); }
    .sidebar .logo { display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(-25deg); width:90vw; height:90vw; object-fit:cover; opacity:.1; z-index:10; }
    .sidebar h2 { display:block; position:absolute; top:50%; right:2em; transform:translateY(-50%); font-size:1.2em; font-weight:900; font-style:italic; color:dodgerblue; letter-spacing:-.05em; font-family:Arial; }

.menuset { padding:0; z-index:10; position:relative; text-align:center; display:flex; justify-content:center; }
    .menuset .main { display:inline-block; padding:.5em 1.5em; border-right:1px dotted rgba(255,255,255,.2); }
    .menuset .main:last-child { border-right:none; }
    .menuset .main p { display:block; width:100%; padding:.2em 0; font-family:Arial; font-weight:900; font-size:1.3em; color:rgba(200,200,200,.4); padding:0; }
    .menuset a { display:block; padding:1em 0 .3em 0; color:white; font-weight:bold; font-size:.98em; border-radius:3em; }
    .menuset a.sub { padding:.3em 0; padding-left:1.5em; font-size:.8em; }
    .menuset a.selected { background:midnightblue;background:dodgerblue;  }


@media -ms-viewport, screen and (max-width:1360px) {
    .menuset { justify-content:left; }
}



/*

             _                   _           _   
  _ __  __ _(_)_ _    __ ___ _ _| |_ ___ _ _| |_ 
 | '  \/ _` | | ' \  / _/ _ \ ' \  _/ -_) ' \  _|
 |_|_|_\__,_|_|_||_| \__\___/_||_\__\___|_||_\__|
                                                 

*/

.container { display:block; width:calc(100% - 3em); border:1px solid red; height:100vh; position:relative; overflow:hidden; overflow-y:scroll; padding:0; border:0; box-shadow:0 0 20px rgba(0,0,0,.4); }



body>.bg { display:block; width:100%; height:100vh; position:absolute; top:0; left:0; background:#333; z-index:1; }
body>.bg img { display:block; height:100%; width:100%; object-fit:cover; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); opacity:.4; }
.bodyframe { display:flex; height:100vh; padding-left:240px; position:fixed; top:0; z-index:12; flex-wrap:wrap; }

    .bodyframe.topdown { padding-left:0; }
    .bodyframe.topdown .sidebar { width:100vw; height:70px; position:relative; top:auto; left:auto; background:rgba(50,50,50,.7); }
    .bodyframe.topdown .sidebar .bg { width:100vw; height:100%; }
    .bodyframe.topdown .sidebar .logo { position:absolute; top:0; /*left:50%; transform:translateX(-50%);*/ left:2em; width:10em; box-shadow:none; }
    .bodyframe.topdown .menuset {}
    .bodyframe.topdown .menuset a { display:inline-block; }
    .bodyframe.topdown .menuset a.sub { padding:.3em .8em; font-size:.8em; }
    .bodyframe.topdown .container { width:100vw; background:white;xxxbackground:#333;background:#e1e2e5; height:calc(100vh - 70px); }