/**
    Copyright (c) 2015, 2018, Oracle and/or its affiliates.
    The Universal Permissive License (UPL), Version 1.0
  */

       /* Pass down oj-flex set on oj-vb-content to the nested oj-module */
       oj-vb-content.oj-flex>oj-module {
           box-sizing: border-box;
           display: flex;
           flex: auto;
           flex-wrap: wrap;
       }

       oj-vb-list-item .vbcs-list-item {
           padding: 5px;
       }

       oj-vb-list-item .vbcs-list-item__title1,
       oj-vb-list-item .vbcs-list-item__value1 {
           font-size: 14px;
       }

       oj-vb-list-item .vbcs-list-item__title2,
       oj-vb-list-item .vbcs-list-item__value2 {
           color: #737373;
           font-size: 12px;
       }

       oj-vb-list-item .vbcs-list-item__image {
           width: 32px;
           height: 32px;
       }

       /* Special styling for mobile page templates only */
       oj-ext-mobile-page-template oj-vb-list-item .vbcs-list-item {
           /* This will make the default single item height as 49px */
           padding: unset;
           min-height: 32px;
       }

       oj-ext-mobile-page-template oj-vb-list-item .vbcs-list-item p {
           margin-bottom: 0;
       }

       /* use default font (inherited or initial) value for the title or the end text*/
       oj-ext-mobile-page-template oj-vb-list-item .vbcs-list-item__title1,
       oj-ext-mobile-page-template oj-vb-list-item .vbcs-list-item__value1,
       oj-ext-mobile-page-template oj-vb-list-item *[slot="title1"],
       oj-ext-mobile-page-template oj-vb-list-item *[slot="value1"] {
           font-size: unset;
       }

       /* use a smaller and lighter font for the secondary items in the row*/
       oj-ext-mobile-page-template oj-vb-list-item .vbcs-list-item__title2,
       oj-ext-mobile-page-template oj-vb-list-item .vbcs-list-item__value2,
       oj-ext-mobile-page-template oj-vb-list-item *[slot="title2"],
       oj-ext-mobile-page-template oj-vb-list-item *[slot="value2"] {
           /* Use CSS variables from JET */
           color: var(--oj-secondary-text-color);
           font-size: var(--oj-small-font-size);
       }

       /* Override JET android theme to enable drill down in android.
     Many of the android native apps (for e.g. settings) have the drilldown icons */
       oj-ext-mobile-page-template.oj-ext-android-theme oj-vb-list-item .oj-listview-drill-icon {
           display: unset;
           color: var(--oj-neutral-color11);
       }

       oj-ext-mobile-page-template.oj-ext-android-theme oj-vb-list-item .oj-listview-drill-icon:before {
           content: "\e612";
       }

       .messagebar-slide-up,
       .messagebar-slide-down {
           display: flex;
           flex: 1 0 auto;
           /* display: inline-block; */
           max-height: 0;
           overflow-y: hidden;
           -webkit-transition: max-height 1s ease-in-out;
           -moz-transition: max-height 1s ease-in-out;
           -o-transition: max-height 1s ease-in-out;
           transition: max-height 1s ease-in-out;
           width: 100%;
       }

       .messagebar-slide-down {
           max-height: 10em;
       }


       /**
   * this class is appended to the component classes
   */
       .vb-messages {
           position: absolute;
           top: 0px;
           left: 0px;
           width: 100%;
       }


       .messagebar-hidden {
           display: none;
       }

       .messagebar-pull-right {
           float: right;
       }

       .messagebar-pull-left {
           float: left;
       }

       #messagebar-confirmation-error-note {
           position: relative;
           z-index: 112;
           width: 100%;
           display: -ms-flexbox;
           display: flex;
           -ms-flex-align: center;
           align-items: center;
           -ms-flex-direction: column;
           flex-direction: column;
       }

       .messagebar-confirmation-error-note {
           width: 100%;
           max-width: 100%;
           position: relative;
           line-height: 35px;
           z-index: 113;
           /* vb-app-skeleton display: none; */
           border-bottom: 1px solid transparent;
       }

       .messagebar-confirmation-error-note.messagebar-confirmation-note {
           background-color: #d6f1de;
           border-color: #c3ebcf;
       }

       /* todo: need to fix this */
       .messagebar-confirmation-error-note-image {
           margin-top: 10px;
       }

       .messagebar-confirmation-error-note.messagebar-info-note {
           background-color: #d9edf8;
           border-color: #bfe4f8;
       }

       .messagebar-confirmation-error-note.messagebar-error-note {
           background-color: #ffdfdf;
           border-color: #ffc5c5;
       }


       .messagebar-confirmation-error-note.messagebar-warning-note {
           background-color: #ffeaca;
           border-color: #ffe0b0;
       }


       .messagebar-confirmation-error-note .messagebar-confirmation-error-note-wrap {
           max-width: 1395px;
           margin: 0px auto 0px auto;
           min-height: 35px;
           position: relative;
       }

       .messagebar-confirmation-error-note .messagebar-confirmation-error-note-wrap:before {
           position: absolute;
           top: 3px;
       }

       @media screen and (max-width: 1440px) {
           .messagebar-confirmation-error-note .messagebar-confirmation-error-note-wrap {
               margin: 0px 10px 0px 10px;
           }
       }

       .messagebar-confirmation-error-note .messagebar-confirmation-error-note-text {
           margin-left: 20px;
           /** 27px; **/
           -ms-flex: 1;
           flex: 1;
           max-height: 200px;
           overflow-y: auto;
           font-size: 1rem;
           color: black;
       }

       .messagebar-confirmation-error-note button {
           margin: 0px;
       }

       .messagebar-confirmation-error-note button:not(:last-of-type) {
           margin-right: 10px;
       }

       .messagebar-confirmation-error-note .messagebar-confirmation-error-note-counter {
           display: inline-block;
           background-color: white;
           border-radius: 12px;
           padding: 4px;
           line-height: 16px;
           margin-left: 4px;
           text-align: right;
       }

       .messagebar-confirmation-error-note.messagebar-error-note .messagebar-confirmation-error-note-counter {
           background-color: #dfbfbf;
       }

       .messagebar-confirmation-error-note.messagebar-warning-note .messagebar-confirmation-error-note-counter {
           background-color: #dfcaaa;
       }

       .messagebar-confirmation-error-note.messagebar-confirmation-note .messagebar-confirmation-error-note-counter {
           background-color: #b6d1be;
       }

       .messagebar-confirmation-error-note.messagebar-info-note .messagebar-confirmation-error-note-counter {
           background-color: #b9cdd8;
       }

       oj-vb-message-bar .cancel-icon {
           height: 16px;
           width: 16px;
           background-size: 16px 16px;
           cursor: pointer;
       }

       oj-vb-message-bar .cancel-icon:before {
           content: " ";
           height: 16px;
           width: 16px;
           display: inline-block;
           background-repeat: no-repeat;
           background-image: url(../../src/vb/components/messagebar/images/func_delete_16_sprite.png);
           background-position: 0px 0px;
       }

       oj-vb-message-bar .oj-default .cancel-icon:before,
       .oj-focus-only .cancel-icon:before {
           background-position: 0px 0px;
       }

       oj-vb-message-bar .oj-hover .cancel-icon:before,
       .oj-hover.oj-selected .cancel-icon:before {
           background-position: -16px 0px;
       }

       oj-vb-message-bar .oj-active .cancel-icon:before,
       .oj-selected .cancel-icon:before {
           background-position: -64px 0px;
       }

       oj-vb-message-bar .oj-disabled .cancel-icon:before {
           background-position: -48px 0px;
       }