@import "Colors.less";

/*
    Kalender Zellen passen sich der größe des Kalenders an.
    Das Layout der Zellen passt dann nur nicht mehr...
*/
/*.k-scheduler-monthview .k-scheduler-content .k-scheduler-table-auto, .k-scheduler-monthview .k-scheduler-table-auto, .k-scheduler-monthview .k-scheduler-table-auto td {
    height: -webkit-fill-available !important;
}*/

body {
    /*Kendo DayTemplates überschreiben*/
    .k-event, .k-task-complete {
        background-color: transparent !important;
        border-width: 0px !important;
        color: black;
        pointer-events: none;
    }

    .k-scheduler-content .k-scheduler-table tbody td {
        height: 50px !important;
        background-color: white;
    }

    .k-today {
        background-color: @todayColor !important;
        font-weight: bold;
    }

    .k-state-selected {
        background-color: @selectionColor !important;
    }

    .k-scheduler {
        border-right-style: solid;
        width: 80%;
    }
    .k-input {
        width: max-content;
    }


    .toDoListItem{
     
        font-size:15px;  
        padding:15px;
        border-bottom:dashed;
        border-bottom-width:1px;

      
    }
      
    .absenceRequestDay {
        /*pointer-events: none;*/
        /*background-color:#c1a0a0;*/
        /*height: 90px;*/
        overflow: hidden;
        color: @dayItemInactiveColor;

        .titleContainer {
            overflow: hidden;

            .dayItemTitle {
                width: auto;
                max-width: 60%;
                max-height: 30px;
                text-overflow: ellipsis;
                overflow: hidden;
                float: left;
                font-size: 25px;
            }

            .dayItemFile {
                margin-left: 10px;

                .dayItemFilesCount {
                    position: absolute;
                    margin-left: 23px;
                    top: -5px;
                    color: black !important;
                    font-size: 13px;
                }

                i {
                    position: absolute;
                    top: -1px;
                    /*color: @dayItemTextColor;*/
                    font-size: 25px;
                }
            }
        }



        .dayItemStatus {
            color: @statusColor;
        }



        .dayItemButtons {
            /*display:none;*/
            float: right;
            text-align: right;
            /*position: relative;*/
            /*margin-top: 28px;*/
            right: 0px;
            list-style-type: none;
            pointer-events: all;

            .buttonElement {
                margin-right: 5px;
            }
        }

        .dayItemButton {
            position: relative;
            cursor: pointer;
            height: 30px;
            width: 30px;
            border-style: solid;
            color: @dayItemInactiveColor;
            text-align: center;
            /*padding-top:8px;*/
            font-size: 20px;
            /*border-style: solid;*/
            border-radius: 20px;
            border-width: 1px;


            .icon {
                margin-top: 6px;
                display: block;
                align-items: center;
                align-content: center;
            }
        }
    }

    .absenceRequestDay.active, .absenceRequestDay.approved, .absenceRequestDay.declined {
        color: @dayItemTextColor;

        .dayItemButtons {
            /*display:none;*/
            text-align: right;
            /*position: relative;*/
            top: 12px;
            right: 0px;
            list-style-type: none;
            pointer-events: all;

            .buttonElement {
                float: right;
                margin-right: 10px;
            }
        }

        .dayItemButton {
            color: @activeButtonColor !important;
            background-color: white;
            /*position: relative;*/
            cursor: pointer;
            height: 30px;
            width: 30px;
            color: #d5d5d5;
            text-align: center;
            /*padding-top:8px;*/
            font-size: 20px;
            border-style: solid;
            border-radius: 20px;
            border-width: 1px;
        }
    }
    /*InfoButton*/
    .dayItemButton.info {
        /*top: -15px;*/
    }

    .dayItemButton:hover {
        color: @activeButtonColor;
        border-style: solid;
        background-color: white;
    }

    .absenceRequestDay.disabled {
        background-color: #c1a0a0;
    }

    .approved {
        color: @statusApprovedColor;

        .titleContainer {
            color: @statusApprovedColor;
        }

        .dayItemStatus {
            color: @statusApprovedColor;
        }
    }


    .declined {
        color: @statusDeclinedColor;

        .titleContainer {
            color: @statusDeclinedColor;
        }

        .dayItemStatus {
            color: @statusDeclinedColor;
        }
    }
   

     //Hier kommmt die Tablet-Ansicht
    @media only screen and (min-width:768px) and (max-width:1025px) {

         .absenceRequestDay, .absenceRequestDay.active, .absenceRequestDay.approved, .absenceRequestDay.declined {

             .dayItemButtons{
                 width:100px;
             }

              
         }


    }


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


        .absenceRequestDay, .absenceRequestDay.active, .absenceRequestDay.approved, .absenceRequestDay.declined {

            .dayItemStatus {
                font-size: 10px !important;
            }

            .titleContainer {
                overflow: hidden;
                height: 10px;
                overflow: hidden;

                .dayItemTitle {
                    font-size: 10px;
                }
               .dayItemFile {
                margin-left: 5px;

                .dayItemFilesCount {
                    position: absolute;
                    margin-left: 23px;
                    top: -5px;
                    color: black !important;
                    font-size: 5px;
                    display:none;
                }

                i {
                    position: absolute;
                    top: 2px;
                    /*color: @dayItemTextColor;*/
                    font-size: 10px;
                }
            }
            }

            .dayItemButtons {
                 
            }

            .dayItemButton {
                /*border:none;*/
                height: 20px;
                width: 20px;
                font-size: 14px;
                margin-bottom: 5px;
                margin-right: 0px !important;

                .icon {
                    margin-top: 3px;
                }
            }
        }

        .absenceRequestDay {
        
         .dayItemButtons {
                margin-top:23px;
            }
        }
    }
}