form {
    width: 100%;
    margin: 0;
    border: 0;
    padding: 0;
}

.form-group{
    background: none;
    position: relative;
    float: left;
}

.form-field{
    background: none;
    position: relative;
    float: left;
    padding: 1em 0 2px;
    display: block;
}

.form-imput {
    background: none;
    position: relative;
    padding: .375em .125em 0 .125em;
    overflow: hidden;
}

.form-field.sample{
    padding: 0 2px;
}

.form-field.sample .form-imput{
    padding: .1rem 0 .375rem 0;
}

.form-imput-menu {
    position: relative;
    float: right;
    border: 0;
    margin: 2px 2px 0;
    padding-top: 4px;
    box-sizing: border-box !important;
    overflow: hidden;
    height: 34px;
}

.imput-result {
    position: relative;
    font-size: 16px;
    vertical-align: middle;
    outline: none;
    border-width: 1px;
    border-style: solid;
    padding: 8px 8px 4px;
    width: 100%;
    height: 30px;
    border-radius: 5px;
    -ms-border-radius: 5px;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
}

.form-imput ~ i {
    position: absolute;
    top: 6px;
    right: 8px;
    display: block;
    border-style: solid;
    max-width: 100%;
    font-size: 10px;
    vertical-align: middle;
    font-weight: 500;
    font-style: normal;
    padding:  0;
    outline: none;
    margin-left: 8px;
    text-decoration: none;
    line-height: 11px;
    text-align: left !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--red);
    -ms-user-select: none;
    user-select: none;
}

.form-imput button[class*='btn'] {
    position: absolute;
    bottom: 0;
    color: #383838;
    border: 0;
    width: 30px;
    height: 30px;
    background-color: var(--global-palette8);
}

.form-imput .btn-minus {
    left: 0;
    border-radius: 5px 0 0 5px;
}
.form-imput .btn-plus {
    right: 0;
    border-radius: 0 5px 5px 0;
}

.form-imput .btn-minus:before, .form-imput .btn-plus:before {
    position: absolute;
    left: calc(50% - 6px);
    top: calc(50% - 2px);
    width: 12px;
    height: 4px;
    content: '';
    border-radius: 1px;
    background-color: var(--global-palette0);
}
.form-imput .btn-plus:after {
    position: absolute;
    left: calc(50% - 2px);
    top: calc(50% - 6px);
    width: 4px;
    height: 12px;
    content: '';
    border-radius: 1px;
    background-color: var(--global-palette0);
}

.form-imput .btn-minus[disabled]:before, .form-imput .btn-plus[disabled]:before {
    background-color: var(--gray) !important;
}
.form-imput .btn-plus[disabled]:after {
    background-color: var(--gray) !important;
}


.form-imput-check {
    position: relative;
    float: right;
    border: 0;
    margin: 2px 2px 0;
    padding-top: 4px;
    box-sizing: border-box !important;
    overflow: hidden;
    min-height: 34px;
}

.floaticon {
    position: absolute;
    z-index: 10;
    top: 1rem;
    right: 1rem;
}


/*.imput-result.number {
    width: calc(100% - 64px);
    min-width: 32px;
    display: inline;
}*/


.imput-result.clean{
    background: none;
    border: 0;
    height: auto;
    min-height: 30px;
    white-space: normal;
}

.imput-result.long-text{
    overflow: hidden;
    height: auto;
    min-height: 30px;
    white-space: normal;
    resize: unset;
    line-height: 24px;
}

.imput-result.long-text-scroll{
    overflow-y: scroll;
    min-height: 30px;
    max-height: 100px;
    white-space: normal;
    resize: unset;
    line-height: 24px;
}


