/*------------------------------
       Start Add Font Face
------------------------------*/
@font-face {
    font-family: "IranYekan-BLACK";
    src: url("fonts/woff/iranyekanwebblackfanum.woff") format("woff"),
      url("fonts/svg/iranyekanwebblackfanum.svg") format("svg"),
      url("fonts/ttf/iranyekanwebblackfanum.ttf") format("truetype"),
      url("fonts/eot/iranyekanwebblackfanum.eot") format("embedded-opentype");
}
@font-face {
    font-family: "IranYekan-BOLD";
    src: url("fonts/woff/iranyekanwebboldfanum.woff") format("woff"),
      url("fonts/svg/iranyekanwebboldfanum.svg") format("svg"),
      url("fonts/ttf/iranyekanwebboldfanum.ttf") format("truetype"),
      url("fonts/eot/iranyekanwebboldfanum.eot") format("embedded-opentype");
}
@font-face {
    font-family: "IranYekan-EXBLACK";
    src: url("fonts/woff/iranyekanwebextrablackfanum.woff") format("woff"),
      url("fonts/svg/iranyekanwebextrablackfanum.svg") format("svg"),
      url("fonts/ttf/iranyekanwebextrablackfanum.ttf") format("truetype"),
      url("fonts/eot/iranyekanwebextrablackfanum.eot")
        format("embedded-opentype");
}
@font-face {
    font-family: "IranYekan-EXBOLD";
    src: url("fonts/woff/iranyekanwebextraboldfanum.woff") format("woff"),
      url("fonts/svg/iranyekanwebextraboldfanum.svg") format("svg"),
      url("fonts/ttf/iranyekanwebextraboldfanum.ttf") format("truetype"),
      url("fonts/eot/iranyekanwebextraboldfanum.eot")
        format("embedded-opentype");
}
@font-face {
    font-family: "IranYekan-LIGHT";
    src: url("fonts/woff/iranyekanweblightfanum.woff") format("woff"),
      url("fonts/svg/iranyekanweblightfanum.svg") format("svg"),
      url("fonts/ttf/iranyekanweblightfanum.ttf") format("truetype"),
      url("fonts/eot/iranyekanweblightfanum.eot") format("embedded-opentype");
}
@font-face {
    font-family: "IranYekan-MEDIUM";
    src: url("fonts/woff/iranyekanwebmediumfanum.woff") format("woff"),
      url("fonts/svg/iranyekanwebmediumfanum.svg") format("svg"),
      url("fonts/ttf/iranyekanwebmediumfanum.ttf") format("truetype"),
      url("fonts/eot/iranyekanwebmediumfanum.eot") format("embedded-opentype");
}
@font-face {
    font-family: "IranYekan-REGULAR";
    src: url("fonts/woff/iranyekanwebregularfanum.woff") format("woff"),
      url("fonts/svg/iranyekanwebregularfanum.svg") format("svg"),
      url("fonts/ttf/iranyekanwebregularfanum.ttf") format("truetype"),
      url("fonts/eot/iranyekanwebregularfanum.eot") format("embedded-opentype");
}
@font-face {
    font-family: "IranYekan-THIN";
    src: url("fonts/woff/iranyekanwebthinfanum.woff") format("woff"),
      url("fonts/svg/iranyekanwebthinfanum.svg") format("svg"),
      url("fonts/ttf/iranyekanwebthinfanum.ttf") format("truetype"),
      url("fonts/eot/iranyekanwebthinfanum.eot") format("embedded-opentype");
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    direction: rtl;
}
*:focus {
    outline: none;
}
html {
    font-size: 62.5%;
}
body {
    font-family: IranYekan-MEDIUM, sans-serif;
    color: #2b2e37;
    line-height: 1;
    background-color: rgb(243, 243, 243);
}
a {
    text-decoration: none;
}
ul {
    list-style: none;
}

/*****************************
***** Start Right column *****
*****************************/

.PHTLPR-sections {
    display: grid;
    grid-template-columns: 20% 80% ;
    gap: 25px;
    margin: 2rem 4rem; 
}

