/* ============================================================================
   text-cleaner.css - TEXT CLEANER category
   ============================================================================
   Loaded by:  text-cleaner/online-text-cleaner.php,
               text-cleaner/whitespace-remover-and-formatter.php,
               text-cleaner/remove-unwanted-characters.php,
               text-cleaner/strip-html-tags.php
   Purpose:    .text-area-style, .input-container (94%) / .input-container-textarea
               variants, .app-box-settings option boxes, .form-check-input
               checkboxes, .input-number, #top-paragraph.
   Load order: Load AFTER tool-input.css - overrides .input-container width.
   ============================================================================ */

.text-area-style{
    height:300px;
    border:1px solid #aaa7a7;
    resize: both;
}

.input-container{
    width:94%;
}

.input-container-textarea{
    margin: 14px auto;
    width:88%;
    background-color: #e1f1f9;
    padding: 15px;
    border-radius: 8px
}

.app-container {
    display: flex;
    flex-wrap: wrap;
}

.app-box-settings {
    flex: 1 1 30%;
    min-width: 250px;
    background-color: #e1f1f9; 
    margin:6px; 
    padding: 12px 10px 10px 20px;
    border-radius:4px; 
    line-height: 182%;
}

.app-box-settings h3 {
    font-size: 1.35rem;
}

/* Help text inside the settings boxes: one step smaller and lighter than .normal-font */
.app-box-settings .normal-font {
    font-size: 15px;
    color: #6c757d;
}

.settings-heading {
    color: #b71c1c;
}

.select-link {
    color: #b71c1c;
    text-decoration: underline;
    font-weight: 600;
    cursor: pointer;
}

.select-link:hover {
    color: #7f1111;
}

.form-check-input {
    width: 1.1em;
    height: 1.1em;
    margin-top: .3em;
}

.form-check-input:disabled {
    background-color: #d7cbcb;
}  

.form-check-input:disabled~.form-check-label, 
.form-check-input[disabled]~.form-check-label {
    opacity: 1.0;
}

.form-check-input:disabled+.form-check-label, 
.form-check-input[disabled]+.form-check-label {
    opacity: .5;

}

.input-number{
width: 40px; 
height: 27px;
}

#top-paragraph{
    text-align:center; 
    margin:0 40px;
}

@media only screen and (max-width: 600px) {
	label {
        font-size:16px;
    } 
    .input-container-textarea {
        width: 100%;
        padding:0;
    }
    
    #top-paragraph{
        margin:0;
    }

    .app-container {
        flex-direction: column;
    }

    .app-box-settings {
        flex-basis: auto;
        min-width: 0;
        margin: 6px 0;
    }

    /* Whitespace Remover & Formatter settings: allow labels to wrap on small screens */
    .ws-settings span {
        white-space: normal !important;
        display: inline-block;
    }
}