/* ====================================================================================================================
@brief ONTRAPORT's skeleton extension file
===================================================================================================================== */

/* =====================================================================================================================
Skeleton Grid Size Extension
	1) Adds new column sizes for rows with 7, 8, or 9 columns.
	2) Adds a tablet responsive size for screens 850px - 550px wide.
		a) For Multi-Item the tablet is as follows:
		
				12 colums -> 4 columns -> 1 column
				11 colums -> 4 columns -> 1 column
				10 colums -> 4 columns -> 1 column
				9 colums -> 3 columns -> 1 column
				8 colums -> 3 columns -> 1 column
				7 colums -> 3 columns -> 1 column
				6 colums -> 2 columns -> 1 column
				5 colums -> 2 columns -> 1 column
				4 colums -> 2 columns -> 1 column
				3 columns -> 3 columns -> 1 column
				2 columns -> 2 columns -> 1 column
				1 column -> 1 column -> 1 column
				
===================================================================================================================== */
@media (min-width: 550px) {
	.column.first-visible,
	.columns.first-visible {
		margin-left: 0; 
	}
	/* For rows 7 columns accross */
	.one-and-half.columns {
		width: 10.6666667%;
	}
	/* For rows 8 columns accross */
	.one-and-third.columns {
		width: 8.6666667%;
	}
	/* For rows 9 columns accross */
	.one-and-fourth.columns {
		width: 7.3333333%;
	}
	
	.offset-by-one.column.first-visible, 
	.offset-by-one.columns.first-visible {
		margin-left: 8.66666666667%;
	}
}
/* For devices smaller than 768px */
@media (min-width: 550px) and (max-width: 850px) {
	.u-cf {
		text-align: center;
	}
	[class*="tablet-"].columns {
		float: none;
		display: inline-block;
	}
	
	.tablet-three.columns {
		width: 21.2333333%;
	}
	.tablet-three.first-in-row.columns {
		margin-left: 0;
	}
	.tablet-four.columns {
		width: 30.111112%
	}
	.tablet-four.first-in-row.columns {
		margin-left: 0;
	}
	.tablet-six.columns {
		width: 47.56666667%;
	}
	.tablet-six.first-in-row.columns {
		margin-left: 0;
	}
	
	.offset-by-one.column.first-visible, 
	.offset-by-one.columns.first-visible {
		margin-left: 0;
	}
}
/* =====================================================================================================================
blocks
===================================================================================================================== */
.block-wrapper {
    padding-top: 3em;
    padding-bottom: 3em;
    width: 100%;
    background-size: cover;
    background-position: center center;
    
    word-break: break-word;
    word-wrap: break-word;
}

/* =====================================================================================================================
buttons
===================================================================================================================== */
.button {
	height: auto;
	max-width: 100%;
	padding: 0;
	white-space: normal;
	border: 0;
	color: inherit;
	text-transform: none;
	border-radius: 0;
	cursor: inherit;
	letter-spacing: inherit;
	text-align: inherit;
	background-color: inherit;
    margin-bottom: 0;
}
.button:hover {
	color: inherit;
	border-color: inherit;
}
.button--round,
.button-style.button--round {
    border-radius: 500px;  
}
.button-style {
    padding: 10px 20px;
    border-radius: 3px;
    text-decoration: none;
    -webkit-transition: opacity .4s ease-in-out;
    -moz-transition: opacity .4s ease-in-out;
    -ms-transition: opacity .4s ease-in-out;
    -o-transition: opacity .4s ease-in-out;
    transition: opacity .4s ease-in-out;
    cursor: pointer;
}
.button-style:hover {
    opacity: .9;
}

/* =====================================================================================================================
Images
===================================================================================================================== */

.opt-circle {
  /* Safari 3-4, iOS 1-3.2, Android 1.6- */
  -webkit-border-radius: 500px; 

  /* Firefox 1-3.6 */
  -moz-border-radius: 500px; 
  
  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
  border-radius: 500px;
} 

/* =====================================================================================================================
Fonts 
===================================================================================================================== */

.opt-center {
    text-align: center;
}

.opt-bold.opt-bold.opt-bold {
    font-weight: bold;
}

.opt-italic.opt-italic.opt-italic {
	font-style: italic;
}

.opt-underline.opt-underline.opt-underline {
	text-decoration: underline;
}

.opt-big {
    font-size: 1.2em;
}

.opt-medium {
    font-size: 1em;
}

.opt-small {
    font-size: .8em;
}

