/* kitstrap v0.2 */

body {
    margin: 0;
    font-family: sans-serif;
    cursor: default;
}

body::selection {
    background: dodgerblue;
    color: white;
}

.kit-flex, kit-flex {
    display: flex;
    flex-wrap: wrap;
}

kit-header,
.kit-header {
    box-sizing: border-box;
    top: 0px;
    left: 0px;
    width: 100%;
    display: block;
    background: -moz-linear-gradient(45deg, rgba(204, 255, 216, 1) 0%, rgba(212, 246, 255, 1) 38%, rgba(255, 219, 238, 1) 100%);
    background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(204, 255, 216, 1)), color-stop(38%, rgba(212, 246, 255, 1)), color-stop(100%, rgba(255, 219, 238, 1)));
    background: -webkit-linear-gradient(45deg, rgba(204, 255, 216, 1) 0%, rgba(212, 246, 255, 1) 38%, rgba(255, 219, 238, 1) 100%);
    background: -o-linear-gradient(45deg, rgba(204, 255, 216, 1) 0%, rgba(212, 246, 255, 1) 38%, rgba(255, 219, 238, 1) 100%);
    background: -ms-linear-gradient(45deg, rgba(204, 255, 216, 1) 0%, rgba(212, 246, 255, 1) 38%, rgba(255, 219, 238, 1) 100%);
    background: linear-gradient(45deg, rgba(204, 255, 216, 1) 0% rgba(212, 246, 255, 1) 38%, rgba(255, 219, 238, 1) 100%);
    padding: 3px;
    color: #000000;
    box-shadow: 0px 1px 3px 0 rgba(0, 0, 0, .3);
}

kit-footer,
.kit-footer {
    display: block;
    color: #505050;
    background: #f0f0f0;
    padding: 8px;
    text-align: center;
    margin-top: 10px;
}

kit-navbar,
.kit-navbar {
    display: block;
    background: #eee;
    padding: 0;
}

kit-navbar kit-navitem,
kit-navbar .kit-navitem,
.kit-navbar kit-navitem,
.kit-navbar .kit-navitem {
    display: inline-block;
    padding: 2px 10px;
}

kit-navbar kit-navitem:hover,
kit-navbar .kit-navitem:hover,
.kit-navbar kit-navitem:hover,
.kit-navbar .kit-navitem:hover {
    color: #ffffff;
    background: #1f83e7;
}

kit-navbar-alt,
.kit-navbar-alt {
    display: block;
    background: #f0f0f0;
    padding: 0;
}

kit-navbar-alt kit-navitem,
kit-navbar-alt .kit-navitem,
.kit-navbar-alt kit-navitem,
.kit-navbar-alt .kit-navitem {
    display: inline-block;
    color: #909090;
    padding: 8px 12px;
    cursor: pointer;
    text-decoration: none;
}

kit-navbar-alt kit-navitem:hover,
kit-navbar-alt .kit-navitem:hover,
.kit-navbar-alt kit-navitem:hover,
.kit-navbar-alt .kit-navitem:hover {
    color: #404040;
    text-decoration: underline;
}

#kit-wallpaper {
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background: url("");
    background-size: cover;
}

.kit-d-icon {
    border-radius: 5px;
    padding: 4px;
    margin: 4px;
    text-shadow: 0px 1px 4px black;
    width: 100px;
    text-align: center;
    overflow: hidden;
    color: #fff;
}

.kit-d-icon:hover {
    background: rgba(0, 0, 0, .5);
    opacity: .8;
    box-shadow: 0 0 3px 0 cyan;
}

.kit-selectable {
    cursor: text;
}

.kit-selectable *::selection,
.kit-selectable::selection {
    background: dodgerblue;
    color: white;
}

.kit-toggle {
    display: block;
    padding: 8px;
    border-bottom: 1px solid #a0a0a0;
}

.kit-toggle:hover {
    background: #f0f0f0;
}

.kit-toggle input {
    display: none;
}

.kit-toggle input+label {
    display: block;
    float: right;
    position: relative;
    cursor: pointer;
    outline: none;
    user-select: none;
}

.kit-toggle input+label {
    padding: 1px;
    width: 60px;
    height: 30px;
    background-color: transparent;
}

.kit-toggle input+label:before,
.kit-toggle input+label:after {
    display: block;
    position: absolute;
    top: 2.5px;
    left: 0px;
    right: 0px;
    bottom: 2.5px;
    content: "";
}

.kit-toggle input+label:before {
    right: 0px;
    background-color: #e0e0e0;
    border-radius: 60px;
    transition: background 0.4s;
}

