/* Glowny kontener publicznego formularza kontaktowego. */
.cp-contact-wrap {
    box-sizing: border-box;
    width     : auto;
    margin    : 0;
    color     : #d9e2ec;
}

.cp-contact-notice {
    box-sizing   : border-box;
    max-width    : 680px;
    margin       : 0 0 16px;
    padding      : 10px 12px;
    border       : 1px solid #a64b4b;
    border-left  : 4px solid #d9534f;
    border-radius: 3px;
    background   : #3a2020;
    color        : #ffc5c5;
    line-height  : 1.5;
}

/* Komunikat po wyslaniu formularza. */
.cp-contact-form-message {
    box-sizing   : border-box;
    max-width    : 680px;
    margin       : 0 0 16px;
    padding      : 10px 12px;
    border       : 1px solid #4d8b68;
    border-radius: 3px;
    background   : #183326;
    color        : #bce8ca;
}

.cp-contact-form-message-error {
    border-color: #a64b4b;
    background  : #3a2020;
    color       : #ffc5c5;
}

/* Glowny kontener panelu administracyjnego. */
.cp-contact-admin {
    box-sizing   : border-box;
    width        : auto;
    margin       : 0;
    color        : #d9e2ec;
    background   : #151b23;
    border       : 1px solid #2d3948;
    border-radius: 4px;
    padding      : 20px;
}

.cp-contact-unread-count {
    display      : inline-block;
    margin-bottom: 12px;
    padding      : 7px 10px;
    border       : 1px solid #8d6b38;
    border-radius: 3px;
    background   : #302719;
    color        : #f2d49a;
    font-size    : 14px;
}

/* Tlo i obramowanie formularza publicznego. */
.cp-contact-form {
    box-sizing   : border-box;
    width        : auto;
    max-width    : 680px;
    background   : #151b23;
    border       : 1px solid #2d3948;
    border-radius: 4px;
    padding      : 20px;
}

/* Tytul panelu administracyjnego. */
.cp-contact-admin-heading {
    margin     : 0 0 16px;
    color      : #f0f4f8;
    font-size  : 24px;
    font-weight: bold;
    line-height: 1.25;
}

/* Tytul formularza publicznego. */
.cp-contact-form-heading {
    margin     : 0 0 20px;
    color      : #f0f4f8;
    font-size  : 24px;
    font-weight: bold;
    line-height: 1.25;
}

/* Etykiety pol formularza. */
.cp-contact-label {
    display    : block;
    margin     : 0 0 6px;
    color      : #f0f4f8;
    font-size  : 15px;
    font-weight: bold;
}

/* Pole tekstowe imienia. */
.cp-contact-input {
    box-sizing   : border-box;
    width        : 100%;
    max-width    : 638px;
    margin-bottom: 16px;
    padding      : 10px;
    border       : 1px solid #3b4a5c;
    border-radius: 3px;
    background   : #0e141b;
    color        : #e7edf3;
}

/* Lista wyboru typu wiadomosci. */
.cp-contact-select {
    box-sizing   : border-box;
    width        : 100%;
    max-width    : 638px;
    margin-bottom: 16px;
    padding      : 10px;
    border       : 1px solid #3b4a5c;
    border-radius: 3px;
    background   : #0e141b;
    color        : #e7edf3;
}

/* Pole dlugiej tresci wiadomosci. */
.cp-contact-textarea {
    box-sizing   : border-box;
    width        : 100%;
    max-width    : 638px;
    margin-bottom: 16px;
    padding      : 10px;
    border       : 1px solid #3b4a5c;
    border-radius: 3px;
    background   : #0e141b;
    color        : #e7edf3;
    min-height   : 150px;
    resize       : vertical;
}

.cp-contact-hint {
    margin       : -10px 0 16px;
    color        : #aebdca;
    font-size    : 13px;
    line-height  : 1.45;
}

.cp-contact-input:focus {
    border-color: #6aa9d8;
    outline     : 2px solid rgba(106, 169, 216, .25);
}

.cp-contact-select:focus {
    border-color: #6aa9d8;
    outline     : 2px solid rgba(106, 169, 216, .25);
}

.cp-contact-textarea:focus {
    border-color: #6aa9d8;
    outline     : 2px solid rgba(106, 169, 216, .25);
}

/* Przycisk wysylania formularza. */
.cp-contact-submit {
    padding      : 10px 16px;
    border       : 1px solid #6aa9d8;
    border-radius: 3px;
    background   : #2d6f9f;
    color        : #fff;
    cursor       : pointer;
}

.cp-contact-submit:hover {
    background: #3988bd;
}

/* Tabela wiadomosci w panelu administracyjnym. */
.cp-contact-table {
    width          : auto;
    max-width      : 100%;
    table-layout   : fixed;
    border-collapse: collapse;
    color          : #d9e2ec;
}

/* Wspolne ustawienia komorek naglowka tabeli. */
.cp-contact-table th {
    padding       : 10px;
    border-bottom : 1px solid #2d3948;
    text-align    : left;
    vertical-align: top;
    word-wrap     : break-word;
}

/* Wspolne ustawienia komorek z trescia tabeli. */
.cp-contact-table td {
    padding       : 10px;
    border-bottom : 1px solid #2d3948;
    text-align    : left;
    vertical-align: top;
    word-wrap     : break-word;
}

/* Wyglad naglowka tabeli. */
.cp-contact-table th {
    background : #202b38;
    color      : #f0f4f8;
    font-size  : 14px;
    font-weight: bold;
}

/* Naprzemienny kolor wierszy tabeli. */
.cp-contact-table tr:nth-child(even) {
    background: #19222d;
}