.PHTLPR-R-column {
    background-color: #E9E9E9;
    height: 90vh;
    padding: 25px;
    border-radius: 15px;

    display: grid;
    grid-template-columns: 100%;
    align-items: start;

    position: sticky;
    top: 2rem;
}

.PHTLPR-profile {
    display: grid;
    justify-items: center;
}

.PHTLPR-avatar {}
.PHTLPR-avatar img {
    max-width: 100%;
    border-radius: 50%;
    transition: all 0.3s;
}
.PHTLPR-avatar img:hover {
    max-width: 100%;
    border-radius: 40%;
}

.PHTLPR-userdata {
    margin-top: 15px;
}
.PHTLPR-userdata h3 {
    font-family: IranYekan-BOLD;
    text-align: center;
    font-size: 24px;
}
.PHTLPR-userdata h4 {
    font-family: IranYekan-THIN;
    text-align: center;
    font-size: 18px;
    margin-top: 0.5rem;
}
.PHTLPT-links {

}
.PHTLPT-links ul {
    display: grid;
    justify-items: center;
    margin: 1rem 0;
}
.PHTLPT-links ul li {
    padding: 10px 20px;
    display: contents;
}
.PHTLPT-links ul li a {
	background-color: #d2288000;
	padding: 10px 20px;
	width: 100%;
	text-align: center;
	margin-top: 0.5rem;
	border-radius: 5px;
	font-size: 16px;
	font-family: IranYekan-REGULAR;
	color: #d22880;
	border: 2px solid #d22880;
    transition: all 0.3s;
}
.PHTLPT-links ul li a:hover {
	background-color: #d22880;
	padding: 10px 20px;
	width: 100%;
	text-align: center;
	margin-top: 0.5rem;
	border-radius: 15px;
	font-size: 16px;
	font-family: IranYekan-REGULAR;
	color: #fff;
	border: 2px solid #d22880;
}

.PHTLPR-ctas {
    align-self: end;
}
.PHTLPR-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}
.PHTLPR-logout a {
    display: flex;
    gap: 5px;
    padding: 8px 16px;
    border: 2px solid #00000000;
    border-radius: 5px;
    transition: all 0.3s;
    }
.PHTLPR-logout a:hover {
display: flex;
gap: 5px;

border: 2px solid red;
border-radius: 5px;
transition: all 0.3s;
}
.PHTLPR-logout i {
    color: red;
    font-size: 14px;
}
.PHTLPR-logout h5 {
    color: red;
    font-size: 14px;
}

.PHTLPR-helpus a{
    display: flex;
    gap: 5PX;
    transition: all 0.3s;
    color: #2b2e37;

}

.PHTLPR-helpus i, .PHTLPR-helpus h5 {
    color: #2b2e37;
    font-size: 12PX;
}
.PHTLPR-helpus:hover i, 
.PHTLPR-helpus:hover h5 {
    color: #4c4c4f;
}

/****************************
***** Start Left column *****
****************************/
.PHTLPR-L-column {

}

.PHTLPR-dash-header {
    background-color: #e9e9e9;
    padding: 25px;
    border-radius: 15px;
    margin-bottom: 12.5px;
}

.PHTLPR-dash-content {
    background-color: #e9e9e9;
    padding: 25px;
    border-radius: 15px;
}

/*****************************************************
***** END content section & Start "main-profile" *****
*****************************************************/
.PHTLPR-dash-content h2 {
    font-family: IranYekan-BOLD;
    font-size: 24px;
    font-weight: 900;
}
.PHTLPR-dash-content b {
    font-weight: 900;
    color: #d22880;
}

.PHTLPR-infoboxs {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 25px;
    margin-top: 2rem;
}
.PHTLPR-infobox {
    border: 2px solid #d22880;
    border-radius: 8px;
    padding: 3rem 2rem;
    
    transition: all 0.3s;
}
.infobox1 {
    border: 2px solid #d27d28;
}
.infobox2 {
    border: 2px solid #28d255;
}
.infobox3 {
    border: 2px solid #28a5d2;
}
.infobox1:hover {
    background-color:  rgba(210, 125, 40, 0.5);
}
.infobox2:hover {
    background-color:  rgba(40, 210, 85, 0.5);
}
.infobox3:hover {
    background-color:  rgba(40, 165, 210, 0.5);
}
.PHTLPR-infobox div {
    text-align: center;
}
.PHTLPR-infobox div i {
    font-size: 25px;
}
.PHTLPR-infobox h4 {
    font-family: IranYekan-BOLD;
    font-size: 18px;
    text-align: center;
    margin-top: 1.5rem;
}
.PHTLPR-infobox p {
    margin-top: 0.5rem;
    font-size: 12px;
    text-align: justify;
    font-family: IranYekan-REGULAR;
}

