.min-width-60 { min-width: 60px !important; }
.min-width-80 { min-width: 80px !important; }    
.min-width-100 { min-width: 100px !important; }
.min-width-120 { min-width: 120px !important; }

.display-none { display: none; }
.panel-body.panel-collapsed { display:none; }
.border-top-none { border-top: none !important; }
.no-padding { padding: 0px !important; }
.no-margin { margin: 0px !important; }
.padding0 { padding: 0px; }
.padding2 { padding: 2px; }
.padding5 { padding: 5px; }
.padding10 { padding: 10px; }
.padding-right-10 { padding-right: 10px; }
.padding-right-20 { padding-right: 20px; }
.padding-left-10 { padding-left: 10px; }
.margin-right-10 { margin-right: 10px; }
.margin-top-5 { margin-top: 5px; }
.bold { font-weight: bold; }
.clickable { cursor: hand; cursor: pointer;  }
.TableHeader.text-left { text-align: left; }
.text-bolder { font-weight: 600; }
.no-border-bottom { border-bottom: none !important; }

table.message td {
    width: auto !important;
    display: table-cell;
}

IMG.res-img
{
  width: 100% !important;   
  height: auto !important; 
}

.txtValidator img
{
  min-width: 15px !important;    
}

.txtEditable:not(select):not(textarea) {
    width: 100%;
    max-width: 15.5em;
}

.txtEditable.narrow
{
  width: 10em;  
}

INPUT[type=text].txtEditable.wide {
    max-width: 25em;
}

.txtEditable.narrow.regDOB,
.txtEditable.narrow.dob {
    width: 7.5em;
}

.contactInfoControls .registrationControls,
.txtEditable.registrationControls 
{
  width: 100%;
  max-width: 250px;    
}

INPUT.wide.udf_memo.txtEditable,
TEXTAREA.wide.udf_memo.txtEditable,
INPUT.wide,
TEXTAREA.wide
{
    width: 90%;
    max-width: none;
}

TR.TablePager TABLE TR TD A,
TR.TablePager TABLE TR TD SPAN,
.customPager A,
.customPager SPAN
{
  display: inline-block;
  padding: 2px 7px;    
  margin-left: 5px;
}

.customPager .pageHeader
{
  padding-top: 2px;    
}

.storeCategories
{
  white-space: normal !important;    
}

/*
SG: not sure if it is ok use this style here    
@media screen and (min-width: 721px) {
    .storeCategories {
        width: 25%;
    }
}*/

.ResponsiveTable INPUT.center.res-select
{
  margin: 8px auto;
  display: block;
}

TABLE.ResponsiveTable.narrow-only,
.ResponsiveTable .narrow-only
{
  display: none;
}

DIV.row
{
  margin-right: 0px;
  margin-left: 0px;
}

.control-row
{
  display: block;
  float: none;
}

.control-row:before,
.control-row:after
{
  display: table;
  content: " ";
}

.col-label-control
{
  float: left;
  white-space: nowrap;
  padding: 4px;
}

.col-label-control table.message {
    white-space: normal;
}

/* applies the vertical align for the inner div containers using flex layout */
/* SG: flexbox is limited to modern browsers. It doesn't work with the iOS 8.x 
    or android 4.4 browsers
    It is really critical
    so it is replaced with the table-cell display for the inner elements in result
*/
/*
.col-label-control {
    display: flex;
    align-items: center;
}
*/

.col-label
{
  /*float: left;*/
  white-space: nowrap;
  padding-right: 3px;
  display: table-cell;
  vertical-align: middle;
}

.col-control
{
  /*float: left;*/
  white-space: nowrap;
  min-width: 150px;
  display: table-cell;
  vertical-align: middle;
}

.col-button
{
  float: left;
  padding: 4px;
}

.col-button INPUT
{
  /*width: 70px;*/
  /*width: 4em;*/
  min-width: 5em;
}

.col-label-control .col-control SELECT
{
   width: 100%;
   max-width: 150px;
}

/* Improved Filters Panel with the selectize DDL controls */
.row.filters-panel {
    width: 100%;
}

.filters-panel[data-filter-count='1'] .col-label-control .col-label {
    display: inline-block;
    min-width: 0 !important;
}

.filters-panel.no-labels .col-label-control .col-label,
.filters-panel .no-labels .col-label-control .col-label {
    display: none;
}

.filters-panel.button-hidden .col-button {
    display: none;
}

