/**************** 1 - colors area [all colors will be declared here for ease of access] ******************/

/** general **/
body {
    background: /* COLOR_BG */ !important;
    color: /* COLOR_FG */;
}

header {
    background: /* COLOR_BG */;
}

header.mainheader {
    background: /* COLOR_HEADER_BG */;
    color: /* COLOR_HEADER_FG */;
}

header.mainheader .cartlink {
	background-color: /* COLOR_LINE */;
	color: /* COLOR_FG */;
}

nav {
    background: /* COLOR_BG */;
}

button {
    background: /* COLOR_LINE */;
    color: /* COLOR_FG */;
}

button.red {
	background-color: /* COLOR_REMOVE_FAIL */;
}

/** my area border */
.user-info li, .about li, ul.my-area li {
    border-color: /* COLOR_LINE */;
}

/** myarea */
.myarea h2 {
	color: /* COLOR_HIGHLIGHT */;
}

.myarea .showhistory+label i:after {  
    color: /* COLOR_HIGHLIGHT */;
} 

.myarea .info {
	color: /* COLOR_HIGHLIGHT */;
}
.myarea .cardhistory table {
	border-color: /* COLOR_HIGHLIGHT */ !important;
}

.myarea .cardhistory table th {
	background-color:/* COLOR_HIGHLIGHT */;
	border-color: /* COLOR_FG */;
}

.myarea .cardhistory table td {
	border-color: /* COLOR_HIGHLIGHT */ !important;
}

.myarea .cardhistory table td button.white {
	color: /* COLOR_HIGHLIGHT */;
	background-color: #fff;
}

.user-info  li .title,
.about li .title {
    color: /* COLOR_LINE */;
}

/** tabs **/
.tabs li {
    border-color: /* COLOR_LINE */;
    color: /* COLOR_LINE */;
}

.tabs li.active {
    background:/* COLOR_LINE */ ;
    color: /* COLOR_FG */
}

/**  all lessons - day choice **/

.choose_day li.active .day_num span {
    background: /* COLOR_LINE */ ;
}

.choose_day li.today .day_num {
    border-bottom-color: /* COLOR_LINE */;
}

/**  all lessons - content - table **/

.lessons-all .content table tr {
    border-color: /* COLOR_LINE */;
}

.lessons-all .content table tr td.favourite_column {
    border-color: /* COLOR_LINE */;
}

/**  all lessons - content - buttons **/

.lessons-all .content table .buttons_column button {
    background: /* COLOR_LINE */;
    color: /* COLOR_FG */;
}

.lessons-all .content table tr .buttons_column button.unregistered {
    background: /* COLOR_LINE */;
    color: /* COLOR_FG */;
}

.lessons-all .content table tr .buttons_column button.registered {
    background: /* COLOR_LINE */;
    color: /* COLOR_FG */;
}

.lessons-all .content table tr .buttons_column button.waitinglist {
    background: #6a6b69;
    color: /* COLOR_FG */;
}

.lessons-all .content table tr .buttons_column button.full {
    background: /* COLOR_BG */;
    color: /* COLOR_FG */;
}

.lessons-all .content table tr .buttons_column .future {
    background: /* COLOR_BG */;
    color: /* COLOR_FG */;
}

.lessons-all .content table tr .buttons_column .uncancelledregistered {
    background: /* COLOR_BG */;
    color: /* COLOR_LINE */;
}


.lessons-all .content table tr .buttons_column .full {
    background: /* COLOR_BG */;
    color: /* COLOR_LINE */;
}

/** instructors **/

.lessons-instructors .instructors .instructor {
    border-bottom-color: /* COLOR_LINE */;
}

.lessons-instructors .instructors .instructor .instructor_img {
    border-color: /* COLOR_FG */;
    -webkit-box-shadow: 0px 0px 4px 4px rgba(255,255,255,0.2); /* there is no way to seperate the color property of the shadow for the other properties so I put the entire shadow declaration in this file. */
    -moz-box-shadow: 0px 0px 4px 4px rgba(255,255,255,0.2);
    box-shadow: 0px 0px 4px 4px rgba(255,255,255,0.2);
}

/** placements **/

.placements .placement_top_image {
    background: /* COLOR_BG */;
}

.placements .choose_place {
    background: /* COLOR_LINE */;
}

.placements .choose_place .place.taken, .placements .choose_place .place.taken .place_num {
    color: /* COLOR_FG */;
    border-color: /* COLOR_FG */;
}

.placements .choose_place .place.available, .placements .choose_place .place.available .place_num {
    color: /* COLOR_FG */;
    border-color: /* COLOR_FG */;
}

.placements .choose_place .place.chosen .place_num {
    background: #6a6b69;
}

    .placements .choose_place .seat_chosen_color {
        background-color: /* SPINNING_TAKEN_COLOR */;
        border: 1px solid /* COLOR_LINE */;
        opacity: 0.5;
    }

    .placements .choose_place .place.taken {
        background-color: /* SPINNING_TAKEN_COLOR */;
        border: 1px solid /* COLOR_LINE */;
        opacity: 0.8;
    }

     .placements .choose_place .place.taken:hover {
           
      }

