@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');

* {
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;

}

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 17px;
    background-color: #f2f2f2;
}

small {
    font-size: 11px;
}

table {
    width: 100%;
}

#whiteStripe {
    background: #ffffff;
    height: 75px;
    position: absolute;
    top: 0px;
    width: 100%;
}

#innerwrap,
#innerwrapAuthentification {
    background-color: #ffffff;
    max-width:560px;
    padding: 30px;
    width:90%;
    margin: 5% auto;
}

#innerwrapDashboard {
    background-color: #ffffff;
    max-width:560px;
    padding: 0px;
    width:90%;
    margin: 0px auto;
}

#innerwrapAuthentification {
    max-width: 480px;
    padding: 0px;
}

#innerwrapDashboard {
    background-color: transparent;
    max-width: 800px;
    padding: 0px;
    position: relative;
}

#mainform td {
    padding: 5px 0px;
}

#logo {
    background-color: #fff;
    padding: 10px;
}

#logo img {
    width: 100%;
    max-height: 142px;
    display: block;
}

#logincontent {
    background-repeat: no-repeat;
    /**border: 2px solid #ccc;**/
    padding: 20px 30px 30px;
    text-align: center;
    background-color: #fff;
    margin-bottom: 20px;
}

#logincontent form {
    width: 100%;
    margin: 0px auto;

}


#forgot_password {
    background-repeat: no-repeat;
    /**border: 2px solid #ccc;**/
    padding: 30px;
    text-align: center;
    background-color: #fff;
    margin-bottom: 20px;
}

#forgot_password form {
    width: 100%;
    margin: 0px auto;

}

#headerImageContainer {
    padding: 10px;
}

#headerImage {
    max-height: 130px;
    width: 100%;
}

.inputs {
    margin-bottom: 15px;	
}

#loginbutton, 
#submitbutton,
#loginbuttonOption,
button#submit,
input[type="submit"] {
    background-color: #2d91fb;
    border: medium none;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    padding: 15px 10px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 100%;
}

input[type="submit"]:disabled {
    background-color: #337ab7;
    cursor: not-allowed;
    opacity: 0.65;
}

#loginbuttonOption {
    background-color: #5cb85c;
}

.progress-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: text-bottom;
    border: 2.5px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    -webkit-animation: progress-spinner .75s linear infinite;
    animation: progress-spinner .75s linear infinite;
    margin-bottom: 4px;
    display: none;
}

@-webkit-keyframes progress-spinner {
 to {
  -webkit-transform:rotate(360deg);

 }
}

@keyframes progress-spinner{
 to {
  -webkit-transform:rotate(360deg);

 }
}

#to_forgot_password,#back_to_login{
    cursor: pointer;
}

#forgot_password{
    text-align: center;
}

#loginbutton:hover {
    background-color: #2980b9;
}

h3 {
    margin-bottom: 20px;
    text-align: center;
    font-size: 20px;
    color: #555;
}

#errormsg,
#successmsg {
    color:#fff;
    background-color:#e74c3c;
    padding:10px;
    margin-bottom: 10px;
}

#successmsg {
    background-color:#2ecc71;
}

#forgotsuccessmsg{
    color:#fff;
    background-color: #2ecc71;
    padding:10px;
    margin-bottom: 10px;
}

#forgoterrormsg{
    color:#fff;
    background-color:#e74c3c;
    padding:10px;
    margin-bottom: 10px;
}

#footer {
    text-align: center;
    font-size: 11px;
    color: #999;
}

#footer a {
    color: #999;
}

.small {
    font-size:11px;
    color:#333;
}

.tdlabels {
    color:#333;
    font-size:16px;
    font-weight:bold;
    text-align:center;
}

.paneltophead {
    background-color: #FFFFFF;
    border-bottom: 1px solid #dee2e6;
    margin: 0px -15px 0px -15px;
    padding: 0px 0px 15px 15px;
}

.modal-body .panelbottomfoot {
    background-color: #FFFFFF;
    border-top: 1px solid #dee2e6;
    margin: 0px -15px 0px;
    padding: 15px 15px 0px;
    text-align: right;
}

.paneltophead .toplable {
    font-size: 25px;
    margin-bottom: 0px;
}

.modal-body .panelcontent {
    margin: 0px -15px;
    padding: 15px;
}

.paneltophead .toplable {
    color: #667;
}

.form-group label {
    color: #667;
    font-size: 14px;
}

input[type="text"], 
input[type="password"] {
    border:2px solid #ccc;
    font-size: 14px;
    padding:10px;
    width:100%;
}

