/* 
* DATE: 11 AUG 2016
* VERSION: 4601
* PURPOSE: Styles for CalendarView.aspx 
* 
* 01) General styles 
* 02) Day/Date  
* 03) Item pop-up div  
* 04) Item Wrapper - Variable pricing view 
* 05) Item Wrapper - Event View
* 06) Item price tag - Variable pricing view 
* 07) Item price tag - Event View  
* 08) MaxForSale Tag - Variable pricing view 
* 09) MaxForSale Tag - Event View 
* 10) Savings tag 
* 11) Small 
* 12) Medium 
* 13) Large
* 14) X-Large   

*/


/* ----------------------------------------------------------
01) General styles  
------------------------------------------------------------- */
html,
body {
    height:100%;
}
#swContainer.container > .container.ng-scope {
}
#swContainer.container > .container.ng-scope div.breadCrumbs {
    height:60px !important;
    border-bottom:none;
}
#swContainer.container > .container.ng-scope div.breadCrumbs a:first-child,
#swContainer.container > .container.ng-scope div.breadCrumbs span {
    display:none;
}
#swContainer.container > .container.ng-scope div.breadCrumbs a.aspNetDisabled, 
#swContainer.container > .container.ng-scope div.breadCrumbs a.aspNetDisabled:hover {
    background: none;
    color: #111 !important;
    font-size:2em;
    font-weight:600 !important;
    text-decoration:none;
    border-bottom:none;
    margin:10px auto;
}
#MainContent .container {
    margin-top:0 !important;
}
#MainContent .container .row {
    margin-left:0;
    margin-right:0;    
}
.ng-content {
    margin-top: 30px;
}
.cal-container {
    position:relative;
    width:97%;
    margin:0 auto;    
}
.cal-container-loading {
    position: fixed;
    z-index: 9999;
    height: 2em;
    width: 2em;
    overflow:visible;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.cal-container-loading:before {
    content:'';
    display:block;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.3);
}
.cal-container .row h2 {
    font-size:2em;
    font-weight:600;    
}
.cal-wrapper {
    width:95%;
    border:none;
}
.cal-header {
    background:#212121;
    display:none;
}
.cal-header-day {
    color:#fff;
    font:1.1em 'Open Sans', Arial, sans-serif;
    font-weight:600;
    text-transform:none;
    padding:5px 0;
}
.cal-week {
    width:100%;
}
.cal-day {
    border:none;
    border:1px solid dimgray;
    position:relative;        
    padding:10px;
    min-height:125px;
    -moz-box-sizing:border-box;
    display:block;
    width:100%;
    height:100%;
    background:#fff;
}
.cal-day-offmonth {
    color:#607d8b;
    background:#eceff1;
}
.item-top {
    background:transparent;
}
.item-bottom {
    background:transparent;
}

/* -------------------------------------------------------------------------- */
.container.ng-scope .breadCrumbs a.aspNetDisabled.small {
	color:#000;
    font:1.2em 'Open Sans', Arial, sans-serif;
    font-weight:700;	
}
.container.ng-scope .breadCrumbs  {
	text-align:center;
	width:97.5%;
	margin:0;
	padding:0;
}
.container.ng-scope .breadCrumbs a:first-child,
.container.ng-scope .breadCrumbs span.small {
	display:none;	
}
.cal-container .row.col-md-12 {
	background:transparent;
	width:100%;
	padding:0;
	text-align:center;	
}
.cal-container .btn-group.pull-right {
	position:absolute;
	right:0;
	top:0;
}
.cal-container .btn-group.pull-right .btn {
	background-color:#478ECC;
    background-image:none;
    color:#fff;
    border-color:#fff;
    text-shadow:none;
    box-shadow:none;
}
.cal-container .btn-group.pull-right .btn:focus {
	outline:none;
}
/* -------------------------------------------------------------------------- */

