@import "theme.css";

.custom-select {
  --option-max-height: 480px;
  --chevron-icon: url("../images/common/chevrondowngrey.png");
  --select-color: #3A3A3A;        
  --hover-color: #515151;
  position: relative;
  width: 240px;
  --item-height: 32px;
  height: var(--item-height);
  font-size: 12px;
  font-family: "Saira";
}

.custom-select .head {        
  width: 100%;
  line-height: var(--item-height);
  z-index: 3;
  background-color: var(--select-color);
  border-radius: 6px;
  align-items: center; 
  background-image: var(--chevron-icon);
  background-repeat: no-repeat; 
  background-size: 20px;
  background-position: 95% 50%;
  display: flex;
}

.custom-select .head:hover {
  background-color: var(--hover-color);
}

.custom-select .head .icon{
  width: 14px;
  height: 14px;
  align-items: center;
  margin-left: 10px; 
  border-radius: 4px;
}

.custom-select .head .head-name {
  display: none;
}

.custom-select .head .head-content {  
  height: var(--item-height); 
  color: var(--font-color); 
  width: calc(100% - 35px);
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: pre;
  margin-left: 10px;
  pointer-events: none;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none; 
  font-size: 12px;
  font-family: "Saira";
}

.custom-option {
  list-style: none;
  margin-top: 5px;
  width: auto;
  line-height: var(--item-height);
  max-height: var(--option-max-height);
  color: #8A8A8A;
  background: #181818;
  border-radius: 6px;
  border: 1px solid #3a3a3a;
  display: none;  
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
  overflow-y:auto; 
  overflow-x: hidden;
  list-style-type: none; 
  padding: 2px;
}

.custom-option::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color:#3A3A3A;
}

.custom-option::-webkit-scrollbar-thumb:hover {
  background-color:#515151;
}

.custom-option::-webkit-scrollbar-thumb:active {
  background-color:#898989;
}

.custom-option::-webkit-scrollbar {
  width: 8px;
}

.custom-option::-webkit-scrollbar-track {
  background-color:transparent;
}

.custom-option .option-item {
  position: relative;        
  width: var(100% -10px);
  padding: 0px 10px;
  border-radius: 6px;
  margin: 3px;
  white-space: nowrap;      
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.option-item:hover {
  background-color: #FFFFFF20 !important;
  color: var(--font-color) !important;
}

.option-item.highlighted {
  border-radius: 6px;  
  border: 1px solid yellow;
  background-color: #FFFFFF20 !important;
  color: var(--font-color) !important;
}



.drop-menu {
  --option-max-height: 480px;
  --chevron-icon: url("../images/common/chevrondowngrey.png");
  --select-color: #3A3A3A;        
  --hover-color: #515151;
  position: relative;
  width: 250px;
  --item-height: 32px;
  height: var(--item-height);
  font-size: 12px;
  font-family: "Saira";  
}

.drop-menu .head {
  width: 100%;
  height: var(--item-height);
  line-height: var(--item-height);
  z-index: 3;
  background-color: var(--select-color);
  border-radius: 6px;
  align-items: center; 
  background-image: var(--chevron-icon);
  background-repeat: no-repeat; 
  background-size: 20px;
  background-position: 95% 50%;
  display: flex;
}

.drop-menu .head .head-name {
  display: none;
}

.drop-menu .head:hover {
  background-color: var(--hover-color);
}

.drop-menu .head .head-content {  
  height: var(--item-height); 
  color: var(--font-color); 
  width: calc(100% - 35px);
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: pre;
  margin-left: 10px;
  pointer-events: none;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none; 
  font-size: 11px;
  font-family: "Saira";
}

.menu-container {      
  margin-top: 5px;
  width: 516px;
  height: 268px;
  color: #8A8A8A;
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  background: #181818;
  border-radius: 6px;
  border: 1px solid #3a3a3a;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
  overflow-y: hidden;
  overflow-x: auto;      
}

.menu-container .notes {
  line-height: 60px;
  width: calc(100% - 16px);
  align-items: center;
  color: var(--font-white);
  font-size: 14px;
  margin-left: 16px;
}

.menu-container .items {
  list-style: none;
  list-style-type: none; 
  display: flex;
  flex-direction: row;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
  overflow-y: hidden; 
  overflow-x: hidden;
  list-style-type: none; 
  padding: 2px;
  
}

.menu-container::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color:#3A3A3A;
}

.menu-container::-webkit-scrollbar-thumb:hover {
  background-color:#515151;
}

.menu-container::-webkit-scrollbar-thumb:active {
  background-color:#898989;
}

.menu-container::-webkit-scrollbar {
  height: 8px;
}

.menu-container::-webkit-scrollbar-track {
  background-color:transparent;
}

.menu-item {
  flex-shrink: 0;
  position: relative;
  width: 232px; 
  height: 188px;
  border-radius: 8px;   
  border: 1px solid #3a3a3a;   
  white-space: nowrap;      
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  flex-direction: column;
  margin-left: 16px;
  justify-items: center;
  text-align: center;
}

.menu-item:hover {
  color: var(--font-white);
  background-color: #FFFFFF10;
}

.menu-item.highlighted {
  border-radius: 6px;  
  border: 1px solid yellow;
  background-color: #FFFFFF20 !important;
  color: var(--font-color) !important;
}

.menu-item .item-head {
  display: flex; 
  padding: 0px 15px;
  height: 30px; 
  line-height: 30px;
  justify-content: space-between;
}

.menu-item .item-image{
  height: calc(100% - 60px);
  object-fit: contain;
}

.menu-item .item-text{
  line-height: 24px;
  text-align: center;
  justify-content: center;
}