.ui-row { box-sizing: border-box; line-height: normal; }
.ui-row::after { clear: both; content: " "; display: block; }

.ui-col { box-sizing: border-box; float: left; height: 100%; position: relative; }

.ui-mt { margin-top: 1em; }
.ui-mt2x { margin-top: 2em; }
.ui-mb { margin-bottom: 1em; }
.ui-mb2x { margin-bottom: 2em; }
.ui-mr { margin-right: 1em; }
.ui-mr2x { margin-right: 2em; }

.ui-pr { padding-right: 15px; }
.ui-pr2x { padding-right: 30px; }
.ui-pl { padding-left: 15px; }
.ui-pl2x { padding-left: 30px; }
.ui-pt { padding-top: 15px; }
.ui-pt2x { padding-top: 30px; }
.ui-pb { padding-bottom: 15px; }
.ui-pb2x { padding-bottom: 30px; }

@media (max-width: 767px) {
    .ui-pr, .ui-pr2x { padding-right: 0; }
    .ui-pl, .ui-pl2x { padding-left: 0; }
}

.ui-label { position: absolute; top: -0.6em; left: 0.5em; background-color: #ffffff; padding: 0 0.3em; color: #999999; font-size: 0.9em; z-index: 1; }
.ui-required-star { color: #F05517; font-weight: bold; }

.ui-center { text-align: center; }
.ui-left { text-align: left; }
.ui-right { text-align: right; }


.ui-w1 { width: 8.3333%; }
.ui-w2 { width: 16.6666%; }
.ui-w3 { width: 25%; }
.ui-w4 { width: 33.3333%; }
.ui-w5 { width: 41.6666%; }
.ui-w6 { width: 50%; }
.ui-w7 { width: 58.3333%; }
.ui-w8 { width: 66.6666%; }
.ui-w9 { width: 75%; }
.ui-w10 { width: 83.3333%; }
.ui-w11 { width: 91.6666%; }
.ui-w12 { width: 100%; }

@media (max-width: 767px) {
    .ui-w1,
    .ui-w2,
    .ui-w3,
    .ui-w4,
    .ui-w5,
    .ui-w6,
    .ui-w7,
    .ui-w8,
    .ui-w9,
    .ui-w10,
    .ui-w11,
    .ui-12 {
        width: 100%;
    }
}

.ui-messagebox { text-align: center; border-radius: 4px; overflow: hidden; margin-bottom: 2em; }
.ui-error, .ui-ok, .ui-notice { padding: 1em; font-size: 0.9em; }
.ui-error { background-color: #D61604; color: #ffffff; }
.ui-notice { background-color: #FFF2C1; color: #444444; }
.ui-ok { background-color: #0DAD00; color: #ffffff; }
.ui-error div { padding: 0.4em 0; line-height: 1em; }

.ui-textbox, .ui-select, .ui-textarea { box-sizing: border-box; width: 100%; padding: 0.6em; font-family: inherit; color: #222222; border-radius: 2px; font-size: 1em; outline: none; border: 1px solid #C3C3C3; background-color: #ffffff; height: 2.75em; margin: 0; }
.ui-textbox:focus, .ui-select:focus, .ui-textarea:focus { border-color: #bbbbbb; box-shadow: 0 0 0 1px #bbbbbb inset; }
.ui-textarea { min-height: 100px; resize: vertical; }
.ui-textbox[disabled], .ui-select[disabled], .ui-textarea[disabled] { background-color: #fafafa; color: #999999; }

.ui-btn { background-color: #CC4106; border: 1px solid #CC4106; box-sizing: border-box; font-family: inherit; border-radius: 2px; font-size: 1em; padding: 8px; cursor: pointer; outline: none; color: #ffffff; transition: background-color 0.2s ease-out 0s, border-color 0.2s ease-out 0s;  display: inline-block; text-align: center; line-height: normal; }
.ui-btn:hover { background-color: #EB994D; border: 1px solid #EB994D; color: #ffffff; }
.ui-btn[disabled] { background-color: #aaaaaa; border-color: #aaaaaa; }

.ui-btn-2 { background-color: #105D8B; border: 1px solid #105D8B; box-sizing: border-box; font-family: inherit; border-radius: 2px; font-size: 1em; padding: 8px; cursor: pointer; outline: none; color: #ffffff; transition: background-color 0.2s ease-out 0s, border-color 0.2s ease-out 0s;  display: inline-block; text-align: center; line-height: normal; }
.ui-btn-2:hover { background-color: #1C76AD; border: 1px solid #1C76AD; color: #ffffff; }
.ui-btn-2[disabled] { background-color: #aaaaaa; border-color: #aaaaaa; }


.ui-huge-btn { font-size: 1.4em; width: 300px; line-height: 3em; }


.ui-checkbox { position: absolute; display: none; pointer-events: none; }
.ui-checkbox + span { position: relative; padding-left: 35px; cursor: pointer; user-select: none; }
.ui-checkbox + span::before, .ui-checkbox + span::after { transition: border 0.2s, background-color 0.2s, width 0.2s 0.1s, height 0.2s 0.1s, top 0.2s 0.1s, left 0.2s 0.1s; z-index: 1; position: absolute; content: '';  }
.ui-checkbox + span::after { border-top: 2px solid transparent; border-left: 2px solid transparent; border-right: 2px solid #fff; border-bottom: 2px solid #fff; -webkit-transform: rotateZ(37deg); transform: rotateZ(37deg); width: 0; height: 0; left: 10px; top: 10px; visibility: hidden; }
.ui-checkbox + span::before { border: 2px solid #cccccc; width: 20px; height: 20px; border-radius: 2px; left: 0; top: -0.3em; background-color: transparent; }
.ui-checkbox:checked + span::before { border: 2px solid #105D8B; background-color: #105D8B; }
.ui-checkbox:checked + span::after { top: -1px; left: 1px; width: 7px; height: 12px; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; visibility: visible; }
.ui-checkbox[disabled] + span::before { background-color: #cccccc; border-color: #cccccc; }




.ui-file { border: 2px dashed #999999; border-radius: 6px; height: 36px; height: 100px; line-height: 100px; overflow: hidden; text-align: center; box-sizing: border-box; position: relative; cursor: pointer; box-shadow: 0 0 30px rgba(0,0,0,0.05) inset; margin: 20px 0 20px 0; }
.ui-file:hover { background: #F5F7FA; }
.ui-file .caption { color: #999999; font-size: 12px; height: 100%; }
.ui-file input { cursor: pointer; font-size: 1000px; margin-top: -200px; opacity: 0; width: 100%; height: 1000px; }