egroupware/mail/templates/pixelegg/app.less

/**
 * EGroupware: CSS with less preprocessor
 *
 * Mail
 *
 * Please do NOT change app.css directly, instead change app.less and compile it!
 *
 * @link http://www.egroupware.org
 * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
 * @author Stefan Reinhard <stefan.reinhard@pixelegg.de>
 * @package mail
 * @version $Id$
 */

@import (reference) "../../../pixelegg/less/layout_definitions.less";
@import (reference) "../../../pixelegg/less/definitions.less";
@import (reference) "../../../pixelegg/less/def_mobile.less";
@import (less) "../default/app.css";

#popupMainDiv{
	padding: 5px;
	.et2_grid{
		tr{
			td{
			padding: 5px 0;
			}
		}
	}
}
/*##############################################
#            #                               #
#            #                               #
#            #                               #
#            #                               #
#            #                               #
#            #                               #
#            #                               #
#            #       iframe                  #
#            #                               #
#            #                               #
#            #                               #
#            #                               #
#            #                               #
#            #                               #
##############################################
*/

/*Border around iframe*/
iframe#mail-display_mailDisplayBodySrc{
	height: 99%;
    /*border: 4px solid yellow;*/

}
/*Border around iframe*/
.mailDisplayContainer{
    border: 0px;
}

body {
	background-color: white;
}




#mail-index{


    table.egwGridView_grid{
        //			border-collapse: inherit;
        //			width: 99%;
    }
    // Rahmen + padding
    //				.box_shadow_dialog;

    #mail-index_mailPreviewContainer {}


    // Message - standdardmäßig ausgeblendet
    span#mail-index_msg{
        span {
            //				background: red;
            //				height: 30px;
        }
    }

    // alles
        // Box mit Header und Liste
        div#mail-index_nm{

            // Header
            div.nextmatch_header{
                // Counter
                span.header_count ui-corner-all{
                    span{}
                }

                // Filter
                div.filters{
                    // Fläche

                    select {margin-top: 9px;}

                    select#mail-index_filter{
                    }

                    select#mail-index_filter2{                    }

                    // Suchfeld
                    input#mail-index_search{
                        /*height: 20px !important;*/
                    }

                    // Suchknopf
                    button.et2_button {
                    }

                } // Ende Filter

            } // Ende Header


            // Listenausgabe der Emails
            div {}

            // Bilder in den Listen
            tr.mail td img {
                .dimension_height_xs;
                .box_shadow_none;
                .border_none;
            }
            tr.mail td img[src*="svg"]{ .gradient_vertical (@gray_70, @gray_70);}

            tr.mail div span {.dimension_height_xs;.box_shadow_none;}






        } // Ende: Box mit Header und Liste

        // Splitterbar
        div.splitter-bar,
        div.splitter-bar-horizontal {
            background-color: @color_splitter_bar;
        }



        // Ansicht der Emails
        div#mail-index_mailPreview{

            margin: 0;
            .background_color_5_gray;



            // From
            div#mail-index_mailPreviewHeadersFrom{
                width: 50%;
            }

            // An
            div#mail-index_mailPreviewHeadersTo{
                width: 50%;
            }

            // Date
            div#mail-index_mailPreviewHeadersDate{
                                position: absolute;
				right: 0px;
				margin: 3px 5px 0 0;
            }

            // Subject
            div#mail-index_mailPreviewHeadersSubject{
				width: 58%;
                text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
            }
			div#mail-index_mailPreviewHeadersSubject > span{
				white-space: nowrap;
			}

            // Email Inhalt
            div#mail-index_mailPreviewContainer{

                iframe#mail-index_messageIFRAME{

                    // Email Inhalt
                    div{}

                    // Zeit für das Anzeigen
                    div#divGenTime{}


                }


            }

        } // Ende: Ansicht der Emails




} // iframe




/*##############################################
#            #                               #
#            #                               #
#            #                               #
#            #                               #
#            #                               #
#            #                               #
#            #                               #
#   Side     #                               #
#   bar      #                               #
#            #                               #
#            #                               #
#            #                               #
#            #                               #
#            #                               #
############################################## */

.egw_fw_ui_category_content{

    // Create Feld
    #mail-index_buttonmailcreate{
        margin-left: 0px;



                    // #####################################################
                    // Create Button (mail)

                    button#mail-index_button[mailcreate],
                    button[id*="mailcreate"]{

                        .Complete_Button_add;
                                    background-image: url("images/write_mail_lighter.png") !important;
                                    background-position: right center !important;
                                    background-repeat: no-repeat;
                                    background-size: 20px 20px;
                                    padding-left: 25px;
                                    text-align: left;
                                    width: 93%;
                                    background-color: @gray_60;
                                    height: 32px;

                        &:hover {
                                .Complete_Button_add_hover;
                                .box_shadow_standard_light_hover;
                                .border_radius_button_lefttop ;
                                color: @gray_90;
                                }

                        &:active {
                                background-color: @color_positive_action_active !important;
                                .border_radius_button_lefttop ;
                                .box_shadow_standard_light_inset;

                                }
                    }


    }


    // Mail Liste der Postfächer
    span#mail-tree_target {
        max-height: 50%;
    }

    .dtree {
        .basefontfamily;
    }


    // color - selected tree item
    .selectedTreeRow, .selectedTreeRow_lor {background-color: @egw_color_1_a; color: @gray_90;text-decoration: none;}
    
	.standartTreeRow_lor {background-color: rgba(103, 159, 210, 0.2); color: @gray_90;text-decoration: none;}
    /*new mail in FOlder
    span.standartTreeRow b {color: @egw_color_2_a;}
  */
    /*move Mail*/
