@import "Colors.less";

body {

    .absenceReasonsLegend {
        width: auto;

        .contingentGroup {
            float: left;
            display: block;
            height: 20px;
            overflow: hidden;
            margin: 0px;
            border: double;
            border-left: none;
            border-right: none;
            border-bottom: none;
            border-top: none;
            border-width: 1px;
            padding: 5px;
            margin-left: 0px;
            margin-right: 5px;
            background-color: lightgray;

            .contingent {
                font-size: 20px;
                background-color: transparent;
                color: black;
                top: -4px;
                margin-right: 5px;
                margin-left: 10px;
                position: relative;
            }

            /*.contingent:after {
                top: -4px;
                font-size: 12px;
                content: ' (Anspruch)';
            }*/

            


            .absenceReasonsContainer {




                .absenceReason {
                    display: inline-block;
                    white-space: nowrap;
                    float: left;
                    border: none;
                    background-color: transparent;
                    color: black;
                    width: auto;
                    height: 20px;
                    cursor: help;
                    margin-left: 5px;
                    /*padding-top:5px!important;*/
                    .absenceReasonText {
                        float: left;

                        div {
                            width: auto;
                        }
                    }


                    .absenceReasonText.disabled {
                        color: black;
                        border-color: none;
                    }
                }

                .absenceReason.disabled {
                    color: @disableColor;
                }


                .absenceReason:last-child {
                    border: none;
                }

                .absenceReason:after {
                    content: '';
                    margin-right: 10px;
                }
            }
        }


        .contingentGroup.disabled {
            color: @disableColor;
            border-color: whitesmoke;
            border: none;

            .contingent {
                font-size: 20px;
                background-color: transparent;
                color: @disableColor;
                top: -4px;
                margin-right: 5px;
                margin-left: 10px;
                position: relative;
            }
                      
        }
    }

    

    //Hier kommt die Tablet-Ansicht / Smartphone-Ansicht
    @media only screen and (max-width:1025px) {

        .absenceReasonsLegend {

            .contingentGroup {

                .contingent:after {
                    top: -4px;
                    font-size: 10px;
                    content: ' (Ansp.)';
                }



                .absenceReasonsContainer {
                    display: none !important;

                    .absenceReason {



                        .absenceReasonText {
                            overflow: hidden;
                            text-overflow: ellipsis;
                            max-width: 0px;
                        }
                    }
                }
            }
        }
    }
}