*{padding:0;margin:0}

@font-face {
    font-family: RubikBold;
    src: url(../fonts/Rubik-Bold.ttf);
}
@font-face {
    font-family: RubikMedium;
    src: url(../fonts/Rubik-Medium.ttf);
}
@font-face {
    font-family: RubikLight;
    src: url(../fonts/Rubik-Light.ttf);
}
@font-face {
    font-family: RubikRegular;
    src: url(../fonts/Rubik-Regular.ttf);
}
@font-face {
    font-family: RubikItalic;
    src: url(../fonts/Rubik-Italic.ttf);
}
@font-face {
    font-family: RubikMediumItalic;
    src: url(../fonts/Rubik-MediumItalic.ttf);
}


body{margin:0;font:16px RubikRegular, tahoma, Times, serif; color:#737373; background: #ffffff;}

a, a:active, a:focus, button, input {
   outline: none;
}

#dialogoverlay{display: none;opacity: .7;position: fixed;top: 0px;left: 0px;background: #343031;width: 100%;z-index: 10;}
#dialogbox{display: none;position: fixed;background: #FFF;border-radius:7px; width:350px;z-index: 10;}

#dialogbox > div{ background:#FFF; margin:8px; }
#dialogbox > div > #dialogboxhead{ /*padding:10px; */background:url(../images/delete.png) top center no-repeat; height:59px; margin-top: 20px;}
#dialogbox > div > #dialogboxheadSuccess{ /*padding:10px; */background:url(../images/success.png) top center no-repeat; height:59px; margin-top: 20px;}
#dialogbox > div > #dialogboxheadClose{ /*padding:10px; */background:url(../images/close.png) top center no-repeat; height:38px; margin-top: 20px;}
#dialogbox > div > #dialogboxbody{  padding:20px; }
#dialogbox > div > #dialogboxfoot{ padding:10px; width:235px; margin-left:auto; margin-right:auto;}

#dialogbox > div > #dialogboxbody .confirmTitle{ width:100%; font:26px RubikRegular; color:#243D7C; text-align:center;}
#dialogbox > div > #dialogboxbody .confirmDescription{ width:80%; font:15px RubikRegular; color:#4E5586; text-align:center; margin-top:10px; margin-left:auto; margin-right:auto;}

#dialogbox > div > #dialogboxfoot .confirmRoundBtn{width:235px; height:50px; border-radius:25px; background:#8097F9; border:#8097F9 solid 1px; color:#FFF; font:18px RubikRegular;}
#dialogbox > div > #dialogboxfoot .confirmRoundBtn:hover{background:#FFF; color:#8097F9;}

#dialogbox > div > #dialogboxfoot .confirmNormalBtn{width:235px; height:50px; background:#FFF; border:#FFF; color:#8097F9; font:18px RubikRegular;text-decoration:none;}
#dialogbox > div > #dialogboxfoot .confirmNormalBtn:hover{text-decoration:underline;}


#loader {display: none;z-index: 10; position: fixed;
			border: 16px solid #f3f3f3;  
			border-radius: 50%;  
			border-top: 16px solid #0087FF;  
			border-bottom: 16px solid #FF6100;  
			width: 120px;  
			height: 120px;
			margin:auto;
			-webkit-animation: spin 2s linear infinite;  
			animation: spin 2s linear infinite;  
		}  

@-webkit-keyframes spin {  
	0% { -webkit-transform: rotate(0deg); }  
	100% { -webkit-transform: rotate(360deg); }  
}  

@keyframes spin {  
	0% { transform: rotate(0deg); }  
	100% { transform: rotate(360deg); }  
}



/*.warper {display: block; height: 100%; left: 0; position: fixed; top: 0; width: 100%;}
.header{position: relative; height: 140px; background:#243D7C;}
.footer {height: 50px; background:#243D7C; bottom: 0; position: absolute; width: 100%;}
.content{ position: absolute; width: 100%; bottom: 50px; top: 140px; overflow-y: auto;}*/
/*.warper {display: block; height: 100%; left: 0;  top: 0; width: 100%;}*/