/* Wiersz pojedynczego zgloszenia. */
.cp-contact-row {
    color: #d9e2ec;
}

.cp-contact-row-unread {
    background: #202b38;
}

.cp-contact-row-followup td {
    background: #17232c;
}

.cp-contact-ticket {
    color      : #8fc5e8;
    font-weight: bold;
    white-space: nowrap;
}

.cp-contact-ticket span {
    display    : block;
    color      : #aebdca;
    font-size  : 11px;
    font-weight: normal;
}

.cp-contact-table tr.cp-contact-row-unread td {
    background: #202b38;
}

/* Komorka z nadawca wiadomosci. */
.cp-contact-sender {
    color    : #f0f4f8;
    font-size: 14px;
}

/* Adres e-mail nadawcy. */
.cp-contact-email {
    color    : #8fc5e8;
    font-size: 13px;
    word-wrap: break-word;
}

/* Maly przycisk kopiowania adresu e-mail. */
.cp-contact-copy {
    padding      : 0 4px;
    border       : 1px solid #52677c;
    border-radius: 3px;
    background   : #202b38;
    color        : #8fc5e8;
    cursor       : pointer;
}

/* Wyglad przycisku kopiowania po wskazaniu kursorem. */
.cp-contact-copy:hover {
    border-color: #8fc5e8;
    color       : #ffffff;
}

.cp-contact-reply {
    padding      : 3px 7px;
    border       : 1px solid #52677c;
    border-radius: 3px;
    background   : #202b38;
    color        : #8fc5e8;
    cursor       : pointer;
}

.cp-contact-reply:hover {
    border-color: #8fc5e8;
    color       : #ffffff;
}

/* Komorka z trescia wiadomosci. */
.cp-contact-content {
    color    : #d9e2ec;
    font-size: 14px;
}

/* Przycisk otwierajacy pelna tresc wiadomosci. */
.cp-contact-message-open {
    width        : 34px;
    height       : 34px;
    padding      : 0;
    border       : 1px solid #52677c;
    border-radius: 3px;
    background   : #202b38;
    color        : #8fc5e8;
    font-size    : 18px;
    line-height  : 1;
    cursor       : pointer;
}

.cp-contact-message-open:hover {
    border-color: #8fc5e8;
    color       : #ffffff;
}

/* Ikona typu wiadomosci. */
.cp-contact-type-icon {
    display    : inline-block;
    width      : 30px;
    color      : #f0f4f8;
    font-size  : 22px;
    line-height: 1;
    text-align : center;
}

/* Wlasny wyglad popupu wiadomosci w panelu administracyjnym. */
.swal2-container .cp-admin-popup {
    width        : min(560px, calc(100% - 32px));
    border       : 1px solid #3b4a5c;
    border-radius: 6px;
    background   : #151b23;
    color        : #d9e2ec;
    box-shadow   : 0 18px 50px rgba(0, 0, 0, .55);
}

.swal2-container .cp-admin-popup .swal2-icon,
.swal2-container .zd-okno-popup .swal2-icon {
    display: none;
}

.swal2-container .cp-admin-popup-title {
    color    : #f0f4f8;
    font-size: 21px;
}

.swal2-container .cp-admin-popup-text {
    max-height   : 320px;
    overflow-y   : auto;
    color        : #c4d2df;
    font-size    : 15px;
    line-height  : 1.55;
    text-align   : left;
    white-space  : pre-wrap;
    overflow-wrap: anywhere;
}

.swal2-container .cp-admin-popup-button {
    border-radius: 3px;
    background   : #2d6f9f;
    color        : #ffffff;
}

.swal2-container .cp-admin-popup-button:hover {
    background: #3988bd;
}

.swal2-container .cp-admin-popup-close {
    color: #aebdca;
}

.swal2-container .cp-admin-popup-close:hover {
    color: #ffffff;
}

/* Komorka z typem wiadomosci. */
.cp-contact-type {
    color    : #c4d2df;
    font-size: 14px;
}

/* Komorka z data otrzymania wiadomosci. */
.cp-contact-date {
    color      : #aebdca;
    font-size  : 13px;
    white-space: nowrap;
}

/* Komorka z akcja usuwania. */
.cp-contact-actions {
    color    : #d9e2ec;
    font-size: 13px;
}

.cp-contact-status-toggle {
    padding      : 0 4px;
    border       : 1px solid #52677c;
    border-radius: 3px;
    background   : #202b38;
    color        : #8fc5e8;
    font-size    : 18px;
    line-height  : 1;
    cursor       : pointer;
}

.cp-contact-status-toggle:hover {
    border-color: #8fc5e8;
    color       : #ffffff;
}

/* Kolor linku usuwania wiadomosci. */
.cp-contact-delete {
    display        : inline-block;
    color          : #ff9b9b;
    font-size      : 18px;
    line-height    : 1;
    text-decoration: none;
}

/* Kolor linku usuwania po wskazaniu kursorem. */
.cp-contact-delete:hover {
    color: #ffd0d0;
}

/* Na waskim ekranie stala tabela przewija sie poziomo. */
@media (max-width: 760px) {

    .cp-contact-form {
        padding: 12px;
    }

    .cp-contact-admin {
        padding: 12px;
    }

    .cp-contact-table {
        display   : block;
        overflow-x: auto;
    }

    .cp-contact-table th {
        min-width: 120px;
    }

    .cp-contact-table td {
        min-width: 120px;
    }

    .cp-contact-table th:nth-child(2) {
        min-width: 260px;
    }

    .cp-contact-table td:nth-child(2) {
        min-width: 260px;
    }
}