@white: #FFFFFF;
@border-xxxs: 1px;
@border-xs: 4px;
/* font size */
@font-xxs: 12px;
@font-xs:  14px;
@font-sm:  18px;

/* BLUE PALETTE
@cp-blue-dark           : #253B56;
@cp-blue-rollover       : #0F73AB;
@cp-blue-active         : #1994D7;
@cp-blue-medium-grey    : #B0BDC6;
@cp-blue-light-grey     : #E7EFF9;
*/

/* initialize custom palette using blue palette values */
@cp-custom-dark         : #253B56;
@cp-custom-rollover     : #0F73AB;
@cp-custom-active       : #1994D7;
@cp-custom-medium-grey  : #B0BDC6;
@cp-custom-light-grey   : #E7EFF9;

/*Fonts*/
@AvenirBlack  : 'Avenir Black';
@AvenirRoman  : 'Avenir Roman';
@AvenirHeavy  : 'Avenir Heavy';
@AvenirMedium : 'Avenir Medium';
@AvenirLight  : 'Avenir Light';

@cf-custom-font : @AvenirRoman;

h1 {
    font-size: 24px;
    font-weight: normal;
}

h2 {
    font-size: 18px;
    font-weight: bold;
}

p {
    font-size: 14px;
    line-height: 18px;
    font-weight: normal;
}

/* Component: BUTTONS */
.common-btn-property {
    font-size: 16px;

    border-radius: 2.5px;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 40px;
    padding-right: 40px;
    border: none;

    line-height: 6px;
    height: 44px;

    &:hover,
    &:active,
    &:focus {
        text-decoration: none;
    }

    color: @white;
}

/* Component: LINKS */
.common-link-property {
    text-decoration: none;
}

