.ccal * {
    -moz-user-select: -moz-none;
    -o-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    /*cursor: default;*/
	-webkit-margin-before: 0em;
	-webkit-margin-after: 0em;
}
/*.content,*/
.newcanvas,
.newcanvasfr {
    float:left;
/*    padding: 5px; */
    display: inline-block;
/*    font-size: 12px; */
    border-top: 1px solid #d9d9d9;
/*    border-radius: 5px; */
}

.calday,
.calhour,
.calmin,
.calsec,
.calmsec{
    float:left;
    position:relative;
}

.mindecbody,
.secdecbody{
    float:left;
    position:relative;
    width:40%;
}

.minedbody,
.secedbody{
    float:left;
    position:relative;
    width:56%;
}

.msecthbody,
.msecdecbody,
.msecedbody{
    float:left;
    position:relative;
    width: 52px;
    margin: 0px 5px;
}

.ccal li.calhourhead,
.ccal li.calminhead,
.ccal li.calsechead,
.ccal li.calmsechead{
    width:100%;
}

.calday {
    width: 45%;
    background: #fff;
}
.calhead,
.hourhead,
.minhead,
.sechead,
.msechead {
    color: #ff3333;
    /*background: #f9f9f9;*/
/*    border-bottom: 1px solid #d9d9d9;
    border-top-left-radius: 5px; */
    height: 53px;
    /*border-top-right-radius: 5px;*/
}
.hourhead,
.minhead,
.sechead,
.msechead {
    font-size: 13px;
    border-top-left-radius: 0px;
}
.msechead {
    border-top-right-radius: 5px;
}
.ccal .calhour {
    width: 32%; 
    background: #fff;
    border-top-left-radius: 3px;
}

.ccal .calmin {
    width: 20%;
    background: #fff;
}

.ccal .calsec {
    width: 24%;
    background: #fff;
}

.ccal .minedbody,
.ccal .secedbody {
    /*background: #f8f8f8;*/
/*    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;

    border-left: 1px solid #d9d9d9;
    border-right: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;
    margin-left: 1px;*/
}

.ccal .msecthbody,
.ccal .msecdecbody,
.ccal .msecedbody{
    /*background: #BBCCEE;*/
}

.ccal .calmsec {
/*    width: 10em;
    background: #CCDDBB;*/
}

.ccal ul {
    margin: 0;
    padding: 0!important;
    text-align: center;
}

.ccal li {
    list-style-type: none;
    display: inline-block;
    cursor: pointer;
    text-align: center;
    margin: 0;
    height: 14%;
}

.ccal .calday li {
    width: 14%;
}
.ccal .calhour li {
    width: 18%;
}

.ccal .calmin li {
    width: 48%;
}

.hourbody li {
    /*width: 24%;*/
}

.mindecbody li,
.secdecbody li
{
    /*width: 90%;*/
}

.minedbody li,
.secedbody li,
.msecthbody li,
.msecdecbody li,
.msecedbody li
{
    /*width: 40%;*/
}

.hourbody li.selected span,
.mindecbody li.selected span,
.minedbody li.selected span,
.secdecbody li.selected span,
.secedbody li.selected span,
.msecthbody li.selected span,
.msecdecbody li.selected span,
.msecedbody li.selected span {
    background: #666;
    color: white;
}

.ccal li span {
    display: inline-block;
    line-height: 25px;
}

.ccal li.calmonth, li.calmonth {
    width: 66%;
    font-size: 13px;
    cursor: default;
}

.ccal li span {
    /*padding: 0.1em 0.05em;*/
    display: block;
    width: 100%;
    height: 100%;
}

.ccal li.calprev span, .ccal li.calnext span {
    color: #aaa;
}

.ccal .calbody li.selected span,
.ccal .hourbody li.selected span,
.ccal .mindecbody li.selected span,
.ccal .minedbody li.selected span,
.ccal .secdecbody li.selected span,
.ccal .secedbody li.selected span,
.ccal .msecthbody li.selected span,
.ccal .msecdecbody li.selected span,
.ccal .msecedbody li.selected span {
    background: #9a9a9a;
    color: white;
    font-family: 'OpenSans-SemiBold', Arial;
    border-radius: 15px;
}
.ccal .calbody li:hover span,
.ccal .hourbody li:hover span,
.ccal .mindecbody li:hover span,
.ccal .minedbody li:hover span,
.ccal .secdecbody li:hover span,
.ccal .secedbody li:hover span,
.ccal .msecthbody li:hover span,
.ccal .msecdecbody li:hover span,
.ccal .msecedbody li:hover span {
    background: #d9d9d9;
    border-radius: 15px;
}


/*
.ccal .calbody li.preselected span {
    background: #f0f0f0;
}
*/
.ccal * {
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /*border-radius: 5px;*/
}

.today {
    font-family: 'OpenSans-SemiBold', Arial;
    border: 1px solid #f33;
    border-radius: 30px;
    
}

/*
.weekend {
    font-weight: bold;
    color:red;
}
*/

.control{
    border-top: 3px solid white;
    position:relative;
    clear:both;
    height:1.6em;
    width:100%;
}

.ctrlapply,
.ctrlnow,
.ctrlundo{
    width:33.33%;
    height:100%;
    float: left;
    border-top: 1px solid #d9d9d9;
    background: #f9f9f9;
    color: #f33;
    cursor: pointer;
    border-bottom-left-radius: 5px;
    font-size: 13px;
    padding: 5px 0px 0px 0px;
    text-align: center;
}
.ctrlundo {
    border-bottom-right-radius: 5px;
}
    .ctrlapply:hover,
    .ctrlnow:hover,
    .ctrlundo:hover {
	color: #08c;
    }