.kit-toggle input+label:after {
    width: 26px;
    background-color: #fff;
    border-radius: 100%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: margin 0.4s;
}

.kit-toggle input:checked+label:before {
    background-color: #8ce196;
}

.kit-toggle input:checked+label:after {
    margin-left: 36px;
}

kit-btn,
.btn {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    border: 1px solid gray;
    margin: 4px 0px;
    padding: 2px 4px;
    border-radius: 5px;
    background: #f0f0f0;
    transition: .2s all ease;
    box-shadow: inset 0 1px 1px 0px #fff, inset 0 -1px 1px 0px #fff;
}

kit-btn:hover,
.btn:hover {
    position: relative;
    box-shadow: 0px 1px 4px 0 rgba(0, 0, 0, .3);
    background: #fcfcfc;
}

kit-btn:active,
.btn:active {
    transition: none;
    top: 1px;
}

.textbox {
    cursor: text;
    outline: none;
    border: 1px solid #000000;
    font-size: 16px;
    padding: 4px;
    background: #ffffff;
    box-shadow: inset 1px 1px 3px 0px rgba(0, 0, 0, .2);
    border-radius: 5px;
    font-family: 'Noto Sans JP', sans-serif;
}

.textbox:focus {
    box-shadow: 0 0 0 3px rgba(180, 200, 255, .8);
}

.textbox.dark {
    border-color: rgba(255, 255, 255, .5);
    background: #303030;
    color: #f0f0f0;
}

.textbox[disabled] {
    background: #eeeeee;
    color: #919191;
}

.textbox::selection {
    background: dodgerblue;
    color: white;
}

kit-hl,
.kit-hyperlink {
    color: dodgerblue;
    text-decoration: underline;
    cursor: pointer;
}

kit-hl-alt,
.kit-hl-alt {
    color: inherit;
    cursor: pointer;
    text-decoration: none;
}

kit-hl-alt:hover,
.kit-hl-alt:hover {
    text-decoration: underline;
}

kit-button,
.kit-button {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-weight: 400;
    display: inline-block;
    cursor: default;
    border: none;
    border-radius: 4px;
    line-height: 200%;
    background: dodgerblue;
    color: #ffffff;
    padding: 1px 10px;
    margin: 1px 2px;
    text-decoration: none;
    transition: .2s all ease;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    text-align: center;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .3), inset 0px 0px 2px 0px rgba(255, 255, 255, .5), inset 0px -1em 1px 3px rgba(255, 255, 255, .2);
}

kit-button:hover,
.kit-button:hover {
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .5), inset 0px 0px 2px 0px rgba(0, 0, 0, .2), inset 0px 1em 1px 3px rgba(255, 255, 255, .2), inset 0px 9999px 0px 0px rgba(0, 0, 0, .15);
}

kit-button:active,
.kit-button:active {
    box-shadow: inset 0px 9999px 0px 0px rgba(0, 0, 0, .2);
    position: relative;
    top: 2px;
}

kit-button-alt,
.kit-button-alt {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-weight: 400;
    display: inline-block;
    cursor: default;
    border-radius: 5px;
    line-height: 200%;
    background: white;
    color: dodgerblue;
    padding: 0px 8px;
    border: 2px solid dodgerblue;
    margin: 1px 2px;
    text-decoration: none;
    transition: .2s all ease;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2);
    cursor: pointer;
}

kit-button-alt:hover,
.kit-button-alt:hover {
    background: dodgerblue;
    color: white;
}

.kit-button.small,
kit-button.small,
.kit-button-alt.small,
kit-button-alt.small {
    font-size: 13px;
    padding: 0px 5px;
}

.kit-button.medium,
kit-button.medium,
.kit-button-alt.medium,
kit-button-alt.medium {
    font-size: 16px;
    padding: 1px 8px;
}

.kit-button.large,
kit-button.large,
.kit-button-alt.large,
kit-button-alt.large {
    font-size: 20px;
    padding: 3px 14px;
}

.kit-button.xlarge,
kit-button.xlarge,
.kit-button-alt.xlarge,
kit-button-alt.xlarge {
    font-size: 27px;
    padding: 5px 20px;
}

.kit-button.disabled,
kit-button.disabled {
    background: #a5a5a5;
    box-shadow: none;
}

.kit-button-alt.disabled,
kit-button-alt.disabled {
    background: #d8d8d8;
    color: #969696;
    box-shadow: none;
}

.kit-button.disabled:active,
kit-button.disabled:active,
.kit-button-alt.disabled:active,
kit-button-alt.disabled:active {
    box-shadow: none;
    position: static;
}

kit-buttongroup {
    display: flex;
}