.style-properties(@color-active, @color-rollover, @color-dark, @color-medium-grey, @color-light-grey) {
    div.story-card-drawer {
        div.desktop {
            border-top-color: @color-medium-grey !important;
        }
    }

    .ms-media-hero {
        .master-data-info {
             background-color: @color-light-grey;
        }
    }

    div.total-offers{
        border-bottom-color: @color-medium-grey !important;
    }
    div.ztMainHeader {
        border-top-color: @color-medium-grey !important;
    }
    div.zsMainHeader{
        border-top-color: @color-medium-grey !important;
    }

    div.header-container{
        border-bottom-color: @color-medium-grey !important;
    }

    div.story-section{
        border-top-color: @color-medium-grey !important;
    }

    button {
        .common-btn-property;
        background-color: @color-active;
    }

    a:HOVER {
        color: @color-rollover;
    }

    &.ec-sell-tickets{
        a {
            .common-btn-property;
            line-height: 20px;
            padding-top: 10px;
            padding-bottom: 10px;
            background-color: @color-active;
        }

        a:HOVER, a:ACTIVE {
            background-color: @color-rollover;
        }
        .sell-tickets-icon,
        .sl-text-destination,
        .sl-text-label {
            color: @color-light-grey;
        }
    }

    // Adding this to overwrite dropdown.less
    ms-menu {
     a.menuLookAndFeel {
         color: @color-dark;
         cursor: pointer;
         &:hover {
             color: @color-active;
         }
     }
     #sidebar {
         ul.nav {
             li.dropdown {
                 a.menuLookAndFeel{
                     color: @color-dark;
                     cursor: pointer;
                     background-color: @white;
                     &:hover {
                         color: @color-active;
                     }
                 }
             }
         }
     }
    }

    //-- Social Share Begin
    .share-link-highlight-btn{
        color: @color-active;
    }

    .share-link-url  {
        color: @color-dark;
        &:hover {
            color: @color-active;
        }
    }

    ms-social-share .share-modal-close-button {
        width: 100%;
        background-color: @color-active;
        color: white;
        display: block;
        padding-top: 8px;
        height: 35px;
        z-index: 12;
        margin-top: 20px;
        margin-right: 20px;
        cursor: pointer;
        &:hover {
            background-color: @color-rollover;
        }
    }

    #separatorParent(){
        width: 100%;
        margin-top: 0;
        border-top: 1px solid #f2f2f2;
    }
    .shareLinkSeparator {
        margin-bottom: 25px;
        #separatorParent
    }
    .shareLinkSeparatorNearCloseButton {
        margin-bottom: 0;
        z-index: 12;
        #separatorParent
    }
    //-- Social Share End

    button:HOVER, button:ACTIVE {
        background-color: @color-rollover;
    }

    a {
        .common-link-property;
        color: @color-active;
    }

    a.menuLookAndFeel {
        color: @color-dark;
        cursor: pointer;
        &:HOVER {
            color: @color-active;
        }
    }
    a.breadcrumbsLink {
        color: @color-dark;
        cursor: pointer;
        &:HOVER {
            color: @color-active;
        }
    }

    //dropdown toggle list-item
    .dropdown-list-item:hover{
        background-color: @color-rollover;
        color:@color-rollover;
    }
    //dropdown toggle
    .filter-dropdown.open .placeholder-text {
        color: @color-rollover;
    }
    .filter-dropdown.open .list-dropdown-icon{
        color: @color-rollover;
    }
    .filter-dropdown.open ms-web-icon {
        color: @color-rollover;
    }

    //accordion filter
    .panel-heading > *{
        color: @color-rollover;
    }
    .panel-heading.collapsed > * {
        color: @color-dark;
    }


    h1, h2, p, div, a.social-media, .contacts li {
       color: @color-dark;
    }

    ms-web-icon .web-icon-component .webIcon,
    .brand-container .value,
    .share-media .share-icon{
        color: @color-dark;
    }

    hr {
        border-width: @border-xxxs;
        border-color: @color-medium-grey;
        background-color: @color-medium-grey;
    }

    .cardMainBlock:hover {
        .cardTextBodyLeft .cardTextLine1 p,
        .cardTextBodyLeft .cardTextLine2 p,
        .cardTextBodyLeft .cardTextLine3 p {
            color: @color-rollover !important
        }
    }

    .cardMainBlock:hover {
        color: @color-rollover;
        .cardTextHeader,
        .cardTextHeader *,
        .cardTextLine1,
        .cardTextLine2,
        .cardTextLine3,
        .cardTextBodyRight, .cardTextBodyRight *,
        .cardArrowBlock {
            color: @color-rollover;
        }
    }

    ec-drawer-web-desc .cardMainBlock:hover {
        color: @color-active;

        .cardArrowBlock {
            color: @color-active;
        }
    }

    ms-zone-secondary .cardMainBlock:hover,
    ms-zone-tertiary .cardMainBlock:hover
     {

        .cardTextHeader, .cardTextHeader *,
        .cardTextLine1, .cardTextLine1 *,
        .cardTextLine2, .cardTextLine2 *,
        .cardTextBodyRight, .cardTextBodyRight *,
        .cardArrowBlock {
            color: @color-dark;
        }

    }

    .zone-1-highlight .cardMainBlock,
    .zone-2-highlight .cardMainBlock,
    .zone-3-highlight .cardMainBlock {
        background-color: @color-active;
        &:hover {
            background-color: @color-rollover;
        }
        .cardArrowBlock {
            color: @white;
        }
    }

    ms-sub-menu .nav-tabs li a {
        color: @color-dark;
    }

    ms-sub-menu .nav-tabs li.selected {
        border-bottom: @border-xs solid @color-active;
    }

    ms-tab-page .tab-page .pagination li:not(.disabled) span {
        color: @color-active;
    }

    ms-tab-page .tab-page .pagination li.active span {
        background-color: @color-active;
        border-color: @color-active;
        color: @white;
    }

    #ec-jb-detail,
    #ec-jb-body-list-no-selector,
    #ec-jb-body-list-one-selector,
    #ec-jb-body-list-two-selector,
    #ec-drawer-web-desc {
        .cardMainBlock.hideCursorPointer {
            cursor: default;
        }
        .showCursorPointer .cardTextHeader,
        .cardArrowBlock {
            cursor: pointer;
        }
        .cardTextBodyLeft {
            font-size: @font-xxs;
            color: @color-dark;
            a, p {
                font-size: @font-xxs;
            }
            p {
                color: @color-dark;
            }
        }

        .hideCursorPointer{
            .cardTextLine1,
            .cardTextLine2,
            .cardTextLine3 {
                font-size: @font-xxs;
                color: @color-dark;
                a, p {
                    font-size: @font-xxs;
                }
                p {
                    color: @color-dark;
                }
            }
        }

        .galleryPointer {
            cursor: pointer;
        }
    }

    #ec-drawer-web-desc {
        .cardMainBlock.showCursorPointer:hover {
            .cardTextHeader,
            .cardArrowBlock {
                color: @color-rollover;
            }
        }

        .showCursorPointer .cardTextHeader:hover {
            color: @color-rollover;
        }

        .cardArrowBlock:hover {
            color: @color-rollover;
        }
    }

    .ec-detail.control-container {
        .rp-directive {
            background-color: @color-light-grey;
        }
    }

    //PRO-220055: added indicator when there are more than 2 tabs available.
    //added !important to override the inline css.
    @media (max-width: 1023px) {
        ul.nav.nav-tabs li.selected a.menu {
            background-color: @color-light-grey;
            color: @color-active;
        }

        ul.nav {
            li.dropdown.open {
                a.mainMenuItem {
                    color: @color-active !important;
                }
            }
        }
    }

}

.disableCardHover() {
    .cardMainBlock:hover {
        color: inherit;
        .cardTextHeader, .cardTextHeader *:not(a),
        .cardTextLine1, .cardTextLine1 *:not(a),
        .cardTextLine2, .cardTextLine2 *:not(a),
        .cardTextLine3, .cardTextLine3 *:not(a),
        .cardTextBodyRight, .cardTextBodyRight *:not(a),
        .cardArrowBlock {
            color: inherit;
        }
    }

}


body {
    font-family: @cf-custom-font;
}

.CP6;

/*.custom-palette (user-customized colors) */
.CP6 {
    .style-properties(@cp-custom-active, @cp-custom-rollover, @cp-custom-dark, @cp-custom-medium-grey, @cp-custom-light-grey);
}