/*    .draggedOver {
        background-color: @color_hint;
    }*/


} // Ende Sidebox

/* ##################################################################################
 *       E-Mail Dialog "Compose"
 *
 * ##################################################################################
 */


/*###########################################
#                                           #
#                                           #
#############################################
#                                           #
#                                           #
#                                           #
#                                           #
#                                           #
#                   dialog                  #
#                                           #
#                                           #
#############################################
#                                           #
#    buttons                                #
#                                           #
#                                           #
##############################################*/

#mail-compose_mail_plaintext {white-space: pre-wrap !important}

#mail-compose{
    padding: 5px;
	max-height: 99%;



    // ##################################
    //	Identity
    .mailComposeHeaders:first-child{

        /*background-color: @gray-0;*/
        /*.gradient_thead;*/
    }



    // ##################################
    //	Toolbar
	.et2_toolbar button.toolbar_toggled {
		&:hover{
			background-color: white !important;
		}
	}

	#mail-compose_composeToolbar{

        // Senden Button
        button#composeToolbar-send{
            height: 24px;
            /*margin-right: 3px !important;*/
            margin-top: 0.7px !important;
            padding: 0 3px 0 0;
            text-align: left;
            font-weight: normal;
            padding-left: 20px;
            float: left;
            background-image: url(images/mail_send.png);
            background-position: left;
            background-repeat: no-repeat;
            background-size: 16px 16px;
            background-color: @egw_color_2_a;
            color: @gray_0;
            &:hover {.box_shadow_standard_light_hover; background-color:@color_positive_action;}
            &:disabled {background-color: @color_disabled !important;}

        }
		button#composeToolbar-to_infolog:hover,
		button#composeToolbar-to_tracker:hover,
		button#composeToolbar-disposition:hover,
		button#composeToolbar-to_calendar:hover {
			background-color: @egw_color_1_a;;
		}
    } // Toolbar Ende

	table.et2_grid  {display: inline-block;}
    /*// ###############################################################################*/
    /*// Mail Header*/

    .mailComposeHeaders,.mailComposeHeadersSection{
        margin: 2px 0;
        width: 98%;

        span {
               font-size: 0.8em;
               text-align: right;
               padding-right: 5px;
        }

        span.ms-close-btn, span.ms-edit-btn{
            width: auto;
            background-repeat: no-repeat;
            padding-right: 8px;
        }

        div{ max-width: 770px; 	}

        // Automatische Auwahlliste
        span.ui-state-error {color: @color_error;}
        div.ms-res-item-active {
            background: @egw_color_2_a;
            span {color: #FFFFFF;}
        }

        /*Von*/
        select#mail-compose_mailaccount {width: 100%; height: 30px;}
        /*An*/
		#mail-compose_to input {width:auto;}
        /*Kopie*/
        span#mail-compose_cc_expander,
        /*Blindkopie*/
        span#mail-compose_bcc_expander,
		span#mail-compose_folder_expander,
		span#mail-compose_replyto_expander{
			.Complete_Button_normal;
            float: left;
            width: 55px;
            margin: 3px;
            font-size: 8px;
            margin-left: 12px;
			padding:0;
            &:hover {.box_shadow_standard_light_hover; background-color:@color_positive_action;color: @gray_0;}
		}
        /*Betreff*/
        input#mail-compose_subject { max-width: 716px;}

        /*HTML Box*/
        input#mail-compose_mimeType {margin-left: 12px;}

    } // Ende Header

    // Mail Body


    // Signature
    fieldset.mailSignature {
        font-size: 0.8em;
        border: none;
        margin: 8px 0;

        select {}
        span {margin:0px 8px;}
    }


     // File sent as...
div.mailUploadSection {
  border-top: 0px solid silver;
  margin-top: 16px;
  width: 99%;

        // File Compose Elements
        div.et2_hbox {
              margin: -11px 0 5px -4px;

              label { margin-right: 10%;}

        }

        // Table - attachments
        #mail-compose_attachments{
            border-top: 1px solid silver;
        }

}


    fieldset.mailUploadSection{
                border-top: 0px solid silver;
		font-size: 0.8em;
		margin: 8px 0;
		border-bottom: none;
		border-left: none;
		border-right: none;
		width: 99%;
    }



} // Ende Dialog

#divGenTime_mail {
	display: none;
}

