.test-template {
    padding: .3em 1.4em .3em .6em;
    top: inherit;
    height: inherit;
    width: inherit;
}

@media(max-width: 48.0625em) {
    .test-template {
        padding: 0 !important;
        top: inherit;
        height: inherit;
        width: inherit;
    }
}
.k-scheduler-monthview .k-scheduler-table td {
    height: 150px !important;
}

/*.k-chart text {
    font: bold 14px  Arial !important;
}*/

.onCallAlignment {
    border: solid thin;
    width: 700px;
    height: 500px;
    padding-top: 50px;
}
@media screen and (max-width: 768px) { /* Tablets and smaller devices */
    .onCallAlignment {
        width: 90%; /* Adjust to fit the screen */
    }
    .custom-kendo-chart {
        width: 320px !important;
    }
    
}

@media screen and (max-width: 480px) { /* Mobile phones */
    .onCallAlignment {
        width: 106%; /* Slightly smaller for narrow screens */
    }
    .custom-kendo-chart {
        width: 300px !important;
    }
    
}

@media screen and (max-width: 320px) { /* Very small devices */
    .onCallAlignment {
        width: 100%; /* Full width for very small screens */
    }
    .custom-kendo-chart {
        width: 320px !important;
    }
}


.k-event {
    border: none !important;
}

.day-view-events {
    position: absolute;
    width: 960.9px !important;
    border: none !important;
}

.day-view-oncall-events {
    position: absolute;
    width: 286.9px !important;
    left: 3.45px !important;

}

.oncall-events {
    color :black;
    border: dashed !important;
    border-color: black !important;
    border-width: 1px !important;
}

.day-view-events-to-follow {
    width: 672.9px !important;
    left: 294px !important;
    border: none !important;
}

@media(max-width: 48.0625em) {
    .day-view-oncall-events {
        position: absolute;
        width: 73.9px !important;
        left: 3.45px !important;
    }
    .oncall-events {
        color:black;
        border: dashed !important;
        border-color: black !important;
        border-width: 1px !important;
    }

    .day-view-events-to-follow {
        width: 191.9px !important;
        left: 80px !important;
        border: none !important;
    }
    .day-view-events {
        position: absolute;
        width: 269.9px !important;
        border: none !important;
    }
}

@media only screen and (min-device-width:400px) and (max-device-width : 1024px) {

    .day-view-events-to-follow {
        width: 225.9px !important;
        left: 82px !important;
        border: none !important;
    }
}

/*IPAD*/
@media only screen and (min-device-width:768px) and (max-device-width : 1024px) {
    .day-view-oncall-events {
        position: absolute;
        width: 200.9px !important;
        left: 3.45px !important;
    }
    .oncall-events {
        color:black;
        border: dashed !important;
        border-color: black !important;
        border-width: 1px !important;
    }

    .day-view-events-to-follow {
        width: 454.9px !important;
        left: 210px !important;
        border: none !important;
    }
}

.k-event-template {
    padding: .3em 1.4em .3em .6em;
    height: 56px;
    background-color: #b7b7b7;
}

.headerToShow {
    background-color: #029ed9;
    height: 50px;
}

.header-image {
    margin-left: 10px;
    margin-top: 13px;
}

.footer-image {
    position: relative;
    bottom: 18px;
    margin-left: 50px;
}

.brand-info {
    margin-right: 125px;
    float: right;
}

.footerToShow {
    background-color: #029ed9
}


.note-edit-default-icon {
    padding-right: 15px;
    margin-right: 20px;
    float: right;
}

.note-edit-green-icon {
    padding-right: 15px;
    margin-right: 20px;
    float: right;
    color: green
}

.taskid {
    margin-right: 15px;
    float: right;
}


.dcc {
    background-color: #0967B1;
}

.dcc-oncall {
    background-color: lightgray;
}

.spa {
    background-color: #EA580D;
}

.ar {
    background-color: #6F4F9B;
}

.ed {
    background-color: #008E82;
}

.aw {
    background-color: #25A73B;
}

.arw {
    background-color: #DA1F6C;
}

.ut {
    background-color: #DA1F6C;
}

.leave {
    background-color: #50535a;
}

.red {
    color: red;
}

.blueviolet {
    background-color: rgba(2, 158, 217,0.25);
}

.other {
    background-color: #cccccc;
    color: #cccccc;
}

.holiday-event {
    background-color: rgb(183, 183, 183);
}


div.k-window-content {
    position: relative;
    height: 100%;
    padding: .58em;
    overflow: hidden;
    outline: 0;
}

.help-info {
    margin-left: 150px;
}

.calender-controls {
    margin-left: 40px;
}

@media(max-width: 48.0625em) {
    .help-info {
        margin-left: 40px;
        padding-top: 10px
    }

    .calender-controls {
        margin-left: 40px;
        padding-top: 10px
    }
}

@media only screen and (min-device-width: 400px) {
    .help-info {
        margin-left: 50px !important;
        padding-top: 10px !important;
    }

    .calender-controls {
        margin-left: 40px !important;
        padding-top: 10px !important;
    }
}

/*background color for today in day/week/month*/
.currentDay {
    /*background-color: #DC729A !important;*/
    background-color: #cff4fc !important;
}

.currentSlot {
    /*background-color: #DC729A !important;*/
    background-color: #b7b7b7 !important;
}

/* Diary page navigation links */
.k-scheduler-fullday,
.k-nav-today a,
.k-link:link,
#calendarsettings a,
#calendarsettingsMessage a,
#helpInfo {
    color: #424242;
}


/* Kendo state selected styles - commented out from kendo.custom.css */
/*.k-state-selected,
.k-state-selected:link,
.k-state-selected:visited,
.k-tool.k-state-selected,
.k-list > .k-state-selected,
.k-list > .k-state-highlight,
.k-panel > .k-state-selected,
.k-ghost-splitbar-vertical,
.k-ghost-splitbar-horizontal,
.k-draghandle.k-state-selected:hover,
.k-scheduler .k-scheduler-toolbar .k-state-selected,
.k-scheduler .k-today.k-state-selected,
.k-marquee-color {
    color: #ffffff;
    background-color: #af1478;
    border-color: #af1478;
}*/


/* Kendo scheduler work activity modal buttons */
.k-scheduler-edit-form .k-button.k-primary,
.k-scheduler-edit-form .k-button.k-primary:hover,
.k-scheduler-edit-form .k-button.k-primary:active,
.k-scheduler-edit-form .k-button.k-primary:focus {
    background-color: #337ab7 !important;
    border-color: #337ab7 !important;
    color: #fff !important;
    box-shadow: none !important;
    outline: none !important;
}

.k-scheduler-edit-form .k-button:not(.k-primary),
.k-scheduler-edit-form .k-button:not(.k-primary):active,
.k-scheduler-edit-form .k-button:not(.k-primary):focus {
    background-color: #ebebeb !important;
    border-color: #ebebeb !important;
    color: #000 !important;
    box-shadow: none !important;
    outline: none !important;
}

.k-scheduler-edit-form .k-button:not(.k-primary):hover {
    background-color: #5c636a !important;
    border-color: #5c636a !important;
    color: #000 !important;
    box-shadow: none !important;
    outline: none !important;
}