/* override primefaces table borders */

.ui-panelgrid ui-widget {
    border: none !important
}

.main {
    border: 2px solid #231F20; 
    border-radius:25px;
    margin:10px ;
    background-color:#ffffff
}
.ui-widget-content {
    border: none !important;
}

.ui-selectonemenu {
    border: none !important
}

.ui-selectonemenu-trigger {
    border: none !important
}

.ui-datepicker-trigger {
    border: none !important;
    margin-left: 2px !important;
}

tr.ui-widget-content {
    background-color: transparent !important
}

.ui-panelgrid td {
    border: none !important;
    padding: 2px 5px !important
}

.ui-datepicker {
    border: 1px solid #7096AB !important
}

.ui-datepicker-calendar {
    background-color: #DBF1FD !important
}

.ui-message-error {
    border: 1px solid #982E5D !important;
    margin: 0 !important;
    padding: 0 !important
}

.ui-message-error-detail {
    font-size: 8pt !important
}

.ui-message-info-detail {
    font-size: 8pt !important       
}

.ui-message-warn-detail {
    font-size: 8pt !important
}

.ui-inputfield {
    font-family: Futura, "Trebuchet MS", Arial, sans-serif !important;
    font-size: 12pt !important;
    background-color: #fff !important;
    box-shadow: none !important;
    border-radius: 8px !important;
    border: 1px solid #231F20 !important;
     text-align: center;
    color: #777 !important
}

.ui-chkbox-box {
    background: -moz-linear-gradient(center top , rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4)) repeat scroll 0 0 #EC619F !important;
    border: none !important
}

.ui-datatable thead th {
    font-family: Futura, "Trebuchet MS", Arial, sans-serif;
    border-color: #DC5090 !important;
    padding: 4px 8px !important;
    box-shadow: none !important;
    background: #fe000c !important;
    color: #fff !important;
    text-shadow: none !important;
    font-weight: normal !important;
}

.ui-datatable tbody td {
    font-family: Futura, "Trebuchet MS", Arial, sans-serif !important;
    border-color: #ddd !important;
    font-size: 11pt !important
}

.ui-dialog-title {
    color: #666 !important
}

.ui-shadow {
    box-shadow: none
}

.ui-corner-all {
    border-radius: 0;
}

.ui-dt-c {
    padding: 4px 4px !important
}
/* font styles, colors and sizes */

.largeInsideHeartText {
    font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
    font-size: 24pt;
    color: #EAD9E1;
    font-weight: lighter
}

.footerText {
    font-family: Futura, "Trebuchet MS", Arial, sans-serif;
    font-size: 8pt;
    font-weight: bold;
    color: #fff
}

.tooltipText {
    font-family: Futura, "Trebuchet MS", Arial, sans-serif !important;
    font-size: 10pt !important;
    color: #fff
}

.tooltipTextMedium {
    font-family: Futura, "Trebuchet MS", Arial, sans-serif !important;
    font-size: 8pt !important;
    color: #fff
}

.tooltipTextTiny {
    font-family: Futura, "Trebuchet MS", Arial, sans-serif !important;
    font-size: 7.5pt !important;
    color: #fff
}

.menuButtonText {
    font-family: Futura, "Trebuchet MS", Arial, sans-serif;
    font-size: 10.5pt !important;
    color: #fff !important
}

.mediumPinkText {
    font-family: Futura, "Trebuchet MS", Arial, sans-serif;
    font-size: 11pt;
    color: #231F20
}

.mediumBoldPinkText {
    font-family: Futura, "Trebuchet MS", Arial, sans-serif;
    font-size: 10.5pt;
    color: #EB5C9C;
    font-weight: bold
}

.smallBoldDarkPinkText {
    font-family: Futura, "Trebuchet MS", Arial, sans-serif;
    font-size: 9pt !important;
    font-weight: bold;
    color: #8E1249;
    margin: 3px 0
}

#termsCheck {
    font-family: Futura, "Trebuchet MS", Arial, sans-serif;
    font-size: 9pt !important;
    font-weight: bold;
    color: #8E1249;
    margin: 3px 0
}

.mediumDarkGreyText {
    font-family: Futura, "Trebuchet MS", Arial, sans-serif;
    font-size: 10pt !important;
    color: #555
}