.PHTLPR-listofgallery {
    margin-top: 6rem;
}
.PHTLPR-listtitles {
    display: flex;
    justify-content: space-between;
    align-items: center;

}
.PHTLPR-listtitle {
    font-family: IranYekan-BOLD;
    font-size: 22px;
}
.PHTLPR-cta-addgallery {
    border: 2px solid hsla(329, 68%, 49%, 0);
    padding: 8px 16px;
    border-radius: 5px;
    transition: all 0.2s;

    background-color: #d22880   ;
}
.PHTLPR-cta-addgallery:hover {
    border: 2px solid #d22880;
    padding: 8px 16px;
    border-radius: 5px;
    background-color: #00000000;
}
.PHTLPR-cta-addgallery a {
    font-size: 16px;
    font-family: IranYekan-REGULAR;
    color: #fff;
    transition: all 0.3s;
}
.PHTLPR-cta-addgallery a b {
    transition: all 0.3s;
    color: #ffffff;
    font-size: 16px;
}
.PHTLPR-cta-addgallery:hover b,
.PHTLPR-cta-addgallery:hover a {
    color: #d22880;
}

.PHTLPR-parenttable {
    overflow-x: auto;
}
.PHTLPR-listofgallery table {
    width: 100%;
    margin-top: 0.5rem;
    border-collapse: collapse;
}
.PHTLPR-listofgallery table tr {

    transition: all 0.5s;
}

.PHTLPR-listofgallery table tr:nth-child(even){
    background-color: #d0d0d0;
    border-bottom: 1px solid #00000000;
}

.PHTLPR-listofgallery table tr:first-child {
    background-color: #00000000 !important;

}
.PHTLPR-listofgallery table th {
    font-size: 16px;
    text-align: start;
    font-family: IranYekan-EXBOLD;

    padding: 2rem 1rem;
    border-bottom: 2px solid #595959;
}
.PHTLPR-listofgallery table td {
    font-size: 14px;
    font-family: IranYekan-REGULAR;
    padding: 1rem 0.5rem;
}
.PHTLPR-listofgallery table td a{
    color: #2b2e37;
    transition: all 0.3s;
    font-family: IranYekan-BOLd;
}
.PHTLPR-listofgallery table td a:hover{
}
.PHTLPR-SC-edit:hover {
    color: #d22880;
}
.PHTLPR-SC-remove:hover {
    color: #cc0d0d;
}
.PHTLPR-SC-view:hover {
    color: #1882a8;
}

.PHTLPR-allgallerycta {
    margin-top: 2.5rem;

    display: flex;
    justify-content: center;
    align-items: center;
}
.PHTLPR-allgallerycta div {
}
.PHTLPR-allgallerycta div a {
    font-family: IranYekan-MEDIUM;
    font-size: 14px;
    background-color: #d22880;
    border: 2px solid #d22880;
    border-radius: 3px;
    color: #fff;
    padding: 0.5rem 1rem ;
    transition: all 0.3s;
}
.PHTLPR-allgallerycta div a:hover {
    background-color: #d2288000;
    border: 2px solid #d22880;
    border-radius: 5px;
    color: #d22880;
}

.PHTLPR-idcodes {}
.PHTLPR-gallerynames {}
.PHTLPR-gallerydates {}
.PHTLPR-shortcuts {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
}

/***************************************************
***** Start list of gallery in profile section *****
***************************************************/
.PHTLPR-LISTPAGE-deletemargin {
    margin-top: 0 !important;
}

.PHTLPR-pagecta div {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    font-size: 14px;
}

