/************ CORE *************/
.mod-box{
background:#fff; 
border-top:1px solid #eaeaea; 
border-right:1px solid #d9d9d9; 
border-bottom:1px solid #d9d9d9; 
border-left:1px solid #eaeaea; 
border-radius:12px; 
padding:20px 20px;
width:100%; 
}
h3.mod-box-title{
margin-bottom:5px;
}
.mod-box label{
font-size:13px;
}
.field-container{
display:inline-block;
padding: 10px 40px;
width:48%;
min-width:300px;
}
.field-container input[type=text]{
width:100%;
height:40px;
}
.field-container select{
width:100%;
background:#fff;
height:40px;
border:1px solid #eaeaea;
outline: none !important;
border-radius:2px;
padding: 5px 10px;
}
.field-container select:focus{
border:1px solid #eaeaea;
outline: none !important;
}
.gen-btn, .widget-box input[type=submit]{
background: #43c4f0 !important;
color: #fff !important;
font-size: 14px !important;
border: 0px !important;
border-radius: 24px !important;
padding: 8px 18px !important;
text-decoration: none !important;
}

/*TOOL TIP*/

.tooltip {
    position: relative;
    display: inline-block;
    color: #006080;
}

.tooltip .tooltiptext {
    font-size: 14px;
    visibility: hidden;
    position: absolute;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.tooltip-right {
  top: -5px;
  left: 125%;  
}

.tooltip-right::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #555 transparent transparent;
}

.tooltip-bottom {
  top: 135%;
  left: 50%;  
  margin-left: -60px;
}

.tooltip-bottom::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #555 transparent;
}

.tooltip-top {
  bottom: 125%;
  left: 50%;  
  margin-left: -50px;
}

.tooltip-top::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50px;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.tooltip-left {
  top: -5px;
  bottom:auto;
  right: 128%;  
}
.tooltip-left::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent #555;
}


/************ DASHBOARD PAGE *************/

.widget-box{
background:#fff; 
border-top:1px solid #307FE2; 
border-right:1px solid #307FE2; 
border-bottom:1px solid #307FE2; 
border-left:1px solid #307FE2; 
border-radius:12px; 
padding:10px 10px;
margin:8px 8px;
width:200px;
min-height:200px;
display:inline-block;
vertical-align:top;
text-align:center;
}

h3.widget-box-title{
margin:0px 0px 0px 0px;
color:#307FE2;
font-size:16px;

}

/************ ACCOUNT BALANCE WIDGET *************/
#acc-bal{
text-align:center;
padding:20px 20px 10px 20px;
}
#acc-bal h3.widget-box-title{
text-align:left;
}
#acc-bal h1{
font-size:42px;
font-weight:bold;
padding:10px 0px 10px 0px;
margin-bottom:10px;
}
#acc-bal #pay-btn{
background:#43c4f0;
color:#fff;
font-size:14px;
border:0px;
border-radius:24px;
padding:8px 18px;
text-decoration:none;
}
/************ ACCOUNT INFO WIDGET *************/
#acc-info{
width:22%;
position:relative;
}
#acc-info p#title{
font-size:15px;
font-weight:bold;
line-height:18px;
margin-bottom:0px !important;
}
#acc-info p{
font-size:13px;
line-height:18px;
margin-bottom:0px !important;
}
/************ CREDIT CARDS WIDGET *************/
#cc-info{
width:22%;
}
#cc-chart-container{
width:80%;
height:60%;
position: relative;
margin:0px auto auto auto;
}
#cc-chart{
width:60%;
height:60%;
}
#nocards{
text-align:center;
font-weight:bold;
line-height:26px;
color:#dedede;
margin:60px 0px -150px 0px;
}
#nocards #add-btn{
color:#43c4f0;
font-size:14px;
font-weight:normal;
text-decoration:none;
}