.opt-red {
    color: red;  
}

/*
    This style is needed to override font-style: normal from theme classes. The theme class
    needs font-style: normal so that a mobile style can clear the italics of a desktop style
*/
i {
    font-style: italic !important;
}

[opt-type="html"] span.h1,
[opt-type="html"] span.h2,
[opt-type="html"] span.h3,
[opt-type="html"] span.label,
[opt-type="html"] span.button,
[opt-type="html"] span.large-body-text,
[opt-type="html"] span.body-text,
[opt-type="html"] span.blockquote {
    background-color: inherit;
}

/* =====================================================================================================================
Container
===================================================================================================================== */

.container.container {
    max-width: 1200px;
}

/* =====================================================================================================================
Forms
===================================================================================================================== */

a[data-opf-trigger] {
    cursor: pointer;
}

textarea {
    max-width: 100%;

    resize: none;
}

select[multiple] {
    height: auto;
}

b, strong {
    font-weight: bold;
}

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="password"],
textarea,
select {
  font-size: 15px; 
  color: #222;
 }
 
input[type="date"] {
  height: 38px;
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box; 
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;

}
input[type="date"]:focus {
  border: 1px solid #33C3F0;
  outline: 0; 
}

/* Hide the up/down spinner control for Chrome. You can still use the keyboard to edit the values */
input[type="date"]::-webkit-inner-spin-button {
    display: none;
}

input[type="date"]:before{
    color:lightgray;
    content:attr(placeholder);
}
input[type="date"]:not([value=""]):before,
input[type="date"]:focus:before {
    content: "" !important;
}

/* =====================================================================================================================
	CUSTOM WIDTH FAKED MEDIA QUERIES
===================================================================================================================== */

.opt-page-size-mobile.opt-page-size-mobile .column,
.opt-page-size-mobile.opt-page-size-mobile .columns {
  width: 100%;
}

.opt-page-size-tablet.opt-page-size-tablet .u-cf {
	text-align: center;
}

.opt-page-size-tablet.opt-page-size-tablet [class*="tablet-"].columns {
	float: none;
	display: inline-block;
}

.opt-page-size-tablet.opt-page-size-tablet .tablet-three.columns {
	width: 21.2333333%;
}

.opt-page-size-tablet.opt-page-size-tablet .tablet-four.columns {
	width: 30.111112%
}

.opt-page-size-tablet.opt-page-size-tablet .tablet-six.columns {
	width: 47.56666667%;
}

.opt-page-size-tablet.opt-page-size-tablet .tablet-three.first-in-row.columns,
.opt-page-size-tablet.opt-page-size-tablet .tablet-four.first-in-row.columns,
.opt-page-size-tablet.opt-page-size-tablet .tablet-six.first-in-row.columns,
.opt-page-size-tablet.opt-page-size-tablet .offset-by-one.column.first-visible, 
.opt-page-size-tablet.opt-page-size-tablet .offset-by-one.columns.first-visible,
.opt-page-size-mobile.opt-page-size-mobile .column,
.opt-page-size-mobile.opt-page-size-mobile .columns  {
	margin-left: 0;
}


@media (max-width: 549px) {

    /* Had to bump up selector weight because the OFORM content width uses !important with a selector weight of 4 */
    .container.container.container.container.container {
        width: 85% !important;
    }

	.opt-page-size-tablet.opt-page-size-tablet .column,
	.opt-page-size-tablet.opt-page-size-tablet .columns,
	.opt-page-size-mobile.opt-page-size-mobile .column,
	.opt-page-size-mobile.opt-page-size-mobile .columns,
	.opt-page-size-tablet.opt-page-size-tablet .tablet-three.columns,
	.opt-page-size-tablet.opt-page-size-tablet .tablet-three.first-in-row.columns,
	.opt-page-size-tablet.opt-page-size-tablet .tablet-four.columns,
	.opt-page-size-tablet.opt-page-size-tablet .tablet-four.first-in-row.columns,
	.opt-page-size-tablet.opt-page-size-tablet .tablet-six.columns {
		width: 100%;
	}
	
}

@media (max-width: 400px) {
    /* Had to bump up selector weight because the OFORM content width uses !important with a selector weight of 4 */
    .container.container.container.container.container {
        width: 100% !important;
    }
}

/* =====================================================================================================================
    Orderform Styles
===================================================================================================================== */



ontraport-product-grid th,
.ontraport_gridrow td {
    border-style: solid;
    border-width: 1px;
}