.filters-panel {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

    .filters-panel .col-label-control {
        min-width: 200px;
        max-width: 450px;
        width: 100%;
    }

        .filters-panel .col-label-control .col-control {
            display: inline-block;
            width: 100%;
        }

        .filters-panel .col-label-control .col-control .txtEditable {
            max-width: none;
        }

@media screen and (min-width: 521px) {
    .filters-panel[data-filter-count='6'] .col-label-control,
    .filters-panel[data-filter-count='5'] .col-label-control,
    .filters-panel[data-filter-count='4'] .col-label-control,
    .filters-panel[data-filter-count='3'] .col-label-control,
    .filters-panel[data-filter-count='2'] .col-label-control,
    .filters-panel[data-filter-count='1'] .col-label-control {
        max-width: none;
        width: 50%;
    }
}

@media screen and (min-width: 769px) {
    .filters-panel[data-filter-count='5'] .col-label-control,
    .filters-panel[data-filter-count='4'] .col-label-control,
    .filters-panel[data-filter-count='2'] .col-label-control,
    .filters-panel[data-filter-count='1'] .col-label-control {
        max-width: none;
        width: 50%;
    }

    .filters-panel[data-filter-count='6'] .col-label-control,
    .filters-panel[data-filter-count='3'] .col-label-control {
        max-width: none;
        width: 33.3%;
    }
}

@media screen and (min-width: 902px) {
    .filters-panel[data-filter-count='6'] .col-label-control,
    .filters-panel[data-filter-count='5'] .col-label-control,
    .filters-panel[data-filter-count='3'] .col-label-control,
    .filters-panel[data-filter-count='2'] .col-label-control,
    .filters-panel[data-filter-count='1'] .col-label-control {
        max-width: none;
        width: 33.3%;
    }

    .filters-panel[data-filter-count='4'] .col-label-control {
        max-width: none;
        width: 25%;
    }
}

@media screen and (min-width: 1024px) {
    .filters-panel[data-filter-count='5'] .col-label-control {
        min-width: 150px;
        max-width: none;
        width: 20%;
    }
}

.modal-dialog {
    width: auto !important;
    max-width: 900px;
    min-width: 300px;
    border-radius: 6px;
}

.modal-header
{
  padding: 10px;
}
.modal-header.TableHeader
{
  text-align: left;
  font-size: 110%;

  -webkit-background-clip: padding-box;
          background-clip: padding-box;
  border: 1px solid #999;
  border: 1px solid rgba(0, 0, 0, .2);
  outline: 0;

  -webkit-border-top-left-radius: 6px;
  -webkit-border-top-right-radius: 6px;
  -moz-border-radius-topleft: 6px;
  -moz-border-radius-topright: 6px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.popover
{
  max-width: 768px;
  min-width: 200px;
}

.popover-footer
{
  padding: 5px;
  padding-bottom: 0px;
}

.window-header .close,
.modal-header .close 
{
  font-size: 21px;
  color: #000;
  filter: alpha(opacity=100);
  opacity: 1;
  background-color: #fff;
  border: solid 1px #000;
  padding: 0px;
  margin: 0px;
  margin-top: -2px;
  
  width: 21px;
  height: 21px;
  background-image: url('../img/times.png');
  background-repeat: no-repeat;
  background-position: center center;
  
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.window-header .close
{
  margin-top: 2px;    
}

.window-header .close *,
.modal-header .close *
{
  display: none;    
}

.window-header .close:hover,
.window-header .close:focus,
.modal-header .close:hover,
.modal-header .close:focus {
  color: #fff;
  filter: alpha(opacity=100);
  opacity: 1;
  background-color: #ccc;
}

@media screen and (min-width: 469px) {
    table.wideEditForm.contactControls td.label {
        white-space: nowrap;
    }
}

@media screen and (min-width: 420px) {
    table.wideEditForm.studentControls td.label {
        white-space: nowrap;
    }
}

.regPrices.ResponsiveTable.narrow-only TR TD
{
  width: auto;    
}

.regPrices.ResponsiveTable.narrow-only TR TD.PricesTableHeader
{
   width: 1%;    
   text-align: left;
}

.regPrices.ResponsiveTable.narrow-only TR.itemLastRow TD
{
   border-bottom-width: 2px;
}

.productLine TD .txtEditable,
.product TD .txtEditable
{
  width: auto;
}

.product .fountInContent
{
  padding-left: 2px !important;    
}

.ResponsiveTable.narrow-only .productLine TD.price
{
  width: 90% !important;        
}

.ResponsiveTable.narrow-only .productLine TD.qty
{
  text-align: right;    
}

.ResponsiveTable.narrow-only .productLine TD.qty INPUT
{
  width: 100% !important;
  text-align: left;    
}

.ResponsiveTable.narrow-only .productLine TD.actions
{
  text-align: right !important;    
}

.ResponsiveTable.narrow-only .productLine .PricesTableHeader
{
  text-align: left;
  white-space: nowrap;
}

.shipToPopupControls .modal-dialog
{
  max-width: 450px;    
}

TABLE.ccForm .addressContainer INPUT
{
  width: auto !important;    
  min-width: 200px;
  max-width: 200px;
}

.classSelector .registrantClasses .remove-btn-narrow
{
  display: none;
}

#classesSelectorFilters .panel-heading {
  padding: 5px;
  text-align: left;
}

#classesSelectorFilters .panel-body {
  padding: 2px;
}

#classesSelectorFilters .panel-heading span {
	margin-top: 2px;
        margin-right: 2px;
	font-size: 15px;
}

.classesSelector .classesGrid.small-only
{
  min-width: 290px !important;    
  width: 100% !important;    
}