/* ----------------------------------------------------------
02) Day/Date  
------------------------------------------------------------- */
.cal-day span.cal-day-label {
    color:#2196f3;
    font:1em 'Open Sans', Arial, sans-serif;
    font-weight:700;
    text-transform:none;
    font-style:italic;
    padding-right:10px;    
}
.cal-day-offmonth span.cal-day-label {
    color:#b0bec5;
}
.cal-day .cal-day-content {
    margin-top:18px;
    text-align:left;
}
.cal-day .cal-day-content .ng-scope .ng-scope {
    background:#fff;
    padding:0;
    margin:0;
}
.cal-day .cal-day-content .ng-scope .ng-scope:hover,
.cal-day .cal-day-content .ng-scope .ng-scope:hover .cal-varprice-view .cal-item-descrip {
    background:#fff;
    color:#2196F3;
}
.cal-day .cal-day-content .ng-scope .ng-scope:hover .cal-varprice-view .cal-qty-rem {
    border-color:#2196F3;
    color:#2196F3;
}
.cal-day .cal-day-content .ng-scope .ng-scope:last-child .cal-varprice-view,
.cal-day .cal-day-content .ng-scope .ng-scope:last-child .cal-event-view {
    border-bottom:none;
}


/* ----------------------------------------------------------
03) Item pop-up div  
------------------------------------------------------------- */
.popover {
    background:#fff;
    border:1px solid #ccc;
    border-radius:6px;
    box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);
    max-width:276px;
    padding:1px;
}
.popover.top > .arrow::after {
    border-top-color: #fff;
}
.cal-popover-container {
    position:relative;
    padding-bottom:5px;
}
.cal-popover-container * a:link,
.cal-popover-container * a:hover,
.cal-popover-container * a:visited {
   
}
.cal-popover-image {
    text-align:center;
}
.cal-popover-descrip {
    font:1em 'Open Sans', Arial, sans-serif;
    font-weight:700;
    text-transform:none;
}
.cal-popover-helpinfo {
}
.cal-popover-button {
}
.cal-popover-button.cartBtns {
    background:#EE4A38;
    font:.8em 'Open Sans', Arial, sans-serif;
    font-weight:400;
    text-transform:none;
    margin:0;
}

.calendar-view-popover-add-margin-bottom {
    margin-bottom: 20px;
}

/* ----------------------------------------------------------
03.b) Item Multiaddit pop-up div  
------------------------------------------------------------- */
.popover {
    background:#fff;
    border:1px solid #ccc;
    border-radius:6px;
    box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);
    max-width: 606px;
    padding:1px;
}

.calendar-view-multiaddit-view-container {
    border: 1px solid #000;
}

#calendar-view-multi-add-it-table {
    border-collapse:collapse;
    width: 100%;
}

#calendar-view-multi-add-it-table tr {
    border-bottom: 1px solid #000;
}

#calendar-view-multi-add-it-table tr:last-child {
    border-bottom: none;
}

#calendar-view-multi-add-it-table td {
    padding: 5px;
}

#calendar-view-multi-add-it-table  > tbody > tr:first-child td, #calendar-view-multi-add-it-table  > tbody > tr:last-child td {
    background-color: #eeeeee;
    font-weight: bold;    
}

#calendar-view-multi-add-it-table .total-table-price-descrip {
    text-transform: uppercase;
}

#calendar-view-multi-add-it-table .total-table-price {     
     padding-right: 5px;
}

#calendar-view-multi-add-it-table .total-price {
     padding-right: 5px;
     width: 75px;
}

#calendar-view-multi-add-it-table .item-descrip {
     padding-left: 5px;
     width: 300px;
}

.calendar-view-multi-add-it-table-help-info-area {
    border-top: 1px solid #000;
    padding: 10px;
}

.calendar-view-multiaddit-popover>div:first-child {
    margin-bottom: 5px;
    height:20px;
}

.calendar-view-multiaddit-popover button.close {
    display: block!important;
}