.PHTLPR-pagecta p {
    font-family: IranYekan-BOLD;
    font-weight: 900;
}
.PHTLPR-pagecta a:link,
.PHTLPR-pagecta a:visited {
    font-family: IranYekan-REGULAR;
    color:#d22880;
    border: 2px solid #d22880;
    padding: 5px;
    border-radius: 4px;
    transition: all 0.2s;
}
.PHTLPR-pagecta a:hover,
.PHTLPR-pagecta a:active {
    color:#fff;
    background-color: #d22880;
    border: 2px solid #d22880;
    padding: 5px;
    border-radius: 4px;
}

/**************************************************
***** Start add to gallery in profile section *****
**************************************************/
.PHTLPR-addgallery-title {
    font-family: IranYekan-BOLD;
    font-weight: 900;
    font-size: 32px;

    margin-bottom: 2rem;
}

.PHTLPR-addgallery-form {}

.PHTLPR-addgallery-inputs {
    display: grid;
    grid-template-columns: 55% 44%; /* NOTE */
    gap: 1rem;
}

.PHTLPR-addgallery-datainputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    row-gap: 2rem;
    align-items: start;
    height: 0px;

}

label {
    font-family: IranYekan-REGULAR;
    font-size: 18px;
    display: block;
    margin-bottom: 1rem;
}
input {
    font-family: IranYekan-THIN;
    font-size: 16px;
    color: #d22880  ;
    border: 2px solid #d22880;
    border-radius: 5px;
    background-color: #ffffff;
    height: 4rem;
    width: 100%;
    padding: 0.5rem 1rem;
}
textarea {
    font-family: IranYekan-THIN;
    font-size: 16px;
    color: #d22880;
    border: 2px solid #d22880;
    border-radius: 5px;
    background-color: #fff;
    height: 20rem;
    width: 100%;
    padding: 0.5rem 1rem;
}
select {}

.PHTLPR-addgallery-name {}
.PHTLPR-addgallery-name label {}
.PHTLPR-addgallery-name input {}

.PHTLPR-addgallery-accessuser {}
.PHTLPR-addgallery-accessuser label{}
.PHTLPR-addgallery-accessuser select {}
.PHTLPR-addgallery-accessuser option {}

.PHTLPR-addgallery-patient {}
.PHTLPR-addgallery-patient label {}
.PHTLPR-addgallery-patient input {}

.PHTLPR-addgallery-point {}
.PHTLPR-addgallery-point label {}
.PHTLPR-addgallery-point input {}

.PHTLPR-addgallery-description {
    grid-column: 1/3;
}
.PHTLPR-addgallery-description label {}
.PHTLPR-addgallery-description textarea {
}

.PHTLPR-addgallery-imageinputs {
    background-color: #fff;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    border: 2px solid #d22880;
}

.PHTLPR-imageinput-area {}
.PHTLPR-imageinput-area p {
    font-size: 68px;
    font-family: IranYekan-REGULAR;
    color: #d2288049;
    text-align: center;
    padding: 50% 0;
}

.PHTLPR-addgallery-submit {
    margin-top: 2rem;
}
.PHTLPR-addgallery-submit input {
    font-family: IranYekan-BOLD;
    font-size: 18px;
    color: #fff;
    background-color: #d22880;
    padding: 0.5rem 1rem;
    transition: all 0.3s;
}
.PHTLPR-addgallery-submit input:hover {
    font-family: IranYekan-BOLD;
    font-size: 18px;
    color: #d22880  ;
     border-radius: 8px;
    background-color: #00000000;
    padding: 0.5rem 1rem;
}

/** select list style **/

