/****** PORTAL NEU ******/
/************************/

/** YELLOW FADE **/
.new {
    -webkit-animation: yellow-fade 3s;
       -moz-animation: yellow-fade 3s;
            animation: yellow-fade 3s;
}
.attention {
    -webkit-animation: yellow-fade 2s linear infinite;
       -moz-animation: yellow-fade 2s linear infinite;
            animation: yellow-fade 2s linear infinite;
}
@-webkit-keyframes yellow-fade{
    5%{ background-color:#5270c1; }
}

@-moz-keyframes yellow-fade{
    5%{ background-color:#5270c1; }
}

@keyframes yellow-fade{
    5%{ background-color:#5270c1; }
}

/** DRAGULA HELP **/
.gu-unselectable .panelWrapper,
.gu-mirror button, .gu-mirror section.description {
    display: none;
}

.gu-mirror {
    border-radius: 2px;
    box-shadow: 1px 1px 20px #999999;
    background-color: #fffffe;
    padding: 10px !important;
    list-style-type: none !important;
    overflow: hidden;
}

/* this part hides the dragging portlets content (only displays the header).
   it keeps the dragged portlet simple, even if the styles of the portlet will changed in destination.
   NOTE: it would be nice to reduce the width and center the dragging element to the cursor: https://github.com/bevacqua/dragula/issues/616
*/
.gu-mirror {
    height: auto !important;
}
.gu-mirror .pltContent {
    display: none;
}

/********************************************************************/
/** Portalseite - Grid Configuration Opener & Closer **/
div#closePortalConfig {
    height: 30px;
    width: 30px;
    z-index: 5000;
    position: fixed;
    top: 48%;
    margin-left: -10px;
    transform: rotate(180deg);
    background: white url(../thirdparty/icon54/svg/solid/Arrows/Left2.svg) 0% 0% no-repeat;
    background-size: 37px;
    background-position: center;
}
div#closePortalConfig:hover {
   cursor: pointer;
}

/********************************************************************/
/** Grid configuration - Overlay Grid config & Apps                **/
div#portalConfigOverlay header {
    height: 40px;
}
div#portalConfigOverlay header h1 {
    display: inline-block;
}
div#portalConfigOverlay h4 {
    display: inline-block;
    padding: 0 0 0 5px;
}
div#portalConfigOverlay nav {
    margin-bottom: 10px;
}

/********************************************************************/
/** App Configuration                                              **/
div#portalConfigOverlay section.appBuild section.description {
    position: relative;
}

/** ASIDE **/
div#portalConfigOverlay aside.appConfigPanel h3 {
    margin-top: 30px;
    text-transform: uppercase;
}
div#portalConfigOverlay aside.appConfigPanel section.portletPool.searchResults {
    visibility: hidden;
    display: none;
}
div#portalConfigOverlay aside.appConfigPanel ul {
    padding: 0;
    margin: 10px 0 0 0;
}
div#portalConfigOverlay section.appBuild li.poolPortlet:hover,
div#portalConfigOverlay section.appBuild li.cfgPortlet:hover{
    cursor: grab;
    cursor: -webkit-grab;
}
.gu-transit {
    opacity: 0.3;
    list-style: none;
    border-radius: 2px;
    box-shadow: 1px 1px 2px #838383;
    margin-bottom: 10px;
    background-color: #5270c1;
    padding: 10px 5px 8px 10px;
}
div#portalConfigOverlay aside.appConfigPanel ul li.poolPortlet:hover,
div#portalConfigOverlay aside.appConfigPanel ul li.cfgPortlet:hover {
    cursor: grab;
    cursor: -webkit-grab;
}
div#portalConfigOverlay aside.appConfigPanel ul li.copied {
    opacity: 0.3;
    list-style: none;
    margin-top: 2px;
    background-color: #f0f0f0;
    padding: 10px 5px 8px 10px;
    position: relative;
    margin-right: 10px;
}
div#portalConfigOverlay aside.appConfigPanel .userSettingsReset {
    position: relative;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 60px 0 0 0;;
}
div#portalConfigOverlay aside.appConfigPanel section.userSettings H3 {
    margin: 0 0 5px 0;
}
div#portalConfigOverlay aside.appConfigPanel .userSettings fieldset {
    border: none;
    padding: 0;
    margin: 0;
}
div#portalConfigOverlay aside.appConfigPanel .userSettings fieldset .settingsMargin {
    margin: 5px 0 5px 20px;
}
div#portalConfigOverlay aside.appConfigPanel .deletePortlet:hover {
    cursor: pointer;
}

