* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 13px;
}

html {
    height: 100%;
    background: #2b2f3e;
}

body, a, p {
    color: #333;
    font-family: Roboto,Helvetica,Arial,sans-serifbody;
    font-weight: 400;
}

span {
    color: inherit;
    font-family: Roboto,Helvetica,Arial,sans-serifbody;
    font-weight: 400;
}

.width-limiter {
    height: 100%;
    width: 100%;
    /*max-width: 1200px;*/
    margin-left: auto;
    margin-right: auto;
}


/* ---------------------------------------------
   Style helpers
 */

.autohide {
    display: none;
}

.margin-bottom {
    margin-bottom: 0.5rem;
}

.no-select {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}


/* ---------------------------------------------
   Standard table styles
 */


table {
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ccc;
  padding: 0.2rem 1rem;
}
th {
  background: #f0f0f0;
  text-align: center;
}
table .controls {
    border-color: transparent;
    white-space: nowrap;
}


/* ---------------------------------------------
   Temporary notification messages
 */

.temporary-notification {
    box-sizing: border-box;
    margin: 10px;
    padding: 10px;
    color: #555;
    background: #e3f7fc;
    border: 1px solid #8ed9f6;
    border-radius: 3px;
    width: calc(100% - 20px);
}


/* ---------------------------------------------
   Tooltip below object, with top arrow

   <div class="tooltip">Button name
       <span class="tooltiptext-below">Tooltip text</span>
   </div>
 */

.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext-below {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: white;
    text-align: center;
    border-radius: 6px;
    border: 1px solid black;
    padding: 5px;
    position: absolute;
    z-index: 10000;
    top: 150%;
    left: 50%;
    margin-left: -60px;
}

.tooltip.leftmost .tooltiptext-below {
    left: 0;
    margin-left: 0;
}

.tooltip.rightmost .tooltiptext-below {
    left: auto;
    margin-left: auto;
    right: 0;
}

.tooltip .tooltiptext-below::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}

.tooltip.leftmost .tooltiptext-below::after {
    left: 5%;
    margin-left: 0;
}

.tooltip.rightmost .tooltiptext-below::after {
    left: auto;
    margin-left: auto;
    right: 5%;
}

.tooltip:hover .tooltiptext-below {
    visibility: visible;
}


/* ---------------------------------------------
   Flex-grid styles
 */

