/* This stylesheet contains input styles, ie checkboxes, buttons etc*/

/* ------------------------- Ie Hacks ------------------------- */
/* Stop IE showing it's own dropdown caret */
select::-ms-expand {
    display: none;
}

/* ------------------------- Button Rows ------------------------- */
/* This is essentially the clearfix style */
div.buttonRow {
    margin-top: 10px;
    margin-bottom: 10px; 
}

div.buttonRow:after {
    content: "";
    display: table;
    clear: both;
}

div.buttonRow > .left {
    float: left;
}

div.buttonRow > .right {
    float: right;
}

div.buttonRow a {
    margin-top: 2px;
}

/* ------------------------- Buttons ------------------------- */
/* Buttons - All */
.btn-hero,
.btn-gel,
.btn-status-gel,
div.collapseExpandButton,
.buttonSecondarySmall,
.buttonSecondaryMedium,
.buttonSecondaryLarge,
.buttonSecondaryExtraLarge,
.buttonSmall,
.buttonMedium,
.buttonLarge,
.buttonExtraLarge {
    height: 36px;
    font-size: 16px;
    font-family: 'oxygen';  
    text-decoration: none !important;
    display: inline-block;
    cursor: pointer;
    padding: 5px 12px 5px 12px;
    transition: background .2s ease,color .2s ease;
    line-height: 1.5;
    font-weight: 400;
    border-radius: 3px;
    margin: 0px 2px 0px 2px;
    border: 1px solid transparent;
    
    /* Override default submit button styles */
    border-style: none;
    align-items: normal;
}

.btn-link
{
    font-size: 15px;
    font-family: 'oxygen';
    text-decoration: underline;
    cursor: pointer;
    color: black;
    background-color: transparent;
}

.btn-link:hover, .btn-link:focus, .btn-link:active
{
    color: #d5002b;
    text-decoration: underline;
    background-color: transparent;
}

/* Buttons - Secondary */
.buttonSecondarySmall,
.buttonSecondaryMedium,
.buttonSecondaryLarge,
.buttonSecondaryExtraLarge {
    color: black;
    background-color: white;
    border: 1px solid #d5002b;
}

.buttonSecondarySmall:hover,
.buttonSecondaryMedium:hover,
.buttonSecondaryLarge:hover,
.buttonSecondaryExtraLarge:hover {
    color: white;
    background-color: #e24d6b;
    text-decoration: none;
}

/* Buttons - Primary */
.btn,
.btn-gel,
.btn-status-gel,
div.collapseExpandButton,
.buttonSmall,
.buttonMedium,
.buttonLarge,
.buttonExtraLarge {
    color: #fff;
    border: 1px solid #d5002b;
    background-color: #d5002b;
}

.btn:hover, btn:focus,
.btn-gel:hover, .btn-gel:focus,
.btn-status-gel:hover, .btn-status-gel:focus,
div.collapseExpandButton:hover, div.collapseExpandButton:focus,
.buttonSmall:hover, .buttonSmall:focus,
.buttonMedium:hover, .buttonMedium:focus,
.buttonLarge:hover, .buttonLarge:focus,
.buttonExtraLarge:hover, .buttonExtraLarge:focus {
    color: #fff;
    background-color: #e24d6b;
    text-decoration: none;
}

/* Dark grey buttons */
.buttonSmall.grey.outline,
.buttonMedium.grey.outline,
.buttonLarge.grey.outline {
    color: black;
    border: 1px solid #2D373E;
    background-color: white;
    box-shadow: none;
}

.buttonSmall.grey.outline:hover,
.buttonMedium.grey.outline:hover,
.buttonLarge.grey.outline:hover {
    color: black;
    background-color: #e1e6ea;
}

.buttonSmall.grey,
.buttonMedium.grey,
.buttonLarge.grey {
    color: #fff;
    border-color: #2D373E;
    background-color: #575F65;
}

.buttonSmall.grey:hover,
.buttonMedium.grey:hover,
.buttonLarge.grey:hover {
    color: #fff;
    background-color: #929aa0;
}

