/**
 * PANELS
 */
.dl-panel {
    display: flex;
    flex-direction: column;
    border-radius: var(--border-radius-panel);
}

.dl-panel:not(.sub-panel) {
    box-shadow: var(--box-shadow-panel);
}

.as-row > * > .dl-panel:only-child {
    height: 100%; /* TODO andmm TEMP fix while both DL's exist, move this to .dl-panel above when old DL removed */
}

.panel-header {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding: .3em 1em;
    color: var(--color-panel-header-text);
    border-top-left-radius: var(--border-radius-panel);
    border-top-right-radius: var(--border-radius-panel);
    background-color: var(--color-panel-header-bg);
    border: 1px solid var(--color-panel-header-bg);
}

.panel-header.full-radius {
    border-radius: var(--border-radius-panel);
}

.dl-panel header + main .panel-header {
    padding: .25em; /** Reduces padding of nested panels' header **/
}

.dl-panel > main {
    flex-grow: 1;
    /* overflow: auto; */ /* TODO ANDMM ver si no da problemas quitarlo..*/
    background-color: var(--color-panel-bg);
    border-bottom-left-radius: var(--border-radius-panel);
    border-bottom-right-radius: var(--border-radius-panel); 
    padding: var(--padding-inside-vert) var(--padding-inside-horiz);
}

.dl-panel > main:empty {
    padding: 0;
}

.dl-panel > main:first-child {
    border-radius: var(--border-radius-panel);
}

.dl-panel > main > .dl-tabgroup > main > .dl-tab-body,
.dl-panel > main > .dl-layer > main > .dl-layer-body {
    padding: var(--padding-inside-vert) 0 0 0;
}

.panel-buttons-container .as-ico {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size-top-icons);
}

.panel-title {
    display: flex;
    align-items: center;
    font-size: 12px;
    flex-grow: 1;
    padding: .2em var(--margin-blocks-horiz-half);
}

.panel-title > i {
    color: var(--color-panel-header-icon);
    margin-right: var(--margin-blocks-horiz-half);
}

.panel-title > .dl-panel-text {
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
}

.dl-panel-int-title {
    width: 20px;
    border-radius: var(--border-radius);
    border-top-left-radius: var(--border-radius-panel);
    border-top-right-radius: var(--border-radius-panel);
    border: 1px solid var(--color-panel-header-bg);
    color: #fff;
    background-color: var(--color-panel-header-bg);
    writing-mode: vertical-rl;
    text-orientation: upright;
    line-height: 21px;
    padding: 3px;
    padding-top: 15px;
}

.dl-panel-int-body {
    width: 100%;
}

.dl-panel-body-inline {
    display: flex;
}

.dl-row.no-pad,
.dl-column.no-pad, 
.dl-panel.no-pad > main {
    padding: 0;
}

.dl-panel.no-pad > main > .dl-tabgroup > main {
    padding: 0 var(--margin-blocks-horiz) var(--margin-blocks-vert) var(--margin-blocks-horiz);
}

.dl-panel.no-pad > main > .dl-layer > main {
    padding: 0 var(--margin-blocks-horiz) var(--margin-blocks-vert) var(--margin-blocks-horiz);
}

.dl-panel-icon {
    padding-right: 5px;
}

.vert-pad,
.dl-panel.vert-pad {
    padding-top: var(--dl-col-padding-v-half);
    padding-bottom: var(--dl-col-padding-v-half);
}

.dl-label i {
    margin-top: 0;
    margin-right: .75em;
    margin-bottom: .75em;
    margin-left: 0;
}

.panel-toggleable {
    cursor: pointer;
}

/**
 * OBJLIST PANELS
 */
.objlist-panel .panel-header {
    flex-direction: column;
}

.objlist-panel .as-list-content {
    border-radius: 0;
    padding: 0;
}

.objlist-panel .as-list-content .as-list-table-padding-container {
    border-top-left-radius: 0;
}

/**
 * SUB PANEL
 */
.dl-panel.sub-panel {
    box-shadow: var(--box-shadow-panel);
    padding: 0;
    margin: var(--dl-col-padding-v-half) var(--dl-col-padding-h-half);
}

