html {
    font-size: 1.15rem;
}

html,
body {
  height: 100%;
}

body{
    /* overflow: hidden; */
}

.icon-inside {
    font-size: 0;
    display: inline-block;
    vertical-align: middle;
}

.app-wrapper {
    max-width: 570px;
    width: 100%;
    height: 100%;
}

.app-header {
    background: linear-gradient(30deg, #e5ecf1,#f1f7f5);
}

.note,
.note-expand:hover {
    cursor: pointer;
}

.app-bottom-menu.shadow-sm {
    box-shadow: 0 -.125rem .25rem rgba(0,0,0,.075)!important;
}

.app-bottom-menu {
    bottom: 0;
    left: 0;
    right: 0;
    visibility: hidden;
    opacity: 0;
    -webkit-transform: translate(0,50%);
    transform: translate(0,50%);
}

.note-add-btn,
.app-bottom-menu .setting-item {
    cursor: pointer;
}

.app-top-setting {
    top: 0;
    left: 0;
    right: 0;
    visibility: hidden;
    opacity: 0;
    -webkit-transform: translate(0,-50%);
    transform: translate(0,-50%);
}

.menu-wrapper {
    visibility: hidden;
    height: 100%;
    width: 100%;
    z-index: 1131;
}

.back-lid {
    position: absolute;
    height: 100%;
    width: 100%;
    background: #00000042;
    opacity: 0;
}

.note-add-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    border-radius: 50%;
    padding: .8rem;
}

.note-date-container {
    font-size: .8rem;
}

.note-empty {
    display: none !important;
}

.note-empty:last-child {
    display: flex !important;
}

.activity {
    visibility: hidden;
    height: 100%;
    overflow-y: auto;
    max-width: 570px;
    margin: auto;
}
.activity.current {
    visibility: visible;
    height: auto;
    min-height: 100%;
}
.activity:not(.current) {
    -webkit-transform: translate(0,100%);
    transform: translate(0,100%); 
}

.message-bar {
    position: fixed;
    z-index: 1033 ;
    bottom: 0;
    width: 100%;
    -webkit-transform: translate(0,100%);
    transform: translate(0,100%);
}


#note-order-setting .setting-item.current-choice {
    border-radius: 50px 0 0 50px;
    background-color: #c5dbe9;
}