.cke_reset {
    width: 100% !important;
}

.anchoredToBottomRight {
    bottom: 5px;
    right: 25px;
    padding: 5px;
    background-color: dodgerblue;
    color: white;
    position: fixed;
    z-index: 1;
}

.notes-button {
    color: white;
}

    .notes-button:focus {
        color: white;
    }

#NotesModal {
    overflow: hidden;
}

.modal {
    pointer-events: none;
}

.modal-open {
    padding-right: 0px !important; /* When the modal opens, it puts a padding-right. This is to avoid that. */
}

.modal-backdrop {
    display: none !important;
}

.modal-open {
    overflow-y: auto;
}

.modal.right .modal-dialog {
    position: fixed;
    bottom: 5px;
    margin: 0px;
    width: 400px;
    /*height: 40%;*/
}

.modal.right .modal-content {
    /* height: 100%; */
    overflow-y: auto;
}

.modal.right .modal-body {
    padding: 5px 5px;
}

.modal.right.fade .modal-dialog {
    right: -400px;
}

.modal.right.fade.in .modal-dialog {
    right: 5px;
}

.modal-content {
    border-radius: 0;
    border: none;
}

.modal-header {
    border-bottom-color: #EEEEEE;
    background-color: #FAFAFA;
}

#CloseNotesModal.tooltip-inner {
    width: 350px;
}

#ExpandNotesModalVertically i, #ExpandNotesModalHorizontally i {
    -webkit-text-stroke: 2px blue;
}

/* Overwrite some attributes of 'close' class of bootstrap */
.close {
    float: right;
    font-size: 21px;
    font-weight: bold;
    line-height: 1;
    color: brown;
    text-shadow: 0 1px 0 #fff;
    opacity: 0.5;
}

    .close:hover,
    .close:focus {
        cursor: pointer;
        opacity: 1.0;
        color: brown;
    }

@media only screen and (max-width: 430px) {
    #NotesModalBody {
        padding-left: calc(10px + (430px - 100vw) * 0.87) !important;
        /*  100vw => 100% of the viewport width.
            We want padding-left to be 10px when it is 430px and to pregresively increase when the width decreases.
            I found this to be the most acceptable approximation to make the Notes visible correctly.
            The worst inflection point is when width is around 320px, when the Notes is still correctly visible.
        */
    }
}