.dl-panel.sub-panel .panel-header {
    color: var(--color-sub-panel-header-text);
    padding: .3em 1em;
}

.dl-panel.sub-panel .panel-header .panel-title > .dl-panel-text {
    text-transform: none;
}

/**
 * INFO PANEL
 */
.dl-panel.info-panel > .panel-header,
.dl-panel.sub-panel.info-panel .panel-header {
    background-color: var(--color-modal-info-bg-light);
    border: 1px solid var(--color-modal-info-bg-light);
}

.dl-panel.info-panel > .panel-header .panel-title > i,
.dl-panel.sub-panel.info-panel .panel-title > i {
    margin-right: var(--margin-blocks-horiz-half);
    color: var(--color-modal-info-bg-dark);
}

.dl-panel.info-panel > main,
.dl-panel.sub-panel.info-panel > main {
    border-color: var(--color-modal-info-bg-light);
}

/**
 * SUCCESS PANEL
 */
.dl-panel.success-panel > .panel-header,
.dl-panel.sub-panel.success-panel .panel-header {
    background-color: var(--color-modal-success-bg-light);
    border: 1px solid var(--color-modal-success-bg-light);
}

.dl-panel.success-panel > .panel-header .panel-title > i,
.dl-panel.sub-panel.success-panel .panel-title > i {
    margin-right: var(--margin-blocks-horiz-half);
    color: var(--color-modal-success-bg-dark);
}

.dl-panel.success-panel > main,
.dl-panel.sub-panel.success-panel > main {
    border-color: var(--color-modal-success-bg-light);
}

/**
 * WARNING PANEL
 */
.dl-panel.warning-panel > .panel-header,
.dl-panel.sub-panel.warning-panel .panel-header {
    background-color: var(--color-modal-warning-bg-light);
    border: 1px solid var(--color-modal-warning-bg-light);
}

.dl-panel.warning-panel > .panel-header .panel-title > i,
.dl-panel.sub-panel.warning-panel .panel-title > i {
    margin-right: var(--margin-blocks-horiz-half);
    color: var(--color-modal-warning-bg-dark);
}

.dl-panel.warning-panel > main,
.dl-panel.sub-panel.warning-panel > main {
    border-color: var(--color-modal-warning-bg-light);
}

/**
 * ERROR PANEL
 */
.dl-panel.error-panel > .panel-header,
.dl-panel.sub-panel.error-panel .panel-header {
    background-color: var(--color-modal-error-bg-light);
    border: 1px solid var(--color-modal-error-bg-light);
}

.dl-panel.error-panel > .panel-header .panel-title > i,
.dl-panel.sub-panel.error-panel .panel-title > i {
    margin-right: var(--margin-blocks-horiz-half);
    color: var(--color-modal-error-bg-dark);
}

.dl-panel.error-panel > main,
.dl-panel.sub-panel.error-panel > main {
    border-color: var(--color-modal-error-bg-light);
}

/**
 * CONFIRM PANEL
 */
.dl-panel.confirm-panel > .panel-header,
.dl-panel.sub-panel.confirm-panel .panel-header {
    background-color: var(--color-modal-confirm-bg-light);
    border: 1px solid var(--color-modal-confirm-bg-light);
}

.dl-panel.confirm-panel > .panel-header .panel-title > i,
.dl-panel.sub-panel.confirm-panel .panel-title > i {
    margin-right: var(--margin-blocks-horiz-half);
    color: var(--color-modal-confirm-bg-dark);
}

.dl-panel.confirm-panel > main,
.dl-panel.sub-panel.confirm-panel > main {
    border-color: var(--color-modal-confirm-bg-light);
}

/**
 * RADIO PANEL
 */
.radio-dl-panels-container .dl-panel.radio-header-panel,
.radio-dl-panels-container .dl-panel.radio-header-panel-active {
    box-shadow: unset !important;
}

.radio-dl-panels-container .dl-panel.radio-header-panel .panel-header,
.radio-dl-panels-container .dl-panel.radio-header-panel-active:first-child .panel-header {
    border-bottom-left-radius: var(--border-radius-panel) !important;
    border-bottom-right-radius: var(--border-radius-panel) !important;
}

.radio-dl-panels-container.dl-tab-body > :not(:only-child) {
    margin-bottom: 0;
}