/* ##################################################################################
 *       E-Mail Dialog "Ansehen"
 *          Preview
 * ##################################################################################
 */

#mail-display{
    //	gesamtbreite
   
	min-height: 768px;
    padding: 5px;

    /*.mailDisplayHeaderSection{*/
        /*top: 0;*/
        /*position: relative;*/



        /*Toolbar*/
        .et2_toolbar,
        #mail-display_toolbar,
        mail-display_displayToolbar{
            /*.gradient_thead;*/
            background-color: transparent;
            .color_100_gray;
            clear: both;
/*            padding: 5px 3px;*/
            height: 36px;
            /*display: -webkit-box;*/

            // all buttons
            div.et2_toolbar_actionlist{
                margin-top: 0px;
                margin-left: 0px;}

           button {
                .Complete_Button_Icon_normal;
                height: 24px;
            }

            button[id*="toolbar-composeasnew"],
            button[id*="toolbar-reply"],
            button[id*="toolbar-reply_all"],
            button[id*="toolbar-forward"],
            button[id*="toolbar-print"],
            button[id*="toolbar-save"],
            button[id*="toolbar-header"]{
                &:active {background-color: @color_positive_action_active;}
            }

            button[id*="toolbar-unflagged"],
            button[id*="toolbar-delete"]{
                &:active {background-color: @color_negative_action_active;}
            }

            button[id*="toolbar-infolog"],
            button[id*="toolbar-tracker"],
			button[id*="toolbar-calendar"]{
                &:active {background-color: .background_color_15_gray;}
            }


            span.ui-state-default{
                float: left;
                background-image: none;
            }

            // Button ?

            // Button antworten

            // allen antworten

            // Forward
            #mail-display_forward_wrapper {

                &:hover {}
                &:focus {}

                li {
                    a {
                        img { width: 16px;margin-right: 3px;}
                    }
                }

            }

            // ?

            // speichern
            #mail-display_save_wrapper{


                &:hover {}
                &:focus {}

                // das Wort speichern
                button#mail-display_save {

                    background-image: url('../images/speichern.png');
                    background-position: left center;
                    background-repeat: no-repeat;
                    background-size: 16px 16px;
                    box-shadow: none;

                    &:hover {
                        img {display: none; background-image: none;}
                    }

                    &:focus {box-shadow: none; }
                }
                li {
                    a {
                        img { width: 16px;margin-right: 3px;}
                    }
                }
            }

            // anzeigen

            #mail-display_view_wrapper{

                &:hover {}
                &:focus {}

                button#mail-display_view{
                    box-shadow: none;

                    &:hover {
                        img {display: none; background-image: none;}
                    }

                    &:focus {box-shadow: none; }
                }



                li {
                    a {
                        img { width: 16px;margin-right: 3px;}
                    }
                }
            }

            // mark

            #mail-display_mark_wrapper{

                &:hover {}
                &:focus {}

                button#mail-display_mark{
                    box-shadow: none;

                    &:hover {
                        img {display: none; background-image: none;}
                    }

                    &:focus {box-shadow: none; }
                }

                li {
                    a {
                        img { width: 16px;margin-right: 3px;}
                    }
                }
            }


     /*OPEN SINGLE WINDOW AFTER CLICK ON MAIL*/
    // ###################### buttons##############################
    // #      #      #     #     #     #     #     #     #     ####
    // #      #      #     #     #     #     #     #     #     ####
    // ############################################################
    #toolbar-actionlist{

                    padding: 0px 3px;
                    span[data-group] {margin: 0px 40px 0 0;}
                     button {
                            .Complete_Button_Icon_normal;
                            height: 27px;
                                [src*="svg"]{
                                 .gradient_vertical (@gray_90, @gray_90);
                                            }
                            }
                    button[id*="toolbar-composeasnew"],
                    button[id*="toolbar-reply"],
                    button[id*="toolbar-reply_all"],
                    button[id*="toolbar-forward"],
                    button[id*="toolbar-print"],
                    button[id*="toolbar-save"],
                    button[id*="toolbar-header"]{
                        &:hover {background-color: @color_positive_action_active;}
                        &:active {background-color: @color_positive_action_active;}
                    }

                    button[id*="toolbar-unflagged"],
                    button[id*="toolbar-delete"]{
                        &:hover {background-color: @color_negative_action_active;}
                        &:active {background-color: @color_negative_action_active;}
                    }

                    button[id*="toolbar-infolog"],
                    button[id*="toolbar-tracker"],
					button[id*="toolbar-calendar"]{
                        &:hover {background-color: @egw_color_1_a;}
                        &:active {background-color: .background_color_15_gray;}
                    }

        }


        }

    /*}*/


    // Dateianhänge

    .mailDisplayAttachments {
        //	background-color:#efefdf;
        max-height: 12%;
        position: fixed;
        border: 0px solid @egw_color_3_a;

        border-bottom: 0px;
        opacity: 1;
        -moz-opacity:1;
        //	filter: Alpha(opacity=100);
		margin-left: 10px;
		width:98%;
        img {width: 16px;}

    }
    .mail_DisplayNone{
        display: none;
    }

} // Ende Display


