.portalsearch{  
	position: 	relative;
	padding: 	var(--section-padding) 0;
/*	overflow:   hidden;*/
}
/* --------- */
.portalsearch .bkgplusses{
	position: 	absolute;
    top: 		-70%;
    right: 		0;
    width: 		30%;
    z-index: 	1;
}
/* --------- */
.portalsearch__textcontainer{
    width:          90%;
    max-width:      1400px;
    margin:         0 auto;
    position:       relative;
    z-index:        1;
    display:                grid;
    grid-template-columns:  17% 1fr;
    z-index:                2;
}
.portalsearch__textcontainer__subtitle{
    font-size:          12px;
    text-transform:     uppercase;
    font-weight:        300;
    padding-right:      20%;
}
.portalsearch__textcontainer__copy h2{ 
    text-transform: uppercase;
    font-size:      65px;
    line-height:    1.1;
    margin:         -20px 0 0 0;`
}
/*-------------------*/
.portalsearch__textcontainer__copy__search{ 
    margin-top: 1.5rem;
    position:   relative;
}
.search__icon{
    background-color:           transparent;
    border-top-left-radius:     999em;
    border-bottom-left-radius:  999em;
    position:                   absolute;
    top:                        1px;
    left:                       1px;
    height:                     65px;
    width:                      70px;
    display:                    flex;
    align-items:                center;
    justify-content:            center;
    &.focus{ background-color: var(--darkgreen); }
    &.focus svg{ fill: white; }
}
.search__icon svg{
    width:      20px;
    height:     20.74px;
}
#portal-search{
	width: 			100%;
	padding: 		.9rem 2.5rem 1.07rem 75px;
    height:         67px;
	border-radius:	999em;
    outline:        none;
    border:         2px solid #000;
}
#portal-search::placeholder {
  color:    #999;
  opacity:  1; /* Firefox */
}
#portal-search::-ms-input-placeholder { /* Edge 12 -18 */
  color: #999;
}
#portal-search:focus-visible{
    border: 2px solid var(--darkgreen);
/*	outline: 	var(--darkgreen) auto 1px;*/
}
/*---------------------------*/
.portalsearch__listings{ 
    list-style:         none;
    margin:             0;
    padding:            0;
    position:           absolute;
    width:              100%;
    left:               0;
    top:                75px;
    background-color:   white;
    border:             2px solid var(--textcolor);
    border-radius:      10px;
/*    overflow:           hidden;*/
/*    max-height:         364px;*/
}
.portalsearch__listings li{ 
    display:    inline-block;
    width:      100%;
}
.portalsearch__listings__link{
    display:            flex;
    align-items:        center;
    padding:            10px 15px;
    text-decoration:    none;
}
.portalsearch__listings__link__image{
    width:          40px;
    height:         40px;
    margin-right:   15px;
}
.portalsearch__listings__link:hover{
    background-color:   var(--darkgreen);
    color:              white;
}
/*---------------------------*/
/*   MOBILE LAYOUT   */
/*---------------------------*/
@media (max-width: 767px) {
    /*  ------  */
    .portalsearch{ padding: 40px 0; }
    .portalsearch__textcontainer{  grid-template-columns: 1fr; }
    .portalsearch__textcontainer__copy h2{ font-size: 30px; }
    .portalsearch .bkgplusses{
        width: 130%;
        top:   -40%;
    }
    /*  ------  */
}
/* --------------------- */
/* NZEI */
/* --------------------- */
.portalsearch.NZEI{ background-color: var(--nzeibluelightest); }
.portalsearch.NZEI .search__icon.focus{ background-color: var(--nzeiblue); }
.portalsearch.NZEI #portal-search:focus-visible{ border: 2px solid var(--nzeiblue); }
.portalsearch.NZEI .portalsearch__listings__link:hover{
    background-color:   var(--nzeiblue);
    color:              white;
}
/* --------------------- */
/* TEU */
/* --------------------- */
.portalsearch.TEU{ background-color: var(--teu-lightest-yellow); }
.portalsearch.TEU .search__icon.focus{ background-color: var(--teu-orange); }
.portalsearch.TEU #portal-search:focus-visible{ border: 2px solid var(--teu-orange); }
.portalsearch.TEU .portalsearch__listings__link:hover{
    background-color:   var(--teu-orange);
    color:              white;
}
/* --------------------- */
/* NZNO */
/* --------------------- */
.portalsearch.NZNO{ background-color: var(--nzno-lightest-purple); }
.portalsearch.NZNO .search__icon.focus{ background-color: var(--nzno-purple); }
.portalsearch.NZNO #portal-search:focus-visible{ border: 2px solid var(--nzno-purple); }
.portalsearch.NZNO .portalsearch__listings__link:hover{
    background-color:   var(--nzno-purple);
    color:              white;
}
/* --------------------- */
/* PSA */
/* --------------------- */
.portalsearch.PSA{ background: var(--psa-lightest-orange); }
.portalsearch.PSA .search__icon.focus{ background-color: var(--psa-peach); }
.portalsearch.PSA #portal-search:focus-visible{ border: 2px solid var(--psa-peach); }
.portalsearch.PSA .portalsearch__listings__link:hover{
    background-color:   var(--psa-peach);
    color:              white;
}
/* --------------------- */
/* TAXPRO */
/* --------------------- */
.portalsearch.Taxpro{ background: var(--taxpro-lightest-grey); }
.portalsearch.Taxpro .search__icon.focus{ background-color: var(--taxpro-orange); }
.portalsearch.Taxpro #portal-search:focus-visible{ border: 2px solid var(--taxpro-orange); }
.portalsearch.Taxpro .portalsearch__listings__link:hover{
    background-color:   var(--taxpro-orange);
    color:              white;
}
/* --------------------- */
/* UNITE */
/* --------------------- */
.portalsearch.Unite{ background: var(--unite-lightest-red); }
.portalsearch.Unite .search__icon.focus{ background-color: var(--unite-yellow); }
.portalsearch.Unite #portal-search:focus-visible{ border: 2px solid var(--unite-yellow); }
.portalsearch.Unite .portalsearch__listings__link:hover{
    background-color:   var(--unite-yellow);
    color:              var(--textcolor);
}
/* --------------------- */
/* PPTA */
/* --------------------- */
.portalsearch.PPTA{ background: var(--ppta-lightest-blue); }
.portalsearch.PPTA .search__icon.focus{ background-color: var(--ppta-blue); }
.portalsearch.PPTA #portal-search:focus-visible{ border: 2px solid var(--ppta-blue); }
.portalsearch.PPTA .portalsearch__listings__link:hover{
    background-color:   var(--ppta-blue);
    color:              white;
}
