input.button-add {
    background-image: url(icons/add.png); /* 16px x 16px */
    background-color: transparent; /* make the button transparent */
    background-repeat: no-repeat; /* make the background image appear only once */
    background-position: 0px 0px; /* equivalent to 'top left' */
    border: none; /* assuming we don't want any borders */
    cursor: pointer; /* make the cursor like hovering over an <a> element */
    height: 16px; /* make this the size of your image */
    padding-left: 26px; /* make text start to the right of the image */
    vertical-align: middle; /* align the text vertically centered */
    height: 22px;
    font-size: smaller;
}


input.button-wish {
    background-image: url(icons/heart.png); /* 16px x 16px */
    background-color: transparent; /* make the button transparent */
    background-repeat: no-repeat; /* make the background image appear only once */
    background-position: 0px 0px; /* equivalent to 'top left' */
    border: none; /* assuming we don't want any borders */
    cursor: pointer; /* make the cursor like hovering over an <a> element */
    height: 16px; /* make this the size of your image */
    padding-left: 26px; /* make text start to the right of the image */
    vertical-align: middle; /* align the text vertically centered */
    height: 22px;
    font-size: smaller;
}

input.button-score {
    background-image: url(icons/play.png); /* 16px x 16px */
    background-color: transparent; /* make the button transparent */
    background-repeat: no-repeat; /* make the background image appear only once */
    background-position: 0px 0px; /* equivalent to 'top left' */
    border: none; /* assuming we don't want any borders */
    cursor: pointer; /* make the cursor like hovering over an <a> element */
    height: 16px; /* make this the size of your image */
    padding-left: 26px; /* make text start to the right of the image */
    vertical-align: middle; /* align the text vertically centered */
    height: 22px;
    font-size: smaller;
}

.ui-menu img {
    width: 40px;
    height: 40px;
}

.ui-menu li span {
    font-size: 1em;
    padding: 0 0 10px 10px;
    margin: 0 0 10px 0 !important;
    white-space: nowrap;
}

.ui-autocomplete {
    height: 600px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.imagebox {
    /*width: 30%;*/
    float: left;
    height: 300px;
    position: relative;
}

.avatar-initials {
    /*width: 40px !important;
			height: 30px !important;*/
    font-size: 1.0em !important;
}

.daz {
    padding: 10px;
    font-weight: 700;
}

.mb-5 {
    margin-bottom: 0.5rem !important;
}

.imagebox img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    overflow: hidden;
}

.textbox-cont {
    width: 68%;
    /*height: 300px;*/
    float: right;
    position: relative;
    overflow: hidden;
}

.textbox {
    /* background-color: #666;*/
    /*color: #fff;*/
    /*		position: absolute;
			text-align: center;
			width: 100%;
			padding: 5px;
			top: 50%;
			transform: translateY(-50%);*/
    padding: 10px;
}

@media only screen and (max-width: 700px) {
    .imagebox,
    .textbox-cont {
        width: 100%;
        /*max-height: 350px;*/
    }

    .searchCriteria {
        min-width: 300px !important;
    }

    .ui-autocomplete {
        height: 400px;
        overflow-y: scroll;
        overflow-x: hidden;
    }
}

@media only screen and (min-width: 700px) {
    .text-muted {
        font-size: medium;
    }
}

    @media only screen and (max-width: 340px) {
        .searchCriteria {
            min-width: 280px !important;
        }
    }

    .theStick {
        top: 0;
    }

    .navbar {
        position: sticky !important;
        display: flex;
        z-index: 9;
    }

    .badgeNumber {
        margin: -9px;
        color: black;
        vertical-align: bottom;
        border-radius: unset;
        padding: unset;
        position: absolute;
        top: 40px;
    }


    /*.alinkCenter {
    width: 65px;
    margin: 0 auto;
    text-align: center;
    display: -webkit-box;
    -webkit-box-align: center;
}*/

    .gameplay {
        max-width: 600px;
        background-color: transparent;
        background-image: -webkit-linear-gradient(rgba(0,0,0,.1) 5%,transparent);
        background-image: linear-gradient(rgba(0,0,0,.1) 5%,transparent);
        margin: 15px 0 10px;
        border-top: 1px solid hsla(0,0%,100%,.15);
    }

    .gameplay-item {
        list-style: none;
        margin: 0;
        padding: 0;
        box-flex: 1;
        flex: 1;
    }

    .container2 {
        display: flex;
    }

    .ps-2 {
        min-width: 140px !important;
    }

    .column-1 {
        flex-shrink: 0; /* shrinks to 0 to apply 70% width*/
        flex-basis: 10%; /* sets initial width to 70% */
    }

    /* .box {

			padding: 10px;
			border-radius: 12px;

		}*/
    @media only screen and (max-width: 400px) {
        .container2 {
            /* it place the items in vertical direction */
            flex-direction: column;
        }

        .box {
            margin: 0 0 1rem;
        }

        .textbox-cont {
            width: 100%;
            /*max-height: 440px;*/
            /*height: 400px;*/
        }

        .fw-semi-bold {
            font-size: 1.0em !important;
        }

        .avatar-initials {
            width: 40px !important;
            height: 40px !important;
            font-size: 1.0em !important;
        }
    }


    .swal2-title {
        font-size: 1.0em;
    }

    .swal2-input {
        padding: 0 .75em;
        font-size: 0.7em;
        display: block;
        margin: 0.4em 0.2em 0;
    }

    .login-form {
        font-size: small !important;
        display: flex;
    }

    .swal2-popup {
        /*width: 17em;*/
    }

    .swal2-validation-message {
        font-size: 0.7em !important;
    }