/*
 * DASHBOARD Form style.
 * Shared with dashboard and portal.
 */

/*****************
 *  Base
 *****************/

.dashboard .form { }
.dashboard .form.generated { }
.dashboard .form-block { }
.dashboard .form-column { }
.dashboard .form-field { }
.dashboard .form-field.ratio { display:inline-block; vertical-align: top; }



.dashboard .formRow.buttonSelector { zoom: 1; }

.dashboard .formRow.buttonSelector:before,
.dashboard .uploadRow:before,
.dashboard .formRow.buttonSelector:after,
.dashboard .uploadRow:after { content: "\0020"; display: block; height: 0; overflow: hidden; }

.dashboard .formRow.buttonSelector:after,
.dashboard .uploadRow:after { clear: both; }

.dashboard input[type=text],
.dashboard input[type=password],
.dashboard input[type=search],
.dashboard textarea,
.dashboard select,
.dashboard .uploadRow input[type=file],
.dashboard input[type=button],
.dashboard input[type=submit],
.dashboard #content .button,
.dashboard .paginate_button,
.dashboard .paginate_active,
.dashboard .formRow .help .tip,
.dashboard .edit .formRow .help .tip { -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ }

.dashboard .fieldgroup .header a.toggle,
.dashboard .fieldgroup .header .expand > a { display: block; background-image: url(/Environments/Dashboard/Base/Sprites/Sprite.png); background-repeat: no-repeat; }

.dashboard :focus { outline: none; }

/*****************
 *  Input | Textarea | Select
 *****************/