.calendar-view-multiaddit-table-row[disabled] {
   color: gray;
}

.calendar-view-checkout-btn-container {
    padding: 6px 0px 6px 12px;
    margin-top:10px;
    margin-bottom: 10px;
}

/* Dropdown Styles */

.drop-down-width {
    width: 45px;
}

select.drop-down-width[disabled] {
   color: gray;
}

/* Mobile Ticketing Styles */

@media screen and (max-width: 480px) {
 
    #multi-add-it-table .item-descrip {
         width: auto;
    }     

    .drop-down-width {
        width: auto;
    } 

    .popover {
    max-width: 350px;
    }

    .calendar-view-checkout-btn-container a.cal-popover-button {
        padding: 6px 12px!important;
    }
   
}


/* ----------------------------------------------------------
04) Item Wrapper - Variable pricing view 
------------------------------------------------------------- */
.cal-varprice-view {
    cursor:pointer;
    font-weight:bold;
    margin:0;
    padding:10px 3px;
    position:relative;
    background:transparent;
    border-bottom:1px dashed #696969;
    height:auto !important;
}
.cal-day .cal-day-content .ng-scope .ng-scope:first-child .cal-varprice-view {
    padding-top:3px;
}
div.cal-varprice-view:hover,
.cal-varprice-view .cal-item:hover {
    background:transparent;
}
.cal-varprice-view .cal-item span:hover {
    background:transparent;
}
.cal-varprice-view .cal-item-descrip {
    color:#333;
    font:.9em 'Open Sans', Arial, sans-serif;
    font-weight:700;
    text-transform:none;
    display:block;
    clear:both;
}
.cal-item-unavailable {
    display:none;
}
.cal-item-soldout {
    color:dimgray;
}
.cal-item {
	width:100%;
}

/* ----------------------------------------------------------
05) Item Wrapper - Event View 
------------------------------------------------------------- */
.cal-event-view {
    cursor:pointer;
    border:none;
    background:transparent;
    margin:0;
    padding:10px 0;
    text-align:center;
    border-bottom:1px dashed #696969;
}
.cal-day .cal-day-content .ng-scope .ng-scope:first-child .cal-event-view {
    padding-top:3px;
}
div.cal-event-view:hover,
div.cal-event-view *:hover,
.cal-event-view .cal-item:hover,
.cal-day .cal-day-content .ng-scope .ng-scope:nth-child(even) .cal-event-view:hover {
    background:transparent;
}
.cal-event-view .cal-item-descrip {
    font-weight:700;
}
.cal-event-view .cal-item-descrip {
    color:#000;
    font:1em 'Open Sans', Arial, sans-serif;
    font-weight:700;
    text-transform:none;
    display:block;
}
.cal-event-view .cal-item-descrip:hover {
    background:transparent;
}


/* ----------------------------------------------------------
06) Item price tag - Variable pricing view  
------------------------------------------------------------- */
.cal-varprice-view .item-top .cal-item-price.label-primary {
    background:transparent;
    color:#ef4938;
    font:1.2em 'Open Sans', Arial, sans-serif;
    font-weight:400;
    text-transform:none;
    padding:2px 4px 2px 2px;
    margin:0;
}


/* ----------------------------------------------------------
07) Item price tag - Event View  
------------------------------------------------------------- */
.cal-event-view .item-top .cal-item-price.label-primary {
    background:transparent;
    color:#ef4938;
    font:1em 'Open Sans', Arial, sans-serif;
    font-weight:700;
    text-transform:none;
    padding:2px 4px 2px 2px;
    margin:0;
}


