/* apply a natural box layout model to all elements, but allowing components to change */
form.popover {
    /*max-width: 600px; !* blaze it *!*/
    margin: 0;

    background-color: #FFF;
    border: 1px solid #bdbdbd;
    overflow: hidden;
    border-radius: 3px;
    box-shadow: 0 2px 6px 0px rgba(0, 0, 0, 0.1),
                inset 0 -2px 1px rgba(0, 0, 0, 0.1);
}

.popover-title {
    margin: 0;
    padding: 12px 20px 10px 20px;
    font-size: 14px;
/*    font-weight: 400;*/
    line-height: 18px;
    background-color: #f7f7f7;
    border-bottom: 1px solid #ddd;
    border-radius: 5px 5px 0 0;
}

label {
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 600;
}

.textarea-wrapper {
    display: flex;
    margin-top: 5px;

    border: 1px solid #aaa;
    border-radius: 2px;
}

.textarea-wrapper input {
    flex: none;
    margin-top: 0;
}

textarea {
    flex: 1;
    border: none;

    font-family: "Open Sans";
    padding-left: 3px;
    /*max-height: 100px;*/

    font-size: 13px;
}

/*
.ticket-description > :first-child {
    margin-top: 0;
}

.ticket-description p {
    margin: 0;
}

.ticket-description p + p {
    margin-top: 5px;
}

.ticket-description {
    padding-top: 1px;
    overflow-y: auto;
}
*/

input {
    flex: 1;
    padding-left: 3px;
    border: none;
    border-bottom: 1px solid #aaa;
    outline: none;
}

input[type="submit"] {
    padding-left: 8px;
    padding-right: 8px;
    cursor: pointer;
    border: 1px solid #aaa;
}

button {
    font-family: "Open Sans";
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
}

input,
select,
.textarea-wrapper {
    font-family: "Open Sans";
    font-size: 13px;

    margin-top: 4px;
}


section {
/*    background: yellow;*/
    padding-left: 20px;
    padding-right: 20px;

    transition: padding-top ease-in-out 0.15s;
}

section:not(.section-collapsed) + section {
    margin-top: 10px;
/*    outline: 1px solid red;*/
}

.section-title {
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 10px;

/*    border-top: 1px solid #ccc;*/
    padding-top: 5px;
/*    background: green;*/
}

.section-main  {
    margin-top: 15px;
    margin-bottom: 15px;
}

.scrollable-section {
    overflow-y: auto;
}

.footer {
    font-size: 12px;

    margin-top: 0 !important;
    border-top: 1px solid #ddd;
    padding-top: 15px;
    padding-bottom: 15px;

    color: #888;
    background-color: #fafafa;
    white-space: nowrap;
}

section:not(.section-collapsed) + .footer {
/*    margin-top: 20px;    */
}

.footer .footer-content {
    text-align: center;
}