// Toolbar ...from Hadi
/**
* et2_toolbar
*/
.et2_toolbar {

        button {
}
}

.et2_toolbar-dropdown{
        background: @gray_10 !important;
        background-color: @gray_10 !important;

        button{
        background: @gray_10 !important;
        background-color: @gray_10 !important;

        &:hover{}

        }

        ul> li{  }

        ul{          }

}

.et2_toolbar-dropdown-menulist {
            button{
                    background: @gray_10 !important;
                    background-color: @gray_10 !important;

                    &:nth-child(2){}

                    }
             ul{ }

}


div.ui-toolbar-menulist{
        .border_normal;
}
.ui-toolbar-menulist{

        h {
	padding-bottom: 7px;
	margin: 0;
        }

        button {

        }

        div{
	background-color: @gray_10 !important;
        .border_normal;
        }

}

.ui-toolbar-menulistHeader{
}
.et2_toolbar_activeList{
}


// all used button in toolbar
.et2_toolbar_actionlist{

        // zusammengesetzte Buttons
        .et2_toolbar-dropdown{
/*            background: @gray_10 !important;
            background-color: @gray_10 !important;*/
            margin: -4px 5px 2px 1px;
            .rounded(3px);

            .et2_dropdown{
                        .box_shadow_none;
                        border: none !important;
                        height: 24px !important;

                        button{
                            margin: 0px;
                            padding-top: -3px !important;
                            .box_shadow_none;
                            background: @gray_10 !important;
                            background-color: @gray_10 !important;

                            &:hover{}

                            img {
                                .dimension_width_height_s;
                                top: 3px;
                            }

                        }

             }
			 .et2_button_icon
			 {
				.dimension_height_xs;
			 }

            ul> li{  }

            ul{          }

        }

}


// aufgeklappte Toolbar
div#displayToolbar-menulist{

    .et2_dropdown{
        .box_shadow_none;
        border: none !important;
        button {.box_shadow_none;}
    }
        img {.dimension_width_height_sm; }

}

/* ##################################################################################
 *     Dialog: Subscripe Folder
 *
 * ##################################################################################
 */
#mail-subscribe, #mail-folder_management{

    table.et2_grid tr td {
                            padding: 0px;


                         /*Label*/
                           .mail_subscription_header {
                               .headline_h2;
                               line-height: 2em;
                               font-weight: bold;
                               font-size: 150%;
                               padding-bottom: 20px;

                           }


                         // Folder List
                           div.et2_box {
                             margin-top: 16px;
                             height: 484px;
                             overflow: auto;
                           }



    }
	// color - selected tree item
    .selectedTreeRow,.selectedTreeRow_lor {background-color: @egw_color_1_a; color: @gray_90;text-decoration: none;}
	// color - hover over standard tree item
	.standartTreeRow_lor {background-color: rgba(103, 159, 210, 0.2); color: @gray_90;text-decoration: none;}

} // #mail-subscribe

.mail_subscription_header, .mail_folder_management_header
{
  font-weight: bold;
  font-size: 150%;
  padding-bottom: 20px;
}

/* ##################################################################################
 *       E-Mail
 *
 * ##################################################################################
 */

/* felamimail uses the styledefinitions below to format navButton/navSeparator */
tr.navbarBackground {
    background-color:#dddddd;
}

div.navButton {
    background-color:#dddddd;
    float:left;
    padding: 2px;
    margin: 2px;
    border: solid #dddddd 1px;
}

div.navButton:hover, div.navButtonHover {
    background-color:#eeeeee;
    float:left;
    padding: 2px;
    margin: 2px;
    border: solid white 1px;
    border-right: solid black 1px;
    border-bottom: solid black 1px;
    position: relative;
}

div.navButton:active, div.navButtonActive {
    background-color:#dddddd;
    float:left;
    padding: 2px;
    margin: 2px;
    border: solid white 1px;
    border-left: solid black 1px;
    border-top: solid black 1px;
    position: relative;
}

div.navSeparator {
    background-color:#dddddd;
    float:left;
    padding: 0px;
    margin: 2px;
    border: solid silver 1px;
    height:24px;
    position: relative;
}

/* Fixes z-index problem with the calendar year selection (displays behind selectboxes)*/
.calendar .combo {
    z-index: 1 !important;
}

//#############################################################################################
// mail/templates/app.css

textarea
{
    font-family: monospace, sans-serif;
    font-size: 110%;
}