.flex-grid, .flex-grid-always {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.f-stack {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* container of UI element centered on screen (ex: form) */
.flex-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.flex {
    flex: 1;
}

.flex-2 {
    flex: 2;
}

.flex-shrink {
    flex: 0 1 auto;
}

.f-grow {
    flex: 1 1 auto;
}

.flex-full-height {
    height: 100%;
}

.flex-same-width {
    width: 0;
}

.flex-vscroll {
    flex: 1 0 0;
    min-height: 0;
    overflow: auto;
}

.flex-vscroll-shadow {
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
}

.flex-vscroll-stripes {
}

.flex-padding {
    padding: 0.3rem;
}

.flex-grid>.flex-sep:not(:first-child) {
    border-left: 1px solid #bbb;
}

.f-stack>.flex-sep:not(:first-child) {
    border-top: 1px solid #bbb;
}



/* ---------------------------------------------
   Compact menu option, ideal for menu bars
   (ex: #title-bar, #status-bar)

   Can be completed with a .tooltip

   .menu-option
     a (option name)
       i (Font-Awesome icon)
       option text
 */


.menu-option {
}

.menu-option a {
    display: inline-block;
    padding: 0.3rem;
    border-radius: 0.2rem;
    font-size: 1rem;
    font-weight: bold;
    color: white;
    text-decoration: none;
    outline: 0;
    transition: ease-in-out 0.2s;
}

.menu-option a:focus, .menu-option a:hover {
    background: #62C98F;
}

.menu-option.disabled a:focus, .menu-option.disabled a:hover {
    background: inherit;
}

.menu-option.disabled {
    opacity: 0.6;
}


/* ---------------------------------------------
   Detailed menu option with guidance,
   best for walls of options (ex: /$lang/u/top/)

   .verbose-menu-option
     i (Font-Awesome icon)
     div
       .title
         a text
       .description
         p text x N
 */

.verbose-menu-option {
    display: flex;
    padding: 0.3rem;
}

.verbose-menu-option i {
    margin: 0.5rem;
}

.verbose-menu-option .title,
.verbose-menu-option .title * {
    font-weight: bold;
}

.verbose-menu-option a {
    display: inline-block;
    font-weight: bold;
    text-decoration: none;
    outline: 0;
    transition: ease-in-out 0.2s;
    border-radius: 0.3rem;
    padding: 0.3rem;
}

.verbose-menu-option a:focus,
.verbose-menu-option a:hover {
    background: #62C98F;
    color: white;
}


/* ---------------------------------------------
   Basic button styles
 */

button {
    padding: 2px 6px;
    border-radius: 3px;
    height: 27px;
    box-sizing: border-box;
    border: 1px solid transparent;
}

button:hover {
    border-color: black;
}

button:focus {
    outline: none;
    border-color: black;
}


/* ---------------------------------------------
   Basic link styles

   a.primary

   a.secondary
*/


a {
    cursor: pointer;
}

a.primary {
    transition: all 0.2s ease;
    text-decoration: none;
    color: inherit;
    font-size: 1rem;
    font-weight: bold;
    padding: 0.45rem 0.2rem 0.2rem 0.2rem;
    border-bottom: 0.25rem solid #62C98F;
}

a.primary:hover,
a.primary:focus {
    transition: all 0.2s ease;
    background: #62C98F;
    color: white;
    border-bottom-color: #62C98F;
    border-radius: 0.3rem;
    outline: 0;
}

a.secondary {
    transition: all 0.2s ease;
    text-align: center;
    text-decoration: none;
    color: #333;
    font-size: 1rem;
    font-style: italic;
    padding: 0.45rem;
    border-radius: 0.3rem;
}

a.secondary:hover,
a.secondary:focus {
    transition: all 0.2s ease;
    color: white;
    background: #62C98F;
    outline: 0;
}

.disabled,
.disabled a.primary,
.disabled a.primary:focus,
.disabled a.primary:hover,
.disabled a.secondary,
.disabled a.secondary:focus,
.disabled a.secondary:hover {
    background: inherit;
    color: lightgrey;
    cursor: inherit;
    pointer-events: none;
}


/* ---------------------------------------------
   Action-related styles.
 */

.primary-action {
    background: #428bca;
    color: white;
}
.primary-action:hover {
    background: #3276b1;
}
.primary-action.need-confirmation:not(.confirmed) {
    background: #9cc2e3;
    color: black;
}
.primary-action.disabled {
    pointer-events: none;
    background: #ddd;
    color: #aaa;
}

.danger-action {
    background: #d9534f;
    color: white;
}
.danger-action:hover {
    background: #d2322d;
}
.danger-action.need-confirmation:not(.confirmed) {
    background: #e3807d;
    color: white;
}

.primary-color { color: #428bca; }
.danger-color { color: #d9534f; }

[data-action] { cursor: pointer; }


/* ---------------------------------------------
   Rules for actions that require confirmation

   For example, a danger-action button with a tooltip,
   and need for confirmation

   <button class="need-confirmation danger-action tooltip" data-action="revert-changes">
        <span>元に戻す</span>
        <div class="tooltiptext-below">変更内容の解除<br>（設定を続く）</div>
    </button>
 */

.if-not-confirmed {
    display: inherit;
}

.confirmed .if-not-confirmed {
    display: none;
}

.if-confirmed {
    display: none;
}

.confirmed .if-confirmed {
    display: inherit;
}


/* ---------------------------------------------
   Form styles

   div.flex-modal
       form #primary-form or #ok-form
         table
           tr
             td.colspan=2 #instructions
               p "message"
           tr
             td.colspan=2 #error-box
               p "message"
           tr
             th "input label"
             td input
           tr
             td.input-type colspan="2" "required/optional"
           tr
             td.colspan=2 a.primary
           tr
             td.colspan=2 a.secondary
*/

#ok-form {
    display: none;
}

form {
    width: calc(100% - 4rem);
    max-width: 600px;
    max-height: 100%;
    overflow-y: auto;
    padding: 1rem;
    margin-left: auto;
    margin-right: auto;
    background: white;
    border-radius: 0.5rem;
    border: 1px solid #333;
    box-sizing: border-box;
}

form.full-width { width: 100%; max-width: none; }
form.no-border { border: none; }

form table {
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    width: 100%;
    max-width: 450px;
}

form th {
    border: none;
    background: none;
    font-size: 1rem;
    font-weight: normal;
    text-align: right;
    vertical-align: middle;
    padding: 0.5rem;
    white-space: nowrap;
}

form td {
    border: none;
    background: none;
    font-size: 1rem;
    font-weight: normal;
    text-align: left;
    vertical-align: center;
}

form td.description, form td#error-box {
    padding: 0.5rem 0;
}

form h1 {
    font-size: 2rem;
    text-transform: uppercase;
    text-align: center;
}

form input {
    box-sizing: border-box;
    font-size: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.2);
    padding: 0.5rem;
    width: 100%;
}

form td.readonly {
    padding: 0.5rem;
}

form td.input-type {
    font-size: 0.8rem;
    text-align: right;
    padding: 0;
}

form .input-type>div {
}

form input:hover,
form input:focus {
    outline: 0;
    background: lightyellow;
}

form .error {
    border-color: rgba(255, 0, 0, 0.2);
    color: red;
}

form .error input,
form .error input:hover,
form .error input:focus {
    border-bottom-color: rgba(255, 0, 0, 0.2);
    background: rgba(255, 0, 0, 0.2);
}

form a.primary {
    transition: all 0.2s ease;
    display: block;
    margin-top: 1rem;
    text-align: center;
    text-decoration: none;
    color: inherit;
    font-size: 1.5rem;
    font-weight: bold;
    padding: 0.45rem 0.2rem 0.2rem 0.2rem;
    border-bottom: 0.25rem solid #62C98F;
}

form a.primary:hover,
form a.primary:focus {
    transition: all 0.2s ease;
    background: #62C98F;
    color: white;
    border-bottom-color: #62C98F;
    border-radius: 0.3rem;
    outline: 0;
}

form a.secondary {
    display: block;
    transition: all 0.2s ease;
    text-align: center;
    text-decoration: none;
    color: #333;
    font-size: 1rem;
    font-style: italic;
    padding: 0.45rem;
    border-radius: 0.3rem;
}

form a.secondary:hover,
form a.secondary:focus {
    transition: all 0.2s ease;
    color: white;
    background: #62C98F;
    outline: 0;
}

form a.primary.disabled,
form a.primary.disabled:hover,
form a.primary.disabled:focus {
    color: lightgrey;
    background: white;
    border-bottom-color: lightgrey;
    pointer-events: none;
}

form a.secondary.disabled,
form a.secondary.disabled:hover,
form a.secondary.disabled:focus {
    color: lightgrey;
    pointer-events: none;
}

#instructions {
    text-align: justify;
    margin-bottom: 1rem;
}

