/*
    ==== table ====
*/
    #callback th,
    #callback td {
        padding: 4px;
        text-align: center;
        vertical-align: middle;
    }

/*
    ==== field ====
*/

    #callback .status {
        text-align: left;
        width: 210px;
    }

    #callback .status .btn {
        border: none;
    }

    #callback .status .btn {
        padding: 2px 10px;
    }

    #callback .status .dropdown-toggle {
        height: 24px;
    }

    #callback td.city,
    #callback td.tel,
    #callback td.manager {
        width: 100px;
        overflow: hidden;
    }

    #callback .date {
        width: 150px;
    }

    #callback .text .btn {
        padding: 2px 7px;
    }

/*
    ==== done ====
*/

    #callback .status.done .btn-group > .btn {
        border-radius: 5px;
    }

    #callback .status.done .dropdown-toggle {
        display: none;
    }

/*
    ==== modal ====
*/

    .modal-body {
        word-wrap: break-word;
    }

    .modal-content .alert {
        display: table;
        margin: auto;
    }

    .modal-content .alert > div {
        display: inline-block;
        text-align: center;
        vertical-align: middle;
    }

    .modal-content .alert.warning .img {
        background-image: url(/img/alert/warning.png);
    }

    .modal-content .alert.done .img {
        background-image: url(/img/alert/done.png);
    }

    .modal-content .alert .img {
        width: 96px;
        height: 96px;
        background-size: cover;
    }