:root{
    --pds-primary: #37A1C5;
    --pds-gradient: background-image: linear-gradient(90deg, #37A1C5 0%, #269DD9 100%);
    --pds-success: #72BF44;
    --pds-error: #D7263D;
    --pds-warning: #F7C538;
    --pds-white: #FFFFFF;
    --pds-light: #FBFCFE;
    --pds-dark: #1a1d23;
    --pds-card-shadow: 0px 4px 8px -8px rgba(0,0,0,0.2);
}


@font-face {
    font-family: 'Inter';
    src: url('Inter.ttf') format('truetype');
        font-weight: 200 900;
        font-display: swap;
        font-style: normal;
}

body:not([class]) #main-content{
    background-color: var(--pds-light); 
    min-height: 80vh;
	display: flex;
	align-items: center;
}
.pds-wrapper{  
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 22px;  
    display: flex; 
    flex-direction: column; 
    gap: 24px;
    width: 100%; 
    max-width: 1280px; 
    padding: 24px; 
    margin: 0 auto;
}


.pds-wrapper h1, .pds-wrapper h2, 
.pds-wrapper h3, .pds-wrapper h4, 
.pds-wrapper h5, .pds-wrapper h6{ font-family: 'Inter', sans-serif; }

.pds-wrapper strong{ color: var(--pds-dark); font-weight: 600; font-size: 15px;}

.pds-section a,
p.field-wrap a{ color: var(--pds-primary); }

.pds-section, .pds-card-section{
    padding: 24px; 
    background-color: var(--pds-light);
}
.pds-card-section{
    border: 1px solid rgba(110, 117, 124, 0.2);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: var(--pds-card-shadow); 
}
header.pds-wrapper{
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

footer.pds-section{
    background-color: var(--pds-dark);
    color: var(--pds-white);
    text-align: center;
}

.pds-menu ul{ display: flex; justify-content:flex-end; align-items: center; flex-wrap: wrap; gap: 20px;  }
.pds-menu ul a{ color:var(--pds-primary); }
.pds-menu ul a:hover{ color:var(--pds-dark); }

.pds-card-section.sm{ padding: 16px 24px; }

.pds-card-section.error{
    color: var(--pds-white);
    background-color: var(--pds-error);
}
.pds-card-section.warning{
    color: var(--pds-dark);
    background-color: var(--pds-warning);
}

#pds-login-wrapper{ max-width: 480px; width: 100%; margin: 0 auto; }
#pds-user-wrapper { padding: 0px; }

.pds-row{ display: flex; flex-direction: row; gap: 2%; }
.pds-col{ display: flex; flex-direction: column; gap: 15px; }

.pds-form-header{ padding-bottom: 15px; }
.pds-form-footer{ justify-content: space-between; }

.pds-single-user { padding: 24px; }
.pds-single-user:nth-child(2n) { background-color: #F4F5FB; }
.pds-single-user:not(:last-child) { border-bottom: 1px solid rgba(110, 117, 124, 0.2); }

.pds-row.member:not(:last-child) { border-bottom: 1px solid rgba(110, 117, 124, 0.2); }

.pds-row.members{
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(110, 117, 124, 0.2);
}

.pds-row.pds-actions{ justify-content: flex-end; }

.pds-table{ text-align: left; width: 100%; }

tr.pds-row.member th, 
tr.pds-row.member td { justify-content: center; padding: 8px 0; }
.pds-col.actions{ align-items: flex-end; }

p.text-wrap,
p.field-wrap,
p.login-username,
p.login-password,
p.login-username input[type="text"], 
p.login-password input[type="password"],
p.field-wrap input[type="text"],
p.field-wrap input[type="password"],
p.field-wrap input[type="email"],
p.field-wrap input[type="search"],
#pds-members .pds-col input{ font-size: 14px; line-height:32px;}

p.field-wrap, 
p.login-username, 
p.login-password{ margin: 0; padding-bottom: 16px !important; display: flex; flex-direction: column; }
p.field-wrap label,
p.login-username label,
p.login-password label { display:block; font-weight: 600; cursor: pointer; }

p.field-wrap input[type="text"],
p.field-wrap input[type="password"],
p.field-wrap input[type="email"],
p.field-wrap input[type="search"],
p.login-username input[type="text"], 
p.login-password input[type="password"],
#pds-members .pds-col input{ 
    width: 100%;
    padding: 0 8px;
    border-radius: 6px;
    border: 1px solid rgba(110, 117, 124, 0.25);  
    outline: unset;
}
p.field-wrap.empty input{ border-color: var(--pds-warning); }
p.field-wrap.invalid input{ border-color: var(--pds-error); }
p.field-wrap.correct input{ border-color: var(--pds-success); }

p.field-wrap input[type="text"]:focus,
p.field-wrap input[type="password"]:focus,
p.field-wrap input[type="email"]:focus,
p.field-wrap input[type="search"]:focus,
p.login-username input[type="text"]:focus, 
p.login-password input[type="password"]:focus,
#pds-members .pds-col input:focus{
    box-shadow: unset;
    border-color: var(--pds-primary);
}