.multi-select {
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    position: relative;
    width: 100%;
    user-select: none;
}
.multi-select .multi-select-header {
    border: 2px solid #d22880;
    padding: 5px 30px 5px 12px;
    overflow: hidden;
    gap: 7px;
    min-height: 4rem;
    background-color: #FFF;
}
.multi-select .multi-select-header::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23949ba3' viewBox='0 0 16 16'%3E%3Cpath d='M8 13.1l-8-8 2.1-2.2 5.9 5.9 5.9-5.9 2.1 2.2z'/%3E%3C/svg%3E");
    height: 12px;
    width: 12px;
}
.multi-select .multi-select-header.multi-select-header-active {
    border-color: #d22880;
    box-shadow: 0 0 0 0.1rem rgba(210, 40, 128, 0.5);
}
.multi-select .multi-select-header.multi-select-header-active::after {
    transform: translateY(-50%) rotate(180deg);
}
.multi-select .multi-select-header.multi-select-header-active + .multi-select-options {
    display: flex;
}
.multi-select .multi-select-header .multi-select-header-placeholder {
    font-family: IranYekan-THIN;
    font-size: 16px;
    color: #d22880 ;
}
.multi-select .multi-select-header .multi-select-header-option {
    display: inline-flex;
    align-items: center;
    background-color: rgba(231, 142, 188, 0.5);
    font-size: 10px;
    padding: 5px 8px;
    border-radius: 5px;
    font-family: IranYekan-REGULAR;
}
.multi-select .multi-select-header .multi-select-header-max {
    font-size: 14px;
    color: #65727e;
}
.multi-select .multi-select-options {
    display: none;
    box-sizing: border-box;
    flex-flow: wrap;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 999;
    margin-top: 5px;
    padding: 5px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-height: 250px;
    overflow-y: auto;
    overflow-x: hidden;
}
.multi-select .multi-select-options::-webkit-scrollbar {
    width: 5px;
}
.multi-select .multi-select-options::-webkit-scrollbar-track {
    background: #f0f1f3;
}
.multi-select .multi-select-options::-webkit-scrollbar-thumb {
    background: #cdcfd1;
}
.multi-select .multi-select-options::-webkit-scrollbar-thumb:hover {
    background: #b2b6b9;
}
.multi-select .multi-select-options .multi-select-option, .multi-select .multi-select-options .multi-select-all {
    padding: 4px 12px;
    height: 35px;
}
.multi-select .multi-select-options .multi-select-option .multi-select-option-radio, .multi-select .multi-select-options .multi-select-all .multi-select-option-radio {
    margin-right: 14px;
    height: 16px;
    width: 16px;
    border: 1px solid #ced4da;
    border-radius: 4px;
}
.multi-select .multi-select-options .multi-select-option .multi-select-option-text, .multi-select .multi-select-options .multi-select-all .multi-select-option-text {
    box-sizing: border-box;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
    font-size: 16px;
    line-height: 20px;
    margin-right: 0.5rem;
    font-family: IranYekan-REGULAR;
}
.multi-select .multi-select-options .multi-select-option.multi-select-selected .multi-select-option-radio, .multi-select .multi-select-options .multi-select-all.multi-select-selected .multi-select-option-radio {
    border-color: #d22880;
    background-color: #d22880;
}
.multi-select .multi-select-options .multi-select-option.multi-select-selected .multi-select-option-radio::after, .multi-select .multi-select-options .multi-select-all.multi-select-selected .multi-select-option-radio::after {
    content: "";
    display: block;
    width: 3px;
    height: 7px;
    margin: 0.12em 0 0 0.27em;
    border: solid #fff;
    border-width: 0 0.15em 0.15em 0;
    transform: rotate(45deg);
}
.multi-select .multi-select-options .multi-select-option.multi-select-selected .multi-select-option-text, .multi-select .multi-select-options .multi-select-all.multi-select-selected .multi-select-option-text {
    color: #d22880;
}
.multi-select .multi-select-options .multi-select-option:hover, .multi-select .multi-select-options .multi-select-option:active, .multi-select .multi-select-options .multi-select-all:hover, .multi-select .multi-select-options .multi-select-all:active {
  background-color: #f3f4f7;
  background-color: rgba(210, 40, 128, 0.1);
  transition: all 0.2s;
}
.multi-select .multi-select-options .multi-select-option:hover, .multi-select .multi-select-options .multi-select-option:active, .multi-select .multi-select-options .multi-select-all:hover, .multi-select .multi-select-options .multi-select-all:active {
  background-color: #f3f4f7;
  background-color: rgba(210, 40, 128, 0.1);
}
  .multi-select .multi-select-options .multi-select-all {
    border-bottom: 1px solid #f1f3f5;
    border-radius: 0;
}
.multi-select .multi-select-options .multi-select-search {
    padding: 7px 10px;
    border: 1px solid #d22880;
    border-radius: 5px;
    margin: 10px 10px 5px 10px;
    width: 100%;
    outline: none;
    font-size: 16px;
}
.multi-select .multi-select-options .multi-select-search::placeholder {
    color: #d22880
}
.multi-select .multi-select-header, .multi-select .multi-select-option, .multi-select .multi-select-all {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    align-items: center;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    width: 100%;
    font-size: 16px;
    color: #212529;
}

