/* ==========================================================================
   Project:     TWD CMS Calendar - Main
   Date:        2/03/17 - File created	
   Created by:  Third Wave Digital (www.thirdwavedigital.com)
   ========================================================================== */
   
/* ==========================================================================
   Colors
   ========================================================================== */
   
 @import 'colors.css.cms';

/* ==========================================================================
   Wrapper
   ========================================================================== */
   
.cms-calendar-wrapper {margin-bottom: 30px;}
   .cms-calendar-wrapper .btn, .cms-calendar-wrapper .form-control, .cms-calendar-wrapper .dropdown-menu, .cms-calendar-wrapper .modal-content, .cms-calendar-wrapper .well, .cms-calendar-wrapper .pagination li a, .cms-calendar-wrapper input, .input-daterange input:first-child, .input-daterange input:last-child, .datepicker {border-radius: 0px}
   
/* ==========================================================================
   Toolbar
   ========================================================================== */

.calendar-toolbar {position: relative;} 
   .calendar-toolbar .btn {border:none; color: #212121;  box-shadow:none; padding: 5px 10px}
   .calendar-toolbar .btn:not(.active):hover, .calendar-toolbar .btn:not(.active):focus, .dropdown-menu li a:hover, .dropdown-menu li a:focus {background:#f2f2f2}
   .calendar-toolbar .btn-scroll {margin-bottom: 30px;}
   .calendar-dates .selected-week, .calendar-dates .selected-day {float:left; line-height: 30px; margin: 0px 10px}
   .calendar-search input {font-size: 22px; font-weight: 300}
   .calendar-search input {height: 50px;}
   .cms-calendar + .calendar-toolbar {padding-top: 15px;}
   
/* ==========================================================================
   Calendars
   ========================================================================== */

   /* Both calendars */   
   .cms-calendar {}
   .cms-calendar:before, .cms-calendar:after{ display:table;  content:""}
   .cms-calendar:after{ clear:both}
   .cms-calendar .day {position:relative;}
   .cms-calendar .day-name {font-weight: 300;}
   .cms-calendar time {font-size: 14px; color: #666;line-height: 100%; padding: 6px; position: absolute;}
   .cms-calendar .today time {font-weight: 700; border-radius: 50%; color: #fff}
   .cms-calendar .not-this-month {background: #f5f5f5}
	
   /* Calendar with events */
   .with-events .event {margin: 0px 0px 20px 0px}
   .with-events .btn-detail {line-height: 120%; margin: 0px; padding: 0px; font-weight: 700; white-space: normal; text-align:left; }
   .with-events time { top: 5px; left: 5px;}
   .with-events .time, .with-events .location {line-height: 100%; color: #666; margin: 5px 0px 0px 0px}
   .with-events .time .fa, .with-events .location .fa {margin: 0px 0px 3px 0px; opacity: .5}
   .with-events .row:last-child .day:last-child {border-bottom-width: 1px;}
   .with-events .active {border-bottom-width: 1px;}	
   .with-events .selected-date {padding: 0px;}
   .with-events .selected-date h2 {font-size: 30px; font-weight: 300; }
   
   /* Calendar without events */
   .without-events .day, .without-events .day-name {width: 14.285714286%;text-align:center}
   .without-events .day-name {color: #fff; text-align:center; text-transform: uppercase; padding: 2px 0px;font-size: 14px;}
   .without-events time {top: 5px; left: 5px;right:5px;width:28px;margin:auto;}
   .without-events .day {height: 50px;border-right-width: 0px;min-height:60px;}
   .without-events .row:last-child .day {border-bottom-width: 1px;}
   .without-events .btn-detail {width: 100%;height: 100%; position: absolute; top: 0px; left: 0px;}
   .without-events .fa {position: absolute; top:34px; right: 0px; left: 0px; margin: auto; font-size: 8px;border: 1px solid #ccc; border-radius: 50%; width: 19px; height: 19px; padding:4px 0px 0px 0px}
   
   /* Calendar views */
   .week-view .row:not(.this-week), .day-view .day:not(.today), .week-view .day-name, .day-view .day-name {display:none}
   .cms-calendar.week-view .day, .cms-calendar.day-view .day {width: 100%;min-height: 40px;padding: 0px; border-bottom: 1px solid #ddd;border-right:none; border-left:none;}
   .cms-calendar.week-view .this-week .day, .cms-calendar.day-view .this-week .day {border-top: 0px; padding: 30px 30px 20px 30px;}
   .cms-calendar.week-view .day:first-child {border-top: 1px solid #ddd}
   .cms-calendar.day-view .day {border:none;}
   
/* ==========================================================================
   Search Results
   ========================================================================== */

.calendar-searchresults {margin-bottom: 30px; background: #f1f1f1; border: 1px solid #ddd; color: #666; padding: 20px;}
.calendar-searchresults .results-title {font-size: 30px; font-weight: 300; margin: 0px; padding: 0px; color: #212121}
.calendar-searchresults .results-num {margin-bottom: 20px;}
.calendar-searchresults .results-day {margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #ddd}  
.calendar-searchresults .results-day:last-child {margin: 0px}
.calendar-searchresults .results-day .fa {opacity: .5} 
.calendar-searchresults .btn-detail {line-height: 110%; margin: 0px 0px 10px 0px; padding: 0px; font-weight: 700;font-size: 22px;white-space: normal; text-align:left}
.calendar-searchresults .close {font-size: 18px; }
.calendar-searchresults time {display:block;font-size: 16px;margin: 0px 0px 5px 0px}
.calendar-searchresults .time, .calendar-searchresults .location {font-size: 12px;}
.calendar-searchresults .pager {margin: 20px 0px 0px 0px}
.calendar-searchresults .pager li a {color: #212121; border: none;}

/* ==========================================================================
   Modals
   ========================================================================== */
   
.cms-calendar-wrapper .modal-content {border-radius: 0px;}
.cms-calendar-wrapper .modal-footer {text-align:left}
.cms-calendar-wrapper .modal-header .close {margin: 0px; position: absolute; top: 7px; right: 7px; opacity: .3}
.cms-calendar-wrapper .modal .date {text-align:center; padding: 10px;width: 65px;position: absolute; top: 20px; left: 20px;}
.cms-calendar-wrapper .modal .month {font-size: 20px; font-weight: 300;text-transform: uppercase}
.cms-calendar-wrapper .modal .day {font-weight:700; font-size: 18px;}
.cms-calendar-wrapper .modal-header h4 {font-size: 30px; font-weight: 300; padding: 0px;line-height: 120%}
.cms-calendar-wrapper .modal-header .fa, .cms-calendar-wrapper .tags .fa { opacity: .5}
.cms-calendar-wrapper .tags {margin: 5px 0px 0px 0px;}
.cms-calendar-wrapper .modal h5 {font-weight: 700; text-transform: uppercase; font-size: 13px; padding:0px; margin: 0px 0px 15px 0px; color: #666}
.cms-calendar-wrapper .modal .modal-body a {text-decoration:underline}
.cms-calendar-wrapper .modal .btn {border:none;  color: #fff;box-shadow:none; padding: 5px 10px}
.cms-calendar-wrapper .modal .description {margin: 20px 0px 10px 0px;}
.cms-calendar-wrapper .modal .btn-share-mac:hover, .cms-calendar-wrapper .modal .btn-share-android:hover, .cms-calendar-wrapper .modal .btn-share-link:hover, .cms-calendar-wrapper .modal .btn-share-mac:focus, .cms-calendar-wrapper .modal .btn-share-android:focus, .cms-calendar-wrapper .modal .btn-share-link:focus {color: #fff}
.cms-calendar-wrapper .modal .loading {text-align:center; color: #fff; font-size: 40px; }

/* ==========================================================================
   Media Queries
   ========================================================================== */

@media print, screen and (max-width: 767px) {
	/* Heading */
	.cms-calendar-wrapper h1 {text-align:center;}
	
	/* Toolbar */
	.calendar-toolbar {margin: 20px 0px 0px 0px;}
	.calendar-dates, .calendar-view, .calendar-tools {display:table;padding:0px 0px 10px 0px}
	.calendar-search {display:block;margin-bottom: 20px;}
	.calendar-search input {text-align:center;}
	.calendar-search .input-group-btn {padding-top: 10px;}
	.calendar-search .btn {float:right;}
	.calendar-toolbar .btn-group {margin: 0px auto}
	
	/* Calendar with events */
	.with-events .day {padding:0px}
	.with-events .today, .with-events .not-this-month {padding: 20px 20px 0px 20px;}
	.with-events .btn-detail { font-size: 18px; }
	.with-events:not(.week-view) .this-week .today, .with-events:not(.week-view) .this-week .day {border:none;}
	.with-events .selected-date h2 {margin: 30px 0px 30px 0px; padding: 0px;}
	
	/* Modals */
	.event-modal .modal-header h4 { margin: 10px 0px 20px 0px;}
}

@media print, screen and (min-width: 768px) {
	/* Heading */
	.cms-calendar-wrapper h1 {text-align:left;}
	
	/* Toolbar */
	.calendar-toolbar {margin: 20px 0px 20px 0px;min-height: 32px;}
	.calendar-toolbar .btn-group {margin: 0px; display:inline-block}
	.calendar-categories  {width: auto;margin:auto;}
	.calendar-tools {float:right;margin: auto;}
	.calendar-search {display:table; margin: 20px 0px 20px 0px}
	.calendar-search .input-group-btn {padding-top: 0px;}
	.calendar-search .btn {float:none;height:50px}
	.calendar-search input {text-align:left;}

	/* Calendar with events */
	.with-events .day, .with-events .day-name {width: 14.285714286%;}
	.with-events .day { border: 1px solid #ddd;border-bottom-width: 0px;border-right-width: 0px;min-height: 150px;padding:35px 10px 10px 10px; }
	.with-events .day-name {color: #fff; text-align:center; text-transform: uppercase; padding: 5px 0px;font-size: 14px;}
    .with-events .day:last-child {border-right-width: 1px;}
    .with-events .row:last-child .day {border-bottom-width: 1px;}
    .with-events .btn-detail { font-size: 16px; }
    .with-events .time, .with-events .location {font-size: 12px; }
    .with-events .selected-date h2 {margin: 0px 0px 20px 0px; padding: 0px;}
    .with-events .event:last-child {margin: 0px;}
    
    /* Modals */
    .cms-calendar-wrapper .modal .event-details {margin-left:85px;}
	.event-modal .modal-header h4 { margin: 0px 20px 20px 0px;}
}

@media print, screen and (min-width: 992px) {	
	/* Toolbar */
	.calendar-dates, .calendar-view, .calendar-tools {margin:auto; display:inline-block;margin-right: 10px;padding:0px;}

	/* Calendar with events */
	.with-events .time, .with-events .location {font-size: 14px; }
}

@media print {
    /* Wrappers */
    .search-wrapper, .pageinfo-wrapper, .footer-wrapper, .offcanvasmenu, .cms-calendar.without-events, .calendar-toolbar, .header-wrapper ul, .header-wrapper button {display:none;}

    /* Calendar */
    .header-wrapper {border-top: none; border-bottom: 1px solid #ddd; margin: 0px 15px;}
    .header-wrapper .logo {margin-left: -15px;}
    .header-wrapper a[href]:after {content: none !important}
    .section.col-xs-12 {margin: 0px -14px 0px -14px;}
    .day {border: 1px solid #ddd !important;page-break-inside: avoid;margin: 0px 0px -1px -1px;}
    time {font-weight: 400 !important}
    .btn-detail, .time, .location {font-size: 10px !important}
    .selected-date h2 {font-size: 20px !important}
}