﻿/*Calendar link buttons*/

.previous-button {
    background-image: url(images/Arrowhead-Left_black_48.png);
    background-size: 32px;
    background-repeat: no-repeat;
    vertical-align: middle;
    width: 32px;
    height: 45px;
    display: inline-block;
    /*padding-right: 5px;*/
    margin-left: 10px;
}

.next-button {
    background-image: url(images/Arrowhead-Right_black_48.png);
    background-size: 32px;
    background-repeat: no-repeat;
    vertical-align: middle;
    width: 32px;
    height: 45px;
    display: inline-block;
}

.today-button {
    background-image: url(images/Calendar_black_circle_64.png);
    background-size: 32px;
    background-repeat: no-repeat;
    vertical-align: middle;
    width: 32px;
    height: 45px;
    display: inline-block;
    padding-right: 5px;
}

.calendar-view-button {
    cursor: pointer;
    vertical-align: middle;
    background-size: 16px 16px !important;
    margin-right: 10px;
    display: inline-block;
    background-color: rgb(33, 150, 243) !important;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    text-align: center;
    color: #fff;
}

.calendar-view-date {
    font-size: 30px;
    display: inline-block;
    cursor: pointer;
    font-weight: 300;
    margin-top: 2px;
}



/* Calendar layout */

#calendarFooter {
    position: absolute;
    bottom: 0;
    background-color: #2971C5;
    left: 0;
    right: 0;
    height: 46px;
    text-align: center;
}

    #calendarFooter .button {
        padding: 8px 13px;
        display: inline-block;
        height: 100%;
        vertical-align: middle;
        cursor: pointer;
    }

        #calendarFooter .button:active {
            opacity: 0.5;
        }

        #calendarFooter .button > img {
            width: 32px;
            height: 32px;
            vertical-align: middle;
        }

/* Grid container */

.dx-datagrid-container {
    position: absolute;
    top: 50px;
    bottom: 0px;
}

/* arrows */

.nextButton {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAANKSURBVHhe7dW5bRtRGEVh0kpVgktR4jJUgNuQoMCdOLNyt+LQoQtwaFKeC46gjcssb/mX8wEE+SYi5h4Ot5uJ7u/vr6+urn4OH28OV8z6N7xu7+7uHg9HnDM5ACGCeGYFIEQQy+wAhAjiWBSAEEEMiwMQIvBvVQBCBL6tDkCIwK8iAQgR+FQsACECf4oGIETgS/EAhAj8qBKAEIEP1QIQIrCvagBCBLZVD0CIwK4mAQgR2NQsACECe5oGIERgS/MAhAjs6BKAEIEN3QIQIuivawBCBH11D0CIoB8TAQgR9GEmACGC9kwFIETQlrkAhAjaMRmAEEEbZgMQIqjPdABCBHWZD0CIoB4XAQgR1OEmACGC8lwFIERQlrsAhAjKcRmAEEEZbgMQIljPdQBCBOu4D0CIYLkQAQgRLBMmACGC+UIFIEQwT7gAxFMET09P3/f7/deHhwcF0VzIAMRRBJshgschgtseEYQNQIjgstABCBGcFz4AIYLTUgQgRHBcmgCECD5KFYAQwVvpAhAieJEyACGCg7QBCBEkD0CyR5A+AMkcAQGMskZAAK9kjIAA3skWAQEckSkCAjghSwQEcEaGCAjggugREMAEkSP4NL7jjOFm/t1ut9/Go2nD91Sknw+nywhgguEJcDP8sn6MR8v+7Ha7L0Owv8fzRfwFXKDxx8f/9eGKWc/j/xrPkxDAGdHHFwI4IcP4QgBHZBlfCOCdTOMLAbySbXwhgFHG8YUABlnHl/QBZB5fUgeQfXxJGwDjH6QMgPFfpAuA8d9KFQDjf5QmAMY/LkUAjH9a+AAY/7zQATD+ZWEDYPxpQgbA+NOFC4Dx5wkVAOPPFyYAxl8mRACMv5z7ABh/HdcBMP56bgNg/DJcBsD45bgLgPHLchUA45fnJgDGr8NFAIxfj/kAGL8u0wEwfn1mA2D8NkwGwPjtmAuA8dsyFQDjt2cmAMbvw0QAjN9P9wAYv6+uATB+f90CYHwbugTA+HY0D4DxbWkaAOPb0ywAxrepSQCMb1f1ABjftqoBML591QJgfB+qBMD4fhQPgPF9KRoA4/tTLADG96lIAIzv1+oAGN+3VQEwvn+LA2D8GBYFwPhxzA6A8WOZFQDjR7PZ/Ae9gTz9UYGbAwAAAABJRU5ErkJggg==);
    opacity: 0.6;
}

    .nextButton:active {
        opacity: 1;
    }