/** sales **/

.news_and_sales-sales .sales .sale {
    border-bottom-color: /* COLOR_LINE */;
}

.news_and_sales-sales .sales .sale .sale_img {
    border-color: /* COLOR_FG */;
    -webkit-box-shadow: 0px 0px 4px 4px rgba(255,255,255,0.2); /* there is no way to seperate the color property of the shadow for the other properties so I put the entire shadow declaration in this file. */
    -moz-box-shadow: 0px 0px 4px 4px rgba(255,255,255,0.2);
    box-shadow: 0px 0px 4px 4px rgba(255,255,255,0.2);
}

/* yb removal 
    .news_and_sales-sales .sales .sale */ .sale_img_container .new {
   border-color: /* COLOR_FG */;  
   background: /* COLOR_LINE */;  
}
.news_and_sales-sales .sales .sale .sale_link a {
    color: /* COLOR_LINE */;
}

/** updates **/

.hot_updates-all .days .day  {
    border-bottom-color: /* COLOR_LINE */;
}

.hot_updates-all .days .day .day_title {
    color: /* COLOR_LINE */;
}

/** cards **/

.cards .cards_container .card  {
    border-bottom-color: /* COLOR_LINE */;
}

/** my card **/

.mycard .mycard_table tr th {
    background: /* COLOR_LINE */;
    border-right-color: /* COLOR_FG */;
    border-left-color: /* COLOR_FG */;
    border-top-color: /* COLOR_LINE */;
    border-bottom-color: /* COLOR_LINE */;
}

.mycard .mycard_table tr th:first-of-type {
    border-right-color: /* COLOR_LINE */;
}

.mycard .mycard_table tr th:last-of-type {
    border-left-color: /* COLOR_LINE */;
}

.ltr.mycard .mycard_table tr th:first-of-type {
    border-left-color: /* COLOR_LINE */;
    border-right-color: /* COLOR_FG */;
}

.ltr.mycard .mycard_table tr th:last-of-type {
    border-right-color: /* COLOR_LINE */;
    border-left-color: /* COLOR_FG */;
}

.mycard .mycard_table tr td  {
    border-color: /* COLOR_LINE */;
}

.mycard .mycard_table tr td button.register {
    background: /* COLOR_BG */;
    color: /* COLOR_LINE */
}

.mycard .mycard_table tr td button.cancel {
    background: /* COLOR_BG */;
    color: /* COLOR_LINE */
}

/** main **/

.main .main_background {
    background-color: /* COLOR_BG */;
}

.main .flex-container .nextclass {
    background-color: /* COLOR_LINE */;
    color: /* COLOR_FG */;
}

.main .content .flex-container .contentlinks ul li .count {
    background-color: /* COLOR_LINE */;
}

.main .flex-container .nextclass .nextclasscontent img {
    border-color: /* COLOR_FG */ !important;
}

/** tos **/

.tos {
    background: /* COLOR_BG */;
    color: /* COLOR_FG */;
}

/** payment_success **/
.successicon {
	color: green;
}

/** payment_fail **/
.failicon {
	color: /* COLOR_REMOVE_FAIL */;
}


/****************  / colors area ******************/


.prospect header {
    color: /* COLOR_FG */;
}

.prospect .container .form input:not(.button) {
    border-color: /* COLOR_LINE */ !important ;
}

.prospect .container .form input.button {
    background: /* COLOR_LINE */;
    color: /* COLOR_FG */;
    border-color: /* COLOR_LINE */ !important ;
}

/* status that are buttons */
.abouttoclose { background: /* COLOR_BUTTON_ABOUT_TO_CLOSE_FG */ !important; }
.fullwithwaitinglist { background: /* COLOR_BUTTON_FULLWITHWAITINGLIST_FG */ !important; }
.hasreminder { color: /* COLOR_BUTTON_FULLWITHWAITINGLIST_FG */ !important; } 
.registered { background: /* COLOR_BUTTON_REGISTERED_FG */ !important; }
.open { background: /* COLOR_BUTTON_OPEN_FG */ !important; }
.onwaitinglist { background: /* COLOR_BUTTON_ON_WAIT_LIST_FG */ !important; }
.notopenedyet { background: /* COLOR_BUTTON_NOT_OPENED_YET_FG */ !important; }

/* status that are texts */
.notopenedforregistration { color: /* COLOR_NOT4REGISTER_BG */ !important; }
.uncancelledregistered { color: /* COLOR_UNCANCELLED_BG */ !important; }
.full { color: /* COLOR_FULL_BG */ !important; }


/******    join now colors     *******/
.portlet {
  color: /* COLOR_JOIN_FG */ !important;  
  background-color: /* COLOR_JOIN_BG */ !important;
}

