:root{
                  --var-color:  #4840a3;
                  --var-bg: #d8eff7;
                  --var-bg2: #9cbbfc;
                  --var-orange: #f0b733;
              } 
              
              body,
              h1,
              h2,
              h3,
              h4,
              h5,
              h6{font-family: "Urbanist", sans-serif;}
              
              body{
                  
              }
              
              .all{max-width: 760px; margin: 0 auto; padding-bottom: 80px}
              .elipse{white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;}
              .elipse-2{display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
              .elipse-3{display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
              .overflow{overflow: hidden;}
              a{text-decoration: none;}
              .cover{object-fit:cover}
              .uppr{text-transform: uppercase;}
              .cpt{text-transform: capitalize;}
              .padding{padding: 0!important;}
              .w3-padding-4{padding-top:4px !important; padding-bottom:4px !important}
              .w3-padding-12{padding-top:12px !important; padding-bottom:12px !important}
              .w3-padding-8{padding-top:8px !important; padding-bottom:8px !important}
              .w3-padding-6{padding-top:6px !important; padding-bottom:6px !important}
              .w3-padding-2{padding-top:2px !important; padding-bottom:2px !important}
              .w3-container-small{padding-left:8px !important; padding-right: 8px !important;}
              .w3-transparent, .w3-hover-transparent:hover{
                  background-color: transparent !important;
              }
              .margin{margin: 0!important;}
              .b-100{font-weight: 100;}
              .b-200{font-weight: 200;}
              .b-300{font-weight: 300;}
              .b-400{font-weight: 400;}
              .b-500{font-weight: 500;}
              .b-600{font-weight: 600;}
              .b-700{font-weight: 700;}
              .b-800{font-weight: 800;}
              .b-900{font-weight: 900;}
              .theme, .t-hover:hover{background-color: #F759F4; color: #fff}
              .color, .c-hover:hover, footer a:hover, 
              footer a.active{color: #F759F4 !important}
              .border{border-color: #F759F4 !important;}
              .bg{background-color: #FAE7FA;}
              .bg2{background-color: var(--var-bg2);}
              .t-gray{color: #626466 !important}
              .purple{background-color: #9031e9; color:#fff}
              .p-color{color: #9031e9 !important}
              .error{
                  color: var(--var-orange);
              }
              
              /* start page */
              .start img{
                  width: 100%;
              }
           
              header .w3-button:hover{
                   background-color: #fff !important 
               } 
              .dots{
                  display: inline-block;
                  background-color: #F759F4;    
                  width: 40px;
                  padding: 6px;
                  border-radius: 8px;
                  position: relative;
              }
              
              /* lost password */
              .menu{
                  padding: 16px;
                  font-size: 24px;
                  font-weight: 600;
              
              }
              
              .menu::after{
                  content: "Enter your email that you was used to creat your account!";
                  display: block;
                  font-size: 15px;
                  font-weight: 400;
                  color:#626466
              }
              
              .list{
                  padding: 8px 16px;
                  color: green
              }
              
              .list form{
                  color:#333;
                  text-transform: uppercase;
                  padding: 8px 0;
                  font-weight: 600;
              }
              
              .list input[type='text']{
                  width: 100%;
                  padding: 8px 16px;
                  border-radius: 20px;
                  background-color: #efefef;
                  border: none;
                  font-weight: 400;
              }
              
              .list input[type='submit']{
                  width: 100%;
                  margin:16px 0;
                  background-color: #F759F4;
                  color: #fff;
                  font-weight: 600;
                  border: none;
                  border-radius: 20px;
                  padding: 8px 16px;
                  cursor: pointer;
              }
              
              font{
                  display: block;
                  padding: 8px 16px;
              }
              
              /* matchs */
              .match,
              .match2{
                  overflow-y: scroll;
                  width: 100%;
              }
              .match a{
                  width: 200px;
                  height: 280px;
                  margin-right: 16px;
              }
              
              .match img{
                  width: 100%;
                  height: 100%;
              }
              
              .match .w3-display-bottomleft{
                  background: linear-gradient(transparent, #9031e9);
                  padding-top: 48px;
                  padding-bottom: 16px;
              }
              
              .match2 a{
                  width: 140px;
              }
              
              .match2 img{
                  width: 100%;
                  height: 200px;
              }
              
              /* footer */
              footer a{
                  padding: 16px 0;
              }
            
              footer{
                padding-bottom: 36px !important 
             } 
              
              /* depoiments */
              .depo{
                  margin: 32px 0 32px 16px;
                  border-radius: 0 32px 32px 32px;
                  background: linear-gradient(to bottom right, #F759F4, #FAE7FA);
              }
              .depo img{
                  width: 70px;
                  height: 70px;
                  border: 2px solid #F759F4;
                  padding: 4px;
                  margin: -32px 8px 6px -32px
              }
              
              /* users */
              .users img{
                  width: 100%;
                  height: 160px;
              }
              
              .menu2{
                  min-width: 120px;
                  margin-top: 0px;
                  margin-right: 54px;
              }
              
              .menu2 li{
                  border-color: #efefef !important;
              }
      
              .menu2 li a:hover{color: #F759F4} 
              
              .menu2 li i{
                  width: 20px;
                  display: inline-block;
              }
              
              /* profile */
              .profile img{
                  width: 100%;
                  height: 240px;
              }
              
              .acts span{
                  display: inline-block;
                  padding: 6px 16px;
                  border: 1px solid #ccc;
                  border-radius: 32px;
                  margin-right: 4px;
              }
              
              /* photos */
              .photos a{
                  height: 200px;
                  margin-bottom: 16px;
              }
              
              .photos a.bg{
                  border: 3px dotted #9031e9
              }
              
              .photos a.bg i{
                  color:#9031e9
              }
       
             .photos a img{
                  width:100%;
                  height:100%
             } 
              
              .photo{
                  height:220px; background-color: #333;
              }
              
              .photo img{
                  height: 100%;
                  max-width: 100%;
              }
              
              /* settings */
              .settings a{
                  display: block;
                  background-color: #F5F5F5;
                  border-radius: 16px;
                  padding: 4px 6px;
                  margin: 8px 0;
                  font-size: 17px;
              }
              
              .settings a:hover{
                  background-color: #9031e9;
                  color: #fff
              }
              
              .settings a i{
                  display: inline-block;
                  font-size: 18px;
                  padding: 6px 12px;
                  background-color: #E7E6F4;
                  border-radius: 12px;
                  color: #9031e9;
                  margin-right: 16px;
              }
              
              .settings a i.fi-bs-angle-right{
                  float: right;
                  color:#626466 !important;
                  background-color: transparent !important;
                  margin: 0;
              }
              
              .settings a:last-child i{
                  background-color: #FAE7FA;
                  color:#F759F4
              }
              
              /* edit profile */
              .edit label{
                  text-transform: uppercase;
                  font-weight: 600;
                  margin-top: 16px;
                  display: block;
              }
              
              .edit input:not([type='submit']),
              .edit select{
                  border: none;
                  width: 100%;
                  padding: 8px 0;
                  background-color: transparent;
                  font-weight: 600;
              }
              
              /* change password */
              .chpass::before{
                  content: "Change Password";
                  display: block;
                  padding: 16px;
                  border-bottom: 1px solid #efefef;
                  font-size: 18px;
                  font-weight: 600;
              }
              
              .chpass form{
                  text-transform: uppercase;
                  font-weight: 600;
                  padding: 16px
              }
              
              .chpass input{
                  width: 100%;
                  border: none;
                  border-radius: 16px;
                  padding:8px 16px;
                  background-color: #efefef;
                  margin-bottom: 16px;
                  font-weight: 400;
              }
              
              .chpass input[type='submit'],
              .upload input[type="submit"] {
                  background-color: #F759F4;
                  color: #fff;
                  font-weight: 600;
              }
              
              .chpass .error{
                  padding: 8px 16px;
              }
              
              /* upload */
              .upload label{
                  border: 2px dotted #9031e9;
                  cursor: pointer;
              }
              
              #image-preview img{
                  max-width: 100%;
                  height: 180px;
              }
              
              .upload input{
                  width: 100%;
                  padding: 8px 16px;
                  border: none;
                  border-radius: 16px;
                  cursor: pointer;
                  font-weight: 600 !important;
              }
              
              /* user */
              .use img{
                  width: 120px;
                  height: 120px;
                  margin: 8px auto;
                  display: block;
                  border: 2px dotted #9031e9;
                  padding: 4px;
              }
              
              /* chat list */
              .chat, 
              .select{
                  padding: 4px 16px 4px 4px;
                  border-radius: 60px;
                  margin: 8px 0;
              }
              .chat .w3-cell:first-child,
              .select .w3-cell:first-child{
                  width: 76px !important;
              }
              .chat img,
              .select img{
                  width: 60px;
                  height: 60px;
              }
              
              .chat .w3-cell:last-child{
                  width: 68px !important;
              }
              
              .select .w3-button{
                  border: 2px solid #9031e9;
              }
              
              .select .w3-button:hover{
                  background-color: #9031e9 !important;
                  color: #fff !important
              }
              
              /* message */
              header font{
                  display: inline-block !important;
                  border-radius: 16px;
                  font-size: 12px;
                  padding: 2px 16px;
              }
              
              header font[color="red"]{
                  background-color: #F9E7F9;
                  color:#F759F4 !important
              }
              
              header font[color="red"]::after{
                  content: "line";
              }
              
              
              header font[color="green"]{
                  background-color: #d3f7ec;
                  color:#0d8f23 !important
              }
              
              header font[color="green"]::after{
                  content: "line";
              }
              
              .msg{
                  display: inline-block;
              }             .msg-form{margin-bottom:104px}              .msg-form input:focus{
outline: none;
              }
              
              .ok{
                  font-weight: 600;
                  padding: 16px;
                  border-bottom: 1px solid #efefef;
              }
              
              .ok + form{
                  display: none;
              }