/* Spacing for glyphicons */
.buttonSmall span.glyphicon, .buttonSmall span.fa,
.buttonMedium span.glyphicon, .buttonMedium span.fa,
.buttonLarge span.glyphicon, .buttonLarge span.fa,
.btn-gel span.glyphicon, .btn-gel span.fa,
.btn span.glyphicon, .btn span.fa,
.btn.btn-hero span.glyphicon, .btn.btn-hero span.fa,
.btn-status-gel span.glyphicon, .btn-status-gel span.fa,
div.collapseExpandButton span.glyphicon, div.collapseExpandButton span.fa {
    margin-right: 7px;
}

a.gel-button-outline-white {
    height: 36px;
    font-size: 16px;
    font-family: 'oxygen';  
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    padding: 5px 12px 5px 12px;
    transition: background .2s ease,color .2s ease;
    line-height: 1.5;
    font-weight: 400;
    border-radius: 3px;
    margin: 0px 2px 0px 2px;
    border: 1px solid transparent;
    
    /* Override default submit button styles */
    border-style: none;
    align-items: normal;

    color: white;
    background-color: transparent;
    border: 1px solid white;
}

a.gel-button-outline-white:hover {
    text-decoration: none;
    color: inherit;
}

/* ------------------------- Small button ------------------------- */
.btn-gel-small {
    text-decoration: none;
    font-family: 'roboto';
    display: inline-block;
    cursor: pointer;
    padding: 4px 15px 4px 15px;
    border: 1px solid #621a4b;
    color: #2d373e;
    transition: background .2s ease,color .2s ease;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 400;
    line-height: normal;
    border-radius: 3px;
    margin-right: 2px;
    margin-left: 2px;
}

.btn-gel-small:hover {
    background-color: #915f81;
    color: white;
}

.buttonSmall.small-red {
    font-size: 14px;
    color: #2d373e;
    background-color: white;
    padding: 2px 8px 2px 8px;
    height: auto;
}

.buttonSmall.small-red:hover {
    background-color: #e24d6b;
    color: white;
}

.quick-search-dropdown-result .buttonSmall.small-red {
    width: 100%;
    text-align: center;
}

/* ------------------------- Button toggle groups ------------------------- */
.btn-toggle-group button {
    height: 36px;
    background-color: white;
    color: black;
    margin-right: 0px;
    border: 1px solid #621A4B;
}

.btn-toggle-group button:hover {
    color: #fff;
    border-color: #621a4b;
    background-color: #915f81;
}

.btn-toggle-group button.selected {
    background-color: #621A4B;
    color: white;
}

.btn-toolbar > .btn {
    margin: 2px !important;
}

@media (max-width: 767px) {
    .btn-toggle-group {
        margin-bottom: 5px;
        margin-top: 5px;
    }
}

/* ------------------------- Checkboxes ------------------------- */
.gel-checkbox {
    display: inline-block;
    min-width: 25px;
    position: relative;
}

.gel-checkbox span {
    margin-right: 10px;
    margin-left: 10px;
}

.gel-checkbox label {
    cursor: pointer;
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0;
    left: 0;
    background: white;
    border: 1px solid #621A4B;
    border-radius: 2px;
    margin-bottom: 0px;
}

.gel-checkbox label:after {
    opacity: 0;
    content: '';
    position: absolute;
    width: 12px;
    height: 7px;
    background: transparent;
    top: 4px;
    left: 3px;
    border: 3px solid #621A4B;
    border-top: none;
    border-right: none;
    transform: rotate(-45deg);
}

.gel-checkbox label:hover::after {
    opacity: 0.5;
}

.gel-checkbox input[type=checkbox]:checked + label:after {
    opacity: 1;
}

/* Disabled checkbox styles */
.gel-checkbox input[type=checkbox][disabled=true] + label:after {
    opacity: 0;
}

.gel-checkbox input[type=checkbox][disabled=true]:checked + label:after {
    opacity: 0.5;
}

.gel-checkbox input[type=checkbox][disabled=true] + label {
    opacity: 1;
    border: 1px solid #d2d5d8;
    cursor: not-allowed;
}

/* ------------------------- Radio Buttons ------------------------- */
.gel-radio-button {
    min-width: 25px;
    position: relative;
    display: inline-block;
    margin: 2px;
}

.gel-radio-button span {
    margin-right: 10px;
    margin-left: 10px;
}

