/*Стили для контекстного меню*/
.contextMenuTrigger{height: 100%; font-size: 20px; display: none;}
.contextMenuContainer{display: none; position: absolute; background: white; border: 1px solid #ccc; border: solid lightgray 1px; z-index: 5; width: 180px; border-radius: 15px; -webkit-user-select: none; user-select: none; overflow: hidden;}
.contextMenuOption{background: #fefefe; width: 100%; height: 45px; cursor: pointer; transition: all .4s; text-align: left; display: flex; align-items: center;}
.contextMenuOption:hover{filter: brightness(90%); transition: all .4s;}
.contextMenuIcon{font-size: 20px; margin: 0px 10px;}



/*Стили блока поиска с фильтром*/
#filterContainer{width: 100%; height: 44px; padding: 8px 8px 8px 8px; transition: height 0.3s; box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.52); position: relative;}
#searchBlock{width: 100%; height: 30px; border-radius: 6px;}
#filterSelect{width: 30px; height: 100%; border-radius: 40%; float: left; margin-right: 10px; background: #03a9f4; color: white;}
#filterSelect:hover{background: #2f80e5; transition: 0.3s all;}
#filterSelect:active{background: #2f80e5; transition: 0.3s all;}
#searchInputBlock{width: calc(100% - 90px); height: 100%; border-radius: 12px; float: left; border: 0.1rem solid #03a9f4; padding: 5px;}
#searchInput{width: 100%; height: 100%; border: none; outline: none; margin-left: 5px; font-size: 14px; margin-right: 5px; user-select: text; -webkit-user-select: text;}
#subFilterBtn{width: 40px; height: 100%; border-radius: 30%; background: #03a9f4; color: white; float: right;}
#subFilterBtn:hover{background: #2f80e5; transition: 0.3s all;}
#subFilterBtn:active{background: #2f80e5; transition: 0.3s all;}
#filterBlock{margin-top: 10px; width: 100%; height: 120px; border-radius: 12px; border: 0.1rem solid #03a9f4;}
.hc{display: flex; align-items: center;}
@keyframes slideIn {0% {transform: translateY(-10%);} 100% {transform: translateY(0);}}
@keyframes slideOut {0% {transform: translateY(0);} 100% {transform: translateY(-10%);}}
#filterBlock {max-height: 0; overflow: hidden; transition: max-height .6s; opacity: 0;} 
#filterBlock.show {max-height: 245px; opacity: 1;} 
#filterBlock.hide {animation-name: slideOut; animation-fill-mode: forwards;}
#rotate{transition: transform 0.3s ease-in-out; transform: rotate(180deg);}
#filterBlock.hide ion-icon {transition: transform 0.3s ease-in-out; transform: rotate(0deg);}