.header{/*position: relative;*/ height: 160px; background:#243D7C;}
.content{ /*position: absolute;*/ width: 100%; /*bottom: 50px;*//* top: 100px;*/ /*top: 140px; overflow-y: auto;*/}
.footer {height: 50px; background:#243D7C; bottom: 0; position: fixed; width: 100%; z-index:2;}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	color:#D8D8D8;
	opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
	color:#D8D8D8;
}
::-ms-input-placeholder { /* Microsoft Edge */
	color:#D8D8D8;
}
.errorRequest{width:200px; text-align:center; margin: 50px auto auto auto; font:24px RubikItalic; color:#D0021B;}

#header{width:100%;/* height:100px;*/ height: 140px; background:#243D7C;position: relative;}
/*#headerLogo{width:474px; height:127px;background:url(../images/header_logo.png) top center no-repeat; position: absolute;top: 50%; left: 50%; margin: -64px 0 0 -237px;}*/
/*#headerLogo{width:237px; height:64px;background:url(../images/header_logo_small.png) top center no-repeat; position: absolute;top: 50%; left: 50%; margin: -32px 0 0 -119px;}*/
#headerLogo{width:463px; height:113px;background:url(../images/fayr_web_header.png) top center no-repeat; position: absolute; left: 50%; margin: 40px 0 0 -240px;}

.headerTable{width:500px; margin:auto; padding-top:20px; cursor: pointer;}
#logoHeader{width:113px; height:113px;background:url(../images/logo_header.png) top center no-repeat; margin-right:30px; cursor: pointer;}
#logo{font: 60px RubikRegular; color:#FFF; cursor: pointer;}
#slogon{font: 30px RubikLight; color:#FFF; cursor: pointer;}

#footer {position:fixed; left:0px; bottom:0px; height:50px; width:100%; background:#243D7C;}
#footerData{width:490px; height:25px; margin-left:auto; margin-right:auto; /*margin-top:15px;*/padding-top: 15px;}
.spanSpacer{margin-left:30px;}
.footerLink{color:#FFF; font-size:15px; text-decoration:none; font-weight:normal;}
.footerLink:hover{text-decoration:underline;}

/* IE 6 */
* html #footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

#warper{margin:auto; /*width:860px;*/ width: 100%; overflow-y: auto;}

/*#homeLeftSection{width:251px; height:517px; float:left;background:url(../images/home_app_snapshot.png) top center no-repeat;}*/
/*#homeLeftSection{width:40%; height:823px; float:left;background:url(../images/fayr_in_app.png) top right no-repeat; background-size:contain;}*/
#homeContainer{height:800px; margin-top:40px;}
#homeLeftSection{/*width:393px;*/ width:40%; height:100%; float:left; position:relative;}
#homeImage{height:100%; width:auto; max-height:732px; position:absolute; right:20px;}
@media screen and (max-height: 660px) {
    #homeContainer {
        height: 400px;
    }
}
@media screen  and (min-height: 661px) and (min-height: 860px) {
    #homeContainer {
        height: 600px;
    }
}
@media screen  and (min-height: 861px) {
    #homeContainer {
        height: 800px;
    }
}
#homeRightSection{/*width:549px;*/ width:55%; float:right; background:#fff; height:100%; /*overflow-y:auto;*/}
.homeTitle{color:#243D7C; font:40px RubikLight; margin-top:20px;}
.homeContent{color:#737373; font:16px RubikRegular; margin-top:30px;}

.buttonDark{width:270px; height:50px; display:block; background:#243D7C; border:#243D7C 1px solid; border-radius:26px; color:#FFF; text-align:center; text-decoration:none;font: 18px RubikRegular;}
.buttonDark:hover{width:270px; height:50px; display:block; background:#FFF; border-radius:26px; border:#243D7C 1px solid; color:#243D7C; text-align:center; text-decoration:none;font: 18px RubikRegular;}

.buttonLight{width:270px; height:50px; display:block; background:#FFF; border:#243D7C 1px solid; border-radius:26px; color:#243D7C; text-align:center; text-decoration:none;}
.buttonLight:hover{width:270px; height:50px; display:block; background:#243D7C; border-radius:26px; border:#243D7C 1px solid; color:#FFF; text-align:center; text-decoration:none;}
.buttonTextLink{width:100%; text-align:center; padding-top: 13px; font:18px RubikRegular;}
.buttonLink{text-decoration:none; color:#263065;}
.buttonLink:hover{text-decoration:underline; color:#263065;}
.mediumLeftLink{width:100%; padding-top: 13px; font:16px RubikMedium;}

.boxWithShadow{width:460px; box-shadow: 0px 2px 8px 1px rgba(106, 106, 106, 0.5); border:#42DBA8 0px solid; border-radius:26px; margin:auto; margin-top:20px;}
#registrationTable{width:330px; margin:auto; margin-top:40px; margin-bottom:40px;}
.tableHeader{font:40px RubikLight; color:#243D7C;}
.tableSubHeader{font:16px RubikRegular; color:#737373;}
.resetError{font:14px RubikItalic; color:#D0021B; height:20px;}
.errorHidden{visibility: hidden;}
.errorVisible{visibility: visible;}

.subscriptionFullName{font:18px RubikRegular; color:#243D7C;}
.registrationDescription{font:12px RubikLight; color:#737373;}
.registrationDescriptionLink{font:12px RubikRegular; text-decoration:none; font-weight:normal; color:#737373;}
.registrationDescriptionLink:hover{text-decoration:underline;}

.subscriptionLabel{font:18px RubikRegular; color:#696868;}
.subscriptionValue{font:18px RubikLight; color:#696868;}

#cancelBtn{width:100%; height:20px; background:none; border:none; font:15px RubikMedium; color:#B3B0B0; text-decoration:none;}
#cancelBtn:hover{text-decoration:underline;}
#logoutBtn{width:100%; height:20px; background:none; border:none; font:16px RubikMedium; color:#243D7C; text-decoration:none;}
#logoutBtn:hover{text-decoration:underline;}

#renewBtn{width:320px; height:50px; border-radius:25px; border:#243D7C 1px solid; background:#243D7C; color:#FFF; font:18px RubikRegular;}
#renewBtn:hover{background:#FFF; color:#243D7C;}

#step1{width:860px; height:600px; margin:auto; /*overflow-y:auto*/}
#step2{text-align: center;}

.imputData{font:16px RubikRegular; color:#243D7C; width:300px; border:none; margin-top:20px;} 
.tooltip {position: relative;display: inline-block;}
/* Tooltip text */
.tooltip .tooltiptext {width: 100%; color: #fff; text-align: center; padding: 5px 0; border-radius: 6px; position: absolute; z-index: 1;}
.tooltipColorNormal{background-color: #243D7C;}
.tooltipColorError{background-color: #F30;}
.tooltipName {top: 40px; left: 10px;}
.tooltipEmail {top: 40px; left: 10px;}
.tooltipPass {top: 40px; left: 10px;}
.tooltipCode {top: 135px; left: 0%;}
.showTooltip{visibility: visible;}
.hideTooltip{visibility: hidden;}
.spacerTop10{margin-top:10px;}
.spacerTop20{margin-top:20px;}
.spacerTop30{margin-top:30px;}
.spacerTop40{margin-top:40px;}
.spacerTop50{margin-top:50px;}
.spacerTop60{margin-top:60px;}
.spacerTop75{margin-top:75px;}
.spacerTop130{margin-top:130px;}
.spacerBottom10{margin-bottom:10px;} 
.spacerBottom20{margin-bottom:20px;} 
.spacerBottom30{margin-bottom:30px;} 


.headerBar{height:90px; background:#F4F4F4; position:absolute; left:0; right:0;}
.headerBarData{text-align:center; font:25px RubikLight; color:#243D7C; padding-top: 30px;}

.footerBar{/*position:fixed;*/ left:0px; /*bottom:50px;*/ height:95px; width:100%; /*background:#F4F4F4;*/ z-index:10; padding-bottom:40px;}
.footerBarData{text-align:center; padding-top: 30px; width:700px; margin:auto;}
.footerBarDataItem{width: 70px; float:left;}
.footerBarDataLine{width: 140px; float:left; padding-top: 10px;}
.footerBarDataLine hr{background:#D8D8D8;}
.circle{width:25px; height:25px; border-radius:12px; overflow:hidden; text-align:center; font:15px RubikBold; color: #fff; margin: auto;}
.circleInner{padding-top: 4px;}
.stepNumber{text-align:center; font:15px RubikRegular;}
.setNumberSelected{ /*font:18px RubikBold;*/ font:15px RubikRegular;}
.cirleColor1{background: #BCBCBC;}
.cirleColor2{background: #BCBCBC;}
.cirleColor3{background: #BCBCBC;}
.cirleColor4{background: #BCBCBC;}
.footerStep1{color: #BCBCBC;}
.footerStep2{color: #BCBCBC;}
.footerStep3{color: #BCBCBC;}
.footerStep4{color: #BCBCBC;}

.cirleColor1Selected{background: #8097F9;}
.cirleColor2Selected{background: #4DDDAD;}
.cirleColor3Selected{background: #F6921E;}
.cirleColor4Selected{background: #243D7C;}
.footerStep1Selected{color: #8097F9;}
.footerStep2Selected{color: #4DDDAD;}
.footerStep3Selected{color: #F6921E;}
.footerStep4Selected{color: #243D7C;}



.oldValue{text-decoration: line-through;}
.visible{display:block;}
.visibleInline{display:inline-block;}
.hidden{display:none;}

#topDiv{height:600px;}

.showStepOne{display:grid;/* height:600px;*/}
.showStepTwo{display:grid;/* height:560px;*/}
.showStepTwoAdd{display:grid;/* height:600px;*/}
.showStepThree{width:100%; display:inline-block;/* height:600px;*/}
.showStepFour{width:100%; display:inline-block;/*height: 600px;*/}

.subscriptionShadowBox{width:280px; box-shadow: 0px 2px 8px 1px rgba(106, 106, 106, 0.5); border:#42DBA8 0px solid; border-radius:26px; margin:auto; margin-top:60px; overflow:hidden; background:#FFFFFF;}

.rcReg{font:16px RubikRegular; color:#686868;}
.rcDesc{font:16px RubikLight; color:#686868; width:620px; margin:auto;}
.largeBoxWithShadow{width:620px; box-shadow: 0px 2px 8px 1px rgba(66, 219, 168, 0.1); border:#42DBA8 0px solid; border-radius:26px; margin:20px auto;}
#getReferralCodeTbl{width:480px; margin:auto;}
.getReferralCodeDiv{font:16px RubikRegular; color:#243D7C; border:none;}
.rCLabel{margin-left: 15px;}
.setRedBg{background:#F00;}
.fullWidth{width:100%;}
/*#profName{font:16px RubikRegular; color:#243D7C; border:none; width:98%; border-bottom:#D8D8D8 solid 1px;}
#profEmail{font:16px RubikRegular; color:#243D7C; border:none; width:98%; border-bottom:#D8D8D8 solid 1px;}*/

.centerText{ text-align:center; width:100%;}
.floatLeft{float:left; margin-left: 50px;}
.floatRight{float:right; margin-right:50px;}
.positionAbsolute{position: absolute; z-index: 0; left: 33.5%;}

.floatLeftSelected{position: absolute; left: 50px; top: -15px; z-index: 1;}
.floatRightSelected{position: absolute; right: 50px; top: -15px; z-index: 1;}
.positionAbsoluteSelected{position: absolute; z-index: 1; left: 33.5%; top: -15px;}

.fayrFeature{height: 30px; margin-top: 30px; margin-bottom: 20px;}
.fayrFeature > div{float:left;font:15px RubikLight; color:#243D7C;}
.icon1{background:url(../images/icon_1.png) top left no-repeat; width:13px; height:13px; margin-right:10px;}
.icon2{background:url(../images/icon_2.png) top left no-repeat; width:13px; height:13px; margin-right:10px; margin-left:20px;}
.icon3{background:url(../images/icon_3.png) top left no-repeat; width:13px; height:13px; margin-right:10px; margin-left:20px;}
.icon4{background:url(../images/icon_4.png) top left no-repeat; width:13px; height:13px; margin-right:10px; margin-left:20px;}
.icon5{background:url(../images/icon_5.png) top left no-repeat; width:13px; height:13px; margin-right:10px; margin-left:20px;}
.icon6{background:url(../images/icon_6.png) top left no-repeat; width:13px; height:13px; margin-right:10px; margin-left:20px;}
.icon7{background:url(../images/icon_7.png) top left no-repeat; width:13px; height:13px; margin-right:10px; margin-left:20px;}

div.selected .subscriptionTitle{font:25px RubikRegular; color:#243D7C; letter-spacing: 3px;}
div.selected .subscriptionPrice{font:20px RubikRegular; color:#9E9E9E;}
div.selected .subscriptionUnit .subscriptionSuperScript{font:40px RubikMedium; color:#42DBA8; vertical-align: top; margin-top: 8px;}
div.selected .subscriptionUnit .subscriptionLarge{font:80px RubikMedium; color:#42DBA8;}
div.selected .subscriptionUnit .subscriptionNormal{font:40px RubikMedium; color:#42DBA8;}
div.selected .subscriptionDesc{font:18px RubikRegular; color:#9E9E9E; letter-spacing: 2.16px;}
div.selected .subscriptionButton{width:100%; height:70px; display:block; background:#243D7C; color:#FFFFFF; text-align:center; text-decoration:none; border:#243D7C solid 1px;}
div.selected .subscriptionButton .subscriptionButtonText{/*width:100%; text-align:center; padding-top: 20px;*/ font:23px RubikRegular;}

div.notSelected .subscriptionTitle{font:22px RubikRegular; color:#243D7C; letter-spacing: 2.64px;}
div.notSelected .subscriptionPrice{font:18px RubikRegular; color:#9E9E9E;}
div.notSelected .subscriptionUnit .subscriptionSuperScript{font:25px RubikMedium; color:#F6921E; vertical-align: top; margin-top: 8px;}
div.notSelected .subscriptionUnit .subscriptionLarge{font:65px RubikMedium; color:#F6921E;}
div.notSelected .subscriptionUnit .subscriptionNormal{font:25px RubikMedium; color:#F6921E;}
div.notSelected .subscriptionDesc{font:15px RubikRegular; color:#9E9E9E; letter-spacing: 1.8px;}
div.notSelected .subscriptionButton{width:100%; height:70px; display:block; background:#FFFFFF; color:#686868; text-align:center; text-decoration:none; border:#FFF solid 1px; border-top: #D8D8D8 solid 1px;}
div.notSelected .subscriptionButton .subscriptionButtonText{/*width:100%; text-align:center; padding-top: 20px;*/ font:20px RubikRegular;}

div.subscriptionHeader{font:40px RubikLight; color:#243D7C;}
div.subscriptionSubHeader{font:25px RubikLight; color:#686868;}

.roundBtn{width:44px; height:44px; border-radius:22px; border:#EEE 1px solid; background:#EEE; color:#979797; font:36px RubikRegular;}
.roundBtn:hover{border:#979797 1px solid; background:#979797; color:#EEE;}

.codeInput{font:80px RubikRegular; letter-spacing: 20px; color:#243D7C; border:none;}
.applyButon{width:180px; height:50px; display:block; background:#EEE; border:#EEE 1px solid; border-radius:25px; margin: auto; text-decoration:none; font:18px RubikRegular;}
.applyButon:hover{ background:#686868; border:#686868 1px solid;}

.applyButonGrey{ color:#686868;}
.applyButonGrey:hover{ color:#EEE;}
.applyButonNavy{ color:#243D7C;}
.applyButonNavy:hover{ color:#EEE;}
.applyButonWhite{ color:#FFFFFF;}
.applyButonWhite:hover{ color:#243D7C;}
.applyButonBlue{ color:#FFFFFF; background:#243D7C; border:#243D7C 1px solid;}
.applyButonBlue:hover{ color:#243D7C; background:#FFFFFF; border:#243D7C 1px solid;}

.noDiscountBtn{width:200px; height:30px; display:block; background:#FFF; border:#FFF 1px solid; color:#686868; margin: auto; text-decoration:none; font:15px RubikMedium;}
.noDiscountBtn:hover{text-decoration:underline;}

#setupIcon{width:73px; height:73px; background:url(../images/calendar_setup.png) top center no-repeat; margin-left:auto; margin-right:auto;}
div.subscriptionSetUpSubHeader{font:22px RubikLight; color:#686868;}
.calendarSetUpBtn{width:320px; height:50px; display:block; background:#243D7C; border:#243D7C 1px solid; border-radius:25px; color:#FFF; text-align:center; text-decoration:none;font:18px RubikRegular; margin:auto;}
.calendarSetUpBtn:hover{ background:#FFF; border:#686868 1px solid; color:#243D7C;}
div.subscriptionSetUpDesc{width:515px; font:18px RubikRegular; color:#737373; text-align:justify; margin-left:auto; margin-right:auto;}
.skipBtn{width:200px; height:30px; display:block; background:#FFF; border:#FFF 1px solid; color:#243D7C; margin: auto; text-decoration:none; font:20px RubikMedium;}
.skipBtn:hover{text-decoration:underline;}

.discountApplied{text-align:center; margin-top:20px;font:20px RubikRegular; color:#243D7C;}


.confirmBg{ background:#343031; opacity:0.7; width:100%; height:100%; left:0; top:0; position:absolute;}

.doNotRefresh{text-align: center; margin-top: 40px; font:40px RubikLight; color:#243D7C;}
.successTitle{text-align: center; margin-top: 80px; font:40px RubikLight; color:#243D7C;}
.successDesc{text-align: center; margin-top: 35px; font:16px RubikRegular; color:#243D7C;}
.successDesc > a {text-decoration:none; color:#243D7C; font:16px RubikRegular;}
.successDescBold{text-align: center; font:16px RubikMedium; color:#243D7C;}
.marketIcons{width: 550px; height:100px; margin:30px auto 0 auto;}
.iphoneSection{width: 260px; height:90px; float:left; margin-top:5px;  background:url(../images/apple_store.png) top center no-repeat;}
.androidSection{width: 260px; height:90px; float:right; margin-top:5px;  background:url(../images/android_store.png) top center no-repeat;}


/* ----- */
#defaultContainer{height:600px; width:640px; margin: 40px auto 40px auto;}
.defaultTitle{color:#243D7C; font:40px RubikLight; margin-top:20px; text-align:center;}
.defaultContent{color:#243D7C; font:16px RubikLight; margin-top:20px; text-align:center;}
.defaultContentMedium{color:#243D7C; font:16px RubikMedium;}
.defaultRight{width:45%; height:377px; float:right; margin-top:50px;}
.defaultLeft{width:45%; height:377px; float:left; margin-top:50px;}
.shadow{box-shadow: 0px 2px 8px 1px rgba(106, 106, 106, 0.5);}
.roundCorner{border-radius:15px; }
.roundDiv{width:128px; height:128px; border-radius:64px; margin: 30px auto 30px auto;}
.mobileChoice{ background:url(../images/intro_app.png) top center no-repeat;}
.webChoice{ background:url(../images/intro_web.png) top center no-repeat;}
.defaultBoxText{font:20px RubikRegular; color:#243D7C; text-align:center;}
.defaultButton{height:42px; width:80%; border-radius:22px; border:#243D7C solid 1px; color:#FFF; font:16px RubikRegular; background:#243D7C; margin: 30px 10% 20px 10%; display:block; text-decoration:none;}
.defaultButton:hover{border:#243D7C solid 1px; color:#243D7C; background:#FFF;}
.defaultButtonTextLink{width:100%; text-align:center; padding-top: 11px; font:16px RubikRegular;}
.defaultOther{width:80%; font:14px RubikRegular; color:#243D7C; text-align:center; text-decoration:underline; background:none; border:none; margin: 0 10% 30px 10%;}
.defaultOther:hover{ text-decoration:none;}
.defaultOtherButtonTextLink{width:100%; text-align:center; font:14px RubikRegular;}

.proHeaderBar{height:60px; background:#FCFCFC; /*position:absolute;*/ left:0; right:0;}
.proHeaderBarData{text-align:center; font:22px RubikRegular; color:#243D7C; padding-top: 20px;}
.proRcDesc{font:16px RubikRegular; color:#B3BB0B0; width:100%; /*width:620px; margin:auto;*/ text-align:center;}
.proSuccessRoundDiv{width:80px; height:80px; border-radius:40px; margin: 30px auto 30px auto;background:url(../images/verification.png) top center no-repeat;}
.proSignLineTitle{font:30px RubikLight; color:#243D7C; text-align:center; margin-top:30px; margin-bottom:10px;}
.proSignLineDesc{font:16px RubikRegular; color:#B3BB0B0; text-align:center;}
.signupBtn{width:270px; height:50px; border-radius:25px; border:#243D7C solid 1px; color:#FFF; font:18px RubikRegular; background:#243D7C; margin: 40px auto 20px auto; display:block; text-decoration:none;}
.signupBtn:hover{border:#243D7C solid 1px; color:#243D7C; background:#FFF;}
.signupBtnTextLink{width:100%; text-align:center; padding-top: 15px; font:16px RubikRegular;}

.proManagerMenu{height:62px; background:#F0F2FB; position:absolute; left:25%; right:0;}
.proManagerMenuData{text-align:center; font:22px RubikRegular; color:#243D7C; padding-top: 20px;}

.proManagerList{height:100%; background:#FCFCFC; position:absolute; left:0; right:75%;}
.proManagerMenuList{text-align:center; font:22px RubikRegular; color:#243D7C; padding-top: 20px;}

.proManagerMenuTop{text-align:right; font:15px RubikMedium; color:#243D7C; padding-top: 10px; margin-right:20px;}

.proManagerMenuAdd{height:24px; background:none; font:17px RubikMedium; color:#F0F2FB; text-align:right; text-decoration:none; background:none; border:none; width:100%; margin-top:20px; display:block;}

.proManagerMenuItem{height:60px; background:none; font:17px RubikMedium; color:#243D7C; text-align:right; text-decoration:none; border:none; width:100%; margin-top:10px; display:block;}
.proManagerMenuItem:hover, .proManagerMenuItemSelected{height:60px; background:#243D7C; font:17px RubikMedium; color:#FFF; text-align:right; text-decoration:none; border:none; width:100%; margin-top:10px; display:block;}
.pmmTop{padding-top:10px;}
.proManagerMenuItemName{font:17px RubikLight; margin-right:20px;}

.proManagerMenuAdd:hover .proManagerMenuAddTextLink{ text-decoration:underline;}
.proManagerMenuAddTextLink{text-align:right; font:17px RubikMedium; margin-right:20px; float: right; padding-top: 3px; color:#8097F9;}
.proManagerMenuAddImg{width:26px; height:26px;  background:url(../images/add_parties.png) top center no-repeat;float: right; margin-right:20px;}

.proManagerMenuData ul{list-style:none; margin-left:20px;}
.proManagerMenuData ul li{float:left; width:112px; height:33px; margin-right:10px;}
.proManagerMenuSelected{width:112px; height:34px; border:none; border-radius:17px; font:17px RubikRegular; color:#FFF; background:#243D7C;}
.proManagerMenuNormal{width:112px; height:34px; border:none; border-radius:17px; font:17px RubikRegular; color:#243D7C; background:#F0F2FB; cursor:pointer;}
.proManagerMenuNormal:hover{width:112px; height:34px; border:none; border-radius:17px; font:17px RubikRegular; color:#FFF; background:#243D7C;}

.proManagerData{height:100%; position:absolute; width:75%; right:0; margin-top:62px;}

.proManagerNoDataTitle{font:22px RubikLight; color:#243D7C; margin-top:20px; margin-left:20px;}
.proManagerNoDataDesc{font:14px RubikRegular; color:#898DA6; margin-top:5px; margin-left:20px;}

.proManagerNoDataTable{margin-top:30px; margin-left:20px;}
.proManagerPartiesTrue{width:18px; height:18px; background:url(../images/access_aproved.png) top center no-repeat;}
.proManagerPartiesFalse{width:18px; height:18px; background:url(../images/access_denied.png) top center no-repeat;}
.proManagerPartiesName{font:14px RubikRegular; color:#898DA6;}
.pmpr{font:14px RubikMedium;}

.proManagerReminder{ font:15px RubikMediumItalic; color:#243D7C;}
.proManagerButtonReminder{width:235px; height:36px; border:#8097F9 solid 1px; border-radius:18px; font:15px RubikRegular; color:#FFF; background:#8097F9; cursor:pointer;}
.proManagerButtonReminder:hover{border:#8097F9 solid 1px; color:#8097F9; background:#FFF;}

#calendarSection{margin-top:30px; margin-left:20px;}
.calendarSectionData{width:410px; height:460px; border:#F0F2FB solid 4px; border-radius:5px; float:left; margin-right:10px; margin-bottom:10px;}
.calendarSectionDetails{width:410px; height:460px; border:#F0F2FB solid 4px; border-radius:5px; float:left;}
.calendatSectionPercentage{font:10px RubikMedium; color:#9B9B9B;}


.csdDate{width:100%; height:74px; background:#F5F5F5;}
#csdDate{padding-top: 45px; font:15px RubikRegular; color:#898CA7;}
.csdTime{width:90px; font:10px RubikRegular;}
.csdColorDad{width:7px; background:#FEEFDE;}
.csdColorMom{width:7px; background:#E3FAF2;}
.csdType{/*margin-top:15px;*/ margin-left:10px; font:17px RubikLight; color:#898CA7;}
.csdTypeEmpty{margin-top:120px; margin-left:10px; font:17px RubikLight; color:#BABABA;}
.csdChatEmpty{margin-top:120px; margin-left:115px; font:17px RubikLight; color:#BABABA;}
.csdDetail{margin-top:4px; margin-left:10px; font:12px RubikLight; color:#898CA7;}
.csdLocation{margin-top:6px; margin-left:10px; font:10px RubikRegular; color:#8097F9;}
.csdLocationIcon{width:9px; height:12px; background:url(../images/location_pin.png) center no-repeat; /*float:left;*/}
.csdLocationAddress{/*float:left;*/ margin-left:2px; margin-bottom:15px;}

#chatSection{margin-top:30px; margin-left:20px;}
.chatSectionData{width:370px; height:500px; overflow-y:auto; overflow-x: hidden; float:left; margin-right:10px; margin-bottom:10px;}
.chatSectionAllDetails{ float:left;}
.chatSectionDetails{width:315px; height:270px; border:#F0F2FB solid 4px; border-radius:5px; /*float:left;*/}
.chatDay{font:13px RubikMedium; color:#898CA7; margin-bottom:15px;}
.chatDayOther{margin-top:15px;}
.chatText{font:17px RubikLight; color:#898CA7; margin-bottom:10px;}
.chatTextName{font:17px RubikMedium; color:#243D7C;}
.chatStatus{font:10px RubikRegular; color:#9F9F9F; margin-bottom:5px;}

.reportMonth{height:66px;}
.reportMonthPrevious{width:66px; height:66px; float:left; background:url(../images/previous.png) center no-repeat; cursor: pointer;}
.reportMonthTitle{width:183px;height:66px; float:left;}
.reportMonthNext{width:66px; height:66px; float:left; background:url(../images/next.png) center no-repeat; cursor: pointer;}

.reportMonthLabel{font:22px RubikLight; color:#243D7C; text-align:center; margin-top:10px;}
.reportMonthDesc{font:15px RubikLight; color:#898CA7; text-align:center;}
.reportMonthData{margin-left:20px;}
.reportDataTitle{font:15px RubikMedium; color:#898CA7;margin-bottom: 15px;}
.reportDataName{font:15px RubikMedium; color:#243D7C;}
.reportDataDetail{font:15px RubikLight; color:#898CA7;}

#expenseSection{margin-top:30px; margin-left:20px;}
.expenseSectionData{width:370px; height:500px; overflow-y:auto; overflow-x: hidden; float:left; margin-right:10px; margin-bottom:10px;}
.expenseSectionDetails{width:315px; height:500px; border:#F0F2FB solid 4px; border-radius:5px; float:left;}

.expenseImageCell{width:68px;}
.expenseImage{width:48px; height:48px; margin-right:5px; margin-top:10px;}

.expenseName{font:12px RubikMedium; color:#F6921E; margin-top:10px;}
.expenseDetails{font:20px RubikLight; color:#243D7C;}
.expenseDate{font:12px RubikMedium; color:#898CA7; margin-bottom:10px;}

.expenseTypeCell{width:100px; height:70px;}
.expensePrice{font:17px RubikMedium; color:#898CA7;}
.expenseType{font:10px RubikLight; color:#898CA7;}

#checkinSection{margin-top:30px; margin-left:20px;}
.checkinSectionData{width:370px; height:500px; overflow-y:auto; overflow-x: hidden; float:left; margin-right:10px; margin-bottom:10px;}
.checkinSectionDetails{width:315px; height:270px; border:#F0F2FB solid 4px; border-radius:5px; float:left;}
.checkinDay{font:14px RubikMedium; color:#4E5586;}
.checkinImageCell{width:25px;}
.checkinIcon{width:17px; height:23px; margin-right:5px; background:url(../images/checkin_icon.png) center no-repeat;}

.checkinName{font:12px RubikMedium; color:#F6921E; margin-top:10px;}
.checkinNamePartner{font:12px RubikMedium; color:#42DBA8; margin-top:10px;}
.checkinDetails{font:17px RubikLight; color:#243D7C;}
.checkinLocation{font:12px RubikRegular; color:#898CA7; margin-bottom:10px;}
.checkinDate{font:12px RubikMedium; color:#898CA7; margin-bottom:10px;width: 60px;}

.field{font:16px RubikRegular; color:#243D7C; border:none; width:98%; border-bottom:#D8D8D8 solid 1px;}
.addPartiesLabel{font:14px RubikMedium; color:#A1A3B9; margin-top:15px;}
.fieldTop{ margin-top:30px;}

.logoutButton{position: absolute; top:67px; right:100px; width:80px; height:24px;}
.logoutDiv{font:16px RubikMedium; color:#FFFFFF; width:80px; height:24px; background:url(../images/logout_icon.png) top left no-repeat; padding-left:20px; padding-top:3px;}
.error{ color:#EA5353;font:12px RubikRegular;}
.dot {height: 6px; width: 6px; border-radius: 50%; display: inline-block; margin-top: 3px;}



/* calendar styles */
#calendar {
    -moz-user-select: none;
   /* border: 1px solid #EEEEEE;
    border-radius: 6px 6px 6px 6px;
    color: #333333;
    font-family: Arial,sans-serif;
    font-size: 1.1em;*/
    margin: 10px auto;
    padding: 0.4em;
    width: 90%;
}
#calendar .navigation {
    background-color: #FFFFFF;
   /* border: 1px solid #FFFFFF;
    border-radius: 6px 6px 6px 6px;*/
    color: #243D7C;
    font:22px RubikLight;
    padding: 1px;
    position: relative;
}
#calendar .navigation .title {
    background: none repeat scroll 0 0 transparent;
    border-color: rgba(0, 0, 0, 0);
    color: inherit;
    line-height: 1.8em;
    margin: 0 2.3em;
    text-align: center;
}
#calendar .navigation .prev, #calendar .navigation .next {
    width:26px; height:26px; 
    opacity: 0.9;
    position: absolute;
    top: 4px;
}
#calendar .navigation .prev {
    background:url(../images/previous.png) center no-repeat;
    left: 4px;
	cursor: pointer;
}
#calendar .navigation .next {
    background:url(../images/next.png) center no-repeat;
    right: 4px;
	cursor: pointer;
}
#calendar .navigation .prev:hover, #calendar .navigation .next:hover {
    opacity: 1;
}
#calendar table {
    border-collapse: collapse;
    font-size: 0.9em;
    table-layout: fixed;
    width: 100%;
}
#calendar table th {
    border: 0 none;
    font:14px RubikRegular;
    padding: 0.7em 0.3em;
    text-align: center;
}
#calendar table td {
    border: 0 none;
    padding: 1px;
}
#calendar table td a {
    background-color: #FFFFFF;
    border: 1px solid #FFFFFF;
    color: #7D7D7D;
    display: block;
    font:17px RubikRegular;
    opacity: 0.2;
    padding: 0.2em;
    text-align: center;
    text-decoration: none;
	height: 30px;
}
#calendar table td a:hover {
    background-color: #F6F6F6;
    border: 1px solid #CDD5DA;
    color: #111111;
}
#calendar table td.current a {
	color: #898CA7;
    font:17px RubikRegular;
    opacity: 1;
}
#calendar table td.today a {
    background-color: #FFFFFFSS;
    border: 1px solid #FFFFFF;
    color: #243D7C;
    font:17px RubikMedium;
    opacity: 1;
}

.dadCircle{
    width: 30px;
    height: 30px;
    background: #FEEFDE;
    margin: auto;
    border-radius: 15px;
    display: block;	
	opacity: 1;
}
.momCircle{
    width: 30px;
    height: 30px;
    background: #E3FAF2;
    margin: auto;
    border-radius: 15px;
    display: block;	
	opacity: 1;
}
.normalCircle{
    width: 30px;
    height: 30px;
    background: none;
    margin: auto;
    border-radius: 15px;
    display: block;	
}
.line{
	width: 100%;
	height: 1px;
	background:#EAE9E9;	
}

.clearSearchBtn{
	width: 20px;
	height:20px;
    border-radius: 10px;
    border-style: solid;
	border:#F5F5F5;
    background: #F5F5F5;
    color: #243D7C;
	font:13px RubikRegular;
}
#searchInput{
	width: 230px;
    height: 30px;
    border: none;
	font:17px RubikRegular;
}

#loaderoverlay{display: none;opacity: .7;position: fixed;top: 0px;left: 0px;background: #343031;width: 100%;z-index: 10;}
.fayrloader {
  /*border: 16px solid #f3f3f3;
  border-top: 16px solid #3498db;
  border-radius: 50%;*/
  width: 128px;
  height: 128px;
  background:url(../images/loader_inner.png) center no-repeat;
  position: fixed;
  display : none;
  z-index: 10;
}
#loder_outer{background:url(../images/loader_outer.png) center no-repeat;width: 128px; height: 128px;animation: spin 2s linear infinite;}