.gel-radio-button label {
    cursor: pointer;
    position: absolute;
    height: 20px;
    width: 20px;
    top: 0;
    left: 0;
    background: white;
    border: 1px solid #621A4B;
    border-radius: 50%;
    transform: scale(1.02);
    /* box-shadow: inset 0px 0px 0px 1px rgba( 98,26,75,1 ); */
}

.gel-radio-button label:after {
    opacity: 0;
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background: transparent;
    top: 3px;
    left: 3px;
    background-color: #621A4B;
    border-radius: 50%;
}

.gel-radio-button label:hover::after {
    opacity: 0.5;
}

.gel-radio-button input[type=radio]:checked + label:after {
    opacity: 1;
}

span.radioOptions {
    display: flex;
    flex-direction: column;
    padding-top: 6px;
}

/* ------------------------- Gel Button Groups ------------------------- */
.gel-btn-group .input-container span.radioOptions {
    display: inline-block;
}

.gel-btn-group .gel-radio-button {
    display: inline-block;
}

/* Hide the radio button */
.gel-btn-group .gel-radio-button > input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
}

.gel-btn-group .gel-radio-button > input:hover {
    cursor: pointer;
}

.gel-btn-group .gel-radio-button > label {
    display: none;
}

.gel-btn-group .gel-radio-button .radioHint {
    display: none;
}

.radioHint {
	font-size: 14px;
	color: #696b68;
	display:block;
    width:600px;
}