#error-box * {
    display: none;
    color: red;
    text-align: justify;
}


/* ---------------------------------------------
   #message-bar

   A full-width message bar with a descriptions
   and optional buttons

   #message-bar
     .message (option: .error)
       .description
       .buttons
         a.primary
         a.secondary
 */


#message-bar {
    display: flex;
    padding: 0.5rem;
    box-sizing: border-box;
    width: 100%;
    background: #fdf5b3;
}

#message-bar .message {
    display: none; /*set to `flex` to make it visible*/
    align-items: center;
}

#message-bar .message.error {
    color: red;
    font-weight: normal;
}

#message-bar .description {
    padding: 0.45rem 0.2rem 0.2rem 0.2rem;
}

#message-bar .buttons {
    padding-left: 1rem;
}

#message-bar a {
    cursor: pointer;
    margin-left: 2rem;
}

#message-bar a.primary {
    transition: all 0.2s ease;
    text-decoration: none;
    color: inherit;
    font-size: 1rem;
    font-weight: bold;
    padding: 0.45rem 0.2rem 0.2rem 0.2rem;
    border-bottom: 0.25rem solid #62C98F;
}

#message-bar a.primary:hover,
#message-bar a.primary:focus {
    transition: all 0.2s ease;
    background: #62C98F;
    color: white;
    border-bottom-color: #62C98F;
    border-radius: 0.3rem;
    outline: 0;
}

