/*STYLE*/

* {   -webkit-font-smoothing: antialiased;    -moz-osx-font-smoothing: grayscale;box-sizing: border-box;}
body {background-color: #f7f7f7;font-family: 'Montserrat', sans-serif; color:#242424;padding:0px;margin:0px;}
h1 {color: #008c95; font-family: 'Nunito', sans-serif;}
h2 {color: #242424; font-family: 'Nunito', sans-serif;margin:0;}
p {font-size:15px;}
a, a:active, a:visited {color:#373936;text-decoration: none;}
a:hover {color:#008c95;text-decoration: none;}

.header-container {background-color: #242424; color:#ffffff;min-height:100px;}
.header-area {max-width:1200px; margin: 0 auto;}
.header-logo {float:left; width:160px;padding-top: 12px;}
.header-logo img {width:150px;}
.header-menu {float:left;width: calc(100% - 160px);padding-top:40px;text-align:right;padding-right:14px;}
.header-menu a {color:#fff;padding-left:20px;font-size:14px;font-weight:bold;}
.header-menu a:hover {text-decoration: underline;}

/*main area*/
.main-area {max-width:1200px; margin: 0 auto;}
.panel {min-height:200px; background:#fff;-webkit-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.10); box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.10);padding:20px 25px;}
.panel p {line-height:160%;}
.panel td,.panel th {text-align:left;font-size:15px;}
.panel tr {line-height: 150%;}
.panel-type1 {}
.panel-type2 {min-height:310px;}
.panel-type3 {}
.row-04 .panel-type2 {min-height:350px;}

.row-01 {padding:10px 0 5px 0;}
.area-invoices {padding: 14px;}

.row-02 {padding:0px 0; overflow:auto;}
.area-companydata {padding: 14px;float:left; width:50%;}
.area-contracts {padding: 14px; float:left; width:50%;}

.row-03 {padding:0px 0 20px 0;overflow:auto;}
.area-support {padding: 14px;float:left; width:50%;}
.area-contactperson {padding: 14px; float:left; width:50%;}

.panel-type1 a {color:#008c95;font-size:14px;}
.panel-type1 a:hover {color:#000;}
.panel-type3 a {color:#008c95;font-weight:bold;}
.panel-type3 a:hover {color:#000;}

.view-more {text-align:right; width:100%;font-size:14px; font-weight:bold;}
.view-more a{color:#008c95;}
.view-more a:hover{color:#000;}

.tr-bg-grey {background-color:#efefef;}
.area-invoices-page tr {line-height:200%;}
.panel-type1 tr {line-height:200%;}

.row-04 {padding:10px 0 25px 0; overflow:auto;}

.label-approved {background:#2ecc71;}
.label-declined {background:#e74c3c;}
.label-inprogress {background:#e67e22;}
.label-open {background:#2980b9;}
.label-all {border-radius:50px;padding: 5px 10px;color:#fff;margin-bottom:10px;max-width:140px;text-align:center;font-weight:bold;font-size:13px;}
.check-row {overflow:auto;width:100%;min-height:30px;padding:15px 0;border-bottom:1px solid #efefef;}
.check-text {float:left;overflow:auto;width:33%;font-size:15px;}
.check-label {float:left;overflow:auto;width:33%;}
.check-action {float:left;overflow:auto;width:33%;font-size:12px;font-style: italic;}
.check-action a {font-size:14px;font-style:normal; font-weight:bold;color:#008c95; }
.check-action a:hover {font-size:14px;font-style:normal; font-weight:bold;color:#000; }



/* The Modal (background) */
.modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */   z-index: 1; /* Sit on top */ left: 0;    top: 0;
    width: 100%; /* Full width */  height: 100%; /* Full height */  overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */}

/* Modal Content/Box */
.modal-content { background-color: #fefefe; margin: 10% auto; padding: 20px;   border: 1px solid #888; width: 80%;  max-width:720px;}
.modal-content p {line-height:150%;}

/* The Close Button */
.close { color: #aaa;float: right; font-size: 28px; font-weight: bold;}
.close:hover, .close:focus { color: black;  text-decoration: none; cursor: pointer;}

.full-input {display: inline-block; padding: 3px; width:98%; border: 1px solid #ccc; margin-bottom:5px;}
.full-input input{width:100%;}
.half-input {display: inline-block; padding: 3px; width:48%; margin-right:2%; float:left;margin-bottom:5px; border: 1px solid #ccc;}
.clientportal-form-wrapper input {outline: none; border: none; display:block; line-height: 1.1em;font-size: 14pt; padding:2px 10px!important;}
.clientportal-form-wrapper label { display: block;font-size: 12px; color: #373936;padding-left:10px; padding-top:3px;}

.btn-container {text-align:right;padding:20px 0;}
.btn-save {background:#008c95;color:#fff!important;padding:15px 30px;border-radius:10px;font-weight:bold;font-size:14px;margin-right:10px;}
.btn-save:hover {background:#006167;color:#fff;padding:15px 30px;border-radius:10px;}

.btn-login{max-width:250px;margin:0 auto;background:#008c95;color:#fff!important;padding:15px 30px;border-radius:10px;font-weight:bold;font-size:14px;}
.btn-login:hover {background:#006167;color:#fff;padding:15px 30px;border-radius:10px;}


/*LOGIN*/
.container-login {width: 80%; max-width:1100px; margin:5% auto; background:#fff;overflow:auto;border-radius:10px;-webkit-box-shadow: 0px 4px 15px 0px rgba(0,0,0,0.49); box-shadow: 0px 4px 15px 0px rgba(0,0,0,0.20);}
.area-login-left {float:left; width:50%;background:#333; min-height:650px;background-image: url("../img/bg.jpg"); background-repeat: no-repeat;}
.area-login-left-logo {text-align:center;padding-top:180px;}
.area-login-left-logo img{max-width:100%;}
.area-login-right {float:left; width:50%; padding:60px 40px;}
.area-login-right h2 {font-size:28px;}
.area-login-right p {padding-bottom:20px;line-height:160%;}
.container-login .full-input {border-radius:10px;}
.container-login .btn-container {padding-bottom:35px; }
.btn-container2 {padding-bottom:30px;}
.login-right-footer {padding-top:20px;line-height:160%;font-size:15px;border-top:1px solid #ccc;}
.login-right-footer a {font-weight:bold;color:#008c95;}
.go-back-login {color:#999; font-weight:bold; font-size:14px;padding-bottom:20px;}
.go-back-login a{color:#999;}
.go-back-login a:hover{color:#999;}

/*404*/
.notfound-area {text-align:center;}
.notfound-area img {max-width:100%;}

/*Modal renew*/
.modal-renew .modal-content {padding:30px;}
.modal-renew .modal-body {padding: 5px 0px;}
.close-renewmodal {float:right;text-align: right;font-size:30px; font-weight:bold;margin-top:-15px;cursor:pointer;}
.btn-renew {border: 0px;}

/*renew page*/
.content-row {min-height:100px; vertical-align: center;border-top:1px solid #ededed;padding:10px 0px;overflow:auto;}
.content-row-right {float:left;width:100%;}
.content-option {width:120px;float:left;padding:10px 0;}
.content-image {text-align:center;padding-bottom:5px;}
.content-image img {background-color: #eae9e9;  border-radius:50%; box-shadow: 0 0 0 4px #eae9e9;height:70px;width:70px;}
.content-description {font-size:12px;text-align:center;}
.btn-container {text-align:right;padding:20px 0;}
.btn-nextstep {background:#008c95;color:#fff!important;padding:15px 30px;border-radius:10px;font-weight:600;font-size:14px;    border: 0;}
.btn-nextstep:hover {background:#006167;color:#fff;padding:15px 30px;border-radius:10px;}

.btn-prevstep {background:#cacaca;color:#fff!important;padding:15px 30px;border-radius:10px;font-weight:600;font-size:14px;    border: 0;float:left;}
.btn-prevstep:hover {background:#b3b2b2;color:#fff;padding:15px 30px;border-radius:10px;}

.onboarding-summary {background:#f8f8f8;padding:20px;font-size:14px; width:48%;margin-right:10px;}
.onboarding-checkout {border: 1px solid #ededed;padding:20px;font-size:14px; width:48%;}

.onboarding-summary h4 {padding:0px 0 8px 0;font-size:16px; margin:0;font-weight:400;}
.onboarding-checkout h4 {padding:0px 0 8px 0;font-size:16px; margin:0;font-weight:400;}

.contract-options-row {padding-bottom:20px;overflow:auto;}
.contract-option {width:25%; max-width:240px; float:left;text-align:center;border:1px solid #ededed;margin-right:5px;}
.contract-period {padding:15px 0;background:#ededed;color:#008c95;}
.contract-price {padding:15px 0;border-bottom:1px solid #ededed;}
.contract-benefit {padding:15px 0;}
.contract-benefit .green {font-weight:bold;color:#009523;}
.contract-label {font-weight: 700;font-size: 18px;padding: 0;}
.contract-startdate {float:left;width:30%;}
.contract-months {float:left;width:30%;padding-top:6px;}
.contract-totalbenefit {float:left;width:40%;padding-top:6px;font-weight:bold;color:#009523;text-align:left;}
.contract-dates-row {padding-bottom:12px; overflow:auto;}
.contract-dates-row h3 {font-size:18px; font-weight:400;}
.onboarding-checkout table {width:100%;}
.extra-product-box {min-height: 130px;padding-top: 3px;}
.contract-option-selected {border: 1px solid #008c95;-webkit-box-shadow: 0px 0px 9px 1px rgba(0,0,0,0.20);box-shadow: 0px 0px 9px 1px rgba(0,0,0,0.20);}

/*responsive*/
@media screen and (max-width: 768px) {
    .container-login {width:90%;}
    .area-login-left {width: 100%; height: 200px;min-height: 200px;}
    .area-login-right {width: 100%;padding:25px;}
    .area-login-left-logo img {    max-width: 60%;}
    .area-login-left-logo {padding-top: 45px;}
    .header-logo {width:100%;text-align:center;float: none;}
    .header-menu {width:100%;text-align:center;float: none; overflow:auto;padding-top: 10px;padding-bottom: 20px;}
    .header-menu a {width:30%; float:left;}
    .area-companydata {width:100%; float:none;}
    .area-contracts {width:100%; float:none;}
    .area-support {width:100%; float:none;}
    .area-contactperson {width:100%; float:none;}
}