.gel-btn-group .gel-radio-button:not(:first-child) > span {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.gel-btn-group .gel-radio-button:not(:last-child) > span {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}

.gel-btn-group .gel-radio-button > span {
    border: 1px solid #621A4B;
    padding: 5px 12px;
    text-align: center;
    vertical-align: middle;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.gel-btn-group .gel-radio-button > span:hover,
.gel-btn-group .gel-radio-button > input:hover ~ span {
    cursor: pointer;
    color: #fff;
    border-color: #621a4b;
    background-color: #915f81;
}

.gel-btn-group .gel-radio-button > input:checked ~ span {
    background-color: #621A4B;
    color: white;
}

.gel-btn-group .gel-radio-button {
    margin: 0px;
}

.gel-btn-group .gel-radio-button span {
    margin: 0px;
}

@media (max-width: 767px) {
    .gel-btn-group .gel-radio-button {
        height: 35px;
    }
}

/* ------------------------- Toggles ------------------------- */
.gel-toggle {
    -webkit-transition: .4s;
    transition: .4s;
    display: inline-block;
}

/* The switch - the box around the slider */
.gel-toggle label {
    position: relative;
    display: inline-block;
    width: 75px;
    height: 30px;
    margin-bottom: 0px !important;
  }
  
/* Hide default HTML checkbox */
.gel-toggle input {
    display: none;
}

/* The slider */
.gel-toggle span:not( .toggle-label ):before {
    content: "Off";
    vertical-align: middle;
}

.gel-toggle span:not( .toggle-label ) {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    border: 2px solid #d7d2cb;
    -webkit-transition: .4s;
    transition: .4s;
}

.gel-toggle input:checked + span:not( .toggle-label ) {
    border: 2px solid #621A4B;
}

.gel-toggle span:not( .toggle-label ):before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 0px;
    bottom: 0px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    box-shadow: 3px 0 6px 0 rgba(0,0,0,0.3);
}

.gel-toggle input:checked + span:not( .toggle-label ) {
    background-color: #621A4B;
    background: linear-gradient( #621A4B, #79205d );
}

.gel-toggle input:focus + span:not( .toggle-label ) {
    box-shadow: 0 0 1px #621A4B;
    background: linear-gradient( #621A4B, #79205d );
}

.gel-toggle input:checked + span:not( .toggle-label ):before {
    -webkit-transform: translateX(45px);
    -ms-transform: translateX(45px);
    transform: translateX(45px);
}

/* Rounded sliders */
.gel-toggle span:not( .toggle-label ) {
    border-radius: 34px;
}

.gel-toggle span:not( .toggle-label ):before {
    border-radius: 50%;
}

/* On/Off text */
.gel-toggle span:not( .toggle-label ):after {
    font-size: 16px;
    content:'Off';
    padding-right: 14px;
    color: black;
    display: block;
    text-align: right;
    width: 100%;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
}

.gel-toggle input:checked + span:not( .toggle-label ):after {
    padding-left: 15px;
    text-align: left;
    color: white;
    content:'On';
    text-shadow:
        0px 1px 0px rgba(255,255,255,.3),
        0px -1px 0px rgba(0,0,0,.5);
}

/* Yes/No text */
.gel-toggle.yes-no span:not( .toggle-label ):after {
    font-size: 16px;
    content:'No';
    padding-right: 13px;
    color: black;
    display: block;
    text-align: right;
    width: 100%;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
}

.gel-toggle.yes-no input:checked + span:not( .toggle-label ):after {
    padding-left: 12px;
    text-align: left;
    color: white;
    content:'Yes';
    text-shadow:
        0px 1px 0px rgba(255,255,255,.3),
        0px -1px 0px rgba(0,0,0,.5);
}

/* Following/Not Following toggle */
.gel-toggle.following label {
    width: 145px;
}

.gel-toggle.following span:not( .toggle-label ):after {
    font-size: 15px;
    content:'Not Following';
    padding-right: 10px;
    color: black;
    display: block;
    text-align: right;
    width: 100%;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
}

.gel-toggle.following input:checked + span:not( .toggle-label ):after {
    padding-left: 27px;
    color: white;
    content:'Following';
}

.gel-toggle.following input:checked + span:not( .toggle-label ):before {
    -webkit-transform: translateX(115px);
    -ms-transform: translateX(115px);
    transform: translateX(115px);
}

/* Disabled toggle styles */
.gel-toggle input:disabled + span:not( .toggle-label ) {
    cursor: not-allowed;
}

.gel-toggle input:disabled + span:not( .toggle-label ):before {
    color: #d2d5d8;
}

.gel-toggle input:disabled + span:not( .toggle-label ):after {
    color: #d2d5d8;
}

.gel-toggle input:disabled:focus + span:not( .toggle-label ),
.gel-toggle input:disabled:checked + span:not( .toggle-label ) {
    opacity: 0.5;
}

/* ------------------------- TextArea, Text Inputs and Selects ------------------------- */
/* Need to override forms.less from core content */
.listTable select,
.listTable input[ type="text" ],
.field select,
.field input[ type="text" ],
.field input[ type="number" ],
.field input[ type="password" ],
input.form-control {
    height: 36px !important;
    width: 400px;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    border-radius: 3px;
    border: 1px solid #d7d2cb;
    outline: none !important;
    box-shadow: inherit !important;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

@media (max-width: 767px) {
    /* Text Inputs */
    .listTable select,
    .listTable input[ type="text" ],
    .field select,
    .field input[ type="text" ],
    .field input[ type="number" ],
    .field input[ type="password" ],
    input.form-control {
        width: 100%;
    }
}

.listTable .repeatingGroupRow .autoWidthInput input {
    width: auto;
}

.field textarea {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    border-radius: 3px;
    border: 1px solid #d7d2cb;
    outline: none !important;
    box-shadow: inherit !important;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.field textarea:focus,
.field select:focus,
.listTable select,
.field input:focus,
.valid.form-control:focus,
.form-control:focus {
    border-color: #621A4B !important;
    border-width: 1px;
}

/* ------------------------- Selects ------------------------- */
#product-search-input,
.listTable select,
.field select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    padding-right: 34px;
    background-color: white;
    background-image: url("/images/gel-glyphs/icon-caret.png");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.listTable input[ type="text" ],
.listTable select {
    width: 300px;
}

@media (max-width: 767px) {
    .listTable input[ type="text" ],
    .listTable select {
        width: 100%;
    }
}

/* ------------------------- TextArea ------------------------- */

.field textarea {
    min-width: 600px;
    min-height: 200px;
    resize: both;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .field textarea {
        width: 100%;
        min-width: auto;
    }
}

/* ------------------------- Time fields ------------------------- */
div.field input.hasTimepicker {
    width: 364px;
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

div.field input.hasTimepicker + button {
    height: 36px;
    width: 36px;
    border: 1px solid #d7d2cb;
    border-left: 0px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    background: none;
    text-indent: 0px;
    background-color: #efede9;
    color: #72685a;
    cursor: pointer;
    margin: 0px;    /* Use the parent div flexbox properties for alignment!*/
    transition: background .2s ease,color .2s ease;
    vertical-align: top;
    padding-top: 3px;
}

div.field input.hasTimepicker + button:hover {
    background-color: #f4f3f0;
}

div.field input.hasTimepicker + button > span.calendarIcon,
div.field input.hasTimepicker + button > span.buttonText {
    visibility: hidden;
}

div.field input.hasTimepicker + button:before {
    font-family: FontAwesome;
    font-size: 20px;
    content: "\f017";
}

@media (max-width: 767px) {
    div.field .input-container input.hasTimepicker {
        width: 80%; /* Allows room for the button next to it*/
    }
}

/* ------------------------- Date fields ------------------------- */
.gel-date-range > input {
    width: 152px !important;
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

div.field input.hasDatepicker {
    width: 364px;
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

.gel-date-range > span input + button,
div.field input.hasDatepicker + button {
    height: 36px;
    width: 36px;
    border: 1px solid #d7d2cb;
    border-left: 0px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    background: none;
    text-indent: 0px;
    background-color: #efede9;
    color: #72685a;
    cursor: pointer;
    margin: 0px;    /* Use the parent div flexbox properties for alignment!*/
    transition: background .2s ease,color .2s ease;
    vertical-align: top;
}

.gel-date-range > .inline-text{
    margin: 0px 3px 0px 3px;
}

.gel-date-range > span input + button:hover,
div.field input.hasDatepicker + button:hover {
    background-color: #f4f3f0;
}

.gel-date-range > span input + button > span.calendarIcon,
.gel-date-range > span input + button > span.buttonText,
div.field input.hasDatepicker + button > span.calendarIcon,
div.field input.hasDatepicker + button > span.buttonText {
    visibility: hidden;
}

.gel-date-range > span input + button:before,
div.field input.hasDatepicker + button:before {
    font-family: FontAwesome;
    content: "\f073";
    margin-left: 4px; 
}

.ui-datepicker-calendar td a.ui-state-default {
    background: #ffffff;
}

@media (max-width: 767px) {
    div.field .input-container input.hasDatepicker {
        width: 80%; /* Allows room for the button next to it*/
    }
}

/* ------------------------- Inputs with a single button addon ------------------------- */
.gel-join-following-button {
    margin-right: 0px !important;
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

.gel-join-following-button.red:focus {
    border: 1px solid #d5002b !important;
}

.gel-join-following-button + .btn-gel,
.gel-join-following-button + .buttonSmall {
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    margin-left: 0px;
}

/* ------------------------- Autocomplete ------------------------- */
.ui-autocomplete {
    max-height: 500px;
    overflow-y: auto;
    width: auto;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.ui-autocomplete li.ui-menu-item a {
    min-height: 36px;
    border-bottom: none;
}

.ui-autocomplete li.ui-menu-item a span.label {
    line-height: inherit;
}

.ui-autocomplete.ui-menu .ui-menu-item {
    min-height: 36px;
    border-bottom: 1px solid #d7d2cb;
}

.ui-menu .ui-menu-item a.ui-state-active,
.ui-autocomplete.ui-menu .ui-menu-item:hover {
    background: none;
    background-color: #e9e7e2;
    margin: 0px;
    border: none;
}

.ui-autocomplete li.ui-menu-item a span.label,
.ui-autocomplete li.ui-menu-item a span.sublabel {
    font-family: 'oxygen', sans-serif;
    font-weight: normal;
    font-size: 16px;
    color: black;
    padding: 7px;
}

ul.ui-autocomplete .ui-state-hover, 
ul.ui-autocomplete .ui-state-focus,
ul.ui-autocomplete.ui-widget-content .ui-state-hover, 
ul.ui-autocomplete.ui-widget-content .ui-state-focus, 
ul.ui-autocomplete.ui-widget-header .ui-state-hover, 
ul.ui-autocomplete.ui-widget-header .ui-state-focus  {
    background: none;
    background-color: #e9e7e2;
    margin: 0px;
}

.ui-autocomplete-loading 
{ 
    background: white url('../corecontent/internal/images/spin-ball-small.gif') right 12px center no-repeat;
}