/************************************
Table of Contents 
************************************/

/*
- Global Font Properties
- Style Properties
- Icon Spacing
- Icon Sizing
*/


/****** Global Font Properties ******/

.btn {
    font-weight: var(--font-fw-medium);
    font-family: var(--font-oxanium);
    padding: 0.625em 1.25em;
    border-radius: 0.25rem;
}
.btn:active,
.btn-check:focus+.btn, 
.btn:focus {
    box-shadow: none!important;
    outline: none!important;
    border-radius: 0.375rem;
}

.btn:disabled {
    background-color: var(--base-color-grey-400);
    border-color: var(--base-color-grey-500);
    opacity: 0.5;
}

.btn-tertiary,
.btn-tertiary-light {
    font-weight: var(--font-fw-medium);
    padding-left: 0px;
    padding-right: 0px;
}
.btn-sm {
    font-weight: var(--font-fw-medium);
    padding: 0.325em 0.875em;
}
.btn-sm.btn-tertiary,
.btn-sm.btn-tertiary-light {
    padding-left: 0px;
    padding-right: 0px;
}
.btn-sm.btn-rounded,
.btn-sm.btn-rounded-light {
    padding: 0.325em 1.25em;
}

.btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active{
    background-color: unset;
    border-color: unset;
}


/****** Style Properties ******/

/* Primary Dark */

.btn-primary {
    background-color: var(--base-color-black);
    border-color: var(--base-color-black);
    color: var(--base-color-white);
}
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--base-color-grey-800);
    border-color: var(--base-color-grey-800);
    color: var(--base-color-white);
}
.btn-primary:hover {
    background-color: var(--base-color-grey-800);
    border-color: var(--base-color-grey-800);
    color: var(--base-color-white);
}

@media (hover: hover) {
    .btn-primary:hover {
        background-color: var(--base-color-grey-800);
        border-color: var(--base-color-grey-800);
        color: var(--base-color-white);
    }
}

.btn.npblue-700-bg:hover{
    background-color: var(--base-color-npblue-500);
    border-color: var(--base-color-npblue-500);
    color: var(--base-color-black);
}

.btn.npblue-700-bg:focus,
.btn.npblue-700-bg:active{
    background-color: var(--base-color-npblue-500);
    border-color: var(--base-color-npblue-500);
    color: var(--base-color-black);
}

@media (hover: hover) {
    .btn.npblue-700-bg:hover{
        background-color: var(--base-color-npblue-500);
        border-color: var(--base-color-npblue-500);
        color: var(--base-color-black);
    }
}

/* Primary Light */

.btn-primary-light {
    background-color: var(--base-color-white);
    border-color: var(--base-color-white);
    color: var(--base-color-black);
}
.btn-primary-light:focus
.btn-primary-light:active {
    background-color: var(--base-color-grey-200);
    border-color: var(--base-color-grey-200);
    color: var(--base-color-black);
}
.btn-primary-light:hover{
    background-color: var(--base-color-grey-200);
    border-color: var(--base-color-grey-200);
    color: var(--base-color-black);
}

@media (hover: hover) {
    .btn-primary-light:hover {
        background-color: var(--base-color-grey-200);
        border-color: var(--base-color-grey-200);
        color: var(--base-color-black);
    }
}
/* Outlined Dark */

.btn-outline-primary {
    background-color: transparent;
    border-color: var(--base-color-black);
    border-width: 2px;
    color: var(--base-color-black);
}

.btn-outline-primary:disabled {
    color: var(--base-color-white);
}

.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: transparent;
    border-color: var(--base-color-grey-800);
    color: var(--base-color-grey-800);
}
.btn-outline-primary:hover {
    background-color: transparent;
    border-color: var(--base-color-grey-800);
    color: var(--base-color-grey-800);
}

