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/def_buttons.less";
@import (reference) "../../../pixelegg/less/def_design_pattern_color_font_shadow.less";
@import (less) "../default/app.css";

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


div#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



        margin: 0 1% 0 0 !important;

        // 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: 6px;}

                    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; display: table-cell; }






        } // 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: 25px 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;
			}

            // Icons
            div#mail-index_mailPreviewIcons{}


            // 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: @egw_color_2_a;

                        &:hover {
                                .box_shadow_standard_light_hover;
                                .border_radius_button_lefttop ;
                                }

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

                                }
                    }


    }


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

    .dtree {
        .basefontfamily;
    }


    /*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{
    //	gesamtbreite
    width: 870px;
    padding: 5px;




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

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



    // ##################################
    //	Toolbar

    .mail-compose_toolbar{

        float: left;
        width: 100%;

        span.email-button-group {
            .span_tool_group;
            height: 27px;
        }

        span.sent {float: left;}
        span.save {float: left;}
        span.file {float: left;}
        span.egw {float: left;
                  img{
                        .dimension_height_s;
                        padding: 1px;
                        margin: 3px;
                        vertical-align: middle;
                  }
        }
        span.notification {float: left;
                    span.et2_label {line-height: 25px;}
        }
        span.priority {float: left;
                    span.et2_label {line-height: 25px;}
        }

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

        span.et2_label {font-size: 8px;}

        /*######################################*/
        /*// Button senden -> dev_buttons.less*/
        button.et2_button {
            /*.dimension_height_m;*/

/*             &:hover {.box_shadow_standard_light_hover; background-color:@color_positive_action;}
             &:focus {.box_shadow_standard_light_inset; .background_color_15_gray;}*/
        }


        .mail-compose_button{
            height: 27px;
            margin-right: 3px !important;
            margin-top: 0.7px !important;
            padding: 0 3px 0 0;
            text-align: left;
            font-weight: bold;
            padding-left: 20px;
            width: 71px;
            float: left;
            background-image: url(images/mail_send.png) !important;
            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;}

        }
        /*######################################*/
        // Save + Print

        img[id="mail-compose_button[saveAsDraftAndPrint]"],
        img[id="mail-compose_button[saveAsDraft]"]{
            vertical-align: middle;
            padding: 1px;
            margin: 3px;
            .Complete_Button_Icon_normal;
            .dimension_height_s;

            &:hover {.box_shadow_standard_light_hover; background-color:@color_positive_action;}

        }
        /*######################################*/
        // file

        // Dateimanager
        img[id="mail-compose_selectFromVFSForCompose"] {
            /*margin-left: 15px !important;*/
            .dimension_height_s;
            padding: 1px;
            margin: 3px;
            vertical-align: middle;
            float: left;
            .Complete_Button_Icon_normal;
            &:hover {.box_shadow_standard_light_hover; background-color:@color_positive_action;}
            &:focus {.box_shadow_standard_light_inset; .background_color_15_gray;}
        }

        // Dateien Upload
        .et2_file,
        .mail-compose_fileselector{

            float: left;
            vertical-align: middle;

            input#mail-compose_uploadForCompose{

                        /*font-size: 0.7em;*/
                        .Complete_Button_text_icon_before;
                        background-image: url(images/attach.png) !important;
                        .background_color_5_gray;
                        height: 16px;
                        margin-left: 2px;
                        margin-top: 2px;
                        &:hover {.box_shadow_standard_light_hover; background-color:@color_positive_action;}

                        &:focus {.box_shadow_standard_light_inset; .background_color_15_gray;}

              }

            div.progress {width: 212px;}
        }

        /*######################################*/
        /*save / Speichern als */
        //als Infolog
        #mail-compose_to_infolog{

            margin-right: 5px !important;
            &:hover{
            .scale;
            }
        }
        //als Ticket
        input[id="mail-compose_to_tracker"]{

            margin-right: 5px !important;
            &:hover {
                .scale;
            }
        }
        /*######################################*/
        // Empfangsbenachrichtigung
        #mail-compose_disposition{

            margin-right: 0px !important;
            &:hover {
                .scale;
            }

        }

        // Priorität
        #mail-compose_priority{
            margin-right: 0px;
            font-size: 9px;
            span.et2_label {margin-right: 3px;}
        }
    } // Toolbar Ende


    /*// ###############################################################################*/
    /*// Mail Header*/
    table.et2_grid {float: left;}

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

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

        span.ms-close-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*/

        /*Kopie*/
        span#mail-compose_cc_expander{
            .Complete_Button_normal;
            float: left;
            width: 47px;
            margin: 3px;
            font-size: 8px;
            margin-left: 12px;
            &:hover {.box_shadow_standard_light_hover; background-color:@color_positive_action; color: @gray_0;}
        }
        /*Blindkopie*/
        span#mail-compose_bcc_expander{
            .Complete_Button_normal;
            float: left;
            width: 47px;
            margin: 3px;
            font-size: 8px;
            margin-left: 12px;
            &: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;}
    }


    // Anhang
    fieldset.mailUploadSection{

        font-size: 0.8em;
        border: none;
        margin: 8px 0;
        .background_color_15_gray;
    }



} // Ende Dialog