.imput-result ~ label {
    position: absolute;
    top: 0;
    display: block;
    border-width: 1px;
    border-style: solid;
    max-width: calc(100% - 34px);
    font-size: 9px;
    vertical-align: middle;
    font-weight: 500;
    padding:  1px 6px 1px 6px;
    outline: none;
    margin-left: 8px;
    text-decoration: none;
    line-height: 9px;
    border-radius: 6px;
    text-align: left !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.right-label {
    margin-right: 8px;
    right: 0;
}

.imput-result.dashed ~ label {
    background-color: #fff
}

.imput-result.clean ~ label {
    background: none;
    padding:  1px 1px 1px 1px;
    border: 0;
}

.input-right-icon {
    position: absolute;
    right: .8em;
    top: 1.1em;
}

.group-00{ width: 100%; }
.group-20{ width:  20%; }
.group-25{ width:  25%; }
.group-30{ width:  30%; }
.group-33{ width:  33.3333333333%; }
.group-40{ width:  40%; }
.group-45{ width:  45%; }
.group-50{ width:  50%; }
.group-55{ width:  55%; }
.group-60{ width:  60%; }
.group-66{ width:  66.6666666666%; }
.group-70{ width:  70%; }
.group-75{ width:  75%; }
.group-80{ width:  80%; }

.fix-02, .group-fix-02 {  width:  32px; }
.fix-03, .group-fix-03 {  width:  48px; }
.fix-04, .group-fix-04 {  width:  64px; }
.fix-05, .group-fix-05 {  width:  80px; }
.fix-06, .group-fix-06 {  width:  96px; }
.fix-07, .group-fix-07 {  width: 112px; }
.fix-08, .group-fix-08 {  width: 128px; }
.fix-09, .group-fix-09 {  width: 144px; }
.fix-10, .group-fix-10 {  width: 160px; }
.fix-11, .group-fix-11 {  width: 176px; }
.fix-12, .group-fix-12 {  width: 192px; }
.fix-13, .group-fix-13 {  width: 208px; }
.fix-14, .group-fix-14 {  width: 224px; }
.fix-15, .group-fix-15 {  width: 240px; }
.fix-16, .group-fix-16 {  width: 256px; }
.fix-18, .group-fix-18 {  width: 288px; }
.fix-19, .group-fix-19 {  width: 304px; }
.fix-20, .group-fix-20 {  width: 320px; }
.fix-22, .group-fix-22 {  width: 352px; }
.fix-23, .group-fix-23 {  width: 368px; }
.fix-24, .group-fix-24 {  width: 384px; }
.fix-26, .group-fix-26 {  width: 416px; }
.fix-28, .group-fix-28 {  width: 448px; }
.fix-30, .group-fix-30 {  width: 480px; }
.fix-32, .group-fix-32 {  width: 512px; }
.fix-34, .group-fix-34 {  width: 544px; }
.fix-35, .group-fix-35 {  width: 560px; }
.fix-36, .group-fix-36 {  width: 576px; }
.fix-38, .group-fix-38 {  width: 608px; }
.fix-40, .group-fix-40 {  width: 640px; }

.flex-02, .group-flex-02 { width: calc(100% -  32px); }
.flex-03, .group-flex-03 { width: calc(100% -  48px); }
.flex-04, .group-flex-04 { width: calc(100% -  64px); }
.flex-05, .group-flex-05 { width: calc(100% -  80px); }
.flex-06, .group-flex-06 { width: calc(100% -  96px); }
.flex-07, .group-flex-07 { width: calc(100% - 112px); }
.flex-08, .group-flex-08 { width: calc(100% - 128px); }
.flex-09, .group-flex-09 { width: calc(100% - 144px); }
.flex-10, .group-flex-10 { width: calc(100% - 160px); }
.flex-11, .group-flex-11 { width: calc(100% - 176px); }
.flex-12, .group-flex-12 { width: calc(100% - 192px); }
.flex-13, .group-flex-13 { width: calc(100% - 208px); }
.flex-14, .group-flex-14 { width: calc(100% - 224px); }
.flex-15, .group-flex-15 { width: calc(100% - 240px); }
.flex-16, .group-flex-16 { width: calc(100% - 256px); }
.flex-17, .group-flex-17 { width: calc(100% - 272px); }
.flex-18, .group-flex-18 { width: calc(100% - 288px); }
.flex-19, .group-flex-19 { width: calc(100% - 304px); }
.flex-20, .group-flex-20 { width: calc(100% - 320px); }
.flex-21, .group-flex-21 { width: calc(100% - 336px); }
.flex-22, .group-flex-22 { width: calc(100% - 352px); }
.flex-23, .group-flex-23 { width: calc(100% - 368px); }
.flex-24, .group-flex-24 { width: calc(100% - 384px); }
.flex-25, .group-flex-25 { width: calc(100% - 400px); }
.flex-26, .group-flex-26 { width: calc(100% - 416px); }
.flex-27, .group-flex-27 { width: calc(100% - 432px); }
.flex-28, .group-flex-28 { width: calc(100% - 448px); }
.flex-29, .group-flex-29 { width: calc(100% - 464px); }
.flex-30, .group-flex-30 { width: calc(100% - 480px); }
.flex-31, .group-flex-31 { width: calc(100% - 496px); }
.flex-32, .group-flex-32 { width: calc(100% - 512px); }
.flex-33, .group-flex-33 { width: calc(100% - 528px); }
.flex-34, .group-flex-34 { width: calc(100% - 544px); }
.flex-35, .group-flex-35 { width: calc(100% - 560px); }
.flex-36, .group-flex-36 { width: calc(100% - 576px); }
.flex-37, .group-flex-37 { width: calc(100% - 592px); }
.flex-38, .group-flex-38 { width: calc(100% - 608px); }
.flex-39, .group-flex-39 { width: calc(100% - 624px); }
.flex-40, .group-flex-40 { width: calc(100% - 640px); }
.flex-41, .group-flex-41 { width: calc(100% - 656px); }
.flex-42, .group-flex-42 { width: calc(100% - 672px); }
.flex-43, .group-flex-43 { width: calc(100% - 688px); }
.flex-44, .group-flex-44 { width: calc(100% - 704px); }
.flex-45, .group-flex-45 { width: calc(100% - 720px); }
.flex-46, .group-flex-46 { width: calc(100% - 736px); }
.flex-47, .group-flex-47 { width: calc(100% - 752px); }
.flex-48, .group-flex-48 { width: calc(100% - 768px); }

.fluid-05 { width: 5%; }
.fluid-08 { width: 8.3333333333%; }
.fluid-10 { width: 10%; }
.fluid-12 { width: 12.5%; }
.fluid-14 { width: 14.2857142857%; }
.fluid-15 { width: 15%; }
.fluid-16 { width: 16.6666666666%; }
.fluid-20 { width: 20%; }
.fluid-22 { width: 22%; }
.fluid-24 { width: 24%; }
.fluid-25 { width: 25%; }
.fluid-30 { width: 30%; }
.fluid-33 { width: 33.3333333333%; }
.fluid-34 { width: 34%; }
.fluid-35 { width: 35%; }
.fluid-40 { width: 40%; }
.fluid-45 { width: 45%; }
.fluid-50 { width: 50%; }
.fluid-60 { width: 60%; }
.fluid-66 { width: 66.6666666666%; }
.fluid-70 { width: 70%; }
.fluid-75 { width: 75%; }
.fluid-78 { width: 78%; }
.fluid-80 { width: 80%; }
.fluid-85 { width: 85%; }
.fluid-90 { width: 90%; }
.fluid-00 { width:100%; }

.size-12{ width: 100%; }

@media all and (max-width: 1024px),
only screen and (max-width: 1024px){

    [class*='group-']{ width: 100%; }

}


@media all and (max-width: 640px),
only screen and (max-width: 640px){

    [class*='fix-'], [class*='flex-'], [class*='fluid-']{ width: 100%; }

}