.btn-outline-primary-opacity{
    background-color:#FFFFFFCC; 
    border:1px solid #000;
    cursor:pointer
} 
.btn-outline-primary-opacity:hover{
    background-color: var(--base-color-grey-800);
    border-color: var(--base-color-grey-800);
    color: #fff !important;
} 
@media (hover: hover) {
    .btn-outline-primary:hover {
        background-color: transparent;
        border-color: var(--base-color-grey-800);
        color: var(--base-color-grey-800);
    }
    .btn-outline-primary-opacity:hover{
        background-color: var(--base-color-grey-800);
        border-color: var(--base-color-grey-800);
        color: #fff;
    } 
}


/* Outlined Light */

.btn-outline-primary-light {
    background-color: transparent;
    border-color: var(--base-color-white);
    border-width: 2px;
    color: var(--base-color-white);
}
.btn-outline-primary-light:focus,
.btn-outline-primary-light:active {
    background-color: transparent;
    border-color: var(--base-color-grey-200);
    color: var(--base-color-grey-200);
}
.btn-outline-primary-light:hover {
    background-color: transparent;
    border-color: var(--base-color-grey-200);
    color: var(--base-color-grey-200);
}
@media (hover: hover) {
    .btn-outline-primary-light:hover {
        background-color: transparent;
        border-color: var(--base-color-grey-200);
        color: var(--base-color-grey-200);
    }
}

/* Homepage buttons */
.btn-homepage-main {
    border: 2px solid #0287AC;
}

.btn-homepage-secondary {
    background: white 0% 0% no-repeat padding-box;
    border: 1px solid #707070;
    color: var(--base-color-npblue-900);
}

@media (hover:hover) {
    .btn-homepage-main:hover,
    .btn-homepage-secondary:hover {
        background: var(--base-color-npblue-900) 0% 0% no-repeat padding-box;
        color: white;
    }
}

/* Outlined Small */

.btn-sm.btn-outline-primary,
.btn-sm.btn-outline-primary-light {
    border-width: 1px;
}

/* Secondary Dark */

.btn-secondary {
    background-color: transparent;
    border-color: transparent;
    color: var(--base-color-black);
}
.btn-secondary:focus,
.btn-secondary:active {
    background-color: transparent;
    border-color: transparent;
    color: var(--base-color-grey-800);
}
.btn-secondary:hover {
    background-color: transparent;
    border-color: transparent;
    color: var(--base-color-grey-800);
}
@media (hover: hover) {
    .btn-secondary:hover {
        background-color: transparent;
        border-color: transparent;
        color: var(--base-color-grey-800);
    }
}


/* Secondary Light */

.btn-secondary-light {
    background-color: transparent;
    border-color: transparent;
    color: var(--base-color-white);
}
.btn-secondary-light:focus,
.btn-secondary-light:active {
    background-color: transparent;
    border-color: transparent;
    color: var(--base-color-grey-200);
}
.btn-secondary-light:hover {
    background-color: transparent;
    border-color: transparent;
    color: var(--base-color-grey-200);
}
@media (hover: hover) {
    .btn-secondary-light:hover {
        background-color: transparent;
        border-color: transparent;
        color: var(--base-color-grey-200);
    }
}

/* Tertiary Dark */

.btn-tertiary {
    background-color: transparent;
    border-color: transparent;
    color: var(--base-color-npblue-900);
}
.btn-tertiary:focus,
.btn-tertiary:active {
    background-color: transparent;
    border-color: transparent;
    color: var(--base-color-npblue-700);
}
.btn-tertiary:hover {
    background-color: transparent;
    border-color: transparent;
    color: var(--base-color-npblue-700);
}
@media (hover: hover) {
    .btn-tertiary:hover {
        background-color: transparent;
        border-color: transparent;
        color: var(--base-color-npblue-700);
    }
}

/* Tertiary Light */