/***********************************************
***** Start vew gallery in profile section *****
***********************************************/
.PHTLPR-viewtitles {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.PHTLPR-viewgallery-title {
    font-family: IranYekan-EXBOLD;
    font-size: 24px;
}
.PHTLPR-viewgallery-title b {
    border-bottom: 2px solid #00000000;
    transition: all 0.2s;
}
.PHTLPR-viewgallery-title:hover b {
    border-bottom: 2px solid #d22880;
    transition: all 0.2s;
}

.PHTLPR-cta-editgallery:hover {
    background-color: #d22880;
    padding: 1.5rem 3rem;
    border: 2px solid #d22880;
    border-radius: 5px;
}
.PHTLPR-cta-editgallery:hover a {
    font-family: IranYekan-MEDIUM;
    font-size: 14px;
    color: #fff;
}
.PHTLPR-cta-editgallery {
    background-color: #00000000;
    padding: 1.5rem 3rem;
    border: 2px solid #d22880;
    border-radius: 5px;
    transition: all 0.2s;
}
.PHTLPR-cta-editgallery a {
    font-family: IranYekan-MEDIUM;
    font-size: 14px;
    color: #d22880;
    transition: all 0.2s;
}

.PHTLPR-viewgallery-form {
    margin-top: 2rem;
}

.PHTLPR-viewgallery-informations {
    display: grid;
    grid-template-columns: 55% 45%;
    gap: 1rem;
}

.PHTLPR-viewgallery-data {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 0px;
    row-gap: 2.5rem;
    column-gap: 1.5rem;
}
.PHTLPR-viewgallery-data h5 {
    font-family: IranYekan-BOLD;
    font-size: 18px;
    margin-bottom: 1rem;
}

.PHTLPR-viewgallery-description {
    grid-column: 1/3;
}

.PHTLPR-viewgallery-data p {
    font-family: IranYekan-REGULAR;
    font-size: 14px;
    border: 2px solid rgba(210, 40, 128, 0.5);
    padding: 1.5rem 2rem;
    border-radius: 5px;
    transition: all 0.2s;
}
.PHTLPR-viewgallery-data p:hover {
    font-family: IranYekan-REGULAR;
    font-size: 14px;
    border: 2px solid rgba(210, 40, 128, 1);
    padding: 1.5rem 2rem;
    border-radius: 10px;
}

.PHTLPR-viewgallery-accessuser {}
.PHTLPR-viewgallery-accessuser ul {
    border: 2px solid rgba(210, 40, 128, 0.5);
    padding: 1.5rem 2rem;
    border-radius: 5px;
    transition: all 0.2s;
}
.PHTLPR-viewgallery-accessuser ul:hover {
    border: 2px solid rgba(210, 40, 128, 1);
    padding: 1.5rem 2rem;
    border-radius: 10px;
    transition: all 0.2s;
}
.PHTLPR-viewgallery-accessuser li {
    background-color: rgba(231, 142, 188, 0.5);
    margin-top: 0.5rem;
    border: 1px solid rgba(210, 40, 128, 0);

    font-family: IranYekan-REGULAR;
    font-size: 10px;
    
    padding: 0.5rem 1rem;
    border-radius: 3px;
    transition: all 0.2s;

    display: inline-block;
}
.PHTLPR-viewgallery-accessuser li:hover {
    background-color: rgba(231, 142, 188, 1);
    border: 1px solid rgba(210, 40, 128, 1);
    border-radius: 6px;
}
.PHTLPR-viewgallery-images {

}

.PHTLPR-viewgallery-images h5 {
    font-family: IranYekan-BOLD;
    font-size: 18px;
    margin-bottom: 1rem;
}
.PHTLPR-viewgalleryimagesection {
    border: 2px solid rgba(210, 40, 128, 0.5);
    border-radius: 5px;
    padding: 1.5rem 2rem;
    transition: all 0.2s;     
}
.PHTLPR-images-area {
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow-y: auto;
    max-height: 60rem;
    gap: 1.5rem;
}
.PHTLPR-viewgalleryimagesection:hover {
    border: 2px solid rgba(210, 40, 128, 1);
    border-radius: 10px;
}
.PHTLPR-images-area > div {
    position: relative;
}
.PHTLPR-images-area > div > div {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, 50%);
    height: 45px;
    width: 100px;

    display: flex;
    justify-content: space-between;

    opacity: 0;
    transition: all 0.3s;
}
.PHTLPR-images-area > div:hover > div {
    opacity: 1;

}

