/* used for color picker; selectable values */
.squareSelection {
    width: 15px;
    height: 15px;
    border-radius: 3px;
    margin: 5px;
    float: left;
}

/* used for color picker; selected value */
.squareResult {
    width: 15px;
    height: 15px;
    border-radius: 3px;
    float: left;
}

/* used for color picker; selected value */
.squareResultSearch {
    width: 15px;
    height: 15px;
    border-radius: 3px;
    float: left;
    border: solid 1px #cacaca;
    position: relative;
    left: 35%;
}

.squareDetails {
    width: 15px;
    height: 15px;
    border-radius: 3px;
    float: left;
    border: solid 1px #cacaca;
}

/* used for color picker */
.colorPickerSpan {
    margin: 10px;
}

/* used for select2 'isCompleted' within DataTables*/
.isCompletedDtMargin {
    text-align: center;
    margin: 7px;
    padding-left: 10px;
}

/* Bootstrap Wells without rounded border */
.well {
    /*fit to content*/
    display: inline-block;

    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;

    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}

/* Bootstrap Wells rounded border */
.well-lg {
    padding: 24px;
}

/* change height of input fields so it looks like select2 dropdown menu */
.myInputField {
    /*width: 100%;*/
    height: 24px;
}

.myInputField-lg {
    width: 100%;
}

/* textarea should not be resizeable */
.myTextarea {
    margin: 0px !important;
    resize: none !important;
    padding: 0px !important;
    width: 50%;
}

/* used for displaying a colored square beside color name */
.colorSpan {
    margin: 3px;
}

/* appearance of delete box */
.deleteConfirmBoxStyle {
    border: 2px solid #009DCE;
    padding: 5px;
    margin: 20px;
    max-width: 200px;
}

/* appearance of delete box with warning style */
.adminPanelDeleteConfirmBoxStyle {
    border: 2px solid orange;
    padding: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    max-width: 300px;
}

.myError {
    display: inline;
}

.div-side-by-side {
    float: left;
    margin-left: 10px;
}

/************************/
/*overriding jQuery UI properties */
/*change font size of jQuery UI Widget (needed for Dialog)*/
.ui-widget {
    font-size: 12px;
}

/*own dialog style with 'warn' style */
.warn .ui-widget-header {
    background: orange;
    border: none;
}

.warn .ui-widget-content {
    border: none;
}

/*warning box like sakai's success and error message box*/
.myMessageWarn {
    background-color: #FFEDBD;
    border: 1px solid orange;
    padding-left: 10px;
    padding-right: 10px;
    max-width: 75%;
}

.myMessageWarnIcon {
    padding: 3px;
}