.btn-tertiary-light {
    background-color: transparent;
    border-color: transparent;
    color: var(--base-color-npblue-500);
}
.btn-tertiary-light:focus,
.btn-tertiary-light:active {
    background-color: transparent;
    border-color: transparent;
    color: var(--base-color-npblue-300);
}
.btn-tertiary-light:hover {
    background-color: transparent;
    border-color: transparent;
    color: var(--base-color-npblue-300);
}
@media (hover: hover) {
    .btn-tertiary-light:hover {
        background-color: transparent;
        border-color: transparent;
        color: var(--base-color-npblue-300);
    }
}

/* Small Rounded Dark */

.btn-rounded {
    background-color: var(--base-color-black);
    border-color: var(--base-color-black);
    color: var(--base-color-white);
    border-radius: 16px;
}
.btn-rounded:focus,
.btn-rounded:active {
    background-color: var(--base-color-grey-800);
    border-color: var(--base-color-grey-800);
    color: var(--base-color-white);
}
.btn-rounded:hover {
    background-color: var(--base-color-grey-800);
    border-color: var(--base-color-grey-800);
    color: var(--base-color-white);
}
@media (hover: hover) {
    .btn-rounded:hover {
        background-color: var(--base-color-grey-800);
        border-color: var(--base-color-grey-800);
        color: var(--base-color-white);
    }
}

/* Small Rounded Light */

.btn-rounded-light {
    background-color: var(--base-color-white);
    border-color: var(--base-color-white);
    color: var(--base-color-black);
    border-radius: 16px;
}
.btn-rounded-light-light:focus,
.btn-rounded-light:active {
    background-color: var(--base-color-grey-200);
    border-color: var(--base-color-grey-200);
    color: var(--base-color-black);
}
.btn-rounded-light:hover {
    background-color: var(--base-color-grey-200);
    border-color: var(--base-color-grey-200);
    color: var(--base-color-black);
}
@media (hover: hover) {
    .btn-rounded-light:hover {
        background-color: var(--base-color-grey-200);
        border-color: var(--base-color-grey-200);
        color: var(--base-color-black);
    }
}

/* On-page Blue Menu Buttons */

.btn-npbluemenu {
    background-color: var(--base-color-white);
    color: var(--base-color-black);
    border:none;
}
.btn-npbluemenu:hover {
    background-color: var(--base-color-npblue-100);
    color: var(--base-color-black);
}
@media (hover: hover) {
    .btn-npbluemenu:hover {
        background-color: var(--base-color-npblue-100);
        color: var(--base-color-black);
    }
}
.btn-npbluemenu.active {
    background-color: var(--base-color-npblue-700);
}
.btn-npbluemenu.active:hover {
    color: var(--base-color-black);
}
@media (hover: hover) {
    .btn-npbluemenu.active:hover {
        color: var(--base-color-black);
    }
}

/* Lowest Fare/Refundable Buttons */

.btn-lowestfare{
    background-color:var(--base-color-npblue-500);
    border: none;
    border-radius: 4px;
}

.btn-lowestfare:hover{
    background-color:var(--base-color-npblue-300);
}

.btn-refundable{
    background-color: var(--base-color-npblue-900);
    border: none;
    border-radius: 4px;
    color:#fff;
}

.btn-refundable:hover{
    background-color: var(--base-color-npblue-700);
    color:#fff;
}

/* Brand Icon Buttons */
.icon-after.npay {
    line-height: 21px;
}
.icon-after.npay:after {
    width: 52px;
    height: 21px;
    margin-top: -2px;
}
.icon-after.paypal {
    line-height: 20px;
}
.icon-after.paypal:after {
    width: 85px;
    height: 20px;
    margin-top: -2px;
}
.icon-after.apple,
.icon-after.google {
    line-height: 19px;
}
.icon-after.apple:after,
.icon-after.google:after {
    width: 46px;
    height: 19px;
    margin-top: -2px;
}
.icon.icon-login:after {
    width: 22px;
    height: 22px;
    margin-top: -1px;
}
.icon.google-icon {
    background-color: var(--base-color-white);
    border-color: var(--base-color-grey-300);
}
.icon.facebook-icon {
    background-color: #1877F2;
    border-color: #1877F2;
}
.icon.apple-icon:after {
    margin-top: -2px;
}
.icon.apple-icon:hover {
    background-color: var(--base-color-black);
    border-color: var(--base-color-black);
   }
