form[id^="profile-"] .history-info {
    margin-top: 0;
}
form[id^="profile-"] .history-info .btn {
    padding: 0;
}
@media (max-width: 768px) {
    form[id^="profile-"] div:nth-of-type(2) .row div:last-child {
        width: 100%;
        margin-top: 1rem;
    }
    .change-password-form .password,
    .change-password-form input,
    .change-email-form input {
        width: 100%;
        max-width: 100% !important;
    }
    form[id^="profile-"] .btn-lg,
    .user-notifications .buttons-row .btn,
    #passwordForm .btn {
        width: 100%;
    }
}

form[id^="profile-"] input[type="text"],
form[id^="profile-"] textarea,
form[id^="profile-"] select,
#passwordForm .password input {
    width: 100% !important;
    min-height: 2.5rem;
    padding: .5rem;
    border: 2px solid var(--light-gray) !important;
}
form[id^="profile-"] input[type="text"]:hover,
form[id^="profile-"] textarea:hover,
form[id^="profile-"] select:hover,
.user-notifications select:hover,
#passwordForm .password input:hover {
    border-color: var(--gray) !important;
}
form[id^="profile-"] input[type="text"]:focus,
form[id^="profile-"] textarea:focus,
form[id^="profile-"] select:focus,
.user-notifications select:focus,
#passwordForm .password input:focus {
    border-color: var(--primary-color) !important;
}

form[id^="profile-"] select,
.user-notifications select {
	-webkit-appearance: none;
    -moz-appearance: none;
	appearance: none;
    border: 2px solid var(--light-gray);
    width: 100%;
    min-height: 2.5rem;
	padding: .5rem 1.5rem .5rem .5rem;
	background-image: url('data:image/svg+xml;utf8,<svg fill="black" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
	background-repeat: no-repeat;
	background-position: right .5rem center;
	background-size: 1rem;
}

/*change-password-form*/
.change-password-form,
#passwordForm {
    border-radius: var(--r2);
    margin-top: 1rem !important;
    padding: 1.5rem !important;
    display: flex;
    flex-direction: column;
    gap: .125rem;
}
.change-password-form input {
    margin-bottom: 1rem;
    min-height: 2.5rem;
}
.change-password-form .btn {
    border: none;
    margin-bottom: 0;
}
.change-password-form br {
    display: none;
}
.errorSummary {
    border-radius: var(--r1);
    background: var(--alert-color);
}
.errorMessage {
    color: var(--alert-color);
}
/*end change-password-form*/

/*avatar styles*/
form[id^="profile-"] .image-field {
    position: relative;
}
form[id^="profile-"] .image-field img {
    border-radius: var(--r2);
}
form[id^="profile-"] .image-field a {
    position: absolute;
    font-size: 0;
    border-bottom: none !important;
}
form[id^="profile-"] .image-field a:nth-of-type(1):before,
form[id^="profile-"] .image-field a:nth-of-type(2):before {
	font-family: 'Font Awesome 6 Free';
	font-weight: 600;
	font-size: .5rem;
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    text-align: center;
    line-height: 1rem;
    color: #fff;
    padding: .25rem;
    border-radius: 50%;
}
form[id^="profile-"] .image-field a:nth-of-type(1) {
    top: calc( 100px - 1.5rem);
    left: calc( 100px - .75rem);
    transition: all .3s ease-in-out;
}
form[id^="profile-"] .image-field a:nth-of-type(2) {
    top: 0;
    left: calc( 100px - .75rem);
    transition: all .3s ease-in-out;
    margin-left: 0 !important;
}
form[id^="profile-"] .image-field a:nth-of-type(1):before {
    content: "\f303";
    background: var(--dark-gray);
}
form[id^="profile-"] .image-field a:nth-of-type(2):before {
    content: "\f2ed";
    background: var(--alert-color);
}
form[id^="profile-"] .image-field a:nth-of-type(1):hover,
form[id^="profile-"] .image-field a:nth-of-type(2):hover {
    transform: scale(1.1);
    transition: all .2s ease-in-out;
}
.input-div {
    margin-top: 1rem;
}
#User_profile_image {
    border-radius: var(--base-btn-radius);
    width: 100%;
}
.input-div input::file-selector-button {
	appearance: none;
	border: none;
	padding: .5rem 1rem;
	background: var(--gray);
	color: var(--white);
	margin-bottom: 0;
    transition: all .3s ease-in-out;
    border-radius: var(--base-btn-radius);
}
.input-div input::file-selector-button:hover {
    box-shadow: inset 0 0 50px rgba(255,255,255,.1);
    transition: all .3s ease-in-out;
}
/*end avatar styles*/

form[id^="profile-"] .row.user-data {
    margin-bottom: 2rem !important;
}

form[id^="profile-"] .btn-lg,
.user-notifications .buttons-row .btn,
#passwordForm .btn {
    font-size: 1rem;
    padding: .75rem 1.5rem;
}
form[id^="profile-"] .buttons,
.user-notifications .buttons-row,
#passwordForm .buttons {
    border-top: none;
}

form[id^="profile-"] input[type=checkbox], form[id^="profile-"] input[type=radio] {
    margin: .125rem .5rem 0 0;
}

/*
* 
* Notifications page styles
*
*/
.user-notifications .col-md-8 {
    width: 100%;
    margin-top: 1rem;
    margin-bottom: 1rem;
    overflow-x: scroll;
}
.user-notifications .col-md-8 table {
    min-width: 400px;
}
.user-notifications .col-md-8 table th,
.user-notifications .col-md-8 table td {
    vertical-align: middle;
    padding: .5rem;
}
.user-notifications .col-md-8 table th {
    border-bottom: 2px solid var(--light-gray);
}
.user-notifications .col-md-8 table td {
    border-top: 1px solid var(--light-gray);
}
.user-notifications .col-md-8 table tr .sender-node,
.user-notifications .col-md-8 table tr .sender-mail,
.user-notifications .col-md-8 table tr .sender-chatium {
    width: 10%;
}
.user-notifications .col-md-8 table td:last-child {
    display: none;
}

@media (max-width: 768px) {
    .user-notifications .table tr th:nth-child(2),
    .user-notifications .table tr td:nth-child(2) {
        display: none;
    }
}
.user-notifications select {
    min-height: 1.25rem;
    padding: .25rem 2rem .25rem .25rem;
}
.user-notifications table input[type="checkbox"] {
    width: 1.25em;
    height: 1.25em;
}

/*
* 
* Change password page styles
*
*/
#passwordForm {
    max-width: 600px;
    background: var(--light-bg);
}
#passwordForm .password {
    width: 100%;
}
#passwordForm > .password {
    margin-bottom: 1rem;
}
#passwordForm .password br {
    display: none;
}
#passwordForm .buttons {
    margin-bottom: 0;
}