.prevButton {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAANdSURBVHhe7dq9btNQHIbxhjBySb0BxMqCxE0wsjRqr4A7YISBnZWBS2KkKucllpq2SezY5xz/P56fZDn2VOV95LZKNlcYtdvt3my325/l5fX+jll/y/Hh5ubmx/5yHAGMiDy+EMAZ0ccXAjghw/hCAEdkGV8I4JlM4wsBHMg2vhDAIOP4QgBF1vElfQCZx5fUAWQfX9IGwPh7KQNg/EfpAmD8p1IFwPgvpQmA8Y9LEQDjnxY+AMY/L3QAjD8ubACMP03IABh/unABMP5lQgXA+JcLEwDjzxMiAMafz30AjL+M6wAYfzm3ATB+HS4DYPx63AXA+HW5CoDx63MTAOO34SIAxm/HfACM35bpABi/PbMBMH4fJgNg/H7MBcD4fZkKgPH7MxMA46/DRACMv57VA2D8da0aAOOvb7UAGN+GVQJgfDu6B8D4tnQNgPHt6RYA49vUJQBH44vG/z68Du/VcG7G0/gPDw+fMo0vTZ8A3sYvP++X4TKNZgEwvg9NAmB8P6oHwPi+VA2A8f2pFgDj+1QlAMb3a3EAjO/bogAY37/ZATB+DLMCYPw4Lg6A8WO5KADGj2fyp4HOxv/M+NM0/zh4DZvN5p2CHS5xRthfAcXv+/v7t7e3t3+GaxwR+o/AgghGhP83sCCCM2YFIEQQw+wAhAj8WxSAEIFviwMQIvCrSgBCBD5VC0CIwJ+qAQgR+FI9ACECP5oEIETgQ7MAhAjsaxqAEIFtzQMQIrCrSwBCBDZ1C0CIwJ6uAQgR2NI9ACECO1b5TqDeTL2p5eWv/R3TrhWroh2uQ1nlCXDo7u7uYzl9Lcfr/zfsCvkkWD0AKRG8L6dv5SCCzkwEIESwDjMBCBH0ZyoAIYK+zAUgRNCPyQCECPowG4AQQXumAxAiaMt8AEIE7bgIQIigDTcBCBHU5yoAIYK63AUgRFCPywCECOpwG4AQwXKuAxAiWMZ9AEIE84UIQIhgnjABCBFcLlQAQgSXCReAEMF0IQMQIpgmbABCBONCByBEcF74AIQITksRgBDBcWkCECJ4KVUAQgRPpQtAiOBRygCECPbSBiBEkDwAyR5B+gAkcwQEMMgaAQEcyBgBATyTLQICOCJTBARwQpYICOCMDBEQwIjoERDABJEjIICJYkZwdfUPaXfWoigza6IAAAAASUVORK5CYII=);
    opacity: 0.6;
}

    .prevButton:active {
        opacity: 1;
    }

.prevButton, .nextButton {
    margin: -26px 12px 0;
    width: 52px;
    height: 52px;
    background-repeat: no-repeat;
}

.nextButton, .prevButton {
    right: 0;
}

.prevButton {
    left: 0;
}

.prevButton, .nextButton {
    position: absolute;
    top: 50%;
    cursor: pointer;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    background-size: 100% 100%;
}

/* colour key popout*/
.colourKeyBox {
    height: 20px;
    width: 20px;
    float: left;
    margin-bottom: 10px;
    vertical-align: middle;
}

.colourKeyDesc {
    margin-left: 5px;
}

/* home screen */
.up-next .no-data-text {
    color: #a8a8a8;
    font-size: 17px;
    text-align: center;
    margin-top: 30px;
    clear: both;
}

/*remove clear button from time input*/
input[type="time"]::-webkit-clear-button {
    display: none;
}

.next-patient-card {
    /* Force Hardware Acceleration in WebKit */
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

/*.dx-popup-title.dx-toolbar .dx-toolbar-items-container .dx-button {
    background-color: transparent!important;
}

.dx-popup-title.dx-toolbar .dx-toolbar-items-container .dx-button .dx-icon {
    color: #606060!important;
}

.dx-popover-wrapper .dx-popup-content .dx-toolbar .dx-button .dx-icon {   
    height: initial; 
    -webkit-background-size: initial;
    -moz-background-size: initial;
    background-size: initial;
    background-repeat: no-repeat;
    line-height: initial; 
}*/

.sh-chevron {
    display: inline-block;
    color: #fff;   
    cursor: pointer;
    vertical-align: middle;
    border-radius: 50%;
    background-color: #2971C5;
    padding: 10px;
    margin-left: 5px;
    font-size: 22px;
}

.imagePickerButtons {
    /*display: inline-block;
    position: relative;
    left: -15px;*/
    text-align: center;
}

    .imagePickerButtons div {
        border-radius: 50%;
        border: 3px solid #fff;
        height: 52px;
        width: 52px;
        background-color: #2971C5;
        text-align: center;
        /*float: left;*/
        display: inline-block;
    }

        .imagePickerButtons div h3 {
            color: #fff;
            margin-top: 13px;
        }

            .imagePickerButtons div:active {
                opacity: 0.5;
            }

            .imagePickerButtons div:hover {
                opacity: 0.7;
            }


.dx-toolbar-label>div {
    overflow: visible;
    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0 -5px;
    padding: 0 5px;
}

.noBookingsCover-myPatients {
    position: absolute;
    top: 0px;
    left: 20px;
    right: 20px;
    bottom: 0;
    background-color: #fff;    
    z-index: 10;
}

/*.semicircle-image {

    z-index: 3; width: 100px; height: 50px; background-color: grey; opacity: 0; border-radius: 0 0 100px 100px; position: relative; top: -53px;
}

.semicircle-image:hover {
    opacity: 0.2;
}*/

.patient-edit-image:hover {
    opacity: 0.7;
}