.exode-collectionlist-action {
	padding:0.5vh;
	font-size:1.5vh;
	font-family:'Cascadia';
}

.exode-collectionlist-line {
	padding:0.5vh;
	font-size:1vh;
	font-family:'Cascadia';
}

.exode-collectionlist-line-title {
	font-size:3vh;
	font-family:'Encounter';
}
.exode-collectionlist-line-description {
	font-size:1vh;
	height:3vh;
	font-family:'Cascadia';
	opacity:0.7;
}
.exode-collectionlist-line-selectedUnits {
	font-size:3vh;
	font-family:'Encounter';
}

.exode-collectionlist-filter {
	padding:0.5vh;
	font-size:1vh;
	font-family:'Cascadia';
}

.exode-customsearch {
	background-color:#222222;
	color:cyan;
	opacity:0.8;
	font-family:'Cascadia';
	font-size:1vh;
	padding:0.5vh;
	text-align:left;
}


.exode-customsearch-b {
	display: block;
    border: none;
    background-color: transparent;
    outline: none;
    color: #fff;
    font-size: 18px;
    padding: 16px;
    /* width: 300px; */
    width: 1px;
    box-shadow: inset 0 0 0 2px #caeffa;
    transition: all 0.4s ease-in-out;

    /* optional  */
    border-radius: 5px;
}


.bg-modal {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        opacity: 0.7;
        position: absolute;
        top: 0;
        display: none;
      }
      .modal-content {
        position: relative;
        width: 500px;
        height: 70px;
        background-color: rgba(202, 239, 250, 0.25);
        opacity: 1;
        border-radius: 4px;
      }
      .close {
        position: absolute;
        transform: rotate(45deg);
        top: -4px;
        right: 4px;
        font-size: 24px;
        cursor: pointer;
        color: #caeffa;
      }
      #inputModal {
        /* display: none; */
        border: none;
        background-color: transparent;
        outline: none;
        color: #fff;
        font-size: 18px;
        padding: 16px;
        width: 1px;
        height: 70px;
        box-shadow: inset 0 0 0 2px #caeffa;
        transition: all 0.4s ease-in-out;

        /* optional  */
        border-radius: 5px;
      }
      #inputModal::placeholder {
        color: #caeffa;
        opacity: 0.8;
      }

      #inputModal:focus {
        box-shadow: inset 0 0 0 2px #caeffa, 0 0 20px #caeffa;
        width: 500px;
        height: 70px;
      }

      .popout {
        animation: popout 0.7s linear;
      }
      .disappear {
        animation: disappear 0.3s linear;
      }
      @keyframes popout {
        0% {
          opacity: 0;
          transform: scale(0);
        }
        70% {
          transform: scale(1.3);
        }
        100% {
          opacity: 1;
          transform: scale(1);
        }
      }
      @keyframes disappear {
        0% {
          opacity: 1;
          transform: scale(1);
        }
        100% {
          opacity: 0;
          transform: scale(0);
        }
      }



      .input-forms {
        margin-bottom: 50px;
      }
      .search-btn {
        background-color: #caeffa;
        border: none;
        padding: 14px 23px;

        /* optional  */
        border-radius: 5px;
      }

      input[type="search"] {
        display: none;
        border: none;
        background-color: transparent;
        outline: none;
        color: #fff;
        font-size: 18px;
        padding: 16px;
        /* width: 300px; */
        width: 1px;
        box-shadow: inset 0 0 0 2px #caeffa;
        transition: all 0.4s ease-in-out;

        /* optional  */
        border-radius: 5px;
      }

      input[type="search"]::placeholder {
        color: #caeffa;
        opacity: 0.8;
      }

      #inputMin:focus {
        width: 300px;
      }

      #inputLarge:focus {
        /* box-shadow: inset 0 0 0 2px #33ffff, 0 0 20px #33ffff; */
        box-shadow: inset 0 0 0 2px #caeffa, 0 0 20px #caeffa;
        width: 380px;
        height: 70px;
      }