.classesSelector .classesGrid.small-only .rbtLabel.narrow-only
{
  display: inline !important;
}

.classesSelector .classesGrid.small-only TD.st-key
{
  border-right: none;
  border-top: none;
  border-bottom: none;
}
.classesSelector .classesGrid.small-only TD.st-val {
    border-left: none;
    border-top: none;
    border-bottom: none;
}
.classesSelector .classesGrid.small-only TD.st-val-row {
    border-top: none;
    border-bottom: none;
}

.classesSelector .classesGrid .st-head-row
{
  text-align: left;    
}

.classesSelector .classesGrid.small-only td {
    padding: 8px !important;
}

.classesSelector .classesGrid.small-only td.st-key {
    font-weight: bold;
    width: 50%;
    /*width: 1% !important;
  white-space: nowrap;*/
    padding-left: 7% !important;
}

.classesSelector .classesGrid .st-val {
    width: 50%;
}

.classesSelector .classesGrid .st-key,
.classesSelector .classesGrid .st-val {
    text-align: left;
}

.classes2Selector .row.classesFilters .col-label-control:first-child .col-label
{
  /*min-width: 70px;*/       
  min-width: 5.5em;
}

.classTableGroupTR.st-group .st-group-row HR
{
  display: none;    
}

.classTable.stacktable.small-only .st-key,
.classTable.stacktable.small-only .st-val {
    text-align: left;
}

.classTable.stacktable.small-only .st-key,
.classTable.stacktable.small-only .st-val {
    padding-left: 8%;
}

@media screen and (min-width: 421px) {
    .classTable.stacktable.small-only .st-key,
    .classTable.stacktable.small-only .st-val {
        padding-left: 12%;
    }
}

@media screen and (min-width: 601px) {
    .classTable.stacktable.small-only .st-key {
        width: 25%;
    }
}

@media screen and (max-width: 768px) {
    .classTable.stacktable.small-only .img-cnt,
    .classesGrid.stacktable.small-only .img-cnt,
    .classMeetingsGrid.stacktable.small-only .img-cnt {
        max-width: 300px !important;
    }

    .classTable.stacktable.small-only .st-val-row .img-cnt,
    .classesGrid.stacktable.small-only .st-val-row .img-cnt,
    .classMeetingsGrid.stacktable.small-only .st-val-row .img-cnt {
        margin-left: auto;
        margin-right: auto;
    }
}