p.field-wrap .info{ font-size: 13px; opacity: 0.9;}

.pds-button, #wp-submit{
    display: inline-flex;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
    padding: 10px 16px;
    border-radius: 6px; 
    border: 0; cursor: pointer;
    background-color: var(--pds-primary);
    color: var(--pds-white); 
}
.pds-button:not(.pds-icon) i { margin: 0 4px 0 -4px;}
.pds-button.pds-icon{ 
    font-weight: 100;
    width: -moz-fit-content; width: fit-content;  
    height: -moz-fit-content; height: fit-content; 
    padding: 8px 9px; border-radius: 60px;
}
.pds-button.yellow{ 
    background-color: var(--pds-warning);
    color: var(--pds-dark);
}
.pds-button.red{ 
    background-color: var(--pds-error);
}
.pds-button.pds-icon.members.open,
.pds-button:hover,
#wp-submit:hover{
    color: var(--pds-white);
    background-color: var(--pds-dark);
}

.pds-user-status{ display: flex; flex-direction: row; justify-content: flex-end; align-items: center; gap: 10px;}

.signal{ 
    display: inline-block; margin: 5px;
    min-width:24px; min-height: 24px;
    border-radius: 120px;
    transition: all 200ms linear;
    background-color:var(--pds-light);
}
.signal{ background-color: var(--pds-dark); box-shadow: 0px 0px 18px -4px rgba(26, 29, 35, 0.5); }
.signal.active{ background-color:  var(--pds-success); box-shadow: 0px 0px 18px -4px rgb(114 191 68 / 50%); }
.signal.inactive{ background-color: var(--pds-error); box-shadow: 0px 0px 18px -4px rgb(215 38 61 / 50%); }
.signal.holding{ background-color:  var(--pds-warning); box-shadow: 0px 0px 18px -4px rgb(247 197 56 / 50%); }

@media (max-width:980px){
    .pds-row.pds-mb{ flex-direction: column; gap:15px; }
    .pds-row.pds-mb.inv{ flex-direction: column-reverse; }
    .pds-user-row{ flex-direction: column; gap:15px; }
    .pds-row.pds-actions, .pds-user-status{ justify-content: flex-start; }

}
.pds-card-section.login{
    position: relative;
    overflow: visible;
}
.login-toggle{ 
    cursor: pointer;  
    position: absolute;
    top:0; right: 0;
    transform: translate(100%, 100%);
    border-radius: 0 5px 5px 0;
    width: 40px;
    line-height: 40px;
    font-size: 20px;
    text-align: center;
    background-color: var(--pds-primary);
    color: var(--pds-white);
}
.login-toggle:hover{
    background-color: var(--pds-dark);
}