.footer button {
    display: inline-block;

    text-align: center;
    text-decoration: none;
    text-transform: uppercase;

    font-size: 11px;
    font-weight: 600;

    border-radius: 3px;
    border: 1px solid #d7d7d7;
    border-bottom: 1px solid #bdbdbd;

    padding: 10px 30px;

    color: #333;
    background: linear-gradient(#fcfcfc, #f0f0f0);

    box-shadow: 0 1px 4px -2px rgba(0, 0, 0, 0.6),
                inset 0 1px 0px white;

    /* cursor: pointer; */
    margin-right: 7px;
}

.footer button:hover {
    color: #4d4d4d;
    background: linear-gradient(#ffffff, #f3f3f3);
}

.footer button:active {
    color: #1a1a1a;
    border-bottom-color: #d7d7d7;
    border-top-color: #bdbdbd;
    background: linear-gradient(#f9f9f9, #ededed);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
}

.footer button.delete-button {
    border: 1px solid #ff4136;
    color: #fafafa;

    background: linear-gradient(#ff1205, #d2271e);
    box-shadow: 0 1px 4px -2px rgba(255, 0, 0, 0.6),
                inset 0 1px 0px #ff3127;

}

.footer button.delete-button:hover {
    color: #fff;
    border: 1px solid #fa7c75;
    border-bottom: 1px solid #f85249;
    background: linear-gradient(#ff473d, #e23b32);
    box-shadow: 0 1px 4px -2px rgba(255, 0, 0, 0.7),
                inset 0 1px 0px #ff554d;
}

.footer button.delete-button:active {
    color: #fff;
    border-color: #e52c21;
    border-top-color: #b91209;
    border-bottom-color: #b91209;

    background: linear-gradient(#c81d14, #d11e15);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
}

.footer a.form-cancel {
    color: #666;
    font-size: 12px;
    margin-left: 5px;
    white-space: nowrap;
}

/*
.section-additional {
    margin-top: 25px;
}
*/

.field {
    display: flex;
    flex-direction: column;
    min-width: 180px;
    flex: 1;
}

.field + .field {
    margin-top: 15px;
}

.help {
    text-transform: none;
    font-weight: 400;
    color: #666;
    font-size: 13px;
/*    margin-left: 10px;*/
}

.field.collapsable::before {
    content: "V";
}

.field.collapsable.collapsed::before {
    content: ">";
}

.project-code {
    text-transform: uppercase;
}

.field.collapsable.collapsed .collapse-item {
    display: none;
}

.field + .fields {
    margin-top: 15px;
}

.fields + .fields {
    margin-top: 15px;
}

.fields {
    display: flex;
    align-items: flex-start;
/*    justify-content: space-between;*/
    flex-wrap: wrap;
}

.fields .field + .field {
    margin: 0;
    margin-left: 5px;
}

/*
.field-rich-text .toolbar {
    display: flex;
    align-items: stretch;
}
*/

/*
.field-rich-text label {
    flex: 1;
    position: relative;
    top: 4px;
}
*/

/*
.toolbar button {
    position: relative;
    min-height: 15px;
    min-width: 25px;
}

.toolbar svg {
    height: 15px;
    position: absolute;
    left: -1px;
    top: 1px;
}

.field-rich-text blockquote {
    margin-left: 7px;
    padding-left: 7px;
    border-left: 3px solid #aaa;
    padding-bottom: 5px;
}
*/

.field-users {
    margin-bottom: 12px;
}

.checkbox-list ul {
    list-style: none;
    margin: 0;
    padding: 5px 0;
}

.checkbox-list ul label {
    display: flex;
    align-items: flex-start;
    margin-left: -3px;
}

.checkbox-list .item-container {
    flex: 1;
    margin-left: 6px;
    padding-top: 1px;
}

.checkbox-list .item-name {
    font-weight: 700;
    color: #666;
}

.checkbox-list  .item-description {
    text-transform: none;
    font-weight: 400;
    color: #666;
    font-size: 13px;
}

.checkbox-list .item-name,
.checkbox-list .item-description {
    transition: color ease-in-out 0.1s;
}

.checkbox-list li + li {
    margin-top: 6px;
}

.checkbox-list input[type="checkbox"] {
    flex: 0;
}

.checkbox-list input[type="radio"] {
    flex: 0;
}

.field .typography.dash {
    position: relative;
    top: -1px;
}

.checkbox-list :checked + .item-container .item-name,
.checkbox-list :checked + .item-container .item-description {
    color: #0074D9;
}

.inline-checkbox-list ul {
    display: flex;
    flex-wrap: wrap;
}

.inline-checkbox-list li {
    margin-top: 6px;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 25%;
}

.inline-checkbox-list.inline-3 li {
    flex-basis: 33%;
}
.inline-checkbox-list.inline-2 li {
    flex-basis: 50%;
}

.section-collapsable {
    border-top: 1px solid #ccc;
/*    border-bottom: 1px solid #ccc;*/
/*    background: yellow;*/
    padding: 0;
}

.section-collapsable .section-title {
    padding-top: 6px;
    padding-left: 26px;
    padding-right: 20px;
    padding-bottom: 5px;
/*    border-bottom: 1px solid #dedede;*/

    margin-bottom: 0;
    transition: all ease-in-out 0.15s;

/*    color: #444;*/
    color: #666;
    cursor: pointer;

    position: relative;
}

.section-collapsable .section-title::before {
    content: "";

    top: 10px;
    left: 10px;
    position: absolute;

    width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top-width: 8px;
    border-top-style: solid;
    border-top-color: #666;

/*    transform: rotate(90deg);*/
    transition: transform ease-in-out 0.1s,
                border-top-color ease-in-out 0.3s;
}

.section-collapsable.section-collapsed .section-collapsable-content {
    max-height: 0;
}

.section-collapsable.section-collapsed .section-title::before {
    transform: rotate(-90deg);
    border-top-color: #aaa;
}

section:not(.section-collapsed) + .section-collapsable:not(.section-collapsed) {
    padding-top: 5px;
}

.section-collapsable:not(.section-collapsed) .section-title {
    /*margin-bottom: 5px;*/
    color: #000;
}

.section-collapsable-content {
    margin: 0;
    padding: 0 10px;

    overflow: hidden;
    transition: max-height ease-in-out 0.2s;
}

form .section-additional.section-last:not(.section-collapsed) {
    padding-bottom: 20px;
}

.errorlist {
    color: red;
}

.ckeditor {
    height:300px;
    border: 1px solid #aaa;
}

a.checkbox-list-select-all {
    color: #0074D9;
}

a.checkbox-list-select-none {
    color: #0074D9;
}

a.checkbox-list-select-one {
    color: #666;
}

.submit-error {
    color: red;
    display: none;
}

/*segmented-selectors eg duration fields */

.segmented-selector {
    border: 1px solid transparent;
    display: inline-flex;
    width: 100%;
    border-radius: 4px;
}

.segmented-selector a {
    display: inline;

    padding: 3px 10px 3px 10px;

    text-align: center;
    text-transform: uppercase;
    text-decoration: none;

    font-size: 11px;
    font-weight: 700;

    color: #bbb;
    transition: all 0.2s ease-in-out;
}

.segmented-selector a.active {
    color: #000;
}

.segmented-selector a {
    border: 1px solid #aaaaaa;
    border-right: none;
}

.segmented-selector a:first-child {
    border-right: none;
    border-left: 1px solid #aaaaaa;
    border-radius: 5px 0px 0px 5px;
}

.segmented-selector a:last-of-type {
    border-right: 1px solid #aaaaaa;
    border-radius: 0px 5px 5px 0px;
}

/* duration fields */

.field-duration .form-value {
    display: flex;
    margin-top: 5px;
}

.field-duration input[type=number]::-webkit-inner-spin-button,
.field-duration input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.field-duration input[type=number] {
  -moz-appearance: textfield;
}
.field-duration input {
    border: none;
    border-bottom: 1px solid #ccc;
    max-width: 60px;
    min-width: auto;
    text-align: center;
    margin-right: 10px;
    flex: 1;
}

.field-duration.form-error input {
    border-color: red;
}

/* select2 customizations */
.select2 {
  margin-top: 4px;
}
.select2 .selection .select2-selection {
  border-radius: 0;
  border: none;
  border-bottom: 1px solid #aaa;
}

.field-labels ul.select2-selection__rendered li.select2-selection__choice {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 11px;
  color: #fff;
  padding: 2px 8px;
  background: #ED476B;
  border: none;
}
.field-labels ul.select2-selection__rendered li.select2-selection__choice .select2-selection__choice__remove {
  color: #fff;
}
.field-priorities .select2-value {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 11px;
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  background: #D9B700;
}
.field-statuses .select2-value {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 11px;
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  background: #3D9970;
}

.field-types .select2-value {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 11px;
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  background: #0074D9;
}

.field-project .select2-value {
    font-weight: 600;
    color: #9600D9;
    background: rgba(96, 0, 217, 0.05);
    border-radius: 5px;
    padding: 1px 5px;
    border: 1px solid rgba(96, 0, 217, 0.15);
    font-size: 13px;
}

.select2-container .select2-selection--single {
  height: unset !important;
  outline: none;
}

.select2-container--default .select2-selection--multiple {
    border: none !important;
    border-bottom: 1px solid #ccc !important;
}

.select2-container.select2-container--open .select2-dropdown {
    box-shadow: 0 0 15px -5px rgba(0,0,0,.5);
}

.select2-container.select2-container--open .select2-dropdown.select2-dropdown--above {
    border-bottom: 1px solid #aaa !important;
}

.select2-container.select2-container--open .select2-dropdown.select2-dropdown--below {
    border-top: 1px solid #aaa !important;
}

.select2-container .img-flag {
    margin: 0;
    margin-right: 5px;
    display: inherit !important;
    vertical-align: middle;
}

.select2-container .desc-flag {
    font-size: 0.85em;
}

a.field-action {
    color: #0074D9;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 600;
}