@media screen and (min-width: 769px) {
    .classTable.large-only .img-cnt,
    .classesGrid.large-only .img-cnt,
    .classMeetingsGrid.large-only .img-cnt {
        max-width: 150px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media screen and (max-width: 468px) {
    .Classes2SelectorGrid.ResponsiveTable .narrow-only .img-cnt,
    .classMeetingsGrid.ResponsiveTable .narrow-only table.responsiveCellContent .img-cnt {
        max-width: 300px !important;
        margin-left: auto;
        margin-right: auto;
    }
}

@media screen and (min-width: 469px) {
    .Classes2SelectorGrid.ResponsiveTable .img-cnt,
    .classMeetingsGrid.ResponsiveTable .img-cnt {
        max-width: 150px;
        margin-left: auto;
        margin-right: auto;
    }
}

.Classes2SelectorGrid.ResponsiveTable .narrow-only table.responsiveCellContent {
    width: 100%;
}

.Classes2SelectorGrid.ResponsiveTable .narrow-only table.responsiveCellContent td.res-label,
.Classes2SelectorGrid.ResponsiveTable .narrow-only table.responsiveCellContent td.res-value:not([colspan="2"]) {
    text-align: left;
}

@media screen and (min-width: 421px) {
    .Classes2SelectorGrid.ResponsiveTable .narrow-only table.responsiveCellContent td.res-label {
        padding-left: 12%;
        width: 40%;
    }
}

.classMeetingsGrid.ResponsiveTable .narrow-only table.responsiveCellContent {
    width: 100%;
}

    .classMeetingsGrid.ResponsiveTable .narrow-only table.responsiveCellContent td.res-value[colspan="2"] {
        text-align: center;
    }

.meetingsSelector .filtersControls .col-label {
    display: block;
    float: none;
}

.meetingsSelector .availabilityFilters SELECT {
    width: auto !important;
}

.meetingsSelector .availabilityFilters .col-label {
    float: left;
}

DIV.meetingsSelector .filtersControls td.filtersContainer {
    width: auto;
}

.calendar-close-link
{
  display: block;
  text-align: center;
  padding: 0px;
  font-size: 70%;
  margin-bottom: 5px;
  height: 20px;
  width: 150px;
  max-width: 150px;    
}

.calendar-close-link .glyphicon
{
  top: 0px;    
}

.calendarLink.narrow-only, .calendarLinkHighlighted.narrow-only
{
  margin: 0px;
  padding: 0px;
}

TABLE.subscribe_content
{
  width: auto;
  /*max-width: 300px;*/
  min-width: 250px;
}

TD.subscribe_content
{
  padding-left: 5px;        
  padding-right: 5px;
}

.feeGridContainer
{
  position: relative;

  zoom: 1; 
  overflow: auto; 
  overflow-x: hidden; 
  width: auto; 
}

.feeGridContainer .scroller
{
  margin-bottom: 10px;
  overflow: hidden;
}

/* MSS-6301
a.register.wide-only,
a.dropin.wide-only {
}

input.register.narrow-only,
input.dropin.narrow-only {
    display: none;
}
*/
@media screen and (min-width: 768px)
{
  .feeGridContainer
  {
    height: 410px;
  }
}

.feeGridContainer .TableWithBorders tr td
{
  white-space: normal !important;
}

.productSelector .stiOptValue
{
    max-width: 200px;    
}


@media screen and (min-width: 769px) 
{
   .CalendarTable TR.CalendarHiddenEntriesRow TD.CalendarEntry
   {
     display: none !important;    
   }
}

@media screen and (max-width: 769px) 
{
  .no-padding-xs-plus
  {
    padding: 0px !important;    
  }  

  .padding-xs-plus-right-10 { padding-right: 10px; }
  
  .desc-popup-container
  {
    overflow: hidden !important;
    max-height: 9999px !important;
  }
}

@media screen and (max-width: 767px) 
{
  .no-padding-xs-minus
  {
    padding: 0px !important;    
  }

  DIV.pull-none-xs-minus
  {
    float: none !important;
  }

  .margin-bottom-xs-10 {
    margin-bottom: 10px;
  } 

  .margin-bottom-xs-20 {
    margin-bottom: 20px;
  } 
}

@media screen and (max-width:768px) {
    .rbtOptions .rbtOption:not(:first-child),
    .chkOptions .chkOption:not(:first-child) {
        padding-top: 1em;
    }

    .rbtOptions .rbtOption.with-control-on-row:not(:first-child),
    .chkOptions .chkOption.with-control-on-row:not(:first-child) {
        padding-top: 0.5em;
    }

    /* second level of option tree */
    .rbtOptions .rbtSubOption:not(:first-child),
    .chkOptions .chkSubOption:not(:first-child) {
        padding-top: 0.5em;
    }

    .rbtOptions .rbtSubOption.with-control-on-row:not(:first-child),
    .chkOptions .chkSubOption.with-control-on-row:not(:first-child) {
        padding-top: 0.5em;
    }

  .no-padding-xs
  {
    padding: 0px !important;    
  }

  .col-label-control,
  .col-button
  {
    max-width: 99%;
  }
  
  .col-label
  {
    min-width: 6.3em !important;    
  }
  
  .classCalendarTable.ResponsiveTable .wide-only,
  .CalendarTable.ResponsiveTable .wide-only
  {
    display: none !important;    
  }

  .classCalendarTable.ResponsiveTable .narrow-only,  
  .CalendarTable.ResponsiveTable .narrow-only
  {
    display: block !important;    
  }

    /* MSS-6301
    a.register.wide-only,
    a.dropin.wide-only {
        display: none !important;
    }

    input.register.narrow-only,
    input.dropin.narrow-only {
        display: inline-block;
        *display: block;
    }*/

  .CalendarTable .CalendarWeekCell,
  .CalendarTable .CalendarWeekCellHighlighted
  {
    vertical-align: top;
  }
  
  .productSelector .stiOptValue
  {
    max-width: 150px;    
  }

  .ccForm .wide-only.copy-primary-contact-info 
  {
      display: none;
  }

  .ccForm td.narrow-only.copy-primary-contact-info 
  {
      display: table-cell;
  }

    /*
        Teacher gallery grid and images
    */
    .teachersPage .teacherTable > tbody > tr > td {
        width: 100% !important;
        max-width:none !important;
        display: block;
    }

    .teachersPage .teacherTable > tbody > tr > td.teacherPhotoTd img {
        margin: 0px auto;
        display: block;
        margin-bottom: 1em;
    }

    .teachersPage #section-main .teacherTable .teacherNameSpan {
        padding-left: 0px !important;
        width: 100% !important;
    }

    .teachersPage #section-main .teacherTable .teacherDescriptionSpan {
        padding-left: 0px !important;
        margin-left: 0px;
    }

    /*
        Locations grid
    */
    .locationsPage .locationsGrid > tbody > tr > td {
        width: 100% !important;
        max-width: none !important;
        display: block;
    }

    .locationsPage .locationsGrid > tbody > tr > td.locationPhotoTd img {
        margin: 0px auto;
        display: block;
        margin-top: 1em;
    }
}

.visible-720-block
{
  display: none;
}

div.ResponsiveButtonHolder {

}

div.ResponsiveButtonHolder .btnSpacer {
    width: 1em;
    display: inline-block;
}

table.ResponsiveButtonHolder td.btnSpacer {
    width: 1em;
}

@media screen and (min-width: 721px) {
    .auto-width-wide-only {
        width: auto !important;
        max-width: none !important;
        min-width: 0px !important;
    }
}