.modal-body .panelbottomfoot .btn-default {
    border-color: #adadad;
}

.successActionBadge {
    display: none;
    float: left;
    margin-top: 7px;
    font-size: 10px;
    background: #27ae60;
    padding: 2px 3px;
    border-radius: 3px;
    color: #fff;
    font-weight: bold;
}

.progress-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: text-bottom;
    border: 2.5px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    -webkit-animation: progress-spinner .75s linear infinite;
    animation: progress-spinner .75s linear infinite;
}

@-webkit-keyframes progress-spinner {
    to {
        -webkit-transform:rotate(360deg);
        /*! transform:rotate(360deg); */
    }
}

@keyframes progress-spinner{
    to {
        -webkit-transform:rotate(360deg);
        /*! transform:rotate(360deg) */
    }
}

#successmsg {
    background-color: #2cc16a;
    color: #ffffff;
    margin-bottom: 20px;
    padding: 10px;	
}

#forgotPassword {
    margin-top: 10px;
    text-align: center;
}

#forgotPassword a {
    color: #333;
    font-size: 11px;
    text-decoration: none;
}

#forgotPassword a:hover {
    text-decoration: underline;
}

label.error {
    color: #e74c3c;
}

input.error {
    border-color: #e74c3c;
}

.userProfileContainer {
    position: absolute;
    right: 0px;
    top: 0px;
}

#avatarContainer {
    
}

#defaultAvatar {
    border-radius: 50%;
    height: 45px;
    width: 45px;
}

#avatarContainer {
    display: inline-block;
    height: 45px;
    position: relative;
    width: 45px;
}

.avatarButtonCaret {
    display: block;
    float: right;
    margin: 17px 0px 0px 10px;
}

.userProfileContainer button,
.userProfileContainer button:hover,
.open .userProfileContainer button {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

#userSettingsModal table {
    width: 100%;
}

#userSettingsModal table td {
    padding: 5px 0px;
}

#userSettingsModal table td input {
    font-size: 14px;
}

#updateProfileButton {
    background: #2d91fb;
    border: solid 1px #2d91fb;
    color: #fff;
    font-weight: bold;
    margin-left: 10px;
}

#updateProfileButton:focus,
#updateProfileButton:hover {
    color: #fff;
}

#userSettingsModal .title {
    margin-bottom: 10px;
}

#affiliatesLinksBlock {
    background-color: #f2f2f2;
    padding: 10px;
    margin-top: 20px;
}

#affiliateLinksTitle {
    margin-bottom: 10px;
}

#afflinks {
    padding: 0px 0px 10px 0px;
}

#afflinks input {
    background-color: #fafafa;
    font-size: 14px;
    margin-top: 0px;
}

#affiliatesCommissionProgramsBlock,
#affiliatesResourcesBlock {
    background: #ffffff;
    margin: 20px 0px;
    padding: 20px;
}

#affiliatesResourcesBlock {
    background-color: #f2f2f2;
    padding: 10px;
}

#affiliateResourcesTitle {
    margin-bottom: 10px;
}

.affiliateResource,
.affiliateResource a {
    color: #333;
    font-weight: bold;
}

.affiliateResource {
    margin-bottom: 5px;
}

.affiliateResource a:focus {
    text-decoration: none;
}

#affiliatesCommissionProgramsBlock .affiliateCommissionProgram {
    margin-top: 10px;
}

#affiliatesCommissionProgramsBlock .affiliateCommissionProgram .title {
    display: block;
    font-weight: bold;
}

.commissionProgramsTitle {
    font-size: 20px;
    font-weight: bold;
}

#affiliatesCommissionProgramsBlock .affiliateCommissionProgram .commission {
    font-size: 12px;
}

.modal .loadingProgress {
    display: none;
    text-align: center;
}

#userSettingsModal .loadingProgress {
    margin: 40px 0px;
}

#notification {
    text-align: center;
}

#reportDateSelect {
    float: right;
}

#reportNumberWrap {
    padding: 10px 0px 20px 0px;
}

.reportNumber {
    background: #ffffff;
    box-sizing: border-box;
    float: left;
    height: 150px;
    margin: 1%;
    position: relative;
    width: 23.5%;
}

.reportNumber:first-child {
    margin-left: 0px;
}

.reportNumber:last-child {
    margin-right: 0px;
}

.reportNumber .reportNumberIndicator {
    background: #00a44a;
    border-radius: 2px;
    height: 10px;
    left: 30px;
    position: absolute;
    top: 33px;
    width: 10px;
}

#reportNumberTotalSales .reportNumberTitle {
    background: #3498db;
}