/** APPBUILD **/

div#portalConfigOverlay section.appBuild .deletePortlet {
    display: none;
}
div#portalConfigOverlay section.appBuild .cfgPortlet .panelWrapper .panelIcon:hover {
    cursor: pointer;
}

/** SAVE - ABORT **/
div#portalConfigOverlay section.saveAppConfig {
    float: right;
    padding-right: 10px;
}
div#portalConfigOverlay section.saveGridConfig {
    padding: 10px 0 0 0;
    float: right;
}
/********************************************************************/
/** Grid configuration                                             **/
section.gridPreview div.previewRow {
    max-height: 45%;
    overflow-y: auto;
}
section.gridPreview div.preCol div.bgPreCol.selectedPreviewCol span {
    transition-duration: 1s;
    transform: rotateX(180deg);
    position: absolute;
    top: 0;
}
section.gridPreview div.preCol.ix-small-hide,
section.gridPreview div.preCol.ix-medium-hide,
section.gridPreview div.preCol.ix-large-hide {
    display: none;
    visibility: hidden;
}
section.gridPreview div.preCol.ix-small-pLNone {
    padding-left: 0;
}
section.gridPreview div.preCol.ix-small-pRNone {
    padding-right: 0;
}
section.gridPreview div.preCol.ix-medium-pLNone {
    padding-left: 0;
}
section.gridPreview div.preCol.ix-medium-pRNone {
    padding-right: 0;
}
section.gridPreview div.preCol.ix-large-pLNone {
    padding-left: 0;
}
section.gridPreview div.preCol.ix-large-pRNone {
    padding-right: 0;
}
section.gridPreview div.preCol.ix-push-0 {
    position: relative;
    left: 0;
    right: auto;
}
section.gridPreview div.preCol.ix-pull-0 {
    position: relative;
    right: 0;
    left: auto;
}
section.gridPreview div.preCol.ix-push-1 {
    position: relative;
    left: 8.33333%;
    right: auto;
}
section.gridPreview div.preCol.ix-pull-1 {
    position: relative;
    right: 8.33333%;
    left: auto;
}
section.gridPreview div.preCol.ix-push-2 {
    position: relative;
    left: 16.66667%;
    right: auto;
}
section.gridPreview div.preCol.ix-pull-2 {
    position: relative;
    right: 16.66667%;
    left: auto;
}
section.gridPreview div.preCol.ix-push-3 {
    position: relative;
    left: 25%;
    right: auto;
}
section.gridPreview div.preCol.ix-pull-3 {
    position: relative;
    right: 25%;
    left: auto;
}
section.gridPreview div.preCol.ix-push-4 {
    position: relative;
    left: 33.33333%;
    right: auto;
}
section.gridPreview div.preCol.ix-pull-4 {
    position: relative;
    right: 33.33333%;
    left: auto;
}
section.gridPreview div.preCol.ix-push-5 {
    position: relative;
    left: 41.66667%;
    right: auto;
}
section.gridPreview div.preCol.ix-pull-5 {
    position: relative;
    right: 41.66667%;
    left: auto;
}
section.gridPreview div.preCol.ix-push-6 {
    position: relative;
    left: 50%;
    right: auto;
}
section.gridPreview div.preCol.ix-pull-6 {
    position: relative;
    right: 50%;
    left: auto;
}
section.gridPreview div.preCol.ix-push-7 {
    position: relative;
    left: 58.33333%;
    right: auto;
}
section.gridPreview div.preCol.ix-pull-7 {
    position: relative;
    right: 58.33333%;
    left: auto;
}
section.gridPreview div.preCol.ix-push-8 {
    position: relative;
    left: 66.66667%;
    right: auto;
}
section.gridPreview div.preCol.ix-pull-8 {
    position: relative;
    right: 66.66667%;
    left: auto;
}
section.gridPreview div.preCol.ix-push-9 {
    position: relative;
    left: 75%;
    right: auto;
}
section.gridPreview div.preCol.ix-pull-9 {
    position: relative;
    right: 75%;
    left: auto;
}
section.gridPreview div.preCol.ix-push-10 {
    position: relative;
    left: 83.33333%;
    right: auto;
}
section.gridPreview div.preCol.ix-pull-10 {
    position: relative;
    right: 83.33333%;
    left: auto;
}
section.gridPreview div.preCol.ix-push-11 {
    position: relative;
    left: 91.66667%;
    right: auto;
}
section.gridPreview div.preCol.ix-pull-11 {
    position: relative;
    right: 91.66667%;
    left: auto;
}
section.gridPreview div.preCol.ix-centered {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    float: none;
}
section.gridPreview div.preCol.ix-centered:last-child {
    float: none;
}
section.gridPreview div.preCol.ix-uncentered {
    float: left;
    margin-left: 0;
    margin-right: 0;
}
section.gridPreview div.preCol.ix-uncentered:last-child {
    float: left;
}

