:root {

/* COLOR PALETTE DEFINITION */

/* Change these values here and check the result in real time */


/* Primary colors */
--color-primary: #007470;
--color-primary-dark: #104543;
--color-primary-light: #19b2ac;
--color-primary-bright: #1fede5;

/* Secondary colors */
--color-secondary: #434d4d;
--color-secondary-dark: #333333;
--color-secondary-light: #cccbcc;
--color-secondary-bright: #ececeb;
--color-secondary-shining: #fffcfc;

/* Status */
--status-danger: #d33737;
--status-danger-light: #f73d3d;
--status-warning: #f29323;
--status-success: #36a936;
--status-none: #f8f8f8;

}

/* ****************************************/
/* DO NOT CHANGE ANYTHING BELOW THIS LINE */
/* ****************************************/


/* Generic */
body                    { color:  var(--color-secondary); }
button                  { color:  var(--color-primary); }

.btn-primary            { background-color: var(--color-primary-light); }
.btn-primary            { color: var(--color-secondary-shining);  }

.btn-default            { background-color: var(--color-primary); }
.btn-default            { color: var(--color-secondary-shining);  }

.form-control           { color: var(--color-primary); }
sippo-drawer nav button { color: var(--color-primary); }


/* Drawer header and footer */
drawer-header                 { background-color: var(--color-primary); }
.drawer-panel-expanded header { color: var(--color-primary); }
q-footer                      { background-color: var(--color-primary); }
q-footer button:hover         { color:  var(--color-primary-light);     }
q-footer button               { color:  var(--color-primary-bright);     }


/* Contact list */
sippo-contact .name                   { color:  var(--color-secondary);}
sippo-contact .contact-actions button {background-color:  var(--color-primary);}
sippo-contact .contact-avatar  button { color:  var(--color-primary);}
sippo-contact .contact-actions        {background-color:  var(--color-primary);}
sippo-contact .contact-avatar img.online { border-color:  var(--status-none);}


/* Conference log */
q-conference-log section virtual-scroller .date-header { color:  var(--custom-color); }


/* Chat */
q-chat-area section                          { color:  var(--color-secondary)}
q-chat-area section .incoming .info          { color:  var(--color-primary)}
q-chat-area section .date-header             { color:  var(--color-primary)}
q-chat-area .typing-area .text-area>button   { color:  var(--color-primary)}
q-chat-area .typing-area .text-area          { color:  var(--color-primary)}
q-chat-area .typing-area .text-area textarea { background-color:  var(--color-secondary-shining)}



/* Help texts */
sippo-content content-info .info .chat-text p.title-text { color:  var(--color-secondary-shining) }
sippo-content content-info .info .text p.title-text      { color:  var(--color-secondary-shining) }

/* Scroller */
::-webkit-scrollbar-thumb { box-shadow: inset 0 0 10px 10px  var(--color-primary); ; }

/* Dialpad */
q-dialpad section .keypad .key  {color:  var(--color-primary)}
q-dialpad section .keypad .key  {background-colorcolor:  var(--color-secondary-bright)}

/* Call screen */
sippo-call-incoming:not(.banner) .info h1 {    color:var(--color-primary-bright)};
sippo-call-incoming:not(.banner) .info .avatar-container img {
    border: 7px solid var(--color-primary-bright);
    border: 7px solid  var(--color-primary-bright);
    border-top-color:  var(--color-primary-bright);
    border-right-color:  var(--color-primary-bright);
    border-bottom-color:  var(--color-primary-bright);
    border-left-color:  var(--color-primary-bright);
}

sippo-call-incoming:not(.banner) .buttons-bar button.pick-up {
    background-color:  var(--color-primary);
    color: var(--color-status-none);
}

sippo-call-incoming:not(.banner) .buttons-bar button.hang-up {
    background-color:  var(--status-danger);
    color: var(--color-status-none);
}

sippo-call-incoming:not(.banner) .info h2, sippo-call-incoming:not(.banner) .info h3, sippo-call-incoming:not(.banner) .info p {
    color: var(--status-none);
}

/* New */
q-chat-area .typing-area .send {background-color:var(--color-primary)}
q-chat-list-item.chat-active { background-color:var(--color-primary)}
q-meeting-list section .no-meetings-help .info, q-meeting-list section .no-meetings-help .subtitle {color:var(--color-primary)}
q-dialpad section div.input-wrapper input.value {color:var(--color-primary)}
q-dialpad section div.input-wrapper button { color: var(--color-primary);}