.sms ul {
     margin: 0;
     padding-top: 2px;
     padding-left: 2px;
     overflow-y: auto;
     height: 240px;
     /*height: 70%;*/
 }
 /* Style the list items */
 
 .sms ul li {
     cursor: pointer;
     position: relative;
     padding: 12px 8px 12px 35px;
     list-style-type: none;
     background: #eee !important;
     font-size: 18px;
     color: #9e9d9d;
     transition: 0.1s;
     /* make the list items unselectable */
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
 }
 /* Set all odd list items to a different color (zebra-stripes) */
 
 .sms ul li:nth-child(odd) {
     background: #e9e6e6 !important;
 }
 /* Darker background-color on hover */
 
 ul li:hover {
     /* background: #eee;*/
 }
 /* When clicked on, add a background color and strike out text */
 
 ul li.checked {
     /*background: rgb(171, 192, 248);*/
     color: rgb(16, 3, 73);
     /*text-decoration: line-through;*/
 }
 /* Add a "checked" mark when clicked on */
 
 ul li.checked::before {
     content: '';
     position: absolute;
     border-color: rgb(16, 3, 73);
     border-style: solid;
     border-width: 0 2px 2px 0;
     top: 16px;
     left: 12px;
     transform: rotate(45deg);
     height: 12px;
     width: 7px;
 }
 /* Style the close button */
 
 .close {
     position: absolute;
     right: 0;
     top: 0;
     padding: 12px 16px 12px 16px;
 }
 /* Style the "Add" button */
 
 .btn-primary {
     color: white;
     padding: 12px 20px;
     margin: 0px;
     border: #444 thin solid;
     cursor: pointer;
     width: 100%;
     font-weight: bold;
     border-radius: 0px;
 }
 /*------------------------- SMS LIST -----------------------------------------------------*/
 
 .smscontainer {
     display: block;
     position: relative;
     padding-left: 35px;
     margin-bottom: 12px;
     cursor: pointer;
     font-size: 22px;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
 }
 /* Hide the browser's default checkbox */
 
 .smscontainer input {
     position: absolute;
     opacity: 0;
     cursor: pointer;
     height: 0;
     width: 0;
 }
 /* Create a custom checkbox */
 
 .smscheckbox {
     position: absolute;
     top: 0;
     left: 0;
     height: 25px;
     width: 25px;
     background-color: #eee;
 }
 /* On mouse-over, add a grey background color */
 
 .smscontainer:hover input~.smscheckbox {
     background-color: #ccc;
 }
 /* When the checkbox is checked, add a blue background */
 
 .smscontainer input:checked~.smscheckbox {
     background-color: #2196F3;
 }
 /* Create the checkmark/indicator (hidden when not checked) */
 
 .smscheckbox:after {
     content: "";
     position: absolute;
     display: none;
 }
 /* Show the checkmark when checked */
 
 .smscontainer input:checked~.smscheckbox:after {
     display: block;
 }
 /* Style the checkmark/indicator */
 
 .smscontainer .smscheckbox:after {
     left: 9px;
     top: 5px;
     width: 5px;
     height: 10px;
     border: solid white;
     border-width: 0 3px 3px 0;
     -webkit-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     transform: rotate(45deg);
 }