/* ------------------------------ color
------------------------------ */
/* ------------------------------ font
------------------------------ */
/* ------------------------------ client
------------------------------ */
.btns-edit { position: absolute; z-index: 2; }
.btns-edit .btn { -webkit-border-radius: 16px; -moz-border-radius: 16px; -ms-border-radius: 16px; border-radius: 16px; display: inline-block; font-size: 65%; font-weight: 400; letter-spacing: 0; line-height: 30px; margin-left: 2px; padding: 0 8px; min-width: 32px; }
.btns-edit .btn i { font-size: 150%; font-weight: 700; }
.btns-edit form { display: inline-block; }

.is-status0, .status { background: #f2f2f2; color: #9e9e9e; }
.is-status0 .detail, .status .detail { color: #9e9e9e; }

.is-status0 .status { background: #fff; }

.status { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; display: inline-block; font-size: 79%; letter-spacing: 0; line-height: 1.25; padding: 5px 8px; text-align: center; width: 70px; }
.status:before { content: '\f017'; display: inline-block; font-family: 'Font Awesome 5 Free'; font-weight: 700; margin-right: 3px; }

.status1 { background: #f0f5eb !important; color: #558b2f !important; }
.status1:before { content: '\f058'; }

.studio-content { border: none !important; padding: 0 !important; }

body.client .wrapper { margin: 0 auto -40px; min-width: inherit; }
body.client .site-header { padding-bottom: 20px; }
body.client .site-header.is-login .text, body.client .site-header.is-login .logo { margin-right: auto; margin-left: auto; }
body.client .site-header.is-login .menu { display: block; }
body.client .footer-push, body.client .site-footer { height: 40px; }
body.client .container, body.client .site-container { max-width: 740px; }
body.client .contents-main .content-title { font-size: 100%; padding-top: 5px; padding-bottom: 5px; }
body.client .contents-left { float: none; width: auto; }
body.client .site-footer { line-height: 20px; margin-top: 0; min-width: inherit; }
body.client .site-footer .copyright { border-top: none; margin-top: 0; }
body.client .client-title { font-size: 172%; font-weight: 700; text-align: center; padding-top: 30px; }
body.client .client-add { border: 1px solid #e0e0e0; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; }
body.client .client-add { background: #fff; margin-bottom: 10px; }
body.client .client-add .client-add-title { background: #e0e0e0; font-weight: 700; line-height: 1.5; padding: 5px 10px; }
body.client .client-add .client-add-title .btns { line-height: 20px; margin-top: -10px; position: absolute; top: 50%; right: 10px; }
body.client .client-add .client-add-title .btns a { display: inline-block; margin-left: 10px; }
body.client .client-add .client-add-title .btns a:before { font-family: 'Font Awesome 5 Free'; }
body.client .client-add .client-add-title .btns .btn-delete:before { content: '\f2ed'; }
body.client .client-add .client-add-title .btns .btn-sort:before { content: '\f338'; }
body.client .client-add .client-add-title .btns .btn-toggle:before { content: '\f067'; }
body.client .client-add .client-add-body { border-top: 1px solid #e0e0e0; display: none; padding: 15px; }
body.client .client-add.active { margin-bottom: 20px; }
body.client .client-add.active .client-add-title .btns .btn-toggle:before { content: '\f068'; }
body.client .client-add.active .client-add-body { display: block; }
body.client .content-client-list .btns-edit { top: 15px; right: 15px; }
body.client .content-client-list label { background: #fff; border: 1px solid #42a5f5; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; color: #2196f3; display: inline-block; font-size: 79%; margin-bottom: 10px; line-height: 20px; text-align: center; vertical-align: top; width: 80px; }
body.client .content-client-list li { border-bottom: 1px solid #e0e0e0; }
body.client .content-client-list li:first-child { border-top: 1px solid #e0e0e0; }
body.client .content-client-list .link { display: block; padding: 15px; }
body.client .content-client-list span { display: inline-block; }
body.client .content-client-list .status { margin-bottom: 10px; vertical-align: top; }
body.client .content-client-list .title { font-size: 93%; font-weight: 700; line-height: 1.5; }
body.client .content-client-list .detail { color: #616161; font-size: 79%; margin-top: 5px; line-height: 1.75; }
body.client .content-client-list img { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; position: absolute; top: 15px; left: 15px; width: 60px; }
body.client .content-client-list a.link { padding-right: 30px; }
body.client .content-client-list a.link:after { content: '\f054'; font-family: 'Font Awesome 5 Free'; font-weight: 700; line-height: 20px; margin-top: -10px; position: absolute; top: 50%; right: 15px; }
body.client .content-client-list.is-image .link { padding-left: 85px; min-height: 90px; }
body.client .content-client-list.is-text .status { margin-right: 3px; margin-bottom: 0; vertical-align: middle; }
body.client .content-feature-s .link, body.client .content-studio-s .link { padding-left: 70px; min-height: 60px; }
body.client .content-feature-s img, body.client .content-studio-s img { width: 60px; }
body.client .content-feature-s.is-list .link, body.client .content-studio-s.is-list .link { padding: 15px 15px 15px 85px; min-height: 90px; }
body.client .content-feature-s.is-list img, body.client .content-studio-s.is-list img { top: 15px; left: 15px; }
body.client .toggle-content-ws nav { margin-right: auto; margin-left: auto; text-align: center; width: 100%; max-width: 480px; }
body.client .toggle-content-ws nav li { padding-right: 5px !important; padding-left: 5px !important; }
body.client .toggle-content-ws nav a { padding: 15px 0 !important; }
body.client .toggle-content-ws .toggle-body { border-right: none; border-bottom: none; border-left: none; padding: 0; }
body.client .toggle-content-ws .toggle-body .content-client-list li:first-child { border-top: none; }

@media screen and (max-width: 767px) { body.client .wrapper { margin-bottom: -40px !important; min-height: 100%; height: auto !important; height: 100%; }
  body.client .footer-push { height: 40px !important; }
  body.client .site-header .text { padding-right: 0; width: auto; }
  body.client .client-title { font-size: 150%; }
  body.client .content-client-list .btns-edit { top: 15px; right: 20px; }
  body.client .content-client-list .link { padding: 15px 20px; }
  body.client .content-feature-s .link, body.client .content-studio-s .link { padding-left: 90px; min-height: 100px; } }
@media screen and (max-width: 480px) { body.client .site-header { padding-bottom: 0; }
  body.client .client-title { font-size: 129%; }
  body.client .client-add .client-add-body { padding: 10px; }
  body.client .content-client-list .btns-edit { top: 10px; right: 10px; }
  body.client .content-client-list .link { padding: 15px 10px 10px; min-height: 80px; }
  body.client .content-client-list img { top: 15px; left: 10px; }
  body.client .content-client-list.is-image .btns-edit .btn { -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; border-radius: 15px; line-height: 28px; min-width: 30px; }
  body.client .content-client-list.is-image .link { padding-left: 80px; }
  body.client .content-feature-s .link, body.client .content-studio-s .link { padding-left: 80px; min-height: 80px; } }
@media screen and (max-width: 400px) { body.client .content-client-list.is-image .link { padding-top: 46px; }
  body.client .content-client-list.is-image img { top: 10px; }
  body.client .content-client-list.is-image .title, body.client .content-client-list.is-image .detail { margin-left: -70px; } }
/* ------------------------------ login
------------------------------ */
body.client .content-login .flex { -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
body.client .content-login .contents-main { margin-top: 0 !important; margin-left: 10px; width: calc(50% - 10px); }
body.client .content-login .contents-main:first-child { margin-right: 10px; margin-left: 0; }
body.client .content-login .content-subtitle { -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; -ms-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; text-align: center; }
body.client .content-login .form-input, body.client .content-login .btn { margin-top: 10px; }
body.client .content-login .form-input:first-child, body.client .content-login .btn:first-child { margin-top: 0; }
body.client .content-login .remind { font-size: 86%; margin-top: 20px; text-align: center; }

@media screen and (max-width: 480px) { body.client .content-login .contents-main { margin-left: 0px; width: 100%; }
  body.client .content-login .contents-main:first-child { margin-bottom: 20px; margin-right: 0; } }
/* ------------------------------ studio
------------------------------ */
@media screen and (max-width: 480px) { body.client .contents-main .studio-header .btn { font-size: 86%; letter-spacing: 0; padding-right: 3px; padding-left: 3px; } }