@media screen and (max-width: 767px) {
    /*
        It fixes the iPhone zooming problems (for landscape mode)
        SG: it also makes the button greater and it is possible a good think for the small devices
      */
    select, textarea,
    input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"],
    input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"],
    input[type="search"], input[type="tel"], input[type="color"],
    input[type="submit"], input[type="button"] {
        font-size: 16px;
    }
}

.removeRegistrantLink span.narrow-only {
    display: none;
}

@media screen and (max-width: 720px) {
  .loginContainer .subHeader
  {
    font-size: 16px !important;
    display: block !important;
    text-align: left; 
  }

  TABLE.loginControls
  {
    margin: 0px auto;
    min-width: 200px;
  }
  
  TABLE.noAccountLoginControls
  {
    min-width: 200px;  
    width: auto !important;
  }

  .noAccountLoginControls TR TD
  {
    text-align: center !important;
  }

  .visible-720-block
  {
    display: block;
  }

  .hidden-720-block
  {
    display: none;
  }

  .cell-as-block-720
  {
    display: block;
    width: auto !important;
  }

  .oldie .cell-as-block-720
  {
    /* Old IE fix */
    float: left;
    clear: both;
  }

  TABLE.ResponsiveTable.loginContainer .wide-only
  {
    display: none !important; 
  }

  .ResponsiveTable.loginContainer .narrow-only
  {
    display: block; 
  }

  TABLE.ResponsiveTable.loginContainer .wide-only
  {
    display: none !important; 
  }
  
  TD.addToCartTD
  {
    text-align: left !important;    
  }

  SELECT { max-width: 300px; width: 100% !important; }
  input.wide { max-width: 300px; width: 100% !important; }


  .classSelection { white-space: normal !important; }

    .product .image {
        text-align: center;
    }

    .product .product-content img {
        float: none !important;
        display: block;
        margin: 0 auto;
    }

    .removeRegistrantLink span.wide-only {
        display: none;
    }

    .removeRegistrantLink span.narrow-only {
        display: inline;
    }

    .removeRegistrantLink {
        text-decoration: none !important;
    }
}

@media screen and (max-width: 580px) {
  .cell-as-block-580
  {
    display: block;
    width: auto !important;
  }

  .oldie .cell-as-block-580
  {
    /* Old IE fix */
    float: left;
    clear: both;
  }

    .wide-only-580 {
        display: none !important;
    }

    .classesSelector .cell-as-block-580.regIndex
    {
      font-weight: bold;    
    }
}

div.narrow-468-only {
    display: none;
}