.portlet.box.blue > .portlet-title {
  background-color: /* COLOR_LINE */;
} 

.portlet.box > .portlet-title {  
   color: /* COLOR_JOIN_FG */ !important;
}

.button-previous {
    color: /* COLOR_FG */ !important;
    text-shadow: none;
    background-color: /* COLOR_LINE */ !important;
}

.btn.blue {
  color: /* COLOR_FG */;  
  text-shadow: none;  
  background-color: /* COLOR_LINE */;
}

.form-wizard .active .step .number {
  background-color: /* COLOR_LINE */;
  color:/* COLOR_FG */;
}

.form-wizard .done .step .number {
  background-color: /* COLOR_LINE */;
  color:/* COLOR_FG */;
}

.progress > .progress-bar-success {
  background-color: /* COLOR_LINE */;
}

.form-wizard .step .number {
    background-color: /* COLOR_GRAYED */;
}

.form-wizard .progress {
    background-color: /* COLOR_GRAYED */ !important;
}

.payment-frame { /* #eee*/}
.payment-message {
    position: absolute;
    margin: 5rem;
    font-size: 3rem;
}


.myqtip #cancelSelection ul,
.lessons_all .myqtip, .popup_box .myqtip {
	background-color: /* COLOR_BG */;
}



.lessons_all .myqtip_wrapper, .popup_box {
    background: /* COLOR_BG */ !important;
}

.lessons_all .myqtip_wrapper .myqtip .close_myqtip {
	color: #666;
}

/***
    upsale pop up text color
    ***/
.popup_font_color {
  color: /* COLOR_JOIN_FG */;  
}

.upsale-modal.popup_font_color .modal-body {
    color: /* COLOR_JOIN_FG */ !important;
}




/* extra extra, read all about it  */

.lessons_all .main_calender td button.unregistered {
    background: /* COLOR_BUTTON_OPEN_FG */;
    color: /* COLOR_FG */;
}

.lessons_all .main_calender td {
    /*border-color: * COLOR_HIGHLIGHT * !important;*/
}

 .lessons_all .main_calender td .lesson_title {
        color: /* COLOR_HIGHLIGHT */ !important;
 }

 .lessons_all .main_calender td .lesson_star {
        color: /* COLOR_HIGHLIGHT */;
  }

h2 {
    color: /* COLOR_HIGHLIGHT */;
}

.myarea h2 {
    color: /* COLOR_HIGHLIGHT */;
}

.about h2 {
    color: /* COLOR_HIGHLIGHT */;
}

.salesandnews .item .new {
    border-color: /* COLOR_FG */;
    background: /* COLOR_HIGHLIGHT */;
}

.tabs {
    background: /* COLOR_BG */;
}


.lessons_all .calender_days {
    background-color: /* COLOR_BG */ !important;
}

.lessons_all .filters {
    background: /* COLOR_BG */ !important;
}

    .lessons_all .filters .filter.checkbox .filter_content input[type=checkbox]:checked + label:before {
        background-color: /* COLOR_HIGHLIGHT */;
    }

    .lessons_all .filters .filter.dropdown:hover, .lessons_all .filters .filter.dropdown.active {
        background-color: /* COLOR_HIGHLIGHT */;
    }

    .lessons_all .filters .filter.dropdown .filter_content .submenu {
        display: none;
        width: 100%;
        text-align: right;
        position: absolute;
        top: 100%;
        border-top: 1px solid;
        background-color: /* COLOR_LINE */ !important;
    }

        .lessons_all .filters .filter.dropdown .filter_content .submenu li.active {
            color: /* COLOR_BG */;
            border-color: /* COLOR_BG */;
        }

   .lessons_all .filters .filter.dropdown .filter_content .submenu li.active img {
                border-color: /* COLOR_FG */;
   }

    .lessons_all .calender_days .day_cal.today {
        color: /* COLOR_HIGHLIGHT */;
        background-color: /* COLOR_FG */;
        border-color: /* COLOR_FG */;
        border-bottom-color: /* COLOR_LINE */ !important;
    }

.lessons_all .calender_days .day_cal {
    border-bottom-color: /* COLOR_LINE */ !important;
    background-color: /* COLOR_BG */;
    
}

/* MODAL DIALOG COLORS */

.modal-content-colors {
    background-color: /* COLOR_BG */;
}

.modal-header-colors {
    background-color: /* COLOR_HIGHLIGHT */;
    color: /* COLOR_HEADER_BG */;
}

.modal-body {
    color: /* COLOR_FG */;
}


offline-header-menu header {
    background-color: /* COLOR_BG */;
}

/** questionnaire page */
.questionnaire-container {
    background: /* COLOR_BG */;
    color: /* COLOR_FG */;
}

.headerback {
    background: /* COLOR_LINE */ !important;
    color: /* COLOR_FG */ !important;
}