kit-buttongroup kit-button,
kit-buttongroup .kit-button,
.kit-buttongroup kit-button,
.kit-buttongroup .kit-button,
kit-buttongroup kit-button-alt,
kit-buttongroup .kit-button-alt,
.kit-buttongroup kit-button-alt,
.kit-buttongroup .kit-button-alt {
    border-radius: 0;
    margin: 0px;
    border-left-width: 0;
}

kit-buttongroup kit-button:first-child,
kit-buttongroup .kit-button:first-child,
.kit-buttongroup kit-button:first-child,
.kit-buttongroup .kit-button:first-child,
kit-buttongroup kit-button-alt:first-child,
kit-buttongroup .kit-button-alt:first-child,
.kit-buttongroup kit-button-alt:first-child,
.kit-buttongroup .kit-button-alt:first-child {
    border-radius: 6px 0 0 6px;
    border-left-width: 2px;
}

kit-buttongroup kit-button:last-child,
kit-buttongroup .kit-button:last-child,
.kit-buttongroup kit-button:last-child,
.kit-buttongroup .kit-button:last-child,
kit-buttongroup kit-button-alt:last-child,
kit-buttongroup .kit-button-alt:last-child,
.kit-buttongroup kit-button-alt:last-child,
.kit-buttongroup .kit-button-alt:last-child {
    border-radius: 0 6px 6px 0;
}

kit-buttongroup kit-button:only-child,
kit-buttongroup .kit-button:only-child,
.kit-buttongroup kit-button:only-child,
.kit-buttongroup .kit-button:only-child,
kit-buttongroup kit-button-alt:only-child,
kit-buttongroup .kit-button-alt:only-child,
.kit-buttongroup kit-button-alt:only-child,
.kit-buttongroup .kit-button-alt:only-child {
    border-radius: 6px;
}

kit-block,
.kit-block.kit-block {
    display: block;
}

kit-inblock,
.kit-inblock.kit-inblock {
    display: inline-block;
}

kit-inline,
.kit-inline.kit-inline {
    display: inline;
}

kit-sub,
.kit-sub {
    color: #999;
    font-size: 14px;
}

kit-title,
.kit-title {
    color: #222;
    font-size: 20px;
}

kit-badge,
.kit-badge {
    background: orange;
    color: #ffffff;
    padding: 0 5px;
    margin: 0 4px;
    border-radius: 5px;
    font-weight: 400;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2);
}

kit-flash,
.kit-flash{
    position: fixed;
    top: 0px;
    left: 100px;
    width: calc(100% - 200px);
    padding: 4px 10px;
    box-sizing: border-box;
    background: #ffffff;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,.3);
    border-radius: 0 0 10px 10px;
}

h2 {
    margin: 10px 0;
    padding: 2px;
    font-weight: 900;
    border-bottom: 1px solid #c0c0c0;
}

h5 {
    font-size: 15px;
    color: #909090;
    margin: 4px 0;
}

code {
    padding: 3px;
    color: #303030;
    background: #eee;
    border-radius: 6px;
}

blockquote {
    margin: 10px;
    padding: 10px;
    background: #f0f0f0;
}

/* layout */

kit-space,
.kit-space {
    display: block;
    height: 10px;
}

kit-left,
.kit-left {
    display: inline-block;
    padding: 10px;
    width: 100px;
}

kit-right,
.kit-right{
    float: right;
}

kit-container,
.kit-container {
    display: block;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    border-radius: 6px;
}

kit-container kit-box,
kit-container .kit-box,
.kit-container .kit-box,
.kit-container .kit-box {
    display: block;
    padding: 8px;
    margin: 0;
    border: 1px solid #c0c0c0;
    overflow: hidden;
}

kit-container kit-box,
kit-container .kit-box,
.kit-container kit-box,
.kit-container .kit-box {
    border-top-width: 0;
}

kit-container kit-box:first-child,
kit-container .kit-box:first-child,
.kit-container kit-box:first-child,
.kit-container .kit-box:first-child {
    border-radius: 6px 6px 0 0;
    border-top-width: 1px;
}

kit-container kit-box:last-child,
kit-container .kit-box:last-child,
.kit-container kit-box:last-child,
.kit-container .kit-box:last-child {
    border-radius: 0 0 6px 6px;
}

kit-container kit-box:only-child,
kit-container .kit-box:only-child,
.kit-container kit-box:only-child,
.kit-container .kit-box:only-child {
    border-radius: 6px;
}

kit-pane,
.kit-pane {
    display: block;
    padding: 6px;
    background: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, .2);
}

kit-pane.dark,
.kit-pane.dark {
    background: #303030;
    color: #f0f0f0;
}