.gshack td.no-border,
.no-border {
    border-style: none;
}



/*.gshack .grid-summary-shipping-selector .label,
.gshack .grid-summary-tax-item .label {
    border-left: 0;
}*/



/*
new styles that override the defaults provided for in grid.css
===================================*/

ontraport-product-grid[responsive] * {
    box-sizing: border-box;

    /* override the block-wrapper defaults*/
    word-break: initial;
}

/* for payment plans the radios are wrapped in a label, which defaults to bold, normalize it */
ontraport-product-grid table label {
    font-weight: inherit;
}

/* nested tables get no margin */
ontraport-product-grid table table {
    margin-bottom: 0;
}

ontraport-product-grid[responsive] thead th,
ontraport-product-grid[responsive] tbody td {

    text-transform: capitalize;
    padding: 1em;
    line-height: initial;
    
}

/* Chrome capitalizes the (S) in Month(S)  with text-transform:cap - ONTRA-10744 */
ontraport-product-grid[responsive] tbody td[data-modelattr="trial"] {
    text-transform: none;
}

/* make sure that the name never takes up more than 50% of the table, this covers products that have run on sentences as their name */
ontraport-product-grid[responsive] [data-modelattr="name"]  {
    width: 50%;
}

/* line up the totals */
ontraport-product-grid[responsive] .ontraport_grid:not(.moonray-form-paymentplandisplay-wrapper) td:last-child {
    text-align: right;
}

ontraport-product-grid[responsive] td:empty,
ontraport-product-grid[responsive] th:empty {
    visibility: hidden;
}


/* remove the margin button that is diplayed by default */
ontraport-product-grid[responsive] input[type],
ontraport-product-grid[responsive] select {
    margin-bottom: 0;
    vertical-align: middle;
}

/* shipping options, lets limit the width of the select =) */
ontraport-product-grid[responsive] [name="shipping_options"] {
    max-width: 100%;

}

/* 
    Input type number
     lets make it look the same for each browser  by adding our own "spinner* buttons 
=======================================================*/
ontraport-product-grid input[type=number] {
    -moz-appearance: textfield;
    padding-right: 23px;
    min-width: 4em;
}

/* hides the spin-button for chrome*/
ontraport-product-grid input[type=number]::-webkit-outer-spin-button,
ontraport-product-grid input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

ontraport-product-grid .ussr-component-grid-row.product .ussr-component-gridcell-input-number-spinner-wrapper {
    top: 0;
    right: 0px;
    bottom: 0;

    min-width: 19px;

    /* have to unset potential block level border styles that are now deprecated */
    border: 0;
    border-left: 1px solid #D1D1D1;

    height: auto;

}

ontraport-product-grid .ussr-component-gridcell-input-number-spinner-wrapper a {
    display: block;
    height: 19px;
    text-align: center;
}

ontraport-product-grid .ussr-component-gridcell-input-number-spinner-wrapper .ussr-component-gridcell-input-number-spinner-btn-down {
    border-top: 1px solid #D1D1D1;
}

ontraport-product-grid .ussr-component-gridcell-input-number-spinner-wrapper .carat {
    display: inline-block;
    width: 16px;
    height: 16px;
    overflow: hidden;
    text-indent: -99999px;
    vertical-align: top;
    background-repeat: no-repeat;
    background-position: center;

    /* up */
    background-image: url('../../stockPhoto/orderform/ussr-icon-triangle-1-n.png');
}

ontraport-product-grid .ussr-component-gridcell-input-number-spinner-btn-down .carat {
    background-image: url('../../stockPhoto/orderform/ussr-icon-triangle-1-s.png');
}

/* == end of input type number styles ==*/


/* hide all labels by default, shown by the media query*/
.ontraport_gridcell__label {
    display: none;
    text-transform: capitalize;
}

ontraport-product-grid .position-relative {
    position: relative;
}

ontraport-product-grid .position-absolute {
    position: absolute;
}

ontraport-product-grid .display-inline-block {
    display: inline-block;
}

ontraport-product-grid .display-none {
    display: none;
}



/* grid summary styles 
==========================================================*/

ontraport-product-grid tfoot td[colspan] + td[colspan] {
    border-style: solid;
    border-width: 1px;
    padding: 0;
}



/* end of grid summery styles */


.moonray-form-paymentplandisplay-wrapper tr,
.moonray-form-paymentplandisplay-wrapper td {
    width: 50%;
}