.defaultProfile { color:#000000; font-weight:bold !important; }


.quoted1 { color:#660066; }
.quoted2 { color:#007777; }
.quoted3 { color:#990000; }
.quoted4 { color:#000099; }
.quoted5 { color:#bb6600; }

tr.mail div {
    cursor: default;
    white-space: normal;
    text-overflow: ellipsis;
    span {text-overflow: ellipsis;white-space: noWrap;}
}

tr.mail a {
    cursor: pointer;
    white-space: nowrap;
    text-overflow: ellipsis;
}

tr.recent div,
tr.recent span,
tr.recent time,
tr.recent a,
tr.unseen div,
tr.unseen span,
tr.unseen time,
tr.unseen a {
    color: #003075;
    font-weight: bold;
}

tr.labelone div,
tr.labelone span,
tr.labelone time,
tr.labelone a {
    color: #ff0080 !important;
}
tr.labeltwo div,
tr.labeltwo span,
tr.labeltwo time,
tr.labeltwo a {
    color: #ff8000 !important;
}
tr.labelthree div,
tr.labelthree span,
tr.labelthree time,
tr.labelthree a {
    color: #008000 !important;
}
tr.labelfour div,
tr.labelfour span,
tr.labelfour time,
tr.labelfour a {
    color: #0000ff !important;
}
tr.labelfive div,
tr.labelfive span,
tr.labelfive time,
tr.labelfive a {
    color: #8000ff !important;
}

tr.flagged div,
tr.flagged span,
tr.flagged time,
tr.flagged a {
    color: #ff0000 !important;
}

tr.prio_high div,
tr.prio_high span,
tr.prio_high time,
tr.prio_high a {
    color: #ac0000 !important;
}

tr.deleted div,
tr.deleted span,
tr.deleted time,
tr.deleted a {
    color: silver;
    text-decoration : line-through;
}

span.status_img {
    display: inline-block;
    width: 12px;
    height: 12px;
    background-repeat: no-repeat;
    background-image: url(images/kmmsgread.png);
    background-size: 12px 12px;
}

tr.deleted span.status_img {
    background-image: url(images/kmmsgdel.png);
}

tr.unseen span.status_img {
    background-image: url(images/kmmsgunseen.png);
}

tr.flagged_seen span.status_img {
    background-image: url(images/read_flagged_small.png) !important;
}

tr.flagged_unseen span.status_img {
    background-image: url(images/unread_flagged_small.png) !important;
}

tr.recent span.status_img {
    background-image: url(images/kmmsgnew.png) !important;
}

tr.replied span.status_img {
    background-image: url(images/kmmsgreplied.png) !important;
}

tr.forwarded span.status_img {
    background-image: url(images/kmmsgforwarded.png) !important;
}

.subjectBold
{
    font-size: 12px;
    font-weight : bold;
    font-family : Arial;
}

.subject
{
    font-size: 12px;
    font-family : Arial;
}

TR.sieveRowActive
{
    font-size: 11px;
    height : 20px;
    padding: 0;
    background : White;
}

A.sieveRowActive
{
    font-size: 11px;
    height : 14px;
    padding: 0;
}

TR.sieveRowInActive
{
    font-size: 11px;
    height : 20px;
    padding: 0;
    background : White;
    color: Silver;
}

A.sieveRowInActive
{
    font-size: 11px;
    height : 14px;
    padding: 0;
    color: Silver;
}

.bodyDIV {
    position:absolute;
    background-color:white;
    top:134px;
    bottom:0px;
    width:100%;
    border-top: 1px solid #efefdf;
}

.bodyDIVAttachment {
    bottom:80px;
}

#attachmentSpanAllDIV{
    background-color:#efefdf;
    height:260px;
    overflow:auto;
}

#attachmentDIV {
    position:fixed;
    background-color:#efefdf;
    bottom:0px;
    min-height:80px;
    max-height:239px;
    width:100%;
    border-top: 1px solid silver;
    overflow:auto;
}

#popupattachmentDIV {
    position:top;
    background-color:#efefdf;
    bottom:0px;
    min-height:80px;
    max-height:239px;
    width:100%;
    border-top: 1px solid silver;
    overflow:auto;
}

pre {
    white-space: pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    width: 99%;
}

/*
 avoid the vertical scrollbar within the sidebox section (triggered by the vertical dimension of the tree)
*/
.divSidebox {
    overflow: hidden;
}
.textSidebox {
    overflow-x: hidden;
    overflow-y: auto;
}
/*
 avoid the vertical scrollbar within the actual tablecontainer (of the tree)
*/
.containerTableStyle {
    width: 100%;
    overflow: hidden;
}


.dtree {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #666;
    white-space: nowrap;

    div {
        width: 100%;
    }
    img {
        border: 0px;
        vertical-align: middle;
    }
    a {
        color: #333;
        text-decoration: none;
    }
    a.node, a.nodeSel {
        white-space: nowrap;
        padding: 1px 2px 1px 2px;

        &:hover{
            color: #333;
            text-decoration: underline;
        }
    }

    a.nodeSel {
        background-color: #c0d2ec;
    }
    .clip {
        overflow: hidden;
    }
    table, tr, td {
        border: none;
    }
    table {
        overflow: hidden;
        width: 100%;
        display: table-row;
    }

    // Ende dtree
}




.useEllipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
	word-wrap: break-word;
}




#mail-index {
    position: relative
}
.mail-index_quotabox {
    position: absolute;
    top:29px;
    right:-72px;
    width:200px !important;
    z-index:99;

    div.et2_progress {background-color: @gray_30 !important;}
    div.et2_progress > div {min-height: 4px !important;}

}
.mail-index_quotaDisplayNone {
    display: none !important;
}
.mail-index_QuotaGreen, .mail-index_QuotaYellow, .mail-index_QuotaRed {
    height:4px !important;
    width:100px !important;
}
.mail-index_QuotaGreen > div {
    background-color: green !important;
    height:4px !important;
}
.mail-index_QuotaYellow > div {
    background-color: yellow !important;
    height:4px !important;
}
.mail-index_QuotaRed > div {
    background-color: red !important;
    height:4px !important;
}

.mail-index_vacation {
	position: absolute;
	top:3px;
	right:190px;
	width:250px !important;
	z-index:99;
}
.mail-index_vacation > div {
	text-align: center;
}
.mail-index_vacation > div > span {
	color: red;
}

/*
 influence the tree display and scrolling behavior
*/
#mail-tree_target {
    min-height: 35px;
    max-height: 450px;
    display: block;
    display: -moz-inline-stack;
    display: -moz-box;
    width: 100%;
    overflow: hidden;
    overflow-y: auto;
    z-index:100;
}
/*
 we need the the image displayed with our buttons on the left side
*/
input[type=button] {
    background-position: left;
}