/************ ALERTS WIDGET *************/
.alert{
background:#fff; 
border-top:1px solid #eaeaea; 
border-right:1px solid #d9d9d9; 
border-bottom:1px solid #d9d9d9; 
border-left:1px solid #eaeaea; 
border-radius:12px; 
padding:10px 10px;
margin:10px 0px;
vertical-align:middle;
}
.alert p{
font-size:13px;
display:inline-block;
margin-bottom:0px !important;
}
#alert-info a{
color:#222;
}
.alert-svg{
margin: 0px 5px -8px 5px;
display:inline-block;
}
.alert-level-1{
fill:#f3bf45;
}
.alert-level-2{
fill:#f18c42;
}
.alert-level-3{
fill:#ff554f;
}
#noalert{
text-align:center;
font-weight:bold;
color:#dedede;
margin:68px 0px 0px 0px;
}

/************ INVOICE SUMMARY WIDGET *************/
#invchart-container{
width:50%;
height:50%;
position: relative;
margin:30px auto auto auto;
}
#invchart{
width:50%;
height:50%;
}
#chart-title{
text-align:center;
font-weight: bold; 	
margin:10px 0px;
}
#inv-sum ul {
list-style: none;
text-align:center;
font-size:12px;
line-height:10px;
margin:30px 0px 10px 0px;
}
#inv-sum ul li {
display: inline-block;
padding:2px 5px;
}
#inv-sum ul li::before {
content: "⬤";  		
color: red; 			
font-weight: bold; 		
display: inline-block; 
width: 2em; 			
margin-left: -1em; 
}
#inv-sum ul li#current::before {
color: #00c685; 	
}
#inv-sum ul li#lessthirty::before {
color: #00c0d1; 	
}
#inv-sum ul li#thirty::before {
color: #f3bf45; 	
}
#inv-sum ul li#sixty::before {
color: #f18c42; 	
}
#inv-sum ul li#ninety::before {
color: #ff554f; 	
}


/************ BILLING PAGE *************/

/*POAs*/
#poa-container{
padding:20px 60px;
margin-bottom:30px;
}
#poa {
display: table; 
width:70%;
margin:0px auto;
text-align:left;
}
#poa > div { 
display: table-row; 
}
#poa > div:nth-child(odd) { 
display: table-row; 
background-color: #f8f8f8;
}
#poa > div:nth-child(1){ 
background:transparent;
}
#poa > div:nth-child(1) > div{ 
display: table-cell; 
background:transparent;
border-bottom:2px solid #f1f1f1; 
font-size:16px;
font-weight:bold;
}
#poa > div > div { 
display: table-cell;
padding: 18px;
}

#poa > div:nth-child(1) > div:nth-child(1) { 
display:block;
}