/* ==============================================
ontraport-product-grid responsive styles

based upon filamentgroup tablesaw
============================================*/
/* For devices smaller than 768px */
@media (max-width: 850px) {

    
    ontraport-product-grid[responsive] .ontraport_grid thead {
        display: none;
    
    }
    
    ontraport-product-grid[responsive] .ussr-component-grid-body tr {

        display: block;
        width: 100%;

        border-top: 3px solid #dfdfdf;
    }


    ontraport-product-grid[responsive] .ussr-component-grid-body td {
        display: block;
        width: 100%;

        text-align: right;

        border-top-style: none;
        border-right-style: none;
        border-left-style: none;

        padding-left: 0;
        padding-right: 0;
    }


    ontraport-product-grid[responsive] .ontraport_gridcell__label {
        display: inline-block;
        padding: 0 .6em 0 0;
        width: 30%;
        float: left;
        text-align: left;
        vertical-align: top;
    }

    ontraport-product-grid[responsive] td[data-modelattr="total"] .ontraport_gridcell__label {
        min-width: 7.311em;
    }

    .ontraport_gridcell__content {
        text-align: right;
        justify-content: flex-end;
    }


    ontraport-product-grid[responsive] td:empty,
    ontraport-product-grid[responsive] th:empty {
        display: none !important;
    }

    /* payment plan styles
    =====================+++++++++++++++++++++++++*/

    /* target the td that contains the name of the product */

    ontraport-product-grid[responsive] .moonray-form-paymentplandisplay-wrapper td {
        border-style: none;
        padding-top: .25em;
        padding-bottom: .25em;
        text-align: left;
    }

    ontraport-product-grid[responsive] .moonray-form-paymentplandisplay-wrapper tr:first-of-type > td:first-of-type {
        font-weight: bold;
        width: 100%;
        padding-bottom: .5em;
    }

    /* kill off the borders between the payment plans */
    ontraport-product-grid[responsive] .moonray-form-paymentplandisplay-wrapper tr,
    ontraport-product-grid[responsive] .moonray-form-paymentplandisplay-wrapperv td,
    ontraport-product-grid[responsive] .grid-summary tr {
        border-top-style: none;
    
    }


    


    /* input type s
    ============*/

    ontraport-product-grid[responsive] input[type="number"] {
        text-align: right;
        max-width: 6em;
        box-sizing: border-box;
    }

    ontraport-product-grid[responsive] .ussr-component-grid-row.product .ussr-component-gridcell-input-number-spinner-wrapper {
        margin-top: 0;
    }

    /* grid summary styles
    =======================================*/

    ontraport-product-grid tfoot td[colspan] + td[colspan] {
        border-style: none;
    }

    ontraport-product-grid[responsive] .grid-summary {
        width: initial;
        float: none;
        border-top: 3px solid #dfdfdf; 
    }


    ontraport-product-grid[responsive] .grid-summary td:first-of-type {
        
        /* remove the padding from the left so it lines up with the grid body */
        padding-left: 0;
    }

    ontraport-product-grid[responsive] .grid-summary td:last-of-type {
        font-weight: bold;

        padding-right: 0;
    }
    



    
}

.opt-date-time-field__wrapper {
    position: relative;
}

/* Override materialize's style that makes disabled inputs have dotted bottom borders */
.opt-date-time__icon {
    display: block;
    position: absolute;
    right: 5px;
    /* 
        This is calculated by the bottom margin of v2 inputs, plus half of the height of v2 inputs, minus half of the icon size.
        So: 15 + ( 38 / 2 ) - ( 24 / 2 )
    */
    bottom: 22px;
}

.opt-date-time__icon--x,
.opt-date-time__picker--open .opt-date-time__icon--calendar {
    display: none;
}

.opt-date-time__picker--open .opt-date-time__icon--x {
    display: block;
}

/* One off style to prevent skeleton from adding bullets to the materialize date picker month menu */
.dropdown-content.select-dropdown {
    list-style: none;
}


.opt-date-time-field.opt-date-time-field {
    /* 
        In firefox, the disabled property captures the click event so that it is not emitted. 
        Make pointer events none so that the click will propagate.
    */
    pointer-events: none;
    /* Make sure text does not go behind icon */
    padding-right: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* =====================================================================================================================
	CROSS-BROWSER LIST NORMALIZATION
===================================================================================================================== */
li {
    list-style-position: inside;
}
ul ul,
ul ol,
ol ol,
ol ul {
  font-size: inherit; 
 }