#message-bar a.secondary {
    transition: all 0.2s ease;
    text-align: center;
    text-decoration: none;
    color: #333;
    font-size: 1rem;
    font-style: italic;
    padding: 0.45rem;
    border-radius: 0.3rem;
}

#message-bar a.secondary:hover,
#message-bar a.secondary:focus {
    transition: all 0.2s ease;
    color: white;
    background: #62C98F;
    outline: 0;
}

#message-bar.disabled,
#message-bar.disabled a.primary,
#message-bar.disabled a.primary:focus,
#message-bar.disabled a.primary:hover,
#message-bar.disabled a.secondary,
#message-bar.disabled a.secondary:focus,
#message-bar.disabled a.secondary:hover {
    background: inherit;
    color: lightgrey;
    cursor: inherit;
    pointer-events: none;
}

#message-bar .help-icon {
    font-size: 2rem;
    transition: ease-in-out 0.2s;
}

#message-bar .help-icon:hover {
    transform: rotate(30deg);
    transition: ease-in-out 0.2s;
    cursor: pointer;
}


/* ---------------------------------------------
   Group of buttons made with a.primary and
   a.secondary

   .button-group
     .description

     a.primary
     a.secondary
 */


.button-group {
    border: 1px solid #ddd;
    border-radius: 0.3rem;
    padding: 0.5rem;
}

.button-group .description {
    padding: 0.45rem 0.2rem 0.2rem 0.2rem;
}

.button-group .buttons {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.button-group a {
    cursor: pointer;
}

.button-group a.primary {
    transition: all 0.2s ease;
    text-decoration: none;
    color: inherit;
    font-size: 1rem;
    font-weight: bold;
    padding: 0.45rem 0.2rem 0.2rem 0.2rem;
    border-bottom: 0.25rem solid #62C98F;
}

.button-group a.primary:hover,
.button-group a.primary:focus {
    transition: all 0.2s ease;
    background: #62C98F;
    color: white;
    border-bottom-color: #62C98F;
    border-radius: 0.3rem;
    outline: 0;
}

.button-group a.secondary {
    transition: all 0.2s ease;
    text-align: center;
    text-decoration: none;
    color: #333;
    font-size: 1rem;
    font-style: italic;
    padding: 0.45rem;
    border-radius: 0.3rem;
}

.button-group a.secondary:hover,
.button-group a.secondary:focus {
    transition: all 0.2s ease;
    color: white;
    background: #62C98F;
    outline: 0;
}

.button-group.disabled,
.button-group.disabled a.primary,
.button-group.disabled a.primary:focus,
.button-group.disabled a.primary:hover,
.button-group.disabled a.secondary,
.button-group.disabled a.secondary:focus,
.button-group.disabled a.secondary:hover {
    background: inherit;
    color: lightgrey;
    cursor: inherit;
    pointer-events: none;
}


/* ---------------------------------------------
   Editable items in lists
 */

.list {
    background: #8bc34a0f;
}

.list-item {
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: 0.3rem;
    padding: 0.3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.list-item .controls {
    visibility: hidden;
}

.list-item:hover {
    border-color: #333;
    background: white;
}

.list-item:hover i {
    visibility: visible;
    opacity: 0.4;
}

.list-item i:hover {
    opacity: 1;
    cursor: pointer;
}

.list-item.selected,
.list-item.selected:hover {
    border-color: #618e2f;
    background: #618e2f;
    color: white;
}

.list-item.unlocked,
.list-item.selected.unlocked,
.list-item.selected.unlocked:hover {
    border-color: red;
    background: red;
    color: white;
}

/* set of rules to manage lock/unlock controls */
.list-item [data-click-action=lock] {
    display: none;
}
.list-item.unlocked [data-click-action=lock] {
    display: inline-block;
}
.list-item.unlocked i {
    visibility: visible;
    opacity: 1;
}


/* ---------------------------------------------
   Title bar

   #title-bar
     .logo .title          .menu-option (logout)
 */

#title-bar {
    align-items: flex-start;
    background: #2b2f3e;
    padding: 0.25rem;
}

#title-bar .logo {
    display: inline-block;
    overflow: hidden;
    padding: 0.2rem;
    border-radius: 0.2rem;
    background: white;
    height: 2rem;
}

#title-bar .logo img {
    height: 1.6rem;
}

