/* ====================================================================================================================
@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;
}

input[type="checkbox"] {
    margin-right: 5px;
    /* Clear bottom margin that is globally applied to inputs, since this makes multi-line checkboxes have inconsistent spacing */
    margin-bottom: 0;
    /* Push the checkbox down slightly so it isn't off center */
    transform: translateY(2px);
}
/* We want to re-add the bottom spacing that is removed from checkboxes.
   Since the label is display inline, we can't just apply a margin-bottom to it. 
   So instead create a spacer that matches the input margin bottom.
   */
input[type="checkbox"] + label::after {
    content: ' ';
    height: 1.5rem;
}

/* =====================================================================================================================
	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;
        padding: 0 20px;
    }
}

/* =====================================================================================================================
    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('//optassets.ontraport.com/opt_assets/blocks/common/stockPhoto/orderform/ussr-icon-triangle-1-n.png');
}

ontraport-product-grid .ussr-component-gridcell-input-number-spinner-btn-down .carat {
    background-image: url('//optassets.ontraport.com/opt_assets/blocks/common/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; 
 }

/*
User Agent styles on IOS mobile devices are setting opacity to .4 when the disabled attribute is found on inputs for smart forms. 
The attribute has been there for certain inputs ( ex. date-time-field ) and works on browser as is. This is a mobile specific problem ( use x code ) if needs to be dug deeper.
*/
html input[disabled] {
    opacity: unset; 
}