alpaca/src/css/alpaca-bootstrap.css

Alpaca provides the easiest and fastest way to generate interactive forms for the web and mobile devices. It runs simply as HTML5 or more elaborately using Bootstrap, jQuery Mobile or jQuery UI. Alpaca uses Handlebars to process JSON schema and provide

.alpaca-container-label
{
    margin-top: 20px;
}

legend.alpaca-container-label
{
    margin-top: 0px;
}

.alpaca-array-toolbar.alpaca-array-toolbar-position-top
{
    margin-bottom: 10px;
}

.alpaca-array-toolbar.alpaca-array-toolbar-position-bottom
{
    margin-top: 10px;
}

.alpaca-array-actionbar
{
    /*height: 40px;*/
}

.alpaca-array-actionbar.alpaca-array-actionbar-top
{
    padding-bottom: 10px;
}

.alpaca-array-actionbar.alpaca-array-actionbar-bottom
{
    padding-top: 10px;
}

.alpaca-array-actionbar.alpaca-array-actionbar-left
{
    padding-right: 10px;
}

.alpaca-array-actionbar.alpaca-array-actionbar-right
{
    padding-left: 10px;
}

.alpaca-array-actionbar, .alpaca-array-actionbar.btn-group
{
    width: 100%;
}

.alpaca-array-item-move
{
    width: 34px; 
    height: 34px;
    padding: 10px;
}

.alpaca-array-item-flex-container
{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.alpaca-array-item-flex-1
{
    flex-grow: 1;
}

.alpaca-array-item-move:hover
{
    cursor: move;
}

.alpaca-array-actionbar
{
    overflow: hidden;
}

.alpaca-field-object
{
    border: 1px #eee solid;
    border-radius: 4px;
    padding: 10px;
}

.alpaca-display h3
{
    margin-top: 0px;
}

/*
.alpaca-field-object > .alpaca-container.alpaca-container-has-items
{
    border: 1px #eee solid;
    border-radius: 4px;
    padding: 10px;
}
*/

.alpaca-field-array
{
    border: 1px #eee solid;
    border-radius: 4px;
    padding: 10px;
}

/*
.alpaca-field-array > .alpaca-container.alpaca-container-has-items
{
    border: 1px #eee solid;
    border-radius: 4px;
    padding: 10px;
}
*/

.alpaca-control-buttons-container
{
    margin-top: 10px;
}

.alpaca-container-item > .alpaca-container > .alpaca-field-object
{
    border: 0px;
}

.alpaca-form-buttons-container
{
    margin-top: 10px;
    text-align: right;
}

.alpaca-container > .form-group
{
    margin-left: 0px;
    margin-right: 0px;
}

.alpaca-field-hidden
{
    display:none;
}

.alpaca-field-object.alpaca-top
{
    border: 0px;
}

.alpaca-field-array.alpaca-top
{
    border: 0px;
}

.alpaca-container-item:not(:first-child)
{
    margin-top: 10px;
}

.alpaca-container .alpaca-container-item:last-child
{
    margin-bottom: 0px;
}

.alpaca-field-object.alpaca-top .alpaca-container
{
    border: 0px;
}

.alpaca-field-select .btn-group
{
    display:block;
}

.alpaca-field-select .btn-group button.multiselect
{
    float: none;
}

/*
.bootstrap-timepicker-widget table td input
{
    width: 50px !important;
}
*/




/** FIElDS **/
.alpaca-field.alpaca-field-upload .fileupload-active-zone
{
    margin-top: 50px;
    margin-bottom: 50px;
}
.alpaca-field.alpaca-field-upload .template-download TD.error
{
    color: red;
    word-break: break-all;
}
.alpaca-field.alpaca-field-upload .template-download TD.error .label
{
    color: red;
    font-size: 16px;
    text-align: left;
}

.alpaca-field.alpaca-field-upload .template-upload TD.error
{
    color: red;
    word-break: break-all;
}
.alpaca-field.alpaca-field-upload .template-upload TD.error .label
{
    color: red;
    font-size: 16px;
    text-align: left;
}

.alpaca-field.alpaca-field-address .alpaca-field-address-mapcanvas
{
    height: 250px;
}

.alpaca-field.alpaca-field-image .alpaca-image-display
{
    margin-top: 20px;
}

.alpaca-field-text-max-length-indicator
{
    color: #aaa;
}

.alpaca-field-text-max-length-indicator.err
{
    color: #aa0000;
}



/** WIZARD **/

.alpaca-wizard .alpaca-wizard-nav li .chevron
{
    position: absolute;
    top: 0;
    right: -14px;
    display: block;
    border: 27px solid transparent;
    border-right: 0;
    border-left: 14px solid #d4d4d4;
}

.alpaca-wizard .alpaca-wizard-nav li .chevron:before
{
    position: absolute;
    top: -27px;
    right: 1px;
    display: block;
    border: 27px solid transparent;
    border-right: 0;
    border-left: 14px solid #fcfcfc;
    content: "";
}

.alpaca-wizard .alpaca-wizard-nav li div.holder
{
    padding-left: 30px;
    padding-right: 20px;
    text-align: center;
    padding-top: 6px;
    padding-bottom: 6px;
}

.alpaca-wizard .alpaca-wizard-nav li:first-child div.holder
{
    padding-left: 10px;
}

.alpaca-wizard .alpaca-wizard-nav li div.holder div.title
{
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.alpaca-wizard .alpaca-wizard-nav li div.holder div.description
{
    color: #aaa;
    font-size: 12px;
}

.alpaca-wizard .alpaca-wizard-nav li.completed div.holder div.title
{
    color: #333;
}

.alpaca-wizard .alpaca-wizard-nav li.completed div.holder div.description
{
    color: #333;
}

.alpaca-wizard .alpaca-wizard-nav li.visited:hover
{
    cursor: pointer;
}

.alpaca-wizard .alpaca-wizard-nav li.visited div.holder div.title
{
}

.alpaca-wizard .alpaca-wizard-nav li.visited div.holder div.description
{
}

.alpaca-wizard .alpaca-wizard-nav li.active:hover
{
    cursor: default;
}

.alpaca-wizard .alpaca-wizard-nav li.active div.holder div.title
{
    color: #206199;
}

.alpaca-wizard .alpaca-wizard-nav li.active div.holder div.description
{
    color: #206199;
}

.alpaca-wizard .alpaca-wizard-nav li.disabled div.holder div.title
{
    color: #ccc;
}

.alpaca-wizard .alpaca-wizard-nav li.disabled div.holder div.description
{
    color: #ccc;
}

.alpaca-wizard .alpaca-wizard-nav .alpaca-wizard-back
{
    background-color: #fcfcfc;
}

.alpaca-wizard .alpaca-wizard-buttons
{
    margin-top: 20px;
}

.alpaca-wizard .alpaca-wizard-progress-bar
{
    margin-top: 20px;
}

.alpaca-control.disabled label
{
    color: #aaa;
}

.alpaca-required-indicator
{
    padding-left: 5px;
    font-style: italic;
    font-weight: 200;
    color: #888;
}