@media screen and (max-width: 468px) 
{
    div.narrow-468-only {
        display: block;
    }

  .loginContainer .noAccountSection span.desc-part
  {
    white-space: nowrap;
  }

  INPUT.wide.udf_memo.txtEditable,
  TEXTAREA.wide.udf_memo.txtEditable,
  INPUT.wide,
  TEXTAREA.wide
  {
    width: 15em;
  }

  SELECT.udf_combo
  {
    max-width: 15em;
  }

  .spaceBox.frameContent
  {
    padding-left: 0px;
    padding-right: 0px;    
  }

  .Classes2SelectorGrid tr td
  {
    white-space: normal !important;
  }
  
  .CalendarTable .CalendarEntry
  {
    vertical-align: middle !important;     
  }
  
  .CalendarTable .calendarDayItemResponsive
  {
    float: none !important;    
  }

  .CalendarTable .TableHeader TD
  {
    text-align: center;
  }

  .CalendarTable .CalendarWeekCell,
  .CalendarTable .CalendarWeekCellHighlighted
  {
    white-space: nowrap;
    vertical-align: top;
    text-align: center;
  }
  
  .CalendarTable.ResponsiveTable TR TD
  {
    padding-left: 2px;    
    padding-right: 2px;    
  }

  .col-button:before,
  .col-button:after
  {
    display: table;
    content: " ";
  }
  
  .narrow-right
  {
    float: right;    
  }

  TABLE.ResponsiveTable.wide-only,
  TABLE.ResponsiveTable .wide-only
  {
    display: none !important; 
  }

  TABLE.ResponsiveTable.narrow-only
  {
    display: table;   
  }
  
  .ResponsiveTable .narrow-only
  {
    display: block; 
  }

  .ResponsiveTable TH.narrow-only,
  .ResponsiveTable TD.narrow-only
  {
    display: table-cell; 
  }

  TD.cell-as-block-narrow
  {
    display: block;
    width: auto !important;
  }

  .oldie .cell-as-block-narrow
  {
    /* Old IE fix */
    float: left;
    clear: both;
    width: 100% !important;
  }
  
  .editForm TD.cell-as-block-narrow.label
  {
    padding-top: 5px;    
    padding-bottom: 1px;    
  }
  
  .editForm TD.cell-as-block-narrow.control
  {
     padding-top: 1px;    
  }

  .ui-dialog-buttonpane,
  .modal-footer
  {
    display: none;
  }

  .classSelector .registrantClasses
  {
    width: 100%;
  }

  .classSelector .registrantClasses TR.row-top-spacer,
  .classSelector .registrantClasses TR.row-top-spacer TD
  {
     padding: 0px;
     height: auto !important;	
  }

  .classSelector .registrantClasses TR.row-spacer,
  .classSelector .registrantClasses TR.row-spacer TD
  {
    display: none;
  }

  .classSelector .registrantClasses TR TD.sep
  {
    padding: 0px;
    height: 5px !important;
  }

  .classSelector .registrantClasses TD.remove-btn-wide
  {
    display: none;
  }

  .classSelector .registrantClasses .remove-btn-narrow
  {
    display: block;
    float: right;
  }

  .classTable.stacktable.small-only .st-key
  {
    white-space: normal;
  }
  
  TABLE.contactInfoControls TD
  {
    width: 100%;    
  }

  TABLE.contactInfoControls > TBODY > TR > TD + TD
  {
     display: none;     
  }
  TABLE.contactInfoControls TD.cell-as-block-narrow
  {
    display: block;      
  }
  
  .addCouponControls SPAN,
  .addCouponControls INPUT, 
  .addCouponControls A
  { 
      display: block; 
      float: left;
      clear: both;
  }
  
  .shipToPopupControls INPUT[type=text]
  {
    width: 100% !important;    
  }
  
  .paymentProfileListContainer SELECT
  {
    width: 100% !important;          
  }
  
  .registrationTable td.itemPrice
  {
    width: auto !important;    
  }

    TABLE.ccForm INPUT[type=text],
    TABLE.ccForm SELECT,
    TABLE.ccForm .braintree-form-control {
        max-width: 200px;
    }

    TABLE.ccForm .addressContainer INPUT
    {
      /*width: auto !important;    
      min-width: 150px;
      max-width: 400px;*/
    }

    TABLE.ccForm .cidContainer .customLink
    {
      display: block;  
    }
    
    .makePayment .paymentAmountContainer INPUT[type=text]
    {
      display: block;
      margin-left: 5px;    
      width: 80% !important;
    }
    
    .makePayment .paymentProfileContainer SELECT,
    .billingProfile .paymentProfileContainer SELECT
    {
      display: block;
      margin-left: 5px;    
      width: 95% !important;
    }
    
    .classesSelector .regIndex
    {
      font-weight: bold;    
    }

    .meetingsSelector .availabilityFilters .col-control {
        padding-left: 1em;
    }
  
  DIV.blog .blogPosts .postBy
  {
    white-space: normal;    
  }
  
  DIV.blogPostComments .commentsModerationEnabled
  {
      margin-top: 5px;
      display: block;    
  }
  
  /* bottom buttons holder */
  TABLE.ResponsiveButtonHolder TR TD
  {
    display: block;
    float: left;
    width: 100% !important;    
    
    padding: 0px;
    
    text-align: left !important;
  }
  
  TABLE.ResponsiveButtonHolder TR TD + TD
  {
    padding-top: 10px;      
  }
  
  TABLE.ResponsiveButtonHolder TR TD.btnDescription
  {
    padding-top: 0px;  
    padding-bottom: 10px;    
  }

  TD.ResponsiveButtonHolder
  {
    padding-top: 5px;  
  }
  
  DIV.ResponsiveButtonHolder INPUT[type=submit],
  DIV.ResponsiveButtonHolder INPUT[type=button],
  TD.ResponsiveButtonHolder  INPUT[type=submit],
  TD.ResponsiveButtonHolder  INPUT[type=button]
  {
    min-width: 80px;
  }

    div.ResponsiveButtonHolder .btnSpacer {
        display: block;
        width: 100%;
        padding: 10px;
    }
    
    div.ResponsiveButtonHolder INPUT[type=submit],
    div.ResponsiveButtonHolder INPUT[type=button],
    TABLE.ResponsiveButtonHolder TR TD INPUT[type=submit],
    TABLE.ResponsiveButtonHolder TR TD INPUT[type=button] {
        min-width: 200px;
        width: auto !important;

        float: none !important;
    }
  
  TABLE.ResponsiveButtonHolder TR TD.btnSpacer
  {
    display: none;    
  }

  /*
    It fixes the iPhone zooming problems
    SG: it also makes the button greater and it is possible a good think for the small devices
  */
  select, textarea, 
  input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], 
  input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], 
  input[type="search"], input[type="tel"], input[type="color"],
  input[type="submit"], input[type="button"]
  { 
    font-size: 16px;   
  }

  .productSelector > TABLE TR TD
  {
    width: auto !important;    
  }
  .productSelector .captionLabel
  {
    white-space: normal !important;    
  }
  .productSelector .stiOptValue
  {
    width: 120px !important;
    max-width: 120px;    
  }
}

@media screen and (max-width: 400px) 
{
  TR.TablePager TABLE TR TD A,
  TR.TablePager TABLE TR TD SPAN,
  .customPager A,
  .customPager SPAN
  {
    padding: 2px 4px;    
  }

  TABLE.ccForm .addressContainer INPUT
  {
     max-width: 150px;
  }

    .meetingsSelector .availabilityFilters .col-label-control .col-label,
    .meetingsSelector .availabilityFilters .col-label-control .col-control {
        float: none !important;
    }

  A.calendarDayContentBtn 
  {
     width: 28px;
     height: 28px;
     line-height: 26px;
  }

}