/*
.calendar-canvas { 
    text-align: center;
    background: white;
    border: 1px solid #d9d9d9;
    border-radius: 5px;
*/
/*
    v-moz-box-shadow: 0 3px 4px #999999;
    -moz-box-shadow: 0 3px 4px #999999;
    -webkit-box-shadow: 0 3px 4px #999999;
    box-shadow: 0 1px 2px #999999;
*/
}

.newcanvas {
/*
    padding: 5px;
    display: inline-block;
    border: 1px solid #d9d9d9;
    border-radius: 5px;
    text-align: center;
    background: white;
/*
    v-moz-box-shadow: 0 3px 4px #999999;
    -moz-box-shadow: 0 3px 4px #999999;
    -webkit-box-shadow: 0 3px 4px #999999;
    box-shadow: 0 1px 2px #999999;
*/
    /* full size   */
    /* width:41em; */

    /* size without msec  */
    width: 540px; /* = calday(200px) + calhour(122px) + calmin(96px) + calsec(96px)*/ /*calmsec(62px)*/

    /* size without sec,msec   */
    /* width:27em; */

    /* size without min,sec,msec   */
    /* width:22em; */

    /* size without hour,min,sec,msec   */
    /* width:14em; */
}

.newcanvasfr {
    /* full size   */
    /* width:41em; */

    /* size without msec  */
    /*width:32em;*/

    /* size without sec,msec   */
/*    width: 418px;
    height: 220px; */
	width: 100%;
    margin: 0px auto;
    display: block;
    /* size without min,sec,msec   */
    /* width:22em; */

    /* size without hour,min,sec,msec   */
    /* width:14em; */
}
.calprevmonth span {
    background: url(images/cal-arrow-left.svg);
}
.calnextmonth span {
    background: url(images/cal-arrow-right.svg);
}
.calweekdays li,
.hourheadul li,
.minheadul li,
.sechead li,
.msechead li {
    cursor: default;
}

/******* Template InfoPoint DateView *******/
.cont-cal {
    width: 324px; /*100px * 2 + margin + border*/
    height: 132px; /*100px + margin + border*/
}
.back-head {
}
.back-head .from,
.back-head .to {
    width: 50%;
    float: left;
    border-bottom: 1px solid #eaeaea;
    height: 23px;
}
    .back-head .from span,
    .back-head .to span {
    color: #333;
    font-size: 14px;
        font-family: 'OpenSans-Regular', Arial;
    }
.back-cal {
    width: 100px; /* General width */
    height: 100px; /* General height */
    /*border: 1px solid #eaeaea;*/
    border-radius: 5px;
    margin: 15px auto;
    cursor: pointer;
}
.back-head,
.back-cal .center-line,
.back-cal .top-line,
.back-cal .bottom-line {
    width: 100%;
    text-align: center;
}
.back-cal .center-line {
    height: 54%;
    line-height: 1;
    background: #f5f5f5;
}
    .back-cal .center-line span {
    color: #333;
        font-size: 50px;
        font-family: 'OpenSans-Light', Arial;
    }
.back-cal .top-line,
.back-cal .bottom-line {
    height: 23%;
    background: #9a9a9a;
    line-height: 1.2;
}
.back-cal .top-line {
/*    border-top-left-radius: 5px;
    border-top-right-radius: 5px;*/
}
.back-cal .bottom-line {
/*    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;*/
}
    .back-cal .top-line span,
    .back-cal .bottom-line span {
    color: #fff;
    font-size: 13px;
    font-family: 'OpenSans-Regular', Arial;
    }
    div.back-cal.selected .center-line {
	background: #08c;
    }
	div.back-cal.selected .center-line span {
	    color: #fff;
	}

.from.buttn span {
    /*color: #ff3333;*/
    border: none;
    background: #9a9a9a;
    color: #fff;
/*    border-radius: 3px;*/
    display: block;
    width: 50%;
    margin: 1px auto;
}
.to.buttn span {
    /*color: #009944;*/
    border: none;
    background: #9a9a9a;
    color: #fff;
/*    border-radius: 3px;*/
    display: block;
    width: 50%;
    margin: 1px auto;
}
    .buttn {
	cursor: pointer;
    }

.fromtoright,
.fromtoleft{
    float:left;
    width:15%;
    height:160px;
}
.fromtomiddle{
    float:left;
    width:70%;
    height:160px;
}
/*********************************/
.fromtoleftelem,
.fromtohead,
.nowbutton {
    text-align: center;
    font-size: 13px;
    margin: 5px 0px;
    cursor: pointer;
    color: #08c;
}
    .fromtoleftelem:hover,
    .nowbutton:hover {
	color: #000;
    }
    .fromtohead {
	margin-top: 14px;
	color: #ff3333;
	font-size: 14px;
	cursor: default;
    }
.fromtomiddletop {
    height: 160px;
}
.back-cal-cnt {
    width: 50%;
    height: auto;
    float: left;
}
/**********************************/
.hourminsecmsec,
.dayhourmin {
    background: rgba(250,250,250,.8);
    border: 1px solid #c5c5c5;
    z-index: 5000;
    border-radius: 3px;
}
/**********************************/
.lightfromdiv,
.lighttodiv{
    padding-top: 2px;
    padding-bottom: 2px;
    width: 100%;
    text-align: center;
}
.lightfromdiv input[type='date'],
.lighttodiv input[type='date']{
    padding: 0px;
    width: 61%;
    font-size: small;
}
.lightfromdiv input[type='time'],
.lighttodiv input[type='time']{
    padding: 0px;
    width: 33%;
    font-size: small;
}
.lightbtn{
    padding: 2px;
    width: 80%;
    text-align: center;
    margin: 0 auto;
}
.lightbtn:hover{
    background-color: grey;
}