/* ------ Dit heeft te maken met e-mail schermen ------------- */
/* ----------------------------------------------------------- */
/*  Eventueel later ook van toepassing op andere schermen?     */

/* ------------- file-drop styling ------------- */
.file-drop-zone {
    /* display: flex; */
    width: 100%;
    border: 1px solid navy;
    align-items: center;
    margin-bottom: 2px;
    border-radius: 4px;
    color: white;
}

    .file-drop-zone.hover,
    .file-drop-zone.hover input {
        background-color: #00ca71;
    }

input[type=file] {
    width: 100%;
    padding: 4px;
}

/* --------------------------------------------- */
/* Deze is belangrijk om op de telefoon dit schermpje netjes te tonen */
div.phone-popup {
    position: absolute !important;
    width: 100% !important;
}
/* --------------------------------------------- */

.adres-autocomplete {
    display: inline-block;
    vertical-align: top;
    /* margin-bottom: 4px; */
    /* margin-top: 4px; */
    width: 400px;
}

    .adres-autocomplete.small-media {
        width: 280px;
    }

.margin-bottom-10 {
    margin-bottom: 10px;
}

/* Om het invoer-veld een kleurtje te geven */
.e-ddl.e-input-group.e-control-wrapper .e-input {
    background: #e6f2ff;
}

/* Om het invoer-veld een lijntje met kleur te geven */
.e-ddl.e-input-group.e-control-wrapper.e-input-focus::before,
.e-ddl.e-input-group.e-control-wrapper.e-input-focus::after {
    background: #c000ff;
}
/* Om het invoer-veld focus wat rustiger te maken */
.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper.e-input-focus.adres-autocomplete,
.e-outline.e-input-group.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
.e-outline.e-input-group.e-input-focus.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
.e-outline.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
.e-outline.e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
    border: 1px solid navy;
    box-shadow: none; /* inset 1px 1px #b1bd15, inset -1px 0 #b1bd15, inset 0 -1px #b1bd15; */
}

input.e-control.e-autocomplete.e-lib.e-input {
    height: 26px;
}

span.e-input-group-icon.e-ddl-icon.e-icons.e-ddl-disable-icon {
    min-height: 26px;
}

/* Om de groups in de dropdown blauw te maken: */
.e-ddl.e-control.e-lib.e-popup.e-popup-open li.e-list-group-item,
.e-ddl.e-control.e-lib.e-popup.e-popup-open div.e-fixed-head {
    color: blue;
}

div.selected-email,
div.selected-attachment {
    display: inline-block;
    white-space: nowrap;
    height: 28px;
    margin-right: 4px;
    margin-bottom: 2px;
    border-radius: 4px;
    padding: 4px;
    border: 1px solid navy;
    color: black;
    background-color: #e6f2ff;
    font-size: small;
}
    div.gesprek-todo span.remove,
    div.selected-email span.remove, div.selected-attachment span.remove, span.openattachment {
        cursor: pointer;
    }
div.gesprek-todo {
    padding: 6px;
}
div.gesprek-todo span.remove{
    float: right;
}
.panta-inline {
    display: inline-block;
}

button.send-button {
    background-color: blue;
}

    button.send-button:hover:not(:disabled) {
        background-color: cornflowerblue;
    }

    button.send-button:disabled {
        background-color: grey;
    }

span.email-span {
    margin-left: 5px;
    color: navy;
    font-weight: 500;
}

button.float-right {
    font-size: small;
    float: right;
    height: 28px;
}

tr.row-border-top td {
    border-top: 1px solid grey;
    padding-top: 4px;
}

span.drop-font-small {
    font-size: small;
}
div.panta-syncfusion-form {
    font-size: 12px;
    margin-top: 10px;
}
h6 {
    color: #337AB7;
}
#showall.groen button {
    /*e-control e-btn e-lib e-tbar-btn e-icon-btn e-icon-btn*/ 
    background-color: green;
}
#showall.groen span {
    color: white;
}