#datepicker,
#waitingListDatepicker,
#calendarExplanation {
    max-width: 420px;
}

.ui-datepicker {
    border-radius: 10px;
}

body > .ui-datepicker {
    z-index: 20 !important;
    width: 316px;
}

.ui-datepicker table {
    font-size: 16px;
}

.ui-datepicker-inline {
    width: 100%;
}

.ui-widget-header {
    background: transparent;
    border: 0px;
}

.ui-datepicker td {
    padding: 2px; /* Broytt frá 3px til 2px so tað ikki fer útum á mobil */
}

.ui-datepicker td span,
.ui-datepicker td a {
    padding: 10px;
}

.ui-datepicker td span,
.ui-datepicker td a {
    text-align: center;
}

.Available .ui-state-default,
.ui-widget-content .Available .ui-state-default,
.ui-widget-header .Available .ui-state-default,
.Available .ui-button,
html .Available .ui-button.ui-state-disabled:hover,
html .Available .ui-button.ui-state-disabled:active {
    background-position: 85% 15%;
    background-repeat: no-repeat;
    background-image: url(../images/GreenCircle.png);
    background-size: 8px;
}

.AvailableSpecialEvent .ui-state-default,
.ui-widget-content .AvailableSpecialEvent .ui-state-default,
.ui-widget-header .AvailableSpecialEvent .ui-state-default,
.AvailableSpecialEvent .ui-button,
html .AvailableSpecialEvent .ui-button.ui-state-disabled:hover,
html .AvailableSpecialEvent .ui-button.ui-state-disabled:active {
    background-position: 85% 15%;
    background-repeat: no-repeat;
    background-image: url(../images/YellowCircle.png);
    background-size: 8px;
}

.WaitingListAvailable .ui-state-default,
.ui-widget-content .WaitingListAvailable .ui-state-default,
.ui-widget-header .WaitingListAvailable .ui-state-default,
.WaitingListAvailable .ui-button,
html .WaitingListAvailable .ui-button.ui-state-disabled:hover,
html .WaitingListAvailable .ui-button.ui-state-disabled:active {
    background-position: 85% 15%;
    background-repeat: no-repeat;
    background-image: url(../images/RedCircle.png);
    background-size: 8px;
}

.AvailableWithoutRoom .ui-state-default,
.ui-widget-content .AvailableWithoutRoom .ui-state-default,
.ui-widget-header .AvailableWithoutRoom .ui-state-default,
.AvailableWithoutRoom .ui-button,
html .AvailableWithoutRoom .ui-button.ui-state-disabled:hover,
html .AvailableWithoutRoom .ui-button.ui-state-disabled:active {
    background-position: 85% 15%;
    background-repeat: no-repeat;
    background-image: url(../images/YellowCircle.png);
    background-size: 8px;
}


.ui-state-default, 
.ui-widget-content .ui-state-default, 
.ui-widget-header .ui-state-default, 
.ui-button, 
html .ui-button.ui-state-disabled:hover, 
html .ui-button.ui-state-disabled:active {
    border-radius: 6px;
}


.ui-state-disabled, 
.ui-widget-content .ui-state-disabled, 
.ui-widget-header .ui-state-disabled {
    opacity: 1;
}

td.ui-state-highlight,
.ui-widget-content td.ui-state-highlight,
.ui-widget-header td.ui-state-highlight {
    background: white;
    border: 0px;
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
    border: 1px solid #c5c5c5;
}

#calendarExplanation {
    padding-right: 7px;
    padding-left: 7px;
    font-size: 12px;
}

    #calendarExplanation .Box {
        vertical-align: middle;
        border-radius: 3px;
        display: inline-block;
        border: 1px solid #c5c5c5;
        height: 20px;
        width: 20px;
    }

    #calendarExplanation .Text {
        display: inline-block;
    }

    #calendarExplanation .Available .Box {
        background-position: 85% 15%;
        background-repeat: no-repeat;
        background-color: white;
        background-image: url(../images/GreenCircle.png);
        background-size: 4px;
    }

    #calendarExplanation .WaitingListAvailable .Box {
        background-position: 85% 15%;
        background-repeat: no-repeat;
        background-color: white;
        background-image: url(../images/RedCircle.png);
        background-size: 4px;
    }

    #calendarExplanation .AvailableWithoutRoom .Box {
        background-position: 85% 15%;
        background-repeat: no-repeat;
        background-color: white;
        background-image: url(../images/YellowCircle.png);
        background-size: 4px;
    }

    #calendarExplanation .SpecialEvent .Box {
        background-position: 85% 15%;
        background-repeat: no-repeat;
        background-color: white;
        background-image: url(../images/YellowCircle.png);
        background-size: 4px;
    }