/* apply to jquery ui dialog */
.ui-dialog-no-close-button .ui-dialog-titlebar-close {
    display: none;
}
.ui-dialog-no-title-bar .ui-dialog-titlebar {
    display: none;
}
.ui-dialog-no-buttonpane .ui-dialog-buttonpane {
    display: none;
}
.ui-dialog-no-border {
    border: 0px none transparent;
    background-color: white !important;        /* see ui.css */
    padding: 0;
    border-radius: 0px;
}
.ui-dialog-article {
	omargin-top: 20px;
	obox-sizing: border-box;
}
.ui-dialog-article .ui-dialog-content {
    background-color: var(--background-color);                            /* see article_display.css kprint.css ui.css */
    color: var(--text-baseColor);
}
.ui-dialog-list .ui-dialog-content {
    background-color: white !important;                            /* see article_display.css kprint.css ui.css */
    color: black;
}
.dialog-content-0 {
    font-size: 1em;
}

.font-size-decrease {
    display: inline-block;
    width: 25px;
    height: 25px;
    background: url(/player/icons/decrease.png) center center;
    font-size: 0.8em;
    cursor: pointer;
    vertical-align: middle;
}

.font-size-increase {
    display: inline-block;
    width: 25px;
    height: 25px;
    background: url(/player/icons/increase.png) center center;
    font-size: 1.2em;
    cursor: pointer;
    vertical-align: middle;
}

/*.ui-dialog-article .ui-dialog-content {
    margin: 0px;
    padding: 0px !important;
    padding-top: 40px !important;
    padding-left: 6px !important;            / * left panel * /
}*/
.ui-dialog-content {						/* ma DIV à moi */
    margin: 0px;
    padding: 0px !important;
    opadding-top: 40px !important;
    opadding-left: 6px !important;            /* left panel */
}
/*.ui-dialog-sla {						/ * ma DIV à moi * /
    margin: 0px;
    padding: 0px !important;
    opadding-top: 40px !important;
    opadding-left: 6px !important;            / * left panel * /
}
BODY.page-folder-article .ui-dialog-content {
    opadding-top: 26px !important;
}
.ui-dialog-sla {
    opadding-top: 26px !important;
}*/
@media (max-width: 500px) {
    .ui-dialog-article .ui-dialog-content {
    }
}

.ui-dialog-header-sla {
	display: none;
    position: relative;
    box-sizing: border-box;
    height: 0px;
    width: 100%;
	ofont-size: 0.8em;				/* player-header-sla */
	font-family: Verdana, Geneva, sans-serif;		/* même aspect bouton retour que celui qui est en dehors de ui-dialog */
}
.ui-dialog-header-sla button {
	font-size: 0.725em;				/* ui-widget = 1.1em */
	font-family: Verdana, Geneva, sans-serif;		/* même aspect bouton retour que celui qui est en dehors de ui-dialog */
}
/*.ui-dialog-back-sla {
}*/

/*.ui-dialog-close-sla {
    position: absolute;
    right: 0;
    bottom: 0;
    display: block;
    padding: 0.4em;
    padding-left: 1em;
    padding-right: 1em;
    padding: 0;
    background-color: #3d7acc;
    color: white;
    cursor: pointer;
    width: 40px;
    height: 40px;
    width: 26px;
    height: 26px;
    background-image: url("/player/icons/close-panel.png");
    background-position: center center;
    z-index: 1;/ * to be over group-button which is also absolute when screen width is small * /
}*/

.group-container-article {
    width: 100%;
    height: 100%;
    overflow: auto;
    margin: 0;
    padding: 0;
    opadding-right: 20px;
	padding-left: 10px;
	padding-right: 10px;
    box-sizing: border-box;
}

@media (max-width: 500px) {
    .group-container-article {
        padding-right: 4px;
    }
}

.article-items {

}

.article-item {                /* A */
    text-decoration: none;
    odisplay: block;
    padding: 4px;
    ooverflow: hidden;
    border-top: 1px dotted var(--text-baseColor);
	border-top: 1px solid #f8f8f8;
	
	oborder: 1px dashed purple;
}

.article-first {
    border-top: 0px none transparent;
}

.article-item .article-item-1 {
    odisplay: table-cell;
    oheight: 40px;
    overtical-align: middle;
    color: var(--text-baseColor);
    text-align: justify;
}

.article-item-0 {
	background-color: var(--background-color-article-list);			/* à définir */
	background-color: #f8f8f8;
}