.PHTLPR-images-area img {
    max-width: 100%;

}
.PHTLPR-images-area a {
    font-size: 24px;
    background-color: rgba(210, 40, 128, 0.7);
    padding: 1rem 1rem;
    color: #fff;
    border-radius: 25px;
    box-shadow: 0px 0px 0px 0px #000000;
    transition: 0.2s;
}
.PHTLPR-images-area a:hover {
    background-color: #d22880;
    box-shadow: 0px 0px 10px 0px #000000;
}

/************************************************
***** Start edit profile in profile section *****
*************************************************/
.PHTLPR-editprofile-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 2rem;
}

.PHTLPR-editprofile-Rcolumn {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.PHTLPR-editprofile-fullwidth {
    grid-column: 1/3
}

.PHTLPR-editprofile-seprator {
    border-bottom: 4px dotted #d22880 ;
    margin-top: 5rem;
    margin-bottom: 2rem;
}

.PHTLPR-editprofile-Rcolumn label {
    margin-top: 1rem;
}

.PHTLPR-editprofile-passsectitle {
    font-family: IranYekan-BOLD;
    font-size: 20px;
    margin-bottom: 1rem;
}
.PHTLPR-editprofile-passsecdescription {
    font-size: 14px;
    font-family: IranYekan-REGULAR;
    line-height: 1.5;
    text-align: justify;
    margin-bottom: 1.5rem;
}

.PHTLPR-editprofile-submit input {
    font-family: IranYekan-BOLD;
    font-size: 18px;
    color: #fff;
    background-color: #d22880;
    padding: 0.5rem 1rem;
    transition: all 0.3s;
    border: 2px solid #d22880;
}
.PHTLPR-editprofile-submit input:hover {
    font-family: IranYekan-BOLD;
    font-size: 18px;
    color: #d22880;
    background-color: rgba(210, 40, 128, 0.0);
    border: 2px solid #d22880;
    padding: 0.5rem 1rem;
    transition: all 0.3s;
}

.PHTLPReditprofile-Lcolumn {

}
.PHTLPReditprofile-Lcolumn > div {
    display: grid;
    grid-template-columns: 1fr;

}
.PHTLPReditprofile-Lcolumn label {
    justify-self: start;
    margin-top: 1rem;
}
.input-pic {
    background-color: #fff;
    border-radius: 5px;
    width: 100%;
    height: 400PX;
    text-align: center;
    padding: 10%;

    font-family: IranYekan-BLACK;
    color: #595959;
    border: 2px solid #d22880;
    margin-bottom: 1rem;
}







.PHTLPReditprofile-Lcolumn #imageInput {
    display: block;
}

.PHTLPReditprofile-Lcolumn #imagePreview {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.PHTLPReditprofile-Lcolumn #imagePreview div {
    position: relative;
}

.PHTLPReditprofile-Lcolumn #imagePreview img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 5px;
}

.PHTLPReditprofile-Lcolumn .remove-image {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.PHTLPReditprofile-Lcolumn .remove-image:hover {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: #d22880;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.PHTLPReditprofile-Lcolumn .input_container {
}
  
.PHTLPReditprofile-Lcolumn input[type=file]::file-selector-button {
    background-color: #fff;
    color: #000;
    border: 0px;
    padding: 10px 15px;
    transition: .5s;
    cursor: pointer;
}
  
.PHTLPReditprofile-Lcolumn input[type=file]::file-selector-button:hover {
}