#reportNumberTotalCommissions .reportNumberTitle {
    background: #2ecc71;
}

#reportNumberTotalOptins .reportNumberTitle {
    background: #e74c3c;
}

#reportNumberTotalReferrals .reportNumberTitle {
    background: #f1c40f;
}

.reportNumber .reportNumberTitle {
    color: #ffffff;
    font-size: 13px;
    font-weight: bold;
    line-height: 16px;
    min-height: 32px;
    padding: 20px;
    text-align: center;
    text-transform: uppercase;
}

.reportNumber .reportNumberValue {
    font-size: 40px;
    font-weight: bold;
    margin-top: 10px;
    text-align: center;
}

.reportNumber .reportNumberValueLoading {
    color: #aaaaaa;
    font-size: 15px;
}

#logincontent td {
    padding: 0px;
}

#logincontent td input {
    margin-bottom: 15px;
}

#logincontent .td4a {
    padding-bottom: 5px;
}

#logincontent .td4a label {
    font-weight: bold;
}

.acceptedTermsCheckbox input[type=checkbox] {
    visibility: hidden;
}

.acceptedTermsCheckbox {
    position: relative;
    margin-right: 10px;
}

.acceptedTermsCheckbox label {
    cursor: pointer;
    position: absolute;
    width: 15px;
    height: 15px;
    top: 5px;
    left: 0px;
    background: #ffffff;
    border:2px solid #cccccc;
}

.acceptedTermsCheckbox label:after {
    opacity: 0;
    content: '';
    position: absolute;
    width: 9px;
    height: 5px;
    background: transparent;
    top: 0px;
    left: 0px;
    border: 3px solid #333;
    border-top: none;
    border-right: none;

    transform: rotate(-45deg);
}

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

.acceptTermsLabel a {
    color: #2d91fb;
} 

#acceptTermsBlock {
    position: relative;
}

#acceptTermsBlock .acceptedTermsCheckbox {
    position: absolute;
}

#acceptTermsBlock .acceptTermsLabel {
    display: block;
    margin-left: 25px;
}

#ui-datepicker-div {
    border: 1px solid #e4eaf2 !important;
}
.ui-datepicker-calendar {
    color: #333333 !important;
    border: none !important;
}
#ui-datepicker-div .ui-widget-header {
    background-color: #FFFFFF !important;
    color: #333333 !important;
    border: none !important;
    background-image: none !important;
}
.ui-datepicker-calendar .ui-state-default {
    background-color: #FFFFFF !important;
    color: #333333 !important;
}
.ui-datepicker-calendar .ui-state-active {
    background-color: #4db974 !important;
    color: #ffffff !important;	
}
.ui-datepicker-calendar .ui-state-default:hover {
    background-color: #4db974 !important;
    color: #ffffff !important;
}
.ui-datepicker-calendar .ui-datepicker-prev:hover, .ui-datepicker-calendar .ui-datepicker-next:hover {
    background-color: #e0e0e0 !important;
}

#ui-datepicker-div {
    margin-top: 3px !important;
}

.ui-datepicker-calendar .ui-state-default {
    border: none !important;
    text-align: center;
    border-radius: 3px;
    background-image: none !important;
}

.ui-datepicker-calendar .ui-datepicker-prev:hover, .ui-datepicker-calendar .ui-datepicker-next:hover {
    background-image: none !important;
    border: none !important;
    cursor: pointer;
}

.ui-datepicker-calendar .ui-state-highlight {
    margin-bottom: 0px;
}

#affiliateLedgerDialog .modal-dialog {
    max-width: 1100px;
    width: auto;
}

.commissionDescription {
    margin-top: 5px;
}

@media (max-width: 414px) {
    body {
        font-size: 15px;
    }
    
    #innerwrapAuthentification,
    #innerwrap {
        margin: 0px;
        width: auto;
    }
    
    #innerwrapDashboard {
        padding: 0px;
        width: 100%;
    }
    
    #innerwrapAuthentification #logincontent .td4a,
    #innerwrapAuthentification #logincontent .td4 {
        display: block;
    }
    
    #reportNumberWrap {
        padding-top: 20px;
    }
    
    .reportNumber {
        height: 95px;
        margin: 0px 0px 20px 0px;
        width: 100%;
    }
    
    .reportNumber .reportNumberTitle {
        font-size: 12px;
        padding: 12px 0px;
    }
    
    .reportNumber .reportNumberValue {
        font-size: 26px;
        margin-top: 8px;
    }
}

@media (max-width: 370px) {
    .reportNumber .reportNumberTitle {
        font-size: 10px;
    }
}