/* 
* 
* (RMS)(20181129)
* 
* 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%;
}
#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 {
    color:#333;    
}
.cal-wrapper {
    width:95%;
    border:none;
}
.cal-header {
    background:#333;
    display:none;
}
.cal-header-day {
    color:#fff;
    font:1.1em 'Open Sans', Arial, sans-serif;
    font-weight:700;
    text-transform:none;
    padding:5px 0;
}
.cal-week {
    width:100%;
}
.cal-day {
    border:none;
    border-right:1px solid #333;
	border-bottom:1px solid #333;
    position:relative;        
    padding:10px;
    min-height:125px;
    -moz-box-sizing:border-box;
    display:block;
    width:100%;
    height:100%;
}
.cal-day:first-child {
    border-left:1px solid #333;
}
.cal-day-offmonth {
    background:#fff;
}
.cal-day-offmonth.cal-day span.cal-day-label {
    /*color:#999;
	background:#777;*/
	opacity:0.2;
}
.item-top {
    background:transparent;
}
.item-bottom {
    background:transparent;
}


/* ----------------------------------------------------------
02) Day/Date  
------------------------------------------------------------- */
.cal-day span.cal-day-label {
    color:#fff;
    font:1.1em 'Open Sans', Arial, sans-serif;
    font-weight:700;
    text-transform:none;
    font-style:italic;
    padding-right:5%;
	width:95%;
	background:#555;
    text-align:right;
}
.cal-day .cal-day-content {
    margin-top:18px;
    text-align:left;
}
.cal-day .cal-day-content .ng-scope .ng-scope {
    background:transparent;
    padding:0;
    margin:0;
    min-height:50px;
}
.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:transparent;
	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;
}

.cal-hide-price {
    display: 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;
	margin:0 auto;
	height:auto;
	width:50%;
}
.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:#478ECC;
    font:.8em 'Open Sans', Arial, sans-serif;
    font-weight:400;
    text-transform:none;
    margin:0;
}
.cal-popover-button.cartBtns:hover {
    background:#5EA7DC;
}

.calendar-view-popover-add-margin-bottom {
    margin-bottom: 20px;
	font-size:.8em;
	max-width: 500px;
	max-height:150px; /* (RMS)(46652) */
	overflow-y:scroll;
}


/* ----------------------------------------------------------
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 #999;
}

#calendar-view-multi-add-it-table {
    border-collapse:collapse;
    width: 100%;
	display:block;
	max-height:220px;
	overflow-x:hidden;
	overflow-y:scroll;

}


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

#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: #999;
	color:#fff;
    font-weight: 700;    
}

#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 #999;
    padding: 10px;
	font-size:.8em;
	max-height:150px; /* (RMS)(46652) */
	overflow-y:scroll;
}

.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;
}
.popover-content .calendar-view-multiaddit-popover > div:first-of-type span {
	font-weight:700;
	font-size:1.2em;
}

/* Dropdown Styles */

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

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

/* Mobile Ticketing Styles */

@media screen and (max-width: 480px) {
.cal-popover-button.cartBtns {
    text-align:center;
} 
#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;
}
.cal-container .btn-group .btn {
    padding:10px 15px;
	font-size:1em;
}
.cal-day {
    border-left:none;
    border-right:none;
    border-bottom:none;
}
h4.cal-day-label {
    font-size:16px;
}

   
}


/* ----------------------------------------------------------
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 #999;
}
.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;
}


/* ----------------------------------------------------------
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:#519dab;
    background:#e6fbff;
    border:1px solid #9cd3dd;
    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:#bb6060;
    background:#F2DEDE;
    border:1px solid #cea2a2;
}
/* ----------------------------------------------------------
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 
------------------------------------------------------------- */
.cal-item {
    width:100%;
}
.tagSave {
    width:auto;
    display:inline-block;
    float:right;
    margin-bottom:5px;
    padding-right:3px;
    background:#5cb85c;
    border:1px solid #4cae4c;
    border-radius:0;
    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%;
}
.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:0;
    right:0;
    display:block;
}
.hide-desktop{
    display:none;
}

}


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