/********************************************************************/
/** Grid configuration - Action panel (right)                      **/
div#portalConfigOverlay section.gridCfg div[data-config="actionpanel"] {
    /* TODO */
}
div#portalConfigOverlay section.gridCfg div[data-config="actionpanel"] button:hover {
    cursor: pointer;
    background-color: #eaeaea;
}

/********************************************************************/
/** Grid configuration - Grid Preview                              **/
div#portalConfigOverlay section.build section.gridPreview div.preview-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
div#portalConfigOverlay section.build section.gridPreview div.preview-level-0 {
    position: relative;
    z-index: 1;
    height: 100%;
}
div#portalConfigOverlay section.build section.gridPreview div.preview-level-1 {
    position: absolute;
    z-index: 2;
    top: 0;
}
div#portalConfigOverlay section.build section.gridPreview div.preview-max-height {
    height: 100%;
}

/********************************************************************/
/** Grid configuration elements                                    **/
section.gridCfg div[data-config="viewportsize"] {
    padding: 10px 0 10px 10px;
}
section.gridCfg div[data-config="configtable"] {
    width: auto;
    padding: 10px 0;
    min-height: 260px;
    position: relative;
}
.cfgColumns {
    max-height: 249px;
    overflow-y: auto;
}
section.gridCfg div[data-config="actionpanel"] {
    position: absolute;
    top: 25px;
    right: 40px;
}
section.gridCfg div[data-config="actionpanel"] button {
    display: block;
}
div.portalsite div.portalcolumn.ix-centered {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    float: none;
}
div.portalsite div.portalcolumn.ix-centered:last-child {
    float: none;
}
div.portalsite div.portalcolumn.ix-uncentered {
    float: left;
    margin-left: 0;
    margin-right: 0;
}
div.portalsite div.portalcolumn.ix-uncentered:last-child {
    float: left;
}

/********************************************************************/
/** Portalseite - Edit-Mode                                        **/
div.portalsite.editMode {
    border: 1px dashed #cccccc;
    box-shadow: 0 0 50px #cccccc;
}
div.portalsite.editMode div.portalcolumn {
    border: 1px dashed #cccccc;
}
div.editModeBtnContainer {
    margin: 0.3em 0 0 0;
    float: right;
}
div.editModeBtnContainer button {
    margin: 0 0 0 0.3em;
}
header.headerEditMode h3 {
    font-size: 36px;
    text-align: center;
    margin-bottom: 20px;
}

/********************************************************************/
/** Toggle                                                         **/
div#portalConfigOverlay div.poolToggle,
div#portalConfigOverlay section.appBuild div.appToggle:hover {
    cursor: pointer;
}

div#portalConfigOverlay section[data-accordion="close"] *[data-toggle="true"] {
    display: none;
}