kit-pane.hover:hover,
.kit-pane.hover:hover {
    background: #f0f0f0;
}

kit-pane.dark.hover:hover,
.kit-pane.dark.hover:hover {
    background: #4a4a4a;
}

/* padding and margin */

.p{ padding: 8px }
.p-s{ padding: 4px }
.p-m{ padding: 10px }
.p-l{ padding: 16px }
.p-xl{ padding: 24px }
.p-0{ padding: 0 }

.m{ margin: 8px }
.m-s{ margin: 4px }
.m-m{ margin: 10px }
.m-l{ margin: 16px }
.m-xl{ margin: 24px }
.m-0{ margin: 0 }

/* fonts */

.kit-font-xlarge,
.kit-font-xl {
    font-size: 27px;
}

.kit-font-large,
.kit-font-l {
    font-size: 20px;
}

.kit-font-medium,
.kit-font-m {
    font-size: 16px;
}

.kit-font-small,
.kit-font-s {
    font-size: 13px;
}

.kit-font-bold {
    font-weight: bold;
}

.kit-font-normal {
    font-weight: normal;
}

.kit-font-thin {
    font-weight: lighter;
}

/* text */

.kit-text-l {
    text-align: left;
}

.kit-text-c {
    text-align: center;
}

.kit-text-r {
    text-align: right;
}

.kit-text-upper {
    text-transform: uppercase;
}

.kit-text-lower {
    text-transform: lowercase;
}

.kit-text-capitalize {
    text-transform: capitalize;
}

.kit-text-zenkaku {
    text-transform: full-width;
}

.kit-line-xl {
    line-height: 2.75;
}

.kit-line-l {
    line-height: 2;
}

.kit-line-m {
    line-height: 1.5;
}

.kit-line-s {
    line-height: 1;
}

/* colors */

.orange {
    background: #ffa500;
}

.kit-button-alt.orange,
kit-button-alt.orange {
    background: #ffffff;
    color: #ffa500;
    border-color: #ffa500;
}

.kit-button-alt.orange:hover,
kit-button-alt.orange:hover {
    color: #ffffff;
    background: #ffa500;
}

.dodgerblue {
    background: #1e90ff;
}

.kit-button-alt.dodgerblue,
kit-button-alt.dodgerblue {
    background: #ffffff;
    color: #1e90ff;
    border-color: #1e90ff;
}

.kit-button-alt.dodgerblue:hover,
kit-button-alt.dodgerblue:hover {
    color: #ffffff;
    background: #1e90ff;
}

.deeppink {
    background: #ff1493;
}

.kit-button-alt.deeppink,
kit-button-alt.deeppink {
    background: #ffffff;
    color: #ff1493;
    border-color: #ff1493;
}

.kit-button-alt.deeppink:hover,
kit-button-alt.deeppink:hover {
    color: #ffffff;
    background: #ff1493;
}

.limegreen {
    background: #32cd32;
}

.kit-button-alt.limegreen,
kit-button-alt.limegreen {
    background: #ffffff;
    color: #32cd32;
    border-color: #32cd32;
}

.kit-button-alt.limegreen:hover,
kit-button-alt.limegreen:hover {
    color: #ffffff;
    background: #32cd32;
}

.crimson {
    background: #dc143c;
}

.kit-button-alt.crimson,
kit-button-alt.crimson {
    background: #ffffff;
    color: #dc143c;
    border-color: #dc143c;
}

.kit-button-alt.crimson:hover,
kit-button-alt.crimson:hover {
    color: #ffffff;
    background: #dc143c;
}

.green {
    background: #008000;
}

.kit-button-alt.green,
kit-button-alt.green {
    background: #ffffff;
    color: #008000;
    border-color: #008000;
}

.kit-button-alt.green:hover,
kit-button-alt.green:hover {
    color: #ffffff;
    background: #008000;
}

.silver {
    color: #303030;
    text-shadow: none;
    background: #ebebeb;
}

.kit-button-alt.silver,
kit-button-alt.silver {
    background: rgba(0,0,0,.8);
    color: #ebebeb;
    border-color: #ebebeb;
}

.kit-button-alt.silver:hover,
kit-button-alt.silver:hover {
    color: #000000;
    background: #ebebeb;
}

.black {
    background: #353535;
}

.kit-button-alt.black,
kit-button-alt.black {
    background: #ffffff;
    color: #353535;
    border-color: #353535;
}

.kit-button-alt.black:hover,
kit-button-alt.black:hover {
    color: #ffffff;
    background: #353535;
}

/* other function */

.kit-noevents {
    pointer-events: none;
}

.kit-init {
    all: initial;
}