@media screen and (max-width: 375px) 
{
  TABLE.MenuButton
  {
    width:140px;
    height:90px;
  }
      
  #content
  {
     padding: 5px;    
  }
  
  .loginControls TD,
  .registrantControls TD
  {
     display: block;
     width: 100% !important;
     height: auto;    
  }

    .existingStudentControls div.rbtOption.existing .studentControlContainer {
        display: block;
        float: none;
        margin-top: 3px;
    }
  
  .registrantControls TD.captionLabel
  {
    padding-top: 5px;
    padding-bottom: 0px;    
  } 

  .ccForm { font-size: 90%; }

  SELECT { max-width: 250px; }
  input.wide { max-width: 250px; }
}


/* keeps images away from menu and shopping cart */
/* SG: commented due to updated logo generation  */
/*.siteTitle IMG
{
  max-width: 70% !important;
}*/

/*******************************************************/
/* stacktable styles */

.stacktable { width: 100%; }
.st-head-row { padding: 5px; }
.st-head-row.st-head-row-main { font-size: 1.5em; padding-top: 0; }
.st-val-row { text-align: center; }
.st-key { width: 50%; text-align: right; padding-right: 1%; }
.st-val { width: 50%; padding-left: 1%; }

TABLE.stacktable.large-only { display: table; }
TABLE.stacktable.small-only { display: none; }

.st-key TABLE.sortTable,
.st-key TABLE.sortTable TR TD
{
  width: auto !important;    
}
.st-key TABLE.sortTable TR TD
{
  border: none !important;    
}

TABLE.st-left-headers.small-only .st-key
{
  text-align: left;    
  font-weight: bold;
}

TABLE.st-left-headers.small-only .st-key,
TABLE.st-left-headers.small-only .st-val
{
  width: auto; 
  padding: 4px !important;
  text-align: left;   
}

TABLE.small-only .sortTable TBODY TR TD:first-child
{
  padding-right: 5px;    
}

TABLE.st-table-no-borders.small-only,
.st-table-no-borders.small-only TD.st-spacer
{
  border: none;    
}

@media screen and (max-width: 768px) {
  TABLE.stacktable.large-only { display: none; }
  TABLE.stacktable.small-only { display: table; }
  
  .st-head-row-main
  {
    display: none;    
  }
}
/*******************************************************/
#header .popover
{
  padding: 0px;    
}

#header .popover-content,
#pageContent .popover-content
{
  background-color: #fff;
  color: #666;
  
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
}


div.menuItemL2 TABLE
{
  width: 100%;
  min-width: 200px;
}

@media screen and (min-width: 768px) {
  table.mainMenu.menuHorizontal.wrap-items {
      width: 100%;
  }
  table.mainMenu.menuHorizontal.wrap-items > tbody tr > td {
    display: inline-block;
  }
}

/* 
  Safari for Mac menu fix (issue with the min-width selected used above)
  http://stackoverflow.com/questions/15939775/css-hack-for-safari-5
*/
::i-block-chrome,div.menuItemL2 TABLE {
  display: block; /* makes the min-width start to work */
}
::i-block-chrome,.menuItemL2 A { padding-right: 7px; }
::i-block-chrome,.menuItemL2 A:active { padding-right: 7px; }
::i-block-chrome,.menuItemL2 A:hover { padding-right: 7px; }
::i-block-chrome,.menuItemL2 A:visited { padding-right: 7px; }

@media only print {
  .social-media-icons,
  .print-hidden {
    display: none !important;
  }
}

.dropdown.shopping_cart_container .dropdown-menu {
    min-width: 80px;
}

.shopping-cart-btn-clear {
    display: none;
}

/* Selector grid special styles */
/* narrow screens */
@media screen and (min-width: 420px) {
    .selector-grid-container .TableWithBorders TR TD {
        white-space: nowrap !important;
    }
}
/* wide screens */
@media screen and (min-width: 768px) {
        .selector-grid-container .TableWithBorders TR TD {
            white-space: normal !important;
        }
}

/* news content by two columns styles */
@media screen and (min-width: 768px) {
    /* MSS-5800 - there is a Chrome bug when using css columns tags and iframe in the first column
     so "columns css layout" can be replaced with simple "float" layout
     according to the "News Items Display Order" in Template Options
  */
    .news-block-content.order_by_column {
        -webkit-column-count: 2; /* Chrome, Safari, Opera */
        -moz-column-count: 2; /* Firefox */
        column-count: 2;
        -webkit-column-gap: 1em; /* Chrome, Safari, Opera */
        -moz-column-gap: 1em; /* Firefox */
        column-gap: 1em;
    }

        .news-block-content.order_by_column .newsItemContent {
            /* http://stackoverflow.com/questions/7785374/how-to-prevent-column-break-within-an-element */
            -webkit-column-break-inside: avoid; /* Chrome, Safari       */
            page-break-inside: avoid; /* Theoretically FF 20+ */
            break-inside: avoid-column; /* IE 11                */
            display: table; /* Actually FF 20+      */
        }

    .news-block-content.order_by_row {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: start;
        -webkit-align-items: flex-start;
        -ms-flex-align: start;
        align-items: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
    }

        .news-block-content.order_by_row .newsItemContent {
            width: 50%;
            padding: 0 5px;
        }

    /* SG: it looks like link on the left side looks better */
    /*.news-block-content.order_by_column .morenews,
    .news-block-content.order_by_row .morenews {
        clear: both;
        float: right;
    }*/
}