.dashboard .formRow input[type=text],
.dashboard .formRow input[type=search],
.dashboard .formRow input[type=password],
.dashboard .formRow input[type=number],
.dashboard .formRow textarea { background-color: #fbfbfb; /*border: solid 1px #f2f2f2;*/ border: solid 1px #c4c4c4; padding: 0.5em 0.5em; display: block; width: 100%; color: #000; }
.dashboard .formRow input[type=number] {width: -moz-calc(100% - 26px);width: -webkit-calc(100% - 26px);width: -o-calc(100% - 26px);width: calc(100% - 26px); }
.dashboard input[type=text]:focus,
.dashboard input[type=search]:focus,
.dashboard input[type=password]:focus,
.dashboard input[type=number]:focus,
.dashboard textarea:focus { background-color: white; }
.dashboard textarea { /*height: 6em;*/ }
.dashboard .formRow select { /*background-color: #f2f2f2;*/ background-color: #fbfbfb; border: solid 1px #f2f2f2; /*padding: 0.75em 1em;*/ padding: 0.5em 0.75em 0.5em 0.75em; display: block; width: 100%; color: #5a5a5a; }

.show-password { float: right; margin-right: 15px; margin-top: -25px; position: relative; z-index: 2; cursor: pointer; }

/*****************
 *  Validation
 *****************/
.dashboard #content .validationError input[type=text],
.dashboard #content .validationError input[type=password] { background-color: #ff3636; border-color: #ff3636; color: #fbfbfb; }
.dashboard #content .validationError input::-webkit-input-placeholder { color: #fbfbfb; }
.dashboard #content .validationError input:-moz-placeholder { color: #fbfbfb; opacity: 1; /* FF sets opacity to 0.54 by default */ }
.dashboard #content .validationError input:-ms-input-placeholder { color: #fbfbfb; }
.dashboard #content .validationError label { color: #ff3636; }

/*****************
 *  Form Row
 *****************/
.dashboard .formRow { padding-top: 1em; padding-right: 1.5em; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.dashboard.app-builder .formRow { padding-top: 10px; padding-left: 5px; padding-right: 5px; }
.dashboard .formRow.formCombine { padding-top: 0; padding-left: 0; padding-right: 0; }
.dashboard #content .formRow.editorRow { width: 100%; }
.dashboard .formRow.buttonSelector input[type=text] { width: 72%; float: left; margin-right: 3%; }
.dashboard .formRow.buttonSelector input[type=button] { margin-top: 0.4em; width: 25%; }

/*****************
 *  Button Row
 *****************/
.dashboard .buttonRow { clear: both; /* padding: 1em 0 1.5em 0; */ padding: 1.5em 1.5em 0 1.5em; }
.dashboard #content .buttonRow { min-height: 0; }
.dashboard .buttonRow.cols > .col > .col { padding-left: 1.5em; }
.dashboard .buttonRow > a.button { float: left; margin-left: 0px; }
.dashboard .buttonRow > .button { float: right; margin-left: 10px; }
.dashboard .buttonRow.cols > .col { /* @extend %rightPadding; */ }

@media screen and (max-width: 1024px) {
    .dashboard .buttonRow.split2 > .col1 { display: none; }
    .dashboard .buttonRow.split2 > .col2 { width: 100%; }
}

@media screen and (max-width: 1024px) {
    .dashboard .buttonRow.split3 > .col1 { display: none; }
    .dashboard .buttonRow.split3 > .col2 { width: 25%; }
    .dashboard .buttonRow.split3 > .col3 { width: 75%; }
}

/*****************
 *  Upload Row
 *****************/
.dashboard .uploadRow { zoom: 1; }
.dashboard .uploadRow input[type=file] { width: 75%; margin-right: 5%; float: left; background-color: #fbfbfb; border: solid 1px #f2f2f2; padding: 0.75em 1em; display: block; }
.dashboard .uploadRow input[type=button] { width: 20%; }

/*****************
 *  Button
 *****************/
.dashboard .button { background-color: #fd9d27; display: inline-block; /*min-width: 150px;*/ max-width: 250px; text-align:center; font-weight: normal; text-decoration: none; /*line-height: 1;*/ vertical-align: top; -webkit-transition: all 0.3s ease; -moz-transition: all 500ms ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; cursor:pointer;}
.dashboard .button.min { min-width: 150px; }
.dashboard .button { color: white; padding: 8px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.dashboard button.button,
.dashboard input.button { border:none; }
.dashboard a.button { display:block; }
.dashboard .button.left {float: left; }

.dashboard .button:hover,
.dashboard .paginate_button:hover,
.dashboard .paginate_active:hover { /*opacity: 0.6;*/ background-color: #ea881f; -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; color: white; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; }

.dashboard .paginate_button,
.dashboard .paginate_active { min-width: initial !important; color: #5a5a5a; cursor: pointer; }

.dashboard input[type=button]:hover,
.dashboard input[type=submit]:hover,
.dashboard #content .button:hover,
.dashboard .paginate_button:hover,
.dashboard .paginate_active:hover { border-color: #5a5a5a; background-color: #5a5a5a; color: white; }

.dashboard button.cancel,
.dashboard input[type=button].cancel,
.dashboard input[type=submit].cancel,
.dashboard #content .button.cancel,
.dashboard .paginate_button.cancel,
.dashboard .paginate_active.cancel { background-color: #fbfbfb; color: #a8a8a8; border-color: #fbfbfb; }

.dashboard button.cancel:hover,
.dashboard input[type=button].cancel:hover,
.dashboard input[type=submit].cancel:hover,
.dashboard #content .button.cancel:hover,
.dashboard .paginate_button.cancel:hover,
.dashboard .paginate_active.cancel:hover { background-color: #f2f2f2; color: #a8a8a8; }

.dashboard input[type=button].frame,
.dashboard input[type=submit].frame,
.dashboard #content .button.frame,
.dashboard .paginate_button.frame,
.dashboard .paginate_active.frame { background-color: white; color: #ff6b36; border-color: #ff6b36; }

.dashboard input[type=button].frame:hover,
.dashboard input[type=submit].frame:hover,
.dashboard #content .button.frame:hover,
.dashboard .paginate_button.frame:hover,
.dashboard .paginate_active.frame:hover { background-color: #ff6b36; color: white; border: solid 1px #ffd2c2; }

.dashboard input[type=button].nav,
.dashboard input[type=submit].nav,
.dashboard #content .button.nav,
.dashboard .paginate_button.nav,
.dashboard .paginate_active.nav { color: #ffffff; background-color: #5a5a5a; border-color: #5a5a5a; }

.dashboard input[type=button].nav:hover,
.dashboard input[type=submit].nav:hover,
.dashboard #content .button.nav:hover,
.dashboard .paginate_button.nav:hover,
.dashboard .paginate_active.nav:hover { background-color: #39bced; border-color: #39bced; }

.dashboard .button.alternate,
.dashboard input[type=button].alternate,
.dashboard input[type=submit].alternate,
.dashboard #content .button.alternate,
.dashboard .paginate_button.alternate,
.dashboard .paginate_active.alternate { background-color: #a8a8a8; border-color: #a8a8a8; color: white; }

.dashboard .button.alternate:hover,
.dashboard input[type=button].alternate:hover,
.dashboard input[type=submit].alternate:hover,
.dashboard #content .button.alternate:hover,
.dashboard .paginate_button.alternate:hover,
.dashboard .paginate_active.alternate:hover { background-color: #5a5a5a; border-color: #5a5a5a; }

.dashboard button.dark { background-color: #5a5a5a; border-color: #5a5a5a; color: white; }
.dashboard button.dark:hover { background-color: #7e7e7e; border-color: #7e7e7e; }

.dashboard input[type=button].delete,
.dashboard button[type=button].delete,
.dashboard .button.delete { display: inline-block; border: solid 1px red; color: red; background-color: #ffffff; opacity: 0.5; width: auto; cursor: pointer; float: left; }

.dashboard input[type=button].delete:hover,
.dashboard #content .button.delete:hover,
.dashboard .button.delete:hover { background-color: red; color: #ffffff; opacity: 1; }

.dashboard input[type=button].short,
.dashboard input[type=submit].short,
.dashboard #content .button.short { display: inline-block; width: auto; }

.dashboard .button[disabled] { opacity: 0.6; cursor:default; }

.dashboard .form-field > .button { margin-top: 1em; margin-left: 1.5em; margin-right: 1.5em; }
.dashboard .form-field.ratio > .button { }


.dashboard .button-v2 { background-color: #fd9d27; border: 1px solid #fd9d27; color: #fff; border-radius: 6px; outline: none;}
.dashboard .button-v2:hover, .dashboard .button-v2.active, .dashboard .button-v2.not-active:hover { background-color: #ea881f; border-color: #ea881f; opacity: 1;}


/*****************
 *  FieldGroup
 *****************/
.dashboard .fieldgroup { border: solid 1px #f2f2f2; }
.dashboard .fieldgroup.closed { border-color: white; border-bottom: solid 1px #f2f2f2; }
.dashboard .fieldgroup.closed .header { /*border-bottom: solid 1px #fbfbfb; background-color: white; color: #5a5a5a;*/ }
.dashboard .fieldgroup.closed .header a { background-position: -12px -155px; }
.dashboard .fieldgroup.closed .fieldset { display: none; }
.dashboard .fieldgroup .header { border-bottom: solid 1px #f2f2f2; background-color: #5a5a5a; padding-top: 0; min-height: 0; margin: 0; /* cursor: pointer; */ color: white; -o-transition: background-color 0.25s ease-out; -ms-transition: background-color 0.25s ease-out; -moz-transition: background-color 0.25s ease-out; -webkit-transition: background-color 0.25s ease-out; transition: background-color 0.25s ease-out; }
.dashboard .fieldgroup > .header { cursor: pointer; }
.dashboard .fieldgroup.addgroup .header { background-color: #39bced; }
.dashboard .fieldgroup .header h2,
#lightbox.dashboard .fieldgroup .header h2 { margin: 0; padding: 0.7em 1.5em 0.5em 0; font-weight: normal; font-size: 1.4em; }
.dashboard .fieldgroup .header a.toggle { position: absolute; top: 0.65em; right: 1em; width: 20px; height: 20px; background-position: 5px -170px; }
.dashboard .fieldgroup.closed .header a.toggle { background-position: 5px -375px; }
.dashboard .fieldgroup .header .expand { position: absolute; top: 0; right: 45px; }
.dashboard .fieldgroup .header .expand > a { width: 40px; height: 40px; background-position: -80px -205px; }
.dashboard .fieldgroup .header .expand > ul { position: absolute; display: none; right: 40px; top: 0; width: 0; white-space: nowrap; z-index: 10; }
.dashboard .fieldgroup .header .expand > ul a:hover { color: #ff6b36; }

/*****************
 *  Select2
 *****************/
.dashboard .select2-container .select2-choice,
.dashboard .select2-container .select2-choice .select2-arrow { -webkit-border-radius: 0; border-radius: 0; background: #ffffff; border-color: #c4c4c4; }
.dashboard .select2-drop { -webkit-border-radius: 0; border-radius: 0; }
.dashboard .select2-search input { background-color: #ffffff; }
.dashboard .select2-results .select2-no-results { padding: 0.25em 0.5em; }
.dashboard .select2-container-active .select2-choice,
.dashboard .select2-container-active .select2-choices,
.dashboard .select2-drop-active { border-color: #c4c4c4; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
.dashboard .select2-container .select2-choice .select2-arrow { background-color: #5a5a5a; }
.dashboard .select2-container { width: 100%; }
.dashboard .select2-results .select2-highlighted { background-color: #39bced; }

/*****************
 *  Tooltip
 *****************/
.dashboard .ui-tooltip { position: absolute; padding: 1.25em 1.5em; background: none repeat scroll 0 0 #39bced; border: none; border-radius: 6px; overflow: hidden; }
.dashboard .ui-tooltip h3 { line-height: 1; margin-bottom: 0.25em; }
.dashboard .ui-tooltip p { margin-bottom: 0; }
.dashboard .ui-tooltip .ui-tooltip-content { color: #FFFFFF; }

/*****************
 *  Form: Personalization
 *****************/
.dashboard .formRow.has-personalization .form-input { position: relative; padding-right: 4em; }
.dashboard .formRow .form-personalization-button { position: absolute; top: 0; right: 0; padding: 0.44em 1em; border: 1px solid #f2f2f2; background-color: #fbfbfb; color: #5a5a5a; cursor: pointer; }
.dashboard .formRow .form-personalization-button .fa { font-size: 1.6em; }
.dashboard .formRow .item-picker.form-personalization-options { position: absolute; top: 3em; right: 0; display: none; z-index: 1; }

/*****************
 *  Form: Gallery / Signature
 *****************/
.dashboard .formRow.gallery > .selection > .image { float:left; }
.dashboard .formRow.gallery > .selection > .image > img { max-height: 200px; max-width: 200px; }
.dashboard .formRow.gallery > .selection > .actions { float:right; }
.dashboard .formRow.gallery > .selection > .actions .button { display: block; margin:0 0 8px auto; }
.dashboard .formRow.gallery > .selection > .text { margin-top:8px; }
.dashboard .formRow.gallery > .selection > .text > .name { text-decoration: underline; cursor:pointer;}
.dashboard .formRow.gallery > .no-selection { font-style: italic; }        
.dashboard .formRow.gallery > .source-actions { margin-top:8px; }

.dashboard .formRow > .selection { height: 100%; overflow: auto; }
.dashboard .formRow > .selection .image-container { height: 25%; padding: 1% 0 6% 0; }
.dashboard .formRow > .selection .image-container .image { width: 50%; height: 25%; display: inline-block; padding: 0% 2% 1% 1%; }
.dashboard .formRow > .selection .image-container .image img { max-width: 100%; max-height: 250px; }
.dashboard .formRow > .selection .image-container .actions { position: absolute; width: 45%; display: block; }
.dashboard .formRow > .selection .image-container .actions .button { display: inline-block; margin: 0% 1% 0% 1%; }
.dashboard .formRow > .selection .image-container .text { position: absolute; left: 25%; height: 59%; display: inline-block; padding: 1%; width: 60%; text-align: center; }
.dashboard .formRow.gallery > .source-actions .area-upload.fileUploadForm { width: 100%; }
.dashboard .formRow.gallery > .source-actions .area-upload.fileUploadForm .fileinput-button.droparea .addbutton { text-align: center; }
.dashboard .formRow.gallery > .source-actions .area-upload.fileUploadForm .fileinput-button.droparea .file-input { font-size: 0px; width: 100%; height: 100%; }

/* signature */
.formRow.signature .selection .image-container { width: 100%; }
.signature-canvas { border: 1px solid #cccccc; }

/*****************
 *  Form: Calendar
 *****************/
.dashboard .formRow-calendar .form-input { position: relative; }
.dashboard .formRow-calendar .form-input input { padding-right: 40px; }
.dashboard .formRow-calendar .input-calendar { position: absolute; top: 13px; right: 15px; opacity: 0.5; }
.dashboard .ui-datepicker .ui-datepicker-days-cell-over.ui-datepicker-today > .ui-state-default { color: #fff; background-color:#dfe1e4; }

/*****************
 *  Form: Radio
 *****************/
.formRow .form-input.horizontal > .item { display: inline-block; }

/*****************
 *  Inline
 *****************/
.dashboard .formRow.inlineMode label.label-icon { width: 30px; font-size: 25px; vertical-align: top; }
.dashboard .formRow.inlineMode .form-input { width: calc(100% - 35px); display: inline-block; }

/*****************
 *  Misc
 *****************/
.dashboard .fieldset,
.dashboard .edit .fieldset { padding-bottom:1em; }
.dashboard .formRow,
.dashboard .edit .formRow { position: relative; }
.dashboard .formRow .help,
.dashboard .edit .formRow .help,
.dashboard table .help { position: absolute; top: 1em; right: 1.5em; }
.dashboard .formRow .help,
.dashboard .edit .formRow .help { border-radius: 3px; overflow: hidden; }
.dashboard .formRow .help > a,
.dashboard .edit .formRow .help > a,
.dashboard table .help > a { display: block; color: white; background-color: #39bced; text-decoration: none; width: 15px; height: 15px; text-align: center; font-size: 0.8em; line-height: 15px; }
.dashboard .formRow .help .tip,
.dashboard .edit .formRow .help .tip { display: none; background-color: #39bced; color: white; position: absolute; bottom: -1.25em; right: 0; }
.dashboard .formRow .help .tip h3,
.dashboard .edit .formRow .help .tip h3 { line-height: 1; margin-bottom: 0.25em; }
.dashboard .formRow .help .tip p,
.dashboard .edit .formRow .help .tip p { margin-bottom: 0; }
.dashboard .formRow.col > .help,
.dashboard .edit .formRow.col > .help { /* right: 1.5em; */ }

@media screen and (max-width: 1200px) {
    .dashboard .formRow.col > .help,
    .dashboard .edit .formRow.col > .help { right: 0; }
}

.dashboard .formRow > label { font-family:'bold'; display: block; margin-bottom: 0.25em; color: #000; }
.dashboard .formRow label span,
.dashboard .edit .formRow label span { font-weight: normal; font-size: 0.9em; color: #a8a8a8; }
.dashboard .formRow label.radioLabel,
.dashboard .edit .formRow label.radioLabel { display: inline; font-weight: normal; margin: 0 2em 0 10px; font-size: 0.9em !important; }
.dashboard .selector { padding-top: 0.5em; padding-bottom: 0.5em; border: solid 1px #f2f2f2; background-color: #fbfbfb; border-bottom: none; }
.dashboard .formRow.plain label { font-weight: normal !important; }

.dashboard .formRow .thumb-container { background-color: #f0f0f0; }
.dashboard .formRow .thumb-container img { display: block; margin: 0 auto; max-height: 150px; max-width: 150px; }
.dashboard .formRow .thumb-container .button { width: 100%; max-width: none; }

/*****************
 *  Color Picker additional plugin styling
 *****************/
.color-picker-input { position: relative; }
.color-picker-input input[type=text] { padding-left: 4em !important; }
.color-picker-input button { position: absolute; top: 0px; padding: 0.72em 1em; border-radius:0; }
/* Remove the transparant button */
.ui-colorpicker-buttonset { display:none !important; }


/*****************
 *  Language switch
 *****************/
.language-switch-container { display: inline-block; position: relative; }
.language-switch-active { display: inline-block; }
.language-option-list { /*display: none;*/ z-index: 12; /*position: absolute; right: 0px;*/ /*background-color: #F3F3F3;*/ }
.switch-vertical .language-option-list { display: none; }
.language-option { max-height: 20px; max-width: 20px; border-radius: 5px; display: inline-block; cursor: pointer; padding-right: 10px; opacity: 0.3; }
.language-switch-active .language-option { opacity: 1; }
.language-option:hover { opacity: 0.7; }
.language-option.active { opacity: 1; }

.language-option-container { display: inline-block; }
.language-option-container .language-option { /*max-width: 40px; max-height: 40px;*/ cursor: pointer; display: inline;   }

.language-switch-container:hover .language-option-list { display: inline-block; }