.smallDarkGreyText {
    font-family: Futura, "Trebuchet MS", Arial, sans-serif;
    font-size: 8pt !important;
    color: #555;
}

.largePinkText {
    font-family: Futura, "Trebuchet MS", Arial, sans-serif;
    font-size: 19pt;
    color: #EC619F
}

.largePinkText:hover {
    color: #AE4674 !important
}

.mediumWhiteText {
    font-family: Futura, "Trebuchet MS", Arial, sans-serif;
    font-size: 14pt;
    color: #231F20
}

.forgotPassText {
    font-family: Futura, "Trebuchet MS", Arial, sans-serif;
    font-size: 9pt !important;
    text-decoration: underline;
    color: #EC619F !important;
}

.forgotPassText:hover {
    cursor: pointer;
    text-decoration: none
}

.linkText {
    font-size: 16pt;
    font-weight: bold;
    color: #571E6B;
    margin: 10px 0;
}

.linkText:hover{
    cursor:pointer
}


.introText {
    font-style: normal;
    font-weight: normal;
    font-size: 10pt;
}

/* overflowing scrollbars stylin' */

::-webkit-scrollbar {
    width: 15px;
}

::-webkit-scrollbar-track {
    background-color: #ECE6E9;
} /* the new scrollbar will have a flat appearance with the set background color */
::-webkit-scrollbar-thumb {
    background-color: #FEC20A;
} /* this will style the thumb, ignoring the track */
::-webkit-scrollbar-button {
    background-color: #ECE6E9;
} /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */
::-webkit-scrollbar-corner {
    background-color: #FEC20A;
} /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */

/* general items */

html{
    height: 100%;
}

body {
    background-image: url("../files/bg.png");
    background-position: top;
    background-repeat: repeat-x;
    padding: 0;
    margin: 0;
    text-align: center;
    font-family: Futura, "Trebuchet MS", Arial, sans-serif;;
    scrollbar-face-color: #fe000c /* ie only scrollbar stylin' */ 
}

a {
    text-decoration: none;
    color: #EC619F !important
}

a:hover {
    color: #FEC20A !important;
}

p {
    padding: 0;
    margin: 0
}

form {
    padding: 0;
    margin: 0
}

label {
    font-size: 11pt !important;
}

ul {
    padding: 0 15px;
    margin: 0
}

/* project specific ids and classes */

#landingPageMainSection {
    width: 700px;
    height: 700px;
    margin: 0 auto;
    position: relative
}

#loginSectionPageMainSection {
    width: 600px;
    position: relative;
    top: 0px;
    left: 45px;
    border: 1px solid #fe000c;
    border-radius: 20px;
    text-align: left;
    margin: 20px auto;
    padding: 20px;
    background-color: #FDF0F6      
}

#pointsPageMainSection {
    width: 800px;
    position: relative;
    left: 145px;
    border: 1px solid #fe000c;
    border-radius: 20px;
    text-align: left;
    margin: 20px auto;
    padding: 20px;
    background-color: #FDF0F6
}

#contactPageMainSection {
    width: 600px;
    position: relative;
    top: 140px;
    left: 45px;
    border: 1px solid #fe000c;
    border-radius: 20px;
    text-align: left;
    margin: 20px auto;
    padding: 20px;
    background-color: #FDF0F6
}

#contactPageInfoSection {
    width: 600px;
    position: relative;
    top: 135px;
    left: 45px;
    margin: 0 auto;
    text-align: left
}

.pinkHeaders {
    background-color: #FEC20A;
    padding: 5px 10px;
    border-radius: 10px;
    margin-bottom: 20px;
    text-align: center
}

.pinkBlocks {
    background-color: #fe000c;
    padding: 5px 10px;
}

#supportingPagesMainSection {
    width: 600px;
    border: 1px solid #fe000c;
    border-radius: 20px;
    text-align: left;
    margin: 70px auto;
    padding: 20px;
    background-color: #fff
}

.midSizedHearts {
    width: 250px;
    height: 200px;
    background-size: 94%
}

.midSizedHearts:hover {
    background-size: 98%;
}

.largeSizedHearts {
    width: 300px;
    height: 235px;
    background-size: 94%
}

.largeSizedHearts:hover {
    background-size: 98%;
}

.smallSizedHearts {
    width: 200px;
    height: 160px;
    background-size: 94%
}

.smallSizedHearts:hover {
    background-size: 98%;
}