.article-read {
	oborder: 4px dashed purple;
}

.article-current {
    background-color: #3d7acc;
	oborder: 8px dashed purple;
}

.article-item-0.article-current  .article-item-1 {
    color: #ffffff;
}

.article-item {
	border-top: 0;
	border-top: 1px solid #ffffff;
}

/* e8e5e0 */
.article-subgroup-label {
	oborder-bottom: 1px solid #f8f8f8;
}

.article-tabs {
	display: table;
	border-collapse: collapse;
	oborder-bottom: 1px solid #3d7acc;
}

.article-tab {
    cursor: pointer;
    display: table-cell;
    padding: 10px;
    background-color: #e0e0e0;
    background-color: white;
    color: #ffffff;
	font-size: 0.8em;
	border: 1px solid #a0a0a0;
	color: #707070;
background-color: #b7b7b7;
color: #4d4d4d;
oborder: 1px solid white;
border-bottom: 0;
	border-bottom: 1px solid #a0a0a0;
	border: 1px solid #e0e0e0;
}
.article-tab:hover {
    background-color: #c0c0c0;
	oborder: 1px solid #a0a0a0;
	color: #303030;
	color: white;
    background-color: #3d7acc;
    color: #ffffff;
}
.article-tab-visible, .article-tab-visible.article-tab:hover {
    background-color: #3d7acc;
	oborder: 1px solid #3d7acc;
    color: #ffffff;
	border-bottom: 1px solid #3d7acc;
}

.ooooooarticle-group, 
.article-newgroup {
    font-family: 'Droid Serif', serif;
    odisplay: none;
	border-sizing: border-box;
	oborder: 4px dashed purple;
}

.ooooooarticle-group-visible, 
.article-newgroup-visible {
    display: block;
}
/*.article-newgroup-container {
}
.article-newgroup-container-hidden {
	display: none;
}*/


.area-prev-article, .area-next-article {
    cursor: pointer;
    height: 100%;
    width: 100%;
}




.article-subgroup {							/* regroupement par page */
	oborder: 2px dashed orangered;
	display: block;
}
.article-subgroup-label {
    background-color: #3d7acc;
    background-color: #b7b7b7;
    color: #ffffff;
    padding: 4px;
    min-height: 20px;
	font-size: 0.8em;
	font-size: 0.9em;
	font-family: Verdana, Geneva, sans-serif;
	display: block;
}
.article-subgroup-label-active {
    background-color: var(--text-baseColor);
    color: var(--background-color);
}
.article-items {
	display: block;
}
A.article-item {
	display: table-cell;
	vertical-align: middle;
	width: 100%;
}
A.article-item-image-container-0 {
	display: table-cell;
	border-top: 1px solid #ffffff;
	box-sizing: border-box;
	height: 60px;
	vertical-align: middle;
}
.article-item-image-container-1 {
	width: 80px;
	text-align: center;
}
.article-item-image {
	max-width: 80px;
	max-height: 60px;
}
.article-item-0 {
	oborder: 1px dashed red;
	odisplay: table;
	otable-layout: fixed;		/* avoid long words push bookmark out of visible area */
	owidth: 100%;
	display: table-row;
}
.article-item-titre {
	oborder: 1px dashed red;
	owidth: 100%;
	odisplay: table-cell; vertical-align: middle; height: 40px;
}
.article-item-titre-1 {
	display: block; max-height: 40px; overflow: hidden;
}
.article-item-actions {
	display: table-cell;
	border-top: 1px solid #ffffff;
	vertical-align: middle;
}
.article-item-action-1 {
	font-size: 1rem;
	margin-left: 10px;
	margin-right: 10px;
	width: 28px;
	text-align: center; 
}
.article-item-action-1 IMG {
	vertical-align: middle;
}
A.article-item .article-item-1 {
	display: block;
	ooverflow: hidden;
	oheight: auto;
	omin-height: 40px;
	omax-height: 40px;

	display: block; max-height: 40px; overflow: hidden;
	word-wrap: break-word;		/* avoid long words push bookmark out of visible area */
}
/*article-item-titre => article-item
article-item-titre-1 => article-item-1*/

.article-supplement {
    display: none;
	oborder: 2px dashed purple;
}

.article-supplement.active {
    display: inline-block;
    display: block;
}


/* article-template.css */
.group-button[gid="diaporama"] {
	display: none;
}
.article-with-diaporama .group-button[gid="diaporama"] {
	display: inline-block;
}
/* article-template.css */