*{
    margin:0;
    padding: 0;
    font-family: Arial;
}
*:not(input) {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}
html{
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}
body{
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background:#F6F3F0;
}
.header{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    background:#FF8204;
    overflow: hidden;
}

.header::after{
    background: rgba(255,255,255,0.2);
    width: 200px;
    height: 100%;
    content: "";
    position: absolute;
    left: -141px;
    rotate: 45deg;
    display: none;
}
.header::before{
    background: rgba(255,255,255,0.2);
    width: 200px;
    height: 100%;
    content: "";
    position: absolute;
    right: -141px;
    rotate: 45deg;
    display: none;
}
.header img{
    max-width: 400px;
    //width: calc( 100vw - 20vw - 200px);
    width: calc( 80% );
}
.main-content{
    height: calc(100vh - 200px);
    overflow: auto;
    z-index: 1;
    position: relative;
}
@media only screen and (max-width: 800px) {
    .header {
        height: 100px;
    }
    .main-content{
        height: calc(100vh - 100px);
    }
}
.stand-group {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.stands-cont {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
.stand-item {
    margin: 20px;
    width: 250px;
    text-align: center;
    padding: 10px;
    background: white;
    box-shadow: inset 0px 0px 0px 1px black;
    border-radius: 5px;
    cursor:pointer;
    box-sizing: border-box;
    position: relative;
}
.stand-item.selected{
    box-shadow: inset 0px 0px 0px 3px black;
}
.stand-item.selected::after{
    content: "";
    font-family: "Bootstrap-icons";
    border-radius: 50%;
    background: green;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-check' viewBox='0 0 16 16'><path d='M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z'/> </svg>");
    background-size: contain;
    position: absolute;
    top: -15px;
    right: -15px;
    width: 30px;
    height: 30px;
}
.chooseStandBtn{
    width: 90%;
    text-align: center;
    background: #FF8204;
    color: white;
    padding: 10px;
    margin: 30px;
    margin:30px auto;
    display: none;
}
.saveBtn{
    width: 90%;
    text-align: center;
    background: #FF8204;
    color: white;
    padding: 10px;
    margin: 30px;
    margin:30px auto;
    border-radius: 10px;
}

/*search*/
.search-group{
    padding: 20px;
    width: 100vw;
    height: calc(100vh - 200px);
    background:#F6F3F0;
}
.search-container{
    background: white;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
}
.search-header{
    background: #FF8204;
    color: white;
    font-weight: 600;
    position: relative;
    text-align: center;
    padding: 10px;
    font-size: 18px;
}
.bckToSelect{
    position: absolute;
    right: 10px;
    top: 10px;

}

.nameinput {
    width: calc(100% - 20px);
    margin: 10px;
    background:#F6F3F0;
    color: black;
    border: none;
    outline: none;
    padding: 15px 35px;
    border-radius: 10px;
    position: relative;
    font-size: 18px;
}
.search-bar{
    position: relative;
}
.search-bar::before{
    content: "";
    font-family: "Bootstrap-icons";
    border-radius: 50%;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d' class='bi bi-search' viewBox='0 0 16 16'> <path d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/> </svg>");
    background-size: contain;
    position: absolute;
    top: 22.5px;
    left: 15px;
    width: 30px;
    height: 30px;
    z-index: 2;
}
.search-bar::after{
    content: "";
    font-family: "Bootstrap-icons";
    background: #6c757d;
    border-radius: 50%;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-x' viewBox='0 0 16 16'><path d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/></svg>");
    background-size: contain;
    position: absolute;
    top: 22.5px;
    right: 15px;
    width: 30px;
    height: 30px;
    z-index: 2;
}
.search-bar.empty::after{
    display: none;
}
.clearText{
    width: 50px;
    height: 50px;
    position: absolute;
    right: 7px;
    top: 12px;
    z-index: 3;
}

.search-result{
    padding: 10px;
    font-size: 18px;
}
.search-item{
    padding-left: 50px;
    margin:10px;
    border-bottom: 1px solid lightgray;
    height: 56px;
    position: relative;
    cursor: pointer;
}
.search-item::before{
    content: "";
    font-family: "Bootstrap-icons";
    border-radius: 50%;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-person' viewBox='0 0 16 16'><path d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6m2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0m4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4m-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10s-3.516.68-4.168 1.332c-.678.678-.83 1.418-.832 1.664z'/></svg>");
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0px;
    width: 40px;
    height: 40px;
    z-index: 2;
}
.search-item::after{
    content: "";
    font-family: "Bootstrap-icons";
    border-radius: 50%;
    background-image: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-chevron-right' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/></svg>");
    background-size: contain;
    position: absolute;
    top: 5px;
    right: 5px;
    width: 30px;
    height: 30px;
    z-index: 2;
}

/*user form*/
.user-group{
    padding: 10px;
    font-size: 18px;
}
.accordion-item{
    border:2px solid black!important;
    border-radius: 10px!important;
    overflow: hidden;
    margin-top: 5px;
}
.accordion-button:focus{
    border: none;
    box-shadow: none;
}
.accordion-button:not(.collapsed) ,.accordion-button{
    background-color: #FF8204;
    color: white;
}
.accordion-button:not(.collapsed)::after , .accordion-button::after{
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion-button{
    font-weight: bold;
}
.accordion-item:not(:first-of-type){
    border-top: unset;
}

.contact-item {
    display: flex;
    flex-direction: column;
    background: #e3e3e3;
    padding: 10px;
    font-size: 18px;
    border-radius: 10px;
    margin:5px;
}
.contact-item label{
    color: #268bd2;
    font-weight: bold;
}
.contact-item input{
    margin-top: 5px;
    background: none;
    border: none;
    outline: none;
}

.followupModal,.productsModal,.survey-modal{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    padding: 15px;
    z-index: 10000;
    display: none;
}
.modal-inner{
    background: white;
    border-radius: 10px;
    height: calc(100vh - 240px);
    overflow: auto;
}
@media only screen and (max-width: 800px) {
    .modal-inner{
        height: calc(100vh - 140px);
    }
}
.modal-header{
    background: #FF8204;
    color:white;
    font-weight: bold;
    position: relative;
    text-align: center;
    display: flex;
    justify-content: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    position: sticky;
    top: 0;
    z-index: 3;
}
.modal-body{
    overflow: hidden;
    padding: 0.5rem;
}
.modal-close{
    position: absolute;
    top: 15px;
    right: 10px;
    color:white;
    font-weight: bold;
}
.modal-item{
    font-weight: bold;
    padding: 5px;
    padding-left: 30px;
    border-bottom: 1px solid lightgray;
    position: relative;
}
.modal-item::before{
    content: "";
    font-family: "Bootstrap-icons";
    border-radius: 50%;
    background-image: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='green' class='bi bi-plus-circle' viewBox='0 0 16 16'><path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/><path d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4'/></svg>");
    background-size: contain;
    position: absolute;
    top: 10px;
    left: 5px;
    width: 15px;
    height: 15px;
    z-index: 2;
}

.addMore{
    font-weight: bold;
    padding: 5px;
    padding-left: 30px;
    border-bottom: 1px solid lightgray;
    position: relative;
}
.addMore::before{
    content: "";
    font-family: "Bootstrap-icons";
    border-radius: 50%;
    background-image: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='green' class='bi bi-plus-circle' viewBox='0 0 16 16'><path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/><path d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4'/></svg>");
    background-size: contain;
    position: absolute;
    top: 10px;
    left: 5px;
    width: 15px;
    height: 15px;
    z-index: 2;
}
.picked-item{
    font-weight: bold;
    padding: 5px;
    padding-left: 30px;
    border-bottom: 1px solid lightgray;
    position: relative;
}
.picked-item::before{
    content: "";
    font-family: "Bootstrap-icons";
    border-radius: 50%;
    background-image: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='red' class='bi bi-dash-circle' viewBox='0 0 16 16'><path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/><path d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8'/></svg>");
    background-size: contain;
    position: absolute;
    top: 10px;
    left: 5px;
    width: 15px;
    height: 15px;
    z-index: 2;
}
.noteText {
    width: 100%;
    border: none;
    outline: none;
    background: #e3e3e3;
    padding: 3px;
    margin-top: 5px;
    border-radius: 10px;
}


/*survey*/
.title{
    font-size: 24px;
    font-weight: bold;
    text-align: center;
}
.question-item{
    margin:10px;
}
.q-title{
    font-weight: bold;
    font-size: 18px;
}
.answers{
    display: flex;
    flex-wrap: wrap;
}
.answer-check{
    margin:10px;
    width: calc( 50% - 20px);
    display: flex;
    align-items: center;
    line-height: 1.2;
}
.answer-check input{
    margin-right: 5px;
}
.answer-check.active label{
    color:#FF8204;
}
.answers input[type=text]{
    width: 100%;
    padding: 5px;
    background: #e3e3e3;
    border: 1px solid black;
    border-radius: 10px;
    outline: none;
}
.survey-item{
    padding: 5px;
    padding-left: 30px;
    border-bottom: 1px solid lightgray;
    position: relative;
}
.survey-item::before{
    content: "";
    font-family: "Bootstrap-icons";
    background-image: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-file-text' viewBox='0 0 16 16'><path d='M5 4a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm-.5 2.5A.5.5 0 0 1 5 6h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5M5 8a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1z'/><path d='M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm10-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1'/></svg>");
    background-size: contain;
    position: absolute;
    top: 10px;
    left: 5px;
    width: 15px;
    height: 15px;
    z-index: 2;
}