#mail-index_messageIFRAME {
    width: 100%;
    height: 100%;
    border: 0;
}

//#mail-index_button\[mailcreate\]

#mail-index_button[id*="mailcreate"]{
    width: 99%;
    text-align: left;
    font-weight: bold;
    padding-left: 25px;
    background-image: url(images/write_mail.png) !important;
    background-position: left;
    background-repeat: no-repeat;
}

//#mail-compose_button[id*="send"] {
//	text-align: left;
//	font-weight: bold;
//	padding-left: 30px;
//	width: 80px;
//	margin: 0px !important;
//	background-image: url(images/mail_send.png) !important;
//	background-position: left;
//	background-repeat: no-repeat;
//}
.mailDisplay {
  position: relative;
  background-color: transparent;
  width: 100%;
}
#mail-index_mailPreview {
    overflow: hidden;
    position: relative;
    margin-top: 5px;
}
#mail-compose_fileselector {
    width: 245px !important;
}

.mailPreviewIcons {
    position: absolute;
    right: 0;
    top: 0;
}

// Headerbereich grau hinterlegt





#mail-index_mailPreviewContainer {
    position: absolute;
    border: 1px solid .color_10_gray;
    top: 113px;
    bottom: 0;
    left: 3px;
    right: 0;
}

/*#######################################################*/
/*# ICON # ICON # ICON # ICON #ICON # ICON# ICON # ICON #*/
/*#######################################################*/



 /*Toolbar der Email*/
#mail-display_toolbar {
    padding: 0px;
}
#mail-display_toolbar > button > span {
    padding: .2em .4em;
}
#mail-display_toolbar > button > span > img {
    width: 16px;
    padding: 0px;
    height: auto;
}


// Button Toolbar - always visible
#mail-index_toolbar {
    /*padding: 0px;*/
    background: none;
    /*margin: 5px 5px 0 0;*/
    /*border: none;*/


    // alle Buttons / drag + drop
    #toolbar-actionlist{

        margin-top: 3px;

    }


    /* Elemente */

           button {
                height: 24px !important;


                img[src$="svg"]{

                .gradient_vertical (@gray_60, @gray_60);
                background-color: @gray_100;
                }


                    span {
                            padding: 0;

                            img {
                                .dimension_width_height_s ;
                                padding: 0px;

                            }
                        }




            }

            button[id*="toolbar-composeasnew"],
            button[id*="toolbar-reply"],
            button[id*="toolbar-reply_all"],
            button[id*="toolbar-forward"],
            button[id*="toolbar-flagged"],
            button[id*="toolbar-print"],
            button[id*="toolbar-save"],
            button[id*="toolbar-header"]{
                &:focus {
                    background-color: @color_positive_action;
                    .gradient_vertical (@color_positive_action, @color_positive_action);
                            img[src$="svg"]{
                           .gradient_vertical (@color_positive_action, @color_positive_action);
                           background-color: @color_positive_action;
                           }

                }
                &:hover {
                    background-color: @color_positive_action;
                    .gradient_vertical (@color_positive_action, @color_positive_action);
                            img[src$="svg"]{
                           .gradient_vertical (@color_positive_action, @color_positive_action);
                           background-color: @color_positive_action;
                           }

                }
                &:active {
                    background-color: @color_positive_action;
                    .gradient_vertical (@color_positive_action, @color_positive_action);
                            img[src$="svg"]{
                           .gradient_vertical (@color_positive_action, @color_positive_action);
                           background-color: @color_positive_action;
                           }

                }



            }

            button[id*="toolbar-unflagged"],
            button[id*="toolbar-delete"]{
                                &:focus {
                    background-color: @color_negative_action;;
                    .gradient_vertical (@color_negative_action, @color_negative_action);
                            img[src$="svg"]{
                           .gradient_vertical (@color_negative_action, @color_negative_action);
                           background-color: @color_negative_action;
                           }

                }
                &:hover {
                    background-color: @color_negative_action;
                    .gradient_vertical (@color_negative_action, @color_negative_action);
                            img[src$="svg"]{
                           .gradient_vertical (@color_negative_action, @color_negative_action);
                           background-color: @color_negative_action;
                           }

                }
                &:active {
                    background-color: @color_negative_action;;
                    .gradient_vertical (@color_negative_action, @color_negative_action);
                            img[src$="svg"]{
                           .gradient_vertical (@color_negative_action, @color_negative_action);
                           background-color: @color_negative_action;
                           }

                }
            }

            button[id*="toolbar-infolog"],
            button[id*="toolbar-tracker"],
			button[id*="toolbar-calendar"]{
                                &:focus {
                    background-color: @egw_color_1_a;
                    .gradient_vertical (@egw_color_1_a, @egw_color_1_a);
                            img[src$="svg"]{
                           .gradient_vertical (@egw_color_1_a, @egw_color_1_a);
                           background-color: @egw_color_1_a;
                           }

                }
                &:hover {
                    background-color: @egw_color_1_a;
                    .gradient_vertical (@egw_color_1_a, @egw_color_1_a);
                            img[src$="svg"]{
                           .gradient_vertical (@egw_color_1_a, @egw_color_1_a);
                           background-color: @egw_color_1_a;
                           }

                }
                &:active {
                    background-color: @egw_color_1_a;
                    .gradient_vertical (@egw_color_1_a, @egw_color_1_a);
                            img[src$="svg"]{
                           .gradient_vertical (@egw_color_1_a, @egw_color_1_a);
                           background-color: @egw_color_1_a;
                           }
                }

            }


}

