.rating {
    --dir: right;
    --fill: gold;
    --fillbg: rgba(100, 100, 100, 0.15);
    --heart: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21.328l-1.453-1.313q-2.484-2.25-3.609-3.328t-2.508-2.672-1.898-2.883-0.516-2.648q0-2.297 1.57-3.891t3.914-1.594q2.719 0 4.5 2.109 1.781-2.109 4.5-2.109 2.344 0 3.914 1.594t1.57 3.891q0 1.828-1.219 3.797t-2.648 3.422-4.664 4.359z"/></svg>');
    --star: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.25l-6.188 3.75 1.641-7.031-5.438-4.734 7.172-0.609 2.813-6.609 2.813 6.609 7.172 0.609-5.438 4.734 1.641 7.031z"/></svg>');
    --stars: 5;
    --starsize: 1.3rem;
    --symbol: var(--star);
    --value: 5;
    --w: calc(var(--stars) * var(--starsize));
    --x: calc(100% * (var(--value) / var(--stars)));
    block-size: var(--starsize);
    inline-size: var(--w);
    position: relative;
    touch-action: manipulation;
    margin-top: 3px;
    margin-bottom: 2px;
    -webkit-appearance: none;
}
[dir="rtl"] .rating {
    --dir: left;
}
.rating::-moz-range-track {
    background: linear-gradient(to var(--dir), var(--fill) 0 var(--x), var(--fillbg) 0 var(--x));
    block-size: 100%;
    mask: repeat left center/var(--starsize) var(--symbol);
}
.rating::-webkit-slider-runnable-track {
    background: linear-gradient(to var(--dir), var(--fill) 0 var(--x), var(--fillbg) 0 var(--x));
    block-size: 100%;
    mask: repeat left center/var(--starsize) var(--symbol);
    -webkit-mask: repeat left center/var(--starsize) var(--symbol);
}
.rating::-moz-range-thumb {
    height: var(--starsize);
    opacity: 0;
    width: var(--starsize);
}
.rating::-webkit-slider-thumb {
    height: var(--starsize);
    opacity: 0;
    width: var(--starsize);
    -webkit-appearance: none;
}
.rating, .rating-label {
    display: block;
    font-family: ui-sans-serif, system-ui, sans-serif;
}
.rating-label {
    margin-block-end: 1rem;
}

/* NO JS */
.rating--nojs::-moz-range-track {
    background: var(--fillbg);
}
.rating--nojs::-moz-range-progress {
    background: var(--fill);
    block-size: 100%;
    mask: repeat left center/var(--starsize) var(--star);
}
.rating--nojs::-webkit-slider-runnable-track {
    background: var(--fillbg);
}
.rating--nojs::-webkit-slider-thumb {
    background-color: var(--fill);
    box-shadow: calc(0rem - var(--w)) 0 0 var(--w) var(--fill);
    opacity: 1;
    width: 1px;
}
[dir="rtl"] .rating--nojs::-webkit-slider-thumb {
    box-shadow: var(--w) 0 0 var(--w) var(--fill);
}