#title-bar .title {
    text-align: center;
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    background: #3f455a;
    margin-left: 0.25rem;
    margin-right: 0.25rem;
    border-radius: 3px;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

#title-bar .title * {
    color: white;
    font-size: 1rem;
    font-weight: bold;
}


/* ---------------------------------------------
   User Manual styles
 */

.manual h1 {
    display: inline-block;
    font-size: 2rem;
    font-weight: bold;
    margin-top: 2rem;
    margin-bottom: 1rem;
    border-bottom: 0.2rem solid #333;
}

.manual h2 {
    display: inline-block;
    font-size: 1.5rem;
    font-weight: bold;
    margin-top: 2rem;
    margin-bottom: 1rem;
    border-bottom: 0.2rem solid #333;
}

.manual h3 {
    display: inline-block;
    font-size: 1rem;
    font-weight: bold;
    margin-top: 2rem;
    margin-bottom: 1rem;
    border-bottom: 0.2rem solid #333;
}

.manual p {
    margin-top: 0.5rem;
}

.manual ul {
    list-style-position: inside;
    padding: 0.5rem 0.5rem 0.5rem 2rem;
}

.manual li {
    list-style-position: inside;
    text-indent: -1.4rem;
}

.manual i.fas,
.manual i.far {
    text-indent: 0;
}

.manual hr {
    border-bottom: none;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.manual dl {
    margin-top: 0.5rem;
}

.manual dt {
    font-weight: bold;
}

.manual dd {
    padding-left: 1rem;
}

.manual img {
    display: block;
    max-width: 50%;
    margin-left: auto;
    margin-right: auto;
}


/* ---------------------------------------------
   Page contents

   #contents
     depends on the page
 */

#contents {
    background: hsla(227, 18%, 147%, 0.83);
}

#contents .width-limiter {
    background: white;
    overflow-x: hidden;
    overflow-y: auto;
}


/* ---------------------------------------------
   View-page with a view-menu and a view-editor
   - ex: /rum/top/ => root user management page
   - ex: /sym/top/ => system setting page
 */

#view {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#view-menu {
    flex: 0 1 37px;
    padding: 5px;
    border-bottom: 1px solid black;
}

#view-menu .sep {
    display: inline-block;
    width: 15px;
}

#view-editor {
    flex: 1 0;
    display: flex;
}


/* ---------------------------------------------
   Status bar

   #status-bar
     .menu-option (workspace, group, user)
     .menu-option (language selector)
 */

#status-bar {
    background: #2b2f3e;
    height: 2rem;
    padding: 0.25rem:
}




/* ---------------------------------------------
   White mask used to transition states on
   single-page logics
 */

#page-mask {
    display: none;
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background-color: transparent;
    color: red;
}


/* ---------------------------------------------
    Styles specific to profile page /$lang/u/
 */

.description p {
    margin-top: 0.3rem;
    margin-bottom: 0.5rem;
}


/* ---------------------------------------------
   Responsive design rules

   On narrow display:
   - turn flex structures into a stack of div
   - display flex separators as border-tops
 */

.if-narrow { display: none !important; }

@media (max-width:600px) {
    .if-wide { display: none !important; }
    .if-narrow { display: block !important; }

    form th {
        display: block;
        text-align: left;
        padding-bottom: 0;
    }

    form td {
        display: block;
    }

    #contents .flex-grid {
        display: flex;
        flex-direction: column;
    }

    #contents .f-stack,
    #contents .f-stack>.flex,
    #contents .f-stack>.flex-shrink,
    #contents .f-stack>.f-grow,
    #contents .f-stack>.flex-vscroll {
        display: block;
    }
    #contents .f-stack>.flex-vscroll {
        min-height: 6rem;
    }

    .flex-grid>.flex-sep:not(:first-child),
    .f-stack>.flex-sep:not(:first-child) {
        border-left: none;
    }
    .flex-same-width {
        width: auto;
    }

    #contents .flex-grid:not(:first-child),
    #contents .f-stack:not(:first-child),
    #contents .flex-sep:not(:first-child) {
        border-top: 1px solid #bbb;
    }

    #title-bar .title {
        text-align: center;
    }

    .list {
        min-height: 100px;
        max-height: 250px;
        background: #8bc34a0f;
    }
}