/**
 * HTML
 */
html {
    /* Height */
    height: 100%;

    /* Width */
    width: 100%;

    /* Flex */
    display: flex;
    display: -moz-flex;
    display: -webkit-flex;

    flex-direction: row;
    -webkit-flex-direction: row;

    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;

    justify-content: center; /* Horizontal align */
    -webkit-justify-content: center;
}

/**
 * Body
 */
body {
    /* Width */
    width: 100%;
    max-width: 640px;

    /* Padding */
    padding: 20px;

    /* User */
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

/**
 * HTML & Body
 */
html, body {
    /* Width */
    min-width: 512px;
}

/**
 * Textarea
 */
textarea {
    /* Height */
    height: 12em !important;

    /* Resize */
    resize: none !important;
}

/**
 * Checkboxes
 */
.custom-control-label,
.badge {
    /* Cursor */
    cursor: pointer;
}

/**
 * Range. Length.
 * For `Firefox`
 */
#length::-moz-range-thumb,
#length::-moz-range-track {
    /* Cursor */
    cursor: move;
}

/**
 * Range. Length.
 * For `WebKit`
 */
#length::-webkit-slider-thumb,
#length::-webkit-slider-runnable-track,
#length::-webkit-slider-container {
    /* Cursor */
    cursor: move;
}

/**
 * Range. Length.
 * For other
 */
#length,
#length:focus {
    /* Cursor */
    cursor: move !important;
}

/**
 * Alignment.
 * Center
 */
body > .center {
    /* Flex */
    display: flex;
    display: -moz-flex;
    display: -webkit-flex;

    flex-direction: row;
    -webkit-flex-direction: row;

    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;

    justify-content: center; /* Horizontal align */
    -webkit-justify-content: center;

    align-items: center; /* Vertical align */
    -webkit-align-items: center;
}

/**
 * Alignment.
 * Space between
 */
body > .space-between {
    /* Flex */
    display: flex;
    display: -moz-flex;
    display: -webkit-flex;

    flex-direction: row;
    -webkit-flex-direction: row;

    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;

    justify-content: space-between; /* Horizontal align */
    -webkit-justify-content: space-between;

    align-items: center; /* Vertical align */
    -webkit-align-items: center;
}

/**
 * Cursor
 */
#lengthValue {
    cursor: default;
}

/**
 * Width
 */
.width-40 {
    /* Width */
    min-width: 40px;
    width: 40px;
    max-width: 40px;
}