@media (hover: hover) {
   .icon.apple-icon:hover {
    background-color: var(--base-color-black);
    border-color: var(--base-color-black);
   }
}


/****** Small ******/

.badge.fs-small {
    padding: 0.375em 0.625em;
}


/****** Icon Spacing ******/

.btn-iconthin {
    padding: 0.625em 0.5em;
}
.icon-before::before {
    padding-right: 0.5em;
}
.icon-after::after {
    padding-left: 0.5em;
}
.icon::after {
    padding-left: 0.25em;
    padding-right: 0.25em;
}
.btn-sm.icon-before::before {
    padding-right: 0.375em;
}
.btn-sm.icon-after::after {
    padding-left: 0.375em;
}
.btn-sm.icon::after {
    padding-left: 0.25em;
    padding-right: 0.25em;
}


/****** Icon Sizing ******/

.icon-before::before,
.icon-after::after,
.icon::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    box-sizing: content-box;
    vertical-align: middle;
}
.icon-before::before {
    background-position: left center;
}
.icon-after::after {
    background-position: right center;
}
.btn-sm.icon-before::before,
.btn-sm.icon-after::after,
.btn-sm.icon::after {
    width: 12px;
    height: 12px;
    background-size: 12px;
}

/* Apple/Google Pay Buttons */

#googlePayButton iframe.CollectJSGooglePayIFrame{
    max-width:300px;
    width:280px;
    height:50px;
    margin:7px;
}
#applePayButton #CollectJSApplePayButton{
    margin:7px;
}

/* crm */

.crm.nav-pills .nav-item .nav-link:hover {
    color: #fff;
    background-color: var(--base-color-npblue-900);
    border-color: var(--base-color-npblue-900);
}

.crm.nav-pills .nav-item .nav-link{
    color: var(--base-color-npblue-900);
}

/* NP blue btns */

.btn-npblue900-primary {
    background-color: var(--base-color-npblue-900);
    border-color: var(--base-color-npblue-900);
    color: var(--base-color-white);
    font-weight:400;
}
.btn-npblue900-primary:focus,
.btn-npblue900-primary:active {
    background-color: var(--base-color-npblue-700);
    border-color: var(--base-color-npblue-700);
    color: var(--base-color-white);
}
.btn-npblue900-primary:hover {
    background-color: var(--base-color-npblue-700);
    border-color: var(--base-color-npblue-700);
    color: var(--base-color-white);
}

@media (hover: hover) {
    .btn-npblue900-primary:hover {
        background-color: var(--base-color-npblue-700);
        border-color: var(--base-color-npblue-700);
        color: var(--base-color-white);
    }
}

.btn-outline-primary-npblue900 {
    background-color: transparent;
    border-color: var(--base-color-npblue-900);
    border-width: 2px;
    color: var(--base-color-npblue-900);
}
.btn-outline-primary-npblue900:focus,
.btn-outline-primary-npblue900:active {
    background-color: var(--base-color-npblue-700);
    border-color: var(--base-color-npblue-700);
    color: var(--base-color-white);
}
.btn-outline-primary-npblue900:hover {
    background-color: var(--base-color-npblue-700);
    border-color: var(--base-color-npblue-700);
    color: var(--base-color-white);
}

@media (hover: hover) {
    .btn-outline-primary-npblue900:hover {
        background-color: var(--base-color-npblue-700);
        border-color: var(--base-color-npblue-700);
        color: var(--base-color-white);
    }
}