.rating-input {
    --dir: right;
    --fill: gold;
    --fillbg: rgba(100, 100, 100, 0.15);
    --heart: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21.328l-1.453-1.313q-2.484-2.25-3.609-3.328t-2.508-2.672-1.898-2.883-0.516-2.648q0-2.297 1.57-3.891t3.914-1.594q2.719 0 4.5 2.109 1.781-2.109 4.5-2.109 2.344 0 3.914 1.594t1.57 3.891q0 1.828-1.219 3.797t-2.648 3.422-4.664 4.359z"/></svg>');
    --star: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.25l-6.188 3.75 1.641-7.031-5.438-4.734 7.172-0.609 2.813-6.609 2.813 6.609 7.172 0.609-5.438 4.734 1.641 7.031z"/></svg>');
    --stars: 5;
    --starsize: 2rem;
    --symbol: var(--star);
    --value: 1;
    --w: calc(var(--stars) * var(--starsize));
    --x: calc(100% * (var(--value) / var(--stars)));
    block-size: var(--starsize);
    inline-size: var(--w);
    position: relative;
    touch-action: manipulation;
    -webkit-appearance: none;
}
[dir="rtl"] .rating-input {
    --dir: left;
}
.rating-input::-moz-range-track {
    background: linear-gradient(to var(--dir), var(--fill) 0 var(--x), var(--fillbg) 0 var(--x));
    block-size: 100%;
    mask: repeat left center/var(--starsize) var(--symbol);
}
.rating-input::-webkit-slider-runnable-track {
    background: linear-gradient(to var(--dir), var(--fill) 0 var(--x), var(--fillbg) 0 var(--x));
    block-size: 100%;
    mask: repeat left center/var(--starsize) var(--symbol);
    -webkit-mask: repeat left center/var(--starsize) var(--symbol);
}
.rating-input::-moz-range-thumb {
    height: var(--starsize);
    opacity: 0;
    width: var(--starsize);
}
.rating-input::-webkit-slider-thumb {
    height: var(--starsize);
    opacity: 0;
    width: var(--starsize);
    -webkit-appearance: none;
}
.rating-input, .rating-label {
    display: inline;
    font-family: ui-sans-serif, system-ui, sans-serif;
}
.rating-label {
    margin-block-end: 1rem;
}

/* NO JS */
.rating--nojs::-moz-range-track {
    background: var(--fillbg);
}
.rating--nojs::-moz-range-progress {
    background: var(--fill);
    block-size: 100%;
    mask: repeat left center/var(--starsize) var(--star);
}
.rating--nojs::-webkit-slider-runnable-track {
    background: var(--fillbg);
}
.rating--nojs::-webkit-slider-thumb {
    background-color: var(--fill);
    box-shadow: calc(0rem - var(--w)) 0 0 var(--w) var(--fill);
    opacity: 1;
    width: 1px;
}
[dir="rtl"] .rating--nojs::-webkit-slider-thumb {
    box-shadow: var(--w) 0 0 var(--w) var(--fill);
}






/* TODO :: This profile image Css */
.dt-img-profile {
    width: 32px;
    height: 32px;
    border-radius: 10%;
    /*border: 1px solid #4d4d4d;*/
}

.update-profile-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}


.update-profile-container .profile-container {
}
.update-profile-container .profile-container img {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    border: 2px solid #f8aa4a;
}
.update-profile-container button {
    margin-top: 30px;
}
#file-profile {
    display: none;
}


.input_search{
    border: aliceblue;
    border-bottom: 1px solid #2c303b;
    width: 200px;
    margin-left : 10px;
    display: none;
}

.searchBox{
    position: absolute; left:17%; width:200px; height:200px;
    /*
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-color:grey;
    border-style: solid;
    border-width: 0 1px 1px 1px;
     */
    z-index:10;
    display: none;
}


#clickProfileHeaderResult{
    position: absolute;  height:200px;
    /*
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-color:grey;
    border-style: solid;
    border-width: 0 1px 1px 1px;
     */
    width: 100%;
    z-index:10;
    min-width : 110px;
    display: none;
    white-space : initial;
}

.listItemsearch{
    width: 100%;
}

.listitemimg{
    width:20%;
}









.btn-facebook {
    color: #fff;
    background-color: #4C67A1;
}
.btn-facebook:hover {
    color: #fff;
    background-color: #405D9B;
}
.btn-facebook:focus {
    color: #fff;
}



.btn-twitter {
    color: #fff;
    background-color:  #1DA1F2;
}
.btn-twitter:hover {
    color: #fff;
    background-color: #057dc2;
}
.btn-twitter:focus {
    color: #fff;
}


.btn-linkedin {
    color: #fff;
    background-color:   #2867B2;
}
.btn-linkedin:hover {
    color: #fff;
    background-color: #184983;
}
.btn-linkedin:focus {
    color: #fff;
}




.img-frame-home {
    height: 80px;      /* Equals maximum image height */
    line-height: 25px;
    text-align: center;
    margin: 1em 0;
}

.img-frame-home-image{
    vertical-align: middle;
    height: 80px;
    width: 80px;
    border-radius: 50%;
}