.loader-popup 
{
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    z-index:9999;
    background-color:rgba(40,40,40,0.5);
    display:none;
}

.cal
{
    position:absolute;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    overflow:hidden;
    background-color:white;
}
.cal > div
{
    position:absolute;
    height:14.4%;
    width:12.6%;
    cursor:pointer;
}
.cal-head 
{
    background-color:#2a2a2a;
    color:white;
}

.cal-weeknum 
{
    background-color:#808080;
    color:white;
}
/*.cal-cell:hover
{
    background-color:white;
}*/
.cal-cell:hover
{
    background-color:rgb(187,208,50);
}

.cal > div > *
{
    position:absolute;
    top:50%;
    margin-top:-20px;
    height:40px;
    line-height:40px;
    text-align:center;
    left:0px;
    right:0px;
    overflow:hidden;
}

.cal-rep 
{
    background-color:rgb(214, 228, 128);
}
.cal-rep:hover
{
    background-color:rgb(187,208,50);
}

.cal-col-1 { left: 0%; }
.cal-col-2 { left: 12.5%; }
.cal-col-3 { left: 25%; }
.cal-col-4 { left: 37.5%; }
.cal-col-5 { left: 50%; }
.cal-col-6 { left: 62.5%; }
.cal-col-7 { left: 75%; }
.cal-col-8 { left: 87.5%; }

.cal-row-1 { top: 0%; }
.cal-row-2 { top: 14.3%; }
.cal-row-3 { top: 28.6%; }
.cal-row-4 { top: 42.9%; }
.cal-row-5 { top: 57.1%; }
.cal-row-6 { top: 71.4%; }
.cal-row-7 { top: 85.7%; }

.cal-nav 
{
    background-color:#2a2a2a;
    color:white;
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:30px;
}

.cal-body
{
    position:absolute;
    top:30px;
    left:0;
    right:0;
    bottom:0;
}

.cal-btn
{
    display:block;
    cursor:pointer;
    height:30px;
    line-height:30px;
    width:auto;
    margin-left:5px;
    margin-right:5px;
}
.cal-btn:hover
{
    color:rgb(187,208,50);
}
.cal-btn-left
{
    float:left;
}
.cal-btn-right
{
    float:right;
}


.sf-calendar-head{

    height: 32px;
    line-height: 32px;
    text-align: center;
    background-color: rgb(63,67,74);
    color: white;
    text-transform: uppercase;
    width: 100%;
    float:left;

}

.sf-calendar-head p {

    text-transform: uppercase;

}

.sf-calendar{

    width: 100%;
    height: 256px;
    background-color: #FFFFFF;

}

.sf-calendar-left, .sf-calendar-right {

    float: left;
    display: block;
    width: 10%;
    height: 100%;
    margin: 0;
    padding: 0;
    color: black;
    background-color: #adadad;
    text-align: center;
    color: white;
    line-height: 256px;
    cursor: pointer;
    

}
.sf-calendar-left:hover, .sf-calendar-right:hover {

    background-color: rgb(199,211,0);

}

.sf-calendar-panel {

    float: left;
    display: block;
    width: 80%;
    height: 100%;
    margin: 0;
    padding: 0;

}

.sf-calendar-panel a, .sf-calendar-panel div a {

    float: left;
    display: block;
    width: 14%;
    height: 32px;
    color: black;
    text-align: center;
    line-height: 32px;
    cursor: pointer;

}

.sf-calendar-panel p, .sf-calendar-panel div p {

    float: left;
    display: block;
    width: 14%;
    height: 32px;
    line-height: 32px;
    padding: 0;
    margin: 0;
    text-align: center;

}

.sf-calendar-panel-extracolumn a, .sf-calendar-panel-extracolumn div a {

    width: 12% !important;

}

.sf-calendar-panel-extracolumn p, .sf-calendar-panel-extracolumn div p {

    width: 12% !important;

}

.sf-calendar-weeksum{
    color: #adadad;
    border-left: 1px solid #adadad;
}

.sf-calendar-panel a:hover {

    background-color: rgb(3,55,153);
    color: white;
    text-decoration: none;
    font-weight: bold;

}
.sf-calendar-marked {

    background-color: rgb(199,211,0);

}
.sf-calendar-holiday {

    background-color: rgb(200,200,200);

}
.sf-calendar-current {

    background-color: rgb(3,55,153);
    color: white !important;

}