.mediumSizedWhiteHearts {
    width: 250px;
    height: 200px;
    background-size: 98%
}

.mediumSizedWhiteHearts:hover {
    background-size: 100%
}

#startPageEmptyHeart {
    width: 250px;
    height: 200px;
    background-size: 92%
}

#startPageEmptyHeart:hover {
    background-size: 94%
}

.toolTipBlocks {
    width: 185px;
    padding: 5px;
    background-color: #BB5483
}

.toolTipBlocksDark {
    width: 275px;
    padding: 5px;
    background-color: #68133A;
    text-align: left
}

.toolTipBlocksDarkStretched {
    width: 475px;
    padding: 5px;
    background-color: #68133A;
    text-align: left
}

.submitButton {
    background-color: #FEC20A !important;
    border: 0 !important;
    border-radius: 8px !important;
    color: #231F20 !important;
    font-size: 10pt !important;
    padding: 4px !important
}

.submitButtonCompact {
    background-color: #c91920 !important;
    border: 0 !important;
    border-radius: 4px !important;
    color: #fef !important;
    font-family: Futura, "Trebuchet MS", Arial, sans-serif !important;
    font-size: 9.5pt !important;
    font-weight: normal !important;
    padding: 0px 4px !important;
    margin-top: 4px
}

.submitButtonTransparent {
    margin-top: 45px !important;
    margin-left: 35px !important;
    background-color: transparent;
    background-image: none !important;
    border: 0 !important;
    color: #EC619F !important;
    padding: 0px !important;
    width: 175px !important;
    font-weight: normal;
    font-family: Futura, "Trebuchet MS", Arial, sans-serif !important;
    font-size: 11pt !important;
    box-shadow: none !important
}

.submitButtonTransparent:hover {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.linkButton {
    background-color: #55116B !important;
    border: 0 !important;
    border-radius: 0.3em;
    color: #fef !important;
    font-size: 10pt !important;
    font-weight: bold;
    padding: 3px !important
}

.submitButtonSmall {
    background-position: 0 0 !important;
    background-color: #55116B !important;
    border: 0 !important;
    color: #fef !important;
    font-size: 10pt !important
}



#header {
    width: 100%;
    height: 90px;
    text-align: center;
    padding-top: 10px;
    position: fixed;
    top: 0;
    left: 0
}

.horizontalDistance {
    font-size: 9pt;
    margin: 0 3px
}

#landingHeader {
    padding: 3px;
    height: auto;
    text-align: center;
    background-color: #231F20
}

#footer {
    width: 100%;
    background-color: #1D1D1B;
    position: fixed;
    bottom: 0;
    height: 30px;
    margin-top:20px;
    padding-top: 5px
}

.commandButtonLogout {
    background-color: #A03766;
    padding: 4px;
    opacity: 0.6;
    border-radius: 7px;
    text-align: center;
    width: 115px
}

.commandButtonLogout:hover {
    background-color: #A03766;
    opacity: 0.4
}

.currentActiveNavigationButton {
    background-color: #555;
    padding: 2px;
    border-radius: 4px;
    opacity: 0.35;
    text-align: center;
    width: 120px
}

.testimonialsPanel {
    border: 1px solid #B69BBE;
    padding: 10px;
}

.customerDetailPanel {
    border: 1px solid #B69BBE !important;
    padding: 10px !important;
    text-align: left  !important;
}

.customerDetailPanel.ui-panel .ui-panel-titlebar {
    background-color: #55116B !important
}

.ui-panel-title{
    text-align: left !important;
}

.bankBlock {
    border: 1px solid #6D4B9C;
    background-color: #A68BCB;
}

.panelHeaderLink{
    width: 96%; 
    border: #C6B4CA 0px; 
    color: #fff !important; 
    font-weight: bold; 
    width: 100%
}

.couponDetailPanel {
    padding: 10px !important;
    text-align: left  !important;
}

.couponDetailPanel.ui-panel .ui-panel-titlebar {
    background-color: #55116B !important;
    color: #fff !important; 
}

.leftColumn {
    width: 25%;
    height: 100%
}

.centerColumn {
    vertical-align: top;
    width: 50%;
    height: 100%
}

.rightColumn {
    width: 25%;
    height: 100%
}

tr.ui-datatable-even {
    background-color: #E4D1FE !important;
}