// weitere Button
/*#toolbar-actionbox{.dimension_height_s;}*/
/*
h.ui-toolbar-menulistHeader,
#ui-accordion-toolbar-actionbox-header-0{

    .dimension_height_s;
    background-color: @gray_50;
    color: @gray_0;
    margin:0;

    // little ICON
    .ui-accordion .ui-accordion-header .ui-accordion-header-icon {
		margin-top: -11px;
		color: @gray_0;
	}

}

// accordion, where Button be placed
div#toolbar-menulist{
    background-color: @gray_50;
    color: @gray_0;

           Elemente

           button {
                height: 24px !important;

                img[src$="svg"]{

                                .gradient_vertical (@gray_60, @gray_60);
                                background-color: @gray_100;
                                }

                }

}*/



/*AN / To*/
div.mailPreviewHeaders div.mail_extraEmails {
    display: inline-block;
    max-height: 1.3em;
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;

    img.et2_button_icon {

        .dimension_width_height_m;

    }
}



// Anhänge an Email

#mail-index_previewAttachmentArea {
    //	background-color:#efefdf;
    .background_color_10_gray;
    border-color: @gray_10;
    .border_normal;
    max-height: 3.6em;
    //	filter: Alpha(opacity=100);

    img {.dimension_width_height_s;}
    td{padding: 2px;}

}
#mail-index_previewAttachmentArea.noContent {
    border:0px !important;
}

/* Button after field*/
#mail-index_mailPreviewHeadersAttachments{


    img.et2_button_icon {.dimension_width_height_xs; background-color: inherit;}

}



/*######################################################*/
/*Diplay : View                                         */
.mailDisplayContainer, .mailDisplayAttachments {
    display: block;
    display: -moz-inline-stack;
    display: -moz-box;
    width: 99%;
    overflow: hidden;
    overflow-y: auto;
    left: 3px;
    right: 3px;
    z-index: 100;
}
.mailDisplayContainer {
    position: fixed;
    overflow: hidden;
    overflow-y: auto;
	border-top: 2px solid silver;
	top: 120px;
	bottom: 108px;
	border-bottom: 1px solid silver;
	width: 98%;
	background-color: white;
	margin-left: 10px;
}

.mailDisplayHeaders {
    overflow: hidden;
}
.mailDisplayHeaderSection {
    position: absolute;
    top: 12px;

}
div.mailDisplayHeaders > div:first-parent {
    overflow: hidden;
}
div.mailDisplayHeaders > span:first-child, div.mailComposeHeaders > span:first-child, div.mailPreviewHeaders > span:first-child {
    width: 7em;
    display: inline-block;
}
div.mailComposeHeaders > span:first-child {
    width: 8em;
}
div.mailDisplayHeaders > span:first-child, div.mailComposeHeaders > span:first-child, div.mailComposeBody, div.mailPreviewHeaders > * {
    margin-left: 3px;}
div.mailDisplayHeaders div.mail_extraEmails {
  display: inline-block;
  max-height: 1.3em;
  max-width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
}
div.mailDisplayHeaders div.mail_extraEmails.visible {
  position: fixed;
  left: 7em;
  display: block;
  max-height: 8em;
  min-width: 30em;
  z-index: 999;
  overflow-y: auto;
  background-color: white;
}
#mail-importMessage{
	.et2_button_icon{
        			height: auto;
        			width: 24px;
        		}
}
div.mailComposeHeaderSection > table {
	padding-top: 10px;
}