/* mobile check responsive controls - i.e. adapted for narrow screens only for now */
@media (max-width: 768px) {

    .paymentProfileListContainer {
        padding-top: 5px;
    }

    /* checkbox styles improvement */

    input[type=checkbox] {
        position: absolute;
        opacity: 0;
    }

        input[type=checkbox] + label {
            position: relative;
            display: inline-block;
            min-width: 1.4em;
            min-height: 1.4em;
            line-height: 1.4em;
        }

            input[type=checkbox] + label:not(:empty) {
                padding-left: 1.7em;
            }

            input[type=checkbox] + label:before {
                -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
                -moz-transition: -moz-transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
                transition: transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
                -webkit-transform: rotate(-45deg) scale(0, 0);
                -moz-transform: rotate(-45deg) scale(0, 0);
                -ms-transform: rotate(-45deg) scale(0, 0);
                -o-transform: rotate(-45deg) scale(0, 0);
                transform: rotate(-45deg) scale(0, 0);
                content: "";
                position: absolute;
                z-index: 2;
                left: 0.1em;
                top: 0.3em;
                width: 1.2em;
                height: 0.6em;
                border: 4px solid #ffffff;
                border-top-style: none;
                border-right-style: none;
                cursor: pointer;
            }

        input[type=checkbox]:checked + label:before {
            -webkit-transform: rotate(-45deg) scale(1, 1);
            -moz-transform: rotate(-45deg) scale(1, 1);
            -ms-transform: rotate(-45deg) scale(1, 1);
            -o-transform: rotate(-45deg) scale(1, 1);
            transform: rotate(-45deg) scale(1, 1);
        }

        /*input[type=checkbox]:focus + label:before {
            outline: none;
            border-color: #0075ff; /* #3197EE;
        }*/

        input[type=checkbox] + label:after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 1.4em;
            height: 1.4em;
            z-index: 1;
            background: #fff;
            border: 1px solid #767676;
            border-radius: 3px;
            cursor: pointer;
        }

        input[type=checkbox]:checked + label:after {
            border-color: #0075ff;
            background: #0075ff;
        }

        input[type=checkbox]:disabled + label:after {
            /*box-shadow: inset 0 0 0 4px #f4f4f4; SG: doesn't look well in the MssSite UI */
            border-color: #b4b4b4;
            background: #b4b4b4;
        }


    /* radio button improvements */

    input[type=radio] {
        position: absolute;
        opacity: 0;
    }

        input[type=radio] + label {
            display: inline-block;
            line-height: 1.4em;
        }

            input[type=radio] + label:before {
                content: "";
                background: #f4f4f4;
                border-radius: 100%;
                border: 1px solid #767676; /*#b4b4b4;*/
                display: inline-block;
                width: 1.4em;
                height: 1.4em;
                position: relative;
                top: 0.3em;
                margin-right: 0.3em;
                cursor: pointer;
                text-align: center;
                transition: all 250ms ease;
            }

        input[type=radio]:checked + label:before {
            background-color: #0075ff; /* #3197EE;*/
            box-shadow: inset 0 0 0 4px #f4f4f4;
        }

        input[type=radio]:focus + label:before {
            outline: none;
            border-color: #0075ff; /* #3197EE;*/
        }

        input[type=radio]:disabled + label:before {
            box-shadow: inset 0 0 0 4px #f4f4f4;
            border-color: #b4b4b4;
            background: #b4b4b4;
        }

    .classesSelector .classesGrid input[type=radio] + label.rbtLabel.narrow-only:before {
        top: 0;
        vertical-align: top;
    }

    .classesSelector .classesGrid input[type=radio] + label.rbtLabel.narrow-only {
        display: inline-block !important;
        border: solid 1px gray;
        border-radius: 5px;
        background-color: #eee;
        padding: 10px;
        cursor: pointer;
    }

    .classesSelector .classesGrid input[type=radio]:checked + label.rbtLabel.narrow-only {
        border-color: #0075ff; /* #3197EE;*/
        color: #0075ff; /* #3197EE;*/
    }

    .classesSelector .classesGrid input[type=radio]:checked + label.rbtLabel.narrow-only {
        border-color: #005cc8;
        color: #005cc8;
    }

    .classesSelector .classesGrid input[type=radio]:checked + label:before {
        background-color: #005cc8;
    }
}

TABLE.stacktable.small-only .st-val.nowrap,
TABLE.stacktable.small-only .st-val-row.nowrap,
.ResponsiveTable .narrow-only .res-value.nowrap {
    white-space: normal;
}