/*********************************************************************
 ProtelCRM
 Version : 0.40
 File    : assets/css/style.css
*********************************************************************/

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

body{

    background:#ececec;
    font-family:Arial,Helvetica,sans-serif;
    font-size:16px;
    color:#222;

}

.page{

    width:98%;
    margin:10px auto;

}

/************************************************************
TOP HEADER
************************************************************/

.topbar{

    display:flex;
    justify-content:space-between;
    align-items:center;

    background:#0f3c69;
    color:#fff;

    padding:12px 20px;

    border:1px solid #000;

}

.logo{

    font-size:28px;
    font-weight:bold;

}

.userinfo{

    font-size:16px;

}

.userinfo a{

    color:#fff;
    text-decoration:none;
    margin-left:15px;

}

.userinfo a:hover{

    text-decoration:underline;

}

/************************************************************
MENU
************************************************************/

.toolbar{

    background:#d9d9d9;

    border-left:1px solid #000;
    border-right:1px solid #000;
    border-bottom:1px solid #000;

    padding:10px;

}

.toolbar a{

    display:inline-block;

    background:#ffffff;

    border:1px solid #000;

    color:#000;

    padding:8px 16px;

    text-decoration:none;

    margin-right:8px;

    font-weight:bold;

}

.toolbar a:hover{

    background:#d7ebff;

}

/************************************************************
CONTENT
************************************************************/

.content{

    margin-top:15px;

}

/************************************************************
BUTTONS
************************************************************/

.button,
button{

    background:#0f65c2;
    color:#fff;
    border:none;
    padding:9px 18px;
    cursor:pointer;
    font-size:15px;
    border-radius:4px;
}

.button:hover,
button:hover{

    background:#004d99;

}

.button-green{

    background:#1f8c2b;

}

.button-red{

    background:#b40000;

}

/************************************************************
SEARCH BAR
************************************************************/

.searchbar{

    margin-bottom:15px;

}

.searchbar input[type=text]{

    width:380px;

    padding:8px;

    font-size:16px;

}

/************************************************************
CRM TABLE
************************************************************/

.crm-table{

    width:100%;

    border-collapse:collapse;

    background:#ffffff;

    font-size:16px;

}

.crm-table th{

    background:#d9d9d9;

    border:1px solid #000;

    padding:10px;

    text-align:left;

    position:sticky;

    top:0;

}

.crm-table td{

    border:1px solid #000;

    padding:8px;

    vertical-align:top;

}

.crm-table tbody tr:nth-child(even){

    background:#f5f5f5;

}

.crm-table tbody tr:hover{

    background:#dcefff;

    cursor:pointer;

}

/************************************************************
STATUS COLOURS
************************************************************/

.status-book{
    background:#d7ffd7;
    font-weight:bold;
}

.status-inqu{
    background:#008000;
    font-weight:bold;
}
.status-quot{
    background:#dce8ff;
    font-weight:bold;
}

.status-info{
    background:#fff7c7;
    font-weight:bold;
}

.status-ordr{
    background:#C0C0C0;
    font-weight:bold;
}

.status-repr{
    background:#FF00FF;
    font-weight:bold;
}

.status-done{
    background:#e5e5e5;
    font-weight:bold;
}

.status-xxxx{
    background:#ffd4d4 !important;
    font-weight:bold;
}
.status-quox{
 background:#ffd4d4 !important;
    font-weight:bold;
}

.status-post{
 background:#FFFF00 !important;
    font-weight:bold;
}
/************************************************************
FORMS
************************************************************/

.form-section{

    background:#ffffff;

    border:1px solid #000;

    margin-bottom:20px;

}

 .form-title{

    background:#0f3c69;

    color:#ffffff;

    border-bottom:1px solid #000;

    padding:10px;

    font-size:18px;

    font-weight:bold;

}

.form-body{

    padding:15px;

}

.form-row{

    display:flex;

    gap:20px;

    margin-bottom:12px;

}

.form-group{

    flex:1;

}

label{

    display:block;
    font-weight:bold;

    margin-bottom:4px;

}


/************************************************************
QUOTE FORM — CLEAN MODERN CRM STYLING
************************************************************/

.quote-form {
    max-width: 780px;
    background: #ffffff;
    padding: 20px 25px;
    border: 1px solid #ccc;
    border-radius: 6px;
    margin: 20px auto;
    font-family: Arial, sans-serif;
}

.quote-form {
    border: 5px solid red !important;
}

.quote-form h3 {
    margin-top: 0;
    font-size: 20px;
    border-bottom: 2px solid #eee;
    padding-bottom: 6px;
}

.quote-form label {
    display: block;
    margin-top: 14px;
    font-weight: bold;
    color: #333;
}

.quote-form input[type="text"],
.quote-form input[type="email"],
.quote-form textarea,
.quote-form select {
    width: 100%;
    padding: 8px 10px;
    margin-top: 4px;
    border: 1px solid #bbb;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
}

.quote-form textarea {
    min-height: 90px;
    resize: vertical;
}

.quote-form input[readonly] {
    background: #f7f7f7;
    color: #666;
}

.quote-form .checkbox-row {
    margin-top: 18px;
}

.quote-form .checkbox-row label {
    font-weight: normal;
    display: flex;
    align-items: center;
    gap: 8px;
}

.quote-form button[type="submit"] {
    margin-top: 22px;
    padding: 10px 18px;
    background: #2c7bd9;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 15px;
    cursor: pointer;
}

.quote-form button[type="submit"]:hover {
    background: #1f5fa8;
}

/* Optional: subtle section spacing */
.quote-form .section {
    margin-top: 25px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

input[type=text],
input[type=email],
input[type=date],
select,
textarea{

    width:100%;

    padding:8px;

    font-size:16px;

    border:1px solid #555;

}

textarea{

    min-height:120px;

    resize:vertical;

}

/************************************************************
FOOTER
************************************************************/

.footer{

    margin-top:20px;

    padding:10px;

    border-top:1px solid #000;

    font-size:14px;

}

/************************************************************
PHONE
************************************************************/

@media(max-width:900px){

.form-row{

    display:block;

}

.searchbar input[type=text]{

    width:100%;

}

.toolbar a{

    display:block;

    margin-bottom:6px;

}

}