.focused {
    border: 1px solid #17a2b8 ;
    background-color: #17a3b880;
}

.cool-textarea {
    /** basic input style from boostrap.form-control **/
    /* display: block; */
    width: 100%;
    height: calc(2.25rem + 2px);
    min-height: calc(2.25rem + 2px);
    padding-top: 0.375rem;
    padding-right: 2.3rem;
    padding-bottom: 0.375rem;
    padding-left: 0.75rem;
    font-size: .9rem;
    line-height: 1.5;
    color: #495057;
    background-color: whitesmoke;
    background-clip: padding-box;
    border: 1px solid #323639;
    border-radius: 1.2em 1.2em 1.2em 1.2em;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

    user-select: none;
    
    /** right arrow style so it looks more like a select
        source : https://codepen.io/vkjgr/pen/VYMeXp **/
    background-image:
        linear-gradient(45deg, transparent 50%, gray 50%),
        linear-gradient(135deg, gray 50%, transparent 50%),
        linear-gradient(to right, #ccc, #ccc);
    background-position:
        calc(100% - 20px) calc(1em + 2px),
        calc(100% - 15px) calc(1em + 2px),
        calc(100% - 2.5em) 0.5em;
    background-size:
        5px 5px,
        5px 5px,
        1px 1.5em;
    background-repeat: no-repeat;
    
    /* disabeling resize */
    resize : none;
}

.cool-textarea:disabled, .cool-refresh:disabled {
    cursor: not-allowed;
    color: #999 !important;
    background-color: whitesmoke !important;
    border-color: grey !important;
}

.cool-select {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 100%;
    margin-bottom: 0.375rem;
}

.cool-select > .cool-textarea {
  position: relative;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  width: 1%;
  margin-bottom: 0;
}

.cool-refresh {
    height: calc(2.25rem + 2px);
    min-height: calc(2.25rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: .9rem;
    line-height: 1.5;
    color: #495057;
    background-color: whitesmoke;
    background-clip: padding-box;
    border: 1px solid #323639;
    border-radius: 0 1.2em 1.2em 0;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    margin-left: -1px;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    cursor: pointer;    
}

.cool-textarea:hover:not(:disabled) {
    cursor: pointer;    
}

.cool-list{
    /* position and size related */

    position: absolute;
    z-index: 2;
    overflow-y: scroll;
    overflow-x: hidden;
    width: 100%;
    margin-top: 3em;
    padding-left: 0;
    
    /* style related */
    color:#323639;
    background-color: whitesmoke;
    list-style-type: none;
    user-select: none;
    border: 1px solid #323639;
    border-radius: 1.2em;
    display: none;
}

.cool-textarea::-webkit-scrollbar, .cool-list::-webkit-scrollbar {
    display: none;
}

.cool-list > li {
    height: 40px;
}

.cool-list > li:not(:first-child) {
    cursor: pointer;
    padding: 0.25rem 1.5rem 0.25em 0.5em;
    z-index: 2;
}

.cool-list > li.selected {
    background: #17a2b8;
    color:white;
}

.cool-list > li.disabled {
    color:grey;
}

.cool-search {
    /** basic input style from boostrap.form-control **/
    display: block;
    width: 100%;
    height: calc(2.25rem + 2px);
    min-height: calc(2.25rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: .9rem;
    line-height: 1.5;
    color: #495057;
    background-color: whitesmoke;
    background-clip: padding-box;
    border: none;
    border-bottom: 1px solid #323639;
}

.hidden {
    display: none;
}