/* ----------------------------------------------------------
08) MaxForSale Tag - Variable pricing view  
cal-qty-rem controls the color shown for remaining value when the number remaining is in between the two numbers for the threshold. Only the color and background settings should be modified. 
------------------------------------------------------------- */
.cal-varprice-view .cal-qty-rem {
    color:#607d8b;
    background:#fff;
    border:1px solid #b0bec5;
    font:.8em 'Open Sans', Arial, sans-serif;
    font-weight:700;
    text-transform:uppercase;
    margin:3px 0 0 2px;
    padding:2px 4px 2px 2px;
    border-radius:2px;
    display:inline-block;   
}
.cal-varprice-view span:hover {
    background:transparent;
}
/* ----------------------------------------------------------
cal-qty-rem-low controls the color shown for remaining value when the number remaining is below the threshold. Only the color and background settings should be modified. 
------------------------------------------------------------- */
.cal-varprice-view .cal-qty-rem.cal-qty-rem-low {
    color:#c3352b;
    background:#fff;
    border:1px solid #c3352b;
}
/* ----------------------------------------------------------
cal-qty-rem-high controls the color shown for remaining value when the number remaining is above the threshold. Only the color and background settings should be modified. 
------------------------------------------------------------- */
.cal-varprice-view .cal-qty-rem.cal-qty-rem-high {
    /*color:#648357;
    background:#DFF0D8;
    border:1px solid #a5c398;*/
   display:none; /*- Optional: Hide quantity remaining when the the number remaining is above the threshold. */
}


/* ----------------------------------------------------------
09) MaxForSale Tag - Event View  
------------------------------------------------------------- */
.cal-event-view .cal-qty-rem {
    background:transparent;
    color:#519dab;
    font:.9em 'Open Sans', Arial, sans-serif;
    font-weight:700;
    text-transform:uppercase;
    margin:5px 0 0;
    padding:1px 2px;
    border-radius:0;
    border-top:1px solid #eee; 
    display:block;
    text-align:center;   
}
.cal-varprice-view span:hover {
    background:transparent;
}
.cal-event-view .cal-qty-rem.cal-qty-rem-low {
    color:#bb6060;
}
.cal-event-view .cal-qty-rem.cal-qty-rem-high {
    color:#648357;
    /*display:none; - Optional: Hide high amount */
}


/* ----------------------------------------------------------
10) Savings tag 
------------------------------------------------------------- */
.tagSave {
    width:auto;
    display:inline-block;
    float:right;
    margin-bottom:5px;
    padding-right:3px;
    background:#5cb85c;
    border:1px solid #4cae4c;
    border-radius:2px;
    cursor:default;
    box-shadow: -1px 1px 2px 0px rgba(0,0,0,0.34);
}
.cal-savings {
    font:.8em 'Open Sans', Arial, sans-serif;
    font-weight:400;
    text-transform:uppercase;
    color:#fff;
    margin-left:4px;
}



/* ----------------------------------------------------------
11) Small 
------------------------------------------------------------- */
@media (min-width: 1px) { 
    .cal-day-label{
        text-align: left;
    }
    .hide-mobile {
        display: none;
    }
}


/* ----------------------------------------------------------
12) Medium 
------------------------------------------------------------- */
@media (min-width: 768px) {
    .hide-mobile {
        display: none;
    }
}


/* ----------------------------------------------------------
13) Large 
------------------------------------------------------------- */
@media (min-width: 992px) {    
.cal-wrapper {
    display:table;
    width:100%;
}
.cal-header {
    display:table-row;
    width:100%;
    margin-top:20px;
}
.cal-header-day {
    display:table-cell;
}
.cal-week {
    display:table-row;
    width:100%;
}
.cal-day {
    position:relative;
    padding:2px;
    -moz-box-sizing:border-box;
    display:table-cell;
    width:14.28%;
    height:125px;
}
.cal-day-label{
    position:absolute;
    top:2px;
    right:2px;
    display:block;
}
.hide-desktop{
    display:none;
}

}


/* ----------------------------------------------------------
14) X-Large 
------------------------------------------------------------- */
@media (min-width: 1200px) {
    .hide-desktop{
         display:none;
     }
}