/* transition delay breaks splitter resize, because it doesn't get the right height
	in a right time. So we reduce the delay to 0.1 to fix the timing issue.
	The delay should not be set to 0 or none because it wil conflict with blueimp gallery plugin (Expose).
*/
:hover {
	-webkit-transition: all 0.1s ease-out;
	-moz-transition: all 0.1s ease-out;
	-o-transition: all 0.1s ease-out;
	transition: all 0.1s ease-out;
}

/* tablets and smartphones  */
@media only screen and (max-device-width:1024px) {
	div.mailDisplayContainer{
		margin-top: 30px;
		margin-left:0;
		height: auto;
	}

	#mail-display.et2_container {
		min-height: initial;
	}

	.mailDisplayHeaders, .mailDisplayAttachments > * {
		font-size: large !important;
	}
	/*compose dialog*/
	body {
		#popupMainDiv {
			padding: 8px 8px 0 0;
			background: none;
		}
		
		.dtree {
			div.containerTableStyle {
				overflow: hidden;
			}
		}
		#mail-compose {
			.cke_chrome {
				border:none;
				box-shadow: none;
			}
			span#cke_1_top {
				display: none;
			}
			.mailComposeHeaderSection > table {
				padding: 0;
				tr.mailComposeHeaders.subjectContainer td:first-child::after {
					content: '';
				}
				tr.mailComposeHeaders {
					span {
						.mob-fontsize-n;
					}
					border-bottom: 1px solid silver;
					.subjectContainer:first-child::after{
						content: ':';
					}
					&:first-child {
						border-top: 1px solid silver;
					}
					span#mail-compose_cc_expander, span#mail-compose_cc_expander,
					span#mail-compose_bcc_expander, span#mail-compose_bcc_expander, 
					span#mail-compose_folder_expander, span#mail-compose_folder_expander,
					span#mail-compose_replyto_expander, span#mail-compose_replyto_expander
					{
						background: transparent;
						border: none;
						color: #26537c;
						text-decoration: underline;
						.mob-fontsize-n;
						width: 65px;
					}
				}
				div.et2_taglist > *, #mail-compose_subject, #mail-compose_mailaccount {
					border:none;
					box-shadow: none;
					.mob-fontsize-n;
				}
				#mail-compose_subject:focus {
					outline-color: transparent;
				}
			}
		}
	}
	
	#mail-index {
		table.egwGridView_outer tbody {
			span.et2_date_ro.et2_label {
				font-size: 9px;
			}
			td {
				padding-top: 8px;
				padding-bottom: 8px;
				a[id^='mail-index_'][id$='fromaddress]']{
					color:#26537c;
					.mob-fontsize-n;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					width: 98%;
				}
				span[id^='mail-index_'][id$='attachments]'] {
					float: right;
					img {
						width: 16px;
						height: 16px;
					}
				}
				span[id^='mail-index_'][id$='subject]'] {
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					width: 98%;
				}
				label[id^='mail-index_'][id$='date]']{
					padding-top: 0;
				}
			}
			tr{
				height:55px;
				div.recent ,
				span.recent ,
				time.recent ,
				a.recent,
				div.unseen ,
				span.unseen ,
				time.unseen ,
				a.unseen  {
					color: black !important;
					font-weight: bold;
				}
				span.mail.mobile_cat_col {
					background: #F5F5F5;
				}
				span.mail.labelone.mobile_cat_col  {
					background: #ff0080;
				}
				span.mail.labeltwo.mobile_cat_col{
					background: #ff8000;
				}
				span.mail.labelthree.mobile_cat_col {
					background: #008000;
				}
				span.mail.labelfour.mobile_cat_col {
					background: #0000ff;
				}
				span.mail.labelfive.mobile_cat_col {
					background: #8000ff;
				}

				span.mail.flagged.mobile_cat_col  {
					background: #ff0000;
				}

				span.mail.prio_high.mobile_cat_col {
					background: #ac0000;
				}

				span.mail.deleted.mobile_cat_col {
					background: silver;
					text-decoration : line-through;
				}
				span.status_img {
				padding:0 2px 2px 0;
				}
				span.deleted.status_img {
					background-image: url(images/kmmsgdel.png);
				}
				span.unseen.status_img {
					background-image: url(images/kmmsgunseen.png);
				}
				span.flagged_seen.status_img {
					background-image: url(images/read_flagged_small.png);
				}
				span.flagged_unseen.status_img {
					background-image: url(images/unread_flagged_small.png);
				}
				span.recent.status_img {
					background-image: url(images/kmmsgnew.png);
				}
				span.replied.status_img {
					background-image: url(images/kmmsgreplied.png);
				}
				span.forwarded.status_img {
					background-image: url(images/kmmsgforwarded.png);
				}
			}
		}
	}
}