/*
This file is part of the Meeds project (https://meeds.io/).
Copyright (C) 2020 Meeds Association
contact@meeds.io
This program is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License as published by the Free Software Foundation; either
version 3 of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
Lesser General Public License for more details.
You should have received a copy of the GNU Lesser General Public License
along with this program; if not, write to the Free Software Foundation,
Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
*/
//
// UIUserSelector
// --------------------------------------------------
.uiUserSelector {
	.uiSearch {
		margin: 15px 0;
		input[type="text"] {
			margin: 0 5px 0 0 ~'; /** orientation=lt */ ';
			margin: 0 0 0 5px ~'; /** orientation=rt */ ';
		}
		.actionIcon {
			vertical-align: middle;
		}
	}

	.searchByGroup + .searchByUser {
		float: left ~'; /** orientation=lt */ ';
		float: right ~'; /** orientation=rt */ ';
    margin-left: 12px ~'; /** orientation=lt */ ';
    margin-right: 12px ~'; /** orientation=rt */ ';
	}
	.searchByUser{
		.inputLarge, .inputXLarge {
			position: relative;
      vertical-align: middle;
		}
		.btnSearchUser{
			position: absolute;
			right: 13px ~'; /** orientation=lt */ ';
			left: 13px ~'; /** orientation=rt */ ';
			top: -1px;
		}
	}
}

.searchByUser  {
  .inputLarge, .inputXLarge {
    vertical-align: middle;
  }
}

@media(max-width: 1024px) {

    .uiUserSelector .searchByGroup + .searchByUser,.uiSearch  .searchByGroup {
        float: none;
        margin-left: 0px ~'; /** orientation=lt */ ';
        margin-right: 0px ~'; /** orientation=rt */ ';
        display: block;
        input ,select{
            width: 100%;
            margin: 0 0 15px 0!important;
        }
    }

    .uiSearch{
        #filter {
            margin-top: 15px;
        }
        .searchByGroup,.searchByUser {
            position: relative;
            span {
                position: relative;
                display: block;  width: 100%;
            }
            input {
                padding-right: 30px ~'; /** orientation=lt */ ';
                padding-left: 30px ~'; /** orientation=rt */ ';
            }
            .inputLarge + .actionIcon, .inputXLarge  + .actionIcon {
                position: absolute;
                right: 2px ~'; /** orientation=lt */ ';
                left: 2px ~'; /** orientation=rt */ ';
                top: 0px;
            }
            .actionIcon,.btnSearchUser {
                position: absolute;
                right: 2px ~'; /** orientation=lt */ ';
                left: 2px ~'; /** orientation=rt */ ';
                top: 4px;
            }
            .btnSearchUser {
                right: 5px ~'; /** orientation=lt */ ';
                left: 5px ~'; /** orientation=rt */ ';
            }
        }
        .searchByUser {
            > span {
                float: none;
                display: block;
                input ,select{
                    width: 100%!important;
                }
            }
        }
    }

}