/* ##################################################################################
 *       E-Mail Dialog "Ansehen"
 *          Preview
 * ##################################################################################
 */
#mail-display{
    //	gesamtbreite
    width: 870px;
    padding: 5px;
    .mailDisplayHeaderSection{
        top: 0;
        position: relative;



        /*Toolbar*/
        #mail-display_toolbar{
            background-color: @egw_color_2_e;
            background-image: none;
            padding: 5px 3px;
            height: 30px;
            display: -webkit-box;
           button {
                .Complete_Button_Icon_normal;
                height: 20px;
            }

            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"]{
                &: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"]{
                        &:hover {background-color: @egw_color_1_a;}
                        &:active {background-color: .background_color_15_gray;}
                    }        
                            
        }
            

        }

    }


    // Dateianhänge

    .mailDisplayAttachments {
        //	background-color:#efefdf;
        .background_color_10_gray;

        max-height: 10%;
        position: fixed;
        bottom: 26px;

        border: 0px solid @egw_color_3_a;

        border-bottom: 0px;
        opacity: 1;
        -moz-opacity:1;
        //	filter: Alpha(opacity=100);

        img {width: 16px;}

    }
    .mail_DisplayNone{
        display: none;
    }
    
    

    

} // Ende Display






/* ##################################################################################
 *       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: normal;}
}

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;
    }
    tbody, tr, td, span {
        width: 100%;
        overflow: hidden;
    }


    // Ende dtree
}




.useEllipsis {
    text-overflow: ellipsis;
    width: 250px;
    white-space: nowrap;
    overflow: hidden;
}




#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;
}


/*
 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: white;
  width: 100%;
}
#mail-index_mailPreview {
    overflow: hidden;
    position: relative;
    margin-top: 5px;
}
#mail-compose_fileselector {
    width: 245px !important;
}
#mail-compose_toolbar {
    padding: 0px !important;
}
#mail-compose_toolbar > button {
    padding: .2em .4em;
}
#mail-compose_toolbar > img {
    width: 16px;
    padding: 0px;
    height: 16px !important;
}
#mail-compose_toolbar > button > span > img {
    width: 16px;
    padding: 0px;
    height: 16px !important;
}







#mail-index_mailPreviewIcons {
    position: absolute;
    right: 0;
    top: 0;
}

// Headerbereich grau hinterlegt





#mail-index_mailPreviewContainer {
    position: absolute;
    border: 1px solid .color_10_gray;
    top: 97px;
    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;
}



#mail-index_toolbar {
    padding: 0px;
    background: none;
    margin: 5px 5px 0 0;
    border: none;


    /* Elemente */

           button {
                height: 24px !important;
                background-color: @gray_60;
                
                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"]{
                                &: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;
                           }
                }
                
            }


}



/*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: 2.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;}

}



.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: 1px solid silver;
    top: 120px;
    bottom: 100px;
}

.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;
        		}
}


//