/*CHARGES*/
#chrg-container{
padding:20px 60px;
margin-bottom:30px;
}
#chrg {
display: table; 
width:100%;
margin:0px auto;
text-align:left;
}
#chrg > div { 
display: table-row; 
}
#chrg > div:nth-child(odd) { 
display: table-row; 
background-color: #f8f8f8;
}
#chrg > div:nth-child(1){ 
background:transparent;
}
#chrg > div:nth-child(1) > div{ 
display: table-cell; 
background:transparent;
border-bottom:2px solid #f1f1f1; 
font-size:16px;
font-weight:bold;
vertical-align:bottom;
}
#chrg > div > div { 
display: table-cell;
padding: 18px;
}
#chrg > div > div:nth-child(1) { 
display:none;
}
#chrg > div:nth-child(1) > div:nth-child(1) { 
display:block;
}
#chrg-bulkbtn{
color:#43c4f0;
font-size:14px;
border:1px solid #43c4f0;
border-radius:24px;
padding:6px 28px;
margin:0px 0px 0px 0px;
float:right;
/*pointer-events:none;*/
}
#chrg-bulkbtn:hover{
color:#fff;
text-decoration:none;
background:#c5e1eb;
border:1px solid #c5e1eb;
}
/*INVOICES*/
#invs-container{
padding:20px 60px;
}
#invs {
display: table; 
width:100%;
margin:0px auto;
text-align:left;
}
#invs > div { 
display: table-row; 
}
#invs > div:nth-child(odd) { 
display: table-row; 
background-color: #f8f8f8;
}
#invs > div:nth-child(1){ 
background:transparent;
}
#invs > div:nth-child(1) > div{ 
display: table-cell; 
background:transparent;
border-bottom:2px solid #f1f1f1; 
font-size:16px;
font-weight:bold;
vertical-align:bottom;
}
#invs > div > div { 
display: table-cell;
padding: 18px;
}
#invs > div > div:nth-child(1) { 
display:none;
}
#invs > div:nth-child(1) > div:nth-child(1) { 
display:block;
}
.medtitle{
display:none;
}
.pymtbtn{
background:#43c4f0;
color:#fff;
font-size:14px;
border:0px;
border-radius:24px;
padding:8px 18px;
text-decoration:none;
white-space: nowrap;
}
.pymtbtn:hover{
text-decoration:none !important;
opacity: 0.8;
}
a.disabled {
pointer-events: none;
background:#dedede;
}
.stat#procc:before{
content: "◑";
color:#f3bf45;
font-size:20px;
vertical-align: bottom;
}
.stat#pend:before{
content: "◐";
color:#00c685;
font-size:20px;
vertical-align: bottom;
}
.stat#decl:before{
content: "●";
color:#ff554f;
font-size:30px;
line-height:28px;
vertical-align: bottom;
}
.stat{
display:inline-block;
font-size:15px;
line-height:24px;
vertical-align: bottom;
}
#inv-bulkbtn{
color:#43c4f0;
font-size:14px;
border:1px solid #43c4f0;
border-radius:24px;
padding:6px 28px;
margin:0px 0px 0px 0px;
float:right;
}
#inv-bulkbtn:hover{
color:#fff;
text-decoration:none;
background:#c5e1eb;
border:1px solid #c5e1eb;
}

/************ POPUP PAYMENT *************/
.form-popup-bk {
  display: none;
  position: fixed;
  top:0px;
  left:0px;
  width:100vw;
  height:100vh;
  background:rgba(0,0,0,0.5);
  z-index: 999998;
}

.form-popup {
  position: fixed;
  left: 50%;
  top:30%;
text-align:center;
  transform: translate(-50%, 0);
border-top:1px solid #eaeaea; 
border-right:1px solid #d9d9d9; 
border-bottom:1px solid #d9d9d9; 
border-left:1px solid #eaeaea; 
  border-radius:6px; 
  width: 300px;
  padding: 10px 10px 20px 10px;
  background-color: white;
  z-index: 999999;
}

.form-popup .pymtcancel {
width:100%;
border:0px solid #000;
border-radius:50px;
text-align:right;
background:#fff;
font-size:14px;
}
.form-popup select{
width:90%;
background:#f7f6f7;
height:40px;
border:1px solid #eaeaea;
border-radius:2px;
padding: 5px 10px;
}

.form-popup .paysubmit{
background:#00c685;
color:#fff;
font-size:16px;
border:0px;
border-radius:24px;
padding:6px 48px;
margin:0px 0px 0px 0px;
}

/************ INVOICE DROPDOWN MENU *************/

.dropbtn {
border:0px;
background:transparent;
font-size:36px;
line-height:0px;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
color:rgba(0,0,0,0.5);
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  margin-left:-60px;

}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}

/************ ACCOUNT SETTINGS PAGE *************/
#acc-holder{
display:table-cell;
width:40%;
padding:10px 30px;
}
/*credit info*/
#cred {
display: table; 
width:100%;
margin:0px auto;
text-align:left;
}
#cred > div:nth-child(1) > div{ 
display: table-cell; 
background:transparent;
border-bottom:2px solid #f1f1f1; 
font-size:16px;
font-weight:bold;
}
#cred > div { 
display: table-row; 
}
#cred > div > div { 
display: table-cell;
padding: 6px;
border-top:4px solid #fff;
}
/*Add New*/
.newcardbtn{
background: #43c4f0;
color: #fff;
font-size: 14px;
border: 0px;
border-radius: 24px;
padding: 4px 18px;
text-decoration: none;
}

/************ POPUP COMPANY NAME UPDATE*************/

.co-name-form-popup-bk {
  display: none;
  position: fixed;
  top:0px;
  left:0px;
  width:100vw;
  height:100vh;
  background:rgba(0,0,0,0.5);
  z-index: 999998;
}

.co-name-form-popup {
  position: fixed;
  left: 50%;
  top:30%;
text-align:center;
  transform: translate(-50%, 0);
border-top:1px solid #eaeaea; 
border-right:1px solid #d9d9d9; 
border-bottom:1px solid #d9d9d9; 
border-left:1px solid #eaeaea; 
  border-radius:6px; 
  width: 300px;
  padding: 10px 10px 20px 10px;
  background-color: white;
  z-index: 999999;
}

.co-name-form-popup .cancel {
width:100%;
border:0px solid #000;
border-radius:50px;
text-align:right;
background:#fff;
font-size:14px;
}
/************ POPUP CARD UPDATE*************/
.credit-form-popup-bk {
  display: none;
  position: fixed;
  top:0px;
  left:0px;
  width:100vw;
  height:100vh;
  background:rgba(0,0,0,0.5);
  z-index: 999998;
}

.credit-form-popup {
  position: fixed;
  left: 50%;
  top:10%;
text-align:left;
  transform: translate(-50%, 0);
border-top:1px solid #eaeaea; 
border-right:1px solid #d9d9d9; 
border-bottom:1px solid #d9d9d9; 
border-left:1px solid #eaeaea; 
  border-radius:6px; 
  width: 300px;
  padding: 10px 10px 20px 10px;
  background-color: white;
  z-index: 999999;
}
.credit-form-popup label {
font-size:14px;
font-weight:bold;
}
.credit-form-popup .wincancel {
width:100%;
border:0px solid #000;
border-radius:50px;
text-align:right;
background:#fff;
font-size:14px;
}
.credit-form-popup select{
width:90%;
background:#f7f6f7;
height:40px;
border:1px solid #eaeaea;
border-radius:2px;
padding: 5px 10px;
}

.credit-form-popup .cardsubmit{
background:#00c685;
color:#fff;
font-size:16px;
border:0px;
border-radius:24px;
padding:6px 48px;
margin:30px 20px 0px 0px;
}

/************ TEAM MNG PAGE *************/
#team-container{
padding:20px 60px;
}
#team-title{
display:inline-block;width:70%;
}
#team {
display: table; 
width:100%;
margin:0px auto;
text-align:left;
}
#team > div { 
display: table-row; 
}
#team > div:nth-child(odd) { 
display: table-row; 
background-color: #f8f8f8;
}
#team > div:nth-child(1){ 
background:transparent;
}

#team > div:nth-child(1) > div{ 
display: table-cell; 
background:transparent;
border-bottom:2px solid #f1f1f1; 
font-size:16px;
font-weight:bold;
}
#team > div > div { 
display: table-cell;
padding: 18px;
}

/************ Password Reset Page *************/
#password-strength-holder{
width: 60%;
height:auto;
  border-radius:8px;
  background: #dedede;
margin:10px auto 30px auto;
}
#password-strength{
text-align:left;
font-size:12px;
font-weight:600;
color:#fff;
border-radius:8px;
white-space: nowrap;
}
#resetpass-button:disabled{
background:#dedede !important;
}
.good{
  width: 66%;
  background: #f3bf45;
  padding:4px 10px;
-webkit-box-shadow: 4px 0px 7px 0px rgba(132,132,132,0.2); 
box-shadow: 4px 0px 7px 0px rgba(132,132,132,0.2);
}
.strong{
  width: 100%;
  background: #00c685;
  padding:4px 10px;
}
.bad, .short{
  width: 33%;
  background: #ff554f;
  padding:4px 10px;
-webkit-box-shadow: 4px 0px 7px 0px rgba(132,132,132,0.2); 
box-shadow: 4px 0px 7px 0px rgba(132,132,132,0.2);
}
.toggle-password{
float:right;
position:relative;
right:5px;
margin-top:-35px;
color:#8a8a8a;
}



.auth-message{
text-align:center;
margin-top:25%;
color:#ff554f;
}

[id^="menu-user-profile"]{
cursor:pointer;
}