/* General Style Start */

@font-face {
  font-family: eucilid_medium;
  src: url(../fonts/eucilid/EuclidCircularBMedium.ttf);
}

@font-face {
  font-family: eucilid_bold;
  src: url(../fonts/eucilid/EuclidCircularBBold.ttf);
}

@font-face {
  font-family: eucilid_regular;
  src: url(../fonts/eucilid/EuclidCircularBRegular.ttf);
}

html,
body {
    height: 100%;
}

.main {
    min-height: 70vh;
}

html {
  overflow-x: hidden !important;
  scroll-behavior: smooth;
}

body {
  background-color: #ffffff;
}

* {
  font-family: "Poppins", sans-serif;
}

.accordion-button:not(.collapsed) {
  color: var(--second_color);
  font-weight: 500;
}

.mh10p0 {
  min-height: 10px;
  padding: 0px;
}

.mh10p5 {
  min-height: 10px;
  padding: 5px;
}

.mh10p10 {
  min-height: 10px;
  padding: 10px;
}

.mh10p15 {
  min-height: 10px;
  padding: 15px;
}

.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@media (min-width: 1200px) {
  .container {
    width: 1238px;
  }
}

.slick-slider {
  overflow: hidden;
}

:root {
  --main_color: #5EB1BF;
  --second_color: #1f6b77;
  --red-color: #ff3b3b;
}

/* General Style End */

.topHeader {
  background-color: #f2f2f2;
  padding: 5px 10px;
}

.topHeader a {
  text-decoration: none;
  font-size: 12px;
  color: gray;
}

.topHeader .topNavbar {
  gap: 25px;
}

.topNavbar select {
  border: none;
  border-radius: 5px;
  padding: 0px 5px;
  color: gray;
}

.header {
  background-color: var(--main_color);
  padding: 7px;
}

.header .logo {
  width: 150px;
  cursor: pointer;
}

.header .navbar {
  gap: 15px;
}

.header .navbar a {
  text-decoration: none;
  color: white;
  font-size: 14px;
}

.header .headerButtons {
  gap: 10px;
}

.header .headerButtons a {
  text-decoration: none;
  font-size: 12px;
  border-radius: 12px;
}

.headerButtons .applyBtn {
  color: white;
  border: 1px solid white;
  background-color: var(--main_color);
  padding: 5px 8px;
}

.headerButtons .applyBtn:hover {
  background-color: white;
  color: var(--main_color);
  transition: 0.3s ease;
}

.headerButtons .loginBtn {
  background-color: var(--main_color);
  border: 1px solid white;
  color: white;
  padding: 5px 10px;
}

.headerButtons .loginBtn:hover {
  background-color: white;
  color: var(--main_color);
  transition: 0.3s ease;
}

.headerButtons .registerBtn {
  background-color: var(--main_color);
  padding: 5px 10px;
  color: white;
  border: 1px solid white;
}

.headerButtons .registerBtn:hover {
  background-color: white;
  color: var(--main_color);
  transition: 0.3s ease;
}

.header .mobileMenuBtn {
  font-size: 20px;
  color: white;
  cursor: pointer;
}

.main {
  padding-top: 45px;
}

.searchBar {
  margin-top: 30px;
}

.searchBar input {
  border: none;
  padding: 15px 15px;
  width: 75%;
  border-radius: 15px;
  outline: none;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.searchBar i {
  font-size: 24px;
  position: relative;
  right: 40px;
  cursor: pointer;
  color: #b1b1b1;
}

.whyUs p,
.sloganArea p {
  font-size: 14px;
}

.sloganArea {
  margin-bottom: 100px;
}

.sloganArea .image {
  max-width: 450px;
}

.sloganArea .image img {
  width: 100%;
}

.whyUs .title,
.sloganArea .title {
  font-size: 34px;
  font-weight: 700;
}

.whyUs .btnSelect {
  color: var(--main_color);
  background-color: white;
  padding: 10px 15px;
  border-radius: 15px;
  border: 1px solid var(--main_color);
  font-size: 14px;
  font-weight: 500;
}

.whyUs .btnSelect:hover {
  color: white;
  background-color: var(--main_color);
  transition: 0.3s ease;
}

.psicoBox {
  padding: 15px;
  margin: 9px;
  border-radius: 12px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.psicoBox .image {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  border: 2px solid var(--main_color);
}

.psicoBox .image img {
  border-radius: 50%;
  object-fit: cover;
}

.psicoBox .boxHeader .name {
  margin-left: 15px;
}

.details .username {
  font-size: 14px;
  color: var(--main_color);
}

.psicoBox .content p {
  font-size: 13px;
}

.userProfile .profileLeftMenu .name,
.blogDetail .author .name,
.boxHeader .name .title {
  font-size: 18px;
  font-weight: 600;
}

.userProfile .profileLeftMenu .subtext,
.blogDetail .author .subtext,
.boxHeader .name .subtext {
  font-size: 14px;
  color: gray;
}

.userProfile .profileChatButton a {
  color: white;
  background-color: var(--main_color);
  border-radius: 7px;
  text-decoration: none;
  padding: 8px 10px;
  margin-left: 10px;
  font-size: 15px;
}

.userProfile .profileChatButton a i {
  font-size: 12px;
  margin-left: 5px;
}

.boxBody {
  padding: 15px;
}

.boxBody .row {
  gap: 10px;
}

.boxBody .item {
  font-size: 11px;
  padding: 5px 10px;
  background-color: var(--main_color);
  color: white;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.boxFooter button {
  background-color: white;
  border: 1px solid var(--main_color);
  color: var(--main_color);
  padding: 5px 15px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 500;
}

.boxFooter button:hover {
  background-color: var(--main_color);
  color: white;
  transition: 0.3s ease;
}

.seeAllPsy a {
  background-color: var(--main_color);
  color: #fff;
  padding: 10px 20px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  border: 2px solid #5EB1BF;
}


.seeAllPsy button {
  background-color: var(--main_color);
  color: #fff;
  padding: 10px 20px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  border: 2px solid #5EB1BF;
}


.homepageBlog .title {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 35px;
}

.whyUsAbout .mainTitle,
.homepageBlog .mainTitle,
.psicoArea .mainTitle,
.howItWorks .mainTitle,
.sssArea .mainTitle {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 35px;
  padding-bottom: 10px;
  text-align: center;
  color: var(--main_color);
  border-bottom: 1px solid #c5c5c5;
}

.whyUsOuter .whyLeftArea {
  padding: 10px;
}

.whyUsOuter .whyRightArea {
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.whyUsAbout .whyLeftAreaCounter {
  padding: 10px;
  gap: 5px;
}

.whyUsAbout .whyLeftAreaCounter .countBackgroundInner {
  background-color: #dfdfdf;
  color: var(--second_color);
  border-radius: 15px;
  padding: 10px;
  font-weight: 600;
}

.rightAreaTopic .ballonsIcon {
  background-color: var(--second_color);
  border-radius: 30px;
  height: 60px;
  width: 60px;
  color: #fff;
  font-weight: 600;
  font-size: 45px;
}

.rightInfoBottom {
  color: grey;
}

.howItWorks .icon i {
  font-size: 32px;
  color: var(--main_color);
  margin-bottom: 5px;
}

.howItWorks .content {
  margin: 65px 0;
  user-select: none;
}

.howItWorks .content .title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
}

.howItWorks .text {
  font-size: 12px;
  width: 90%;
}

.howItWorks .item {
  border-radius: 10px;
  padding: 10px;
  /* box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px; */
  /* box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; */
}

.homepageBlog {
  margin-bottom: 40px;
}

.homepageBlog .blogBox {
  margin: 10px;
  border-radius: 15px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.homepageBlog .blogheader .image {
  width: 100%;
  border-radius: 15px;
}

.blogheader .image img {
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.blogBox .title {
  font-size: 18px;
  margin: 5px 0px -10px 20px;
}

.homepageBlog .blogBody {
  padding: 20px 20px;
}

.homepageBlog .writer {
  padding: 10px 15px;
}

.homepageBlog .writer .image {
  width: 45px;
  height: 45px;
}

.homepageBlog .writer .image img {
  border-radius: 50%;
}

.homepageBlog .writer .context {
  margin-left: 10px;
  color: black;
}

.homepageBlog .writer .context .lookPsyDetailPage {
  text-decoration: none;
  color: #000;
}

.homepageBlog .writer .context .name {
  font-size: 14px;
  font-weight: 500;
}

.homepageBlog .writer .context .date {
  font-size: 12px;
}

.homepageBlog .blogBody .content {
  font-size: 12px;
  margin-bottom: 15px;
}

.homepageBlog .blogBody a {
  color: var(--main_color);
  background-color: white;
  text-decoration: none;
  border: 1px solid var(--main_color);
  font-size: 14px;
  padding: 5px 10px;
  border-radius: 7px;
}

.homepageBlog .blogBody a:hover {
  background-color: var(--main_color);
  color: white;
  transition: 0.3s ease;
}

.loginPage .customRow {
  margin: 30px;
  padding: 20px;
  border-radius: 15px;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
}

.loginPage .loginBoxHeader {
  margin-bottom: 15px;
  gap: 25px;
}

.loginBoxHeader .loginUser,
.loginBoxHeader .loginPs {
  padding: 5px;
  font-size: 12px;
  border-radius: 20px;
  color: var(--main_color);
  border: 1px solid var(--main_color);
  cursor: pointer;
}

.loginPage .loginBody input {
  border: none;
  background-color: #f5f5f5;
  padding: 10px;
  font-size: 13px;
  border-radius: 7px;
}

.loginPage .loginBody .cbArea .text a {
  color: var(--main_color);
}

.loginPage .loginBody .cbArea .text {
  font-size: 14px;
  margin-left: 5px;
  font-weight: 500;
}

.businessRow .cbArea .text a {
  color: var(--main_color);
}

.businessRow .cbArea .text {
  font-size: 14px;
  margin-left: 5px;
  font-weight: 500;
}

.modal-body .cbArea .text span {
  color: var(--main_color);
}

.modal-body .cbArea .text {
  font-size: 14px;
  margin-left: 5px;
  font-weight: 500;
}

.contactRow .cbArea .text a {
  color: var(--main_color);
}

.contactRow .cbArea .text {
  font-size: 14px;
  margin-left: 5px;
  font-weight: 500;
}

.loginPage .loginBody .forget_pass_Btn {
  text-decoration: none;
  color: var(--main_color);
  font-weight: 600;
  font-size: 14px;
  text-align: end;
}

.loginPage .loginBody .btnLogin {
  background-color: var(--main_color);
  color: white;
  font-size: 14px;
  border: none;
  padding: 10px;
  border-radius: 7px;
  text-decoration: none;
  display: flex;
  justify-content: center;
}

.businessRow .inputLabel {
  width: 16px;
  height: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--main_color);
  border-image: initial;
  border-radius: 2px;
}

.businessRow .inputLabel>input {
  display: none;
}

.businessRow .inputLabel i {
  color: var(--main_color);
  font-size: 10px;
  display: none;
}

.businessRow .inputLabel input:checked~i {
  display: block;
}

.modal-body .inputLabel {
  width: 16px;
  height: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--main_color);
  border-image: initial;
  border-radius: 2px;
}

.modal-body .inputLabel>input {
  display: none;
}

.modal-body .inputLabel i {
  color: var(--main_color);
  font-size: 10px;
  display: none;
}

.modal-body .inputLabel input:checked~i {
  display: block;
}

.contactRow .inputLabel {
  width: 16px;
  height: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--main_color);
  border-image: initial;
  border-radius: 2px;
}

.contactRow .inputLabel>input {
  display: none;
}

.contactRow .inputLabel i {
  color: var(--main_color);
  font-size: 10px;
  display: none;
}

.contactRow .inputLabel input:checked~i {
  display: block;
}

.loginPage .inputLabel {
  width: 16px;
  height: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--main_color);
  border-image: initial;
  border-radius: 2px;
}


.loginPage .inputLabel>input {
  display: none;
}

.loginPage .inputLabel i {
  color: var(--main_color);
  font-size: 10px;
  display: none;
}

.loginPage .inputLabel input:checked~i {
  display: block;
}

.loginPage .activeLogin {
  background-color: var(--main_color);
  color: white;
}

.loginPage .loginArea textarea {
  border: none;
  outline: none;
  border-bottom: 1px solid gray;
  resize: none;
  height: 75px;
  font-size: 13px;
  margin-bottom: 10px;
}

.psyProfileArea .background {
  width: 100%;
  height: 150px;
  margin-top: 25px;
  position: relative;
  z-index: -1;
}

.psyProfileArea .background img {
  width: 100%;
  height: 150px;
  border-radius: 25px;
}

.psyProfileArea .profile {
  position: relative;
}

.psyProfileArea .profilAvatar {
  width: 100px;
  height: 100px;
}

.psyProfileArea .profile {
  margin-top: -50px;
  margin-left: 25px;
}

.psyProfileArea .profile .randevuBtn {
  margin-right: 25px;
  gap: 15px;
}

.psyProfileArea .profile .randevuBtn button {
  background-color: var(--main_color);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 7px 15px;
  font-size: 12px;
  margin-top: 50px;
}

.psyProfileArea .profileFooter {
  padding: 10px 0px 10px 25px;
}

.psyProfileArea .profileFooter .name {
  font-size: 16px;
  font-weight: 600;
}

.psyProfileArea .profileFooter .subtext {
  font-size: 12px;
  color: gray;
}

.profileMenu {
  margin-left: 10px;
  border-bottom: 1px solid #c5c5c5;
  margin-bottom: 20px;
}

.profileMenu .menuItems {
  padding: 5px 15px;
  font-size: 13px;
  font-weight: 500;
  color: gray;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.profileMenu .active {
  color: var(--main_color);
  border-bottom: 2px solid var(--main_color);
}

.contentArea {
  padding-left: 15px;
  min-height: 80vh;
}

.contentArea .certificates .item,
.contentArea .education .item {
  margin-bottom: 15px;
}

.contentArea .certificates .title,
.contentArea .education .title {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 10px;
}

.contentArea .certificates .icon i,
.contentArea .education .icon i {
  font-size: 20px;
  margin-right: 10px;
  color: var(--main_color);
  border: 1px solid;
  padding: 10px;
  border-radius: 40%;
}

.contentArea .certificates .text,
.contentArea .education .context .school {
  font-size: 15px;
  font-weight: 500;
}

.contentArea .certificates .date,
.contentArea .education .context .date {
  font-size: 13px;
  color: gray;
}

.contentArea .cvDetails {
  padding: 10px 20px;
  border-radius: 10px;
  border: 2px solid var(--main_color);
}

.contentArea .cvDetails p {
  font-size: 13px;
}

.titleProfession,
.contentArea .description .title {
  font-size: 20px;
  font-weight: 500;
}

.contentArea .description p {
  font-size: 13px;
  margin-top: 10px;
}

.contentArea .profession {
  gap: 15px;
  padding: 0px 20px;
  margin-bottom: 20px;
}

.contentArea .profession .item {
  background-color: var(--main_color);
  padding: 10px;
  border-radius: 10px;
  color: white;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.seansModalBody .box,
.contentArea .products .box {
  padding: 10px;
  border: 1px solid gray;
  margin-bottom: 20px;
  border-radius: 7px;
}

.seansModalBody .box .title,
.contentArea .products .box .title {
  font-weight: 500;
}

.seansModalBody .box .body,
.contentArea .products .box .body {
  margin-left: 10px;
  border-left: 1px solid;
  padding-left: 10px;
}

.seansModalBody .box .buyBtn,
.contentArea .products .buyBtn {
  font-size: 12px;
  background-color: var(--main_color);
  padding: 5px 10px;
  color: white;
  margin-top: 10px;
  cursor: pointer;
}

.seansModalBody .box .time,
.contentArea .products .box .time {
  font-size: 11px;
  color: gray;
}

.seansModalBody .box .price,
.contentArea .products .box .price {
  font-size: 16px;
  font-weight: 600;
}

.contentArea .comment {
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 15px;
  box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
  /* box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset; */
}

.contentArea .comments .avatar i {
  font-size: 38px;
}

.contentArea .comments .profile .details {
  margin-left: 10px;
}

.contentArea .comments .profile .details .name {
  font-size: 16px;
  font-weight: 400;
}

.contentArea .comments .profile .details .date {
  font-size: 12px;
  color: gray;
}

.contentArea .comments .commentText p {
  font-size: 13px;
  padding: 10px;
}

.contentArea .comments .rating {
  gap: 2px;
}

.contentArea .comments .rating i {
  color: #dec141;
}

.testArea .headBar .activeTest {
  color: white !important;
  background-color: var(--main_color);
}

.testArea .headBar .item {
  color: var(--main_color);
  padding: 5px 10px;
  border: 1px solid var(--main_color);
  border-radius: 7px;
  margin: 20px 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.testArea .headBar .item i {
  margin-right: 10px;
}

.testArea .headBar .item .image {
  height: 150px;
}

.testArea .headBar .item .image img {
  width: 100%;
  height: 150px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.testArea .headBar .item:hover {
  color: white;
  background-color: var(--main_color);
  transition: 0.3s ease;
}

.testArea .title {
  font-size: 24px;
  font-weight: 600;
  margin-top: 25px;
}

.testArea .question {
  margin-top: 40px;
}

.testArea .question .title {
  display: flex;
  align-items: center;
  justify-content: start;
  margin-bottom: 15px;
}

.testArea .question .title .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background-color: var(--main_color);
  width: 30px;
  height: 30px;
  border-radius: 35%;
  font-size: 15px;
  font-weight: 600;
}

.testArea .question .title .text {
  font-size: 16px;
  font-weight: 500;
  margin-left: 10px;
}

.testArea .option {
  display: flex;
  align-items: center;
  justify-content: start;
  margin-bottom: 5px;
}

.testArea .option .text {
  padding: 5px 10px;
  border-radius: 10px;
  font-size: 12px;
  color: gray;
  border: 1px solid gray;
  font-weight: 500;
}

.testArea .option>input {
  visibility: hidden;
  position: absolute;
}

.testArea .option input+.text {
  cursor: pointer;
}

.testArea .option input:checked+.text {
  background-color: var(--main_color);
  color: white;
  border-color: transparent;
}

.businessPage .businessRow,
.contactPage .contactRow {
  margin: 30px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.businessPage .businessRow .businessLeft,
.contactPage .contactRow .contactLeft {
  padding: 25px;
}

.businessPage .businessRow .title,
.contactPage .contactRow .title {
  font-size: 22px;
  font-weight: 600;
}

.businessPage .businessRow .subtext,
.contactPage .contactRow .subtext {
  font-size: 14px;
  margin-bottom: 40px;
}

.businessPage .businessRow .businessRight {
  padding: 50px 40px;
  background-color: var(--main_color);
}

.contactPage .contactRow .contactRight {
  background-color: var(--main_color);
  padding: 20px 0;
}

.businessRow .formArea input,
.contactRow .formArea input {
  border: none;
  background-color: #f4f4f4;
  padding: 10px;
  font-size: 13px;
}

.loginPage .loginBody input:focus,
.businessRow .formArea input:focus,
.businessRow .formArea textarea:focus,
.contactRow .formArea textarea:focus,
.contactRow .formArea input:focus {
  outline-color: var(--main_color);
}

.businessRow .formArea textarea,
.contactRow .formArea textarea {
  border: none;
  background-color: #f4f4f4;
  padding: 10px;
  resize: none;
  height: 75px;
  font-size: 13px;
}

.businessPage .businessBtn,
.contactPage .contactBtn {
  color: var(--main_color);
  background-color: white;
  border: none;
  border: 1px solid var(--main_color);
  padding: 6px 35px;
  border-radius: 7px;
  font-weight: 500;
}

.contactPage .contactBtn:hover,
.businessPage .businessBtn:hover {
  background-color: var(--main_color);
  color: white;
  transition: 0.3s ease;
}

.blogDetail {
  margin-top: 30px;
}

.blogDetail .contentWrapper {
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  margin-bottom: 25px;
  border-radius: 25px;
}

.blogDetail .contentArea {
  padding: 20px;
}

.blogDetail .imageArea {
  width: 100%;
  height: 325px;
  border-radius: 25px;
}

.blogDetail .imageArea img {
  height: 325px;
  width: 100%;
  border-radius: 25px;
}

.userProfile .profileLeftMenu .avatar,
.blogDetail .contentArea .avatar {
  width: 75px;
  height: 75px;
}

.psyProfileArea .profilAvatar img,
.userProfile .profileLeftMenu .avatar img,
.blogDetail .contentArea .avatar img {
  width: 100%;
  border-radius: 50%;
}

.blogDetail .contentArea .text {
  font-size: 13px;
}

.blogDetail .contentArea .text .title {
  font-size: 24px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 20px;
}

.blogDetail .contentArea .author .date {
  font-size: 15px;
  font-weight: 500;
  color: gray;
}

.blogDetail .contentArea .author .lookPsyDetailPage {
  text-decoration: none;
  color: #000;
}

.userProfile .profileLeftMenu {
  padding: 20px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.userProfile .profileLeftMenu .profile {
  padding-bottom: 10px;
  border-bottom: 1px solid #c5c5c5;
}

.userProfile .profileLeftMenu .profile .avatar i {
  position: relative;
  top: -25px;
  padding: 6px;
  background-color: var(--main_color);
  border-radius: 50%;
  color: white;
  font-size: 12px;
  cursor: pointer;
}

.userProfile .profileNavbar {
  padding: 20px 0;
}

.userProfile .profileNavbar a {
  text-decoration: none;
  color: #6e6e6e;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 5px;
  padding: 5px 10px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: start;
}

.userProfile .profileNavbar .active {
  color: var(--main_color);
}

.userProfile .profileNavbar a i {
  margin-right: 10px;
  width: 20px;
  height: 16px;
  display: flex;
  align-items: center;
}

.userProfile .profileContentArea {
  margin: 20px;
  min-height: 67vh;
}

.businessPage {
  min-height: 70vh;
}

.applyForm,
.contactPage {
  min-height: 65vh;
}

.userProfile .profileContentArea .title {
  font-size: 18px;
  border-radius: 5px;
  font-weight: 500;
  background-color: var(--main_color);
  color: white;
  padding: 10px;
}

.userProfile .profileContentArea .title i {
  margin-right: 10px;
}

.profileContentArea .items {
  padding: 10px;
}

.profileContentArea .item .name {
  font-size: 18px;
  font-weight: 600;
}

.profileContentArea .item .value {
  font-size: 16px;
  font-weight: 400;
}

.profileContentArea .borderLeft {
  border-left: 1px solid #6e6e6e;
}

.profileContentArea .boxHeader {
  margin-bottom: 10px;
  padding: 5px 10px;
}

.profileContentArea .boxTitle {
  font-size: 16px;
  font-weight: 500;
}

.profileContentArea .boxHeader .addBtn {
  border: none;
  background-color: var(--main_color);
  color: white;
  padding: 3px 20px;
  border-radius: 10px;
}

.profileContentArea .table tr {
  border-color: transparent;
}

.profileContentArea .table th {
  border-color: #c5c5c5 !important;
  font-weight: 600 !important;
}

.profileContentArea .table td {
  font-size: 14px;
}

.profileContentArea .table .btnEdit {
  color: var(--main_color);
  background: none;
  border: none;
  font-size: 20px;
}

.profileContentArea .table .btnDelete {
  color: #ff3b3b;
  background: none;
  border: none;
  font-size: 20px;
}

.profileContentArea .box {
  margin-top: 15px;
  border-top: 4px solid var(--main_color);
  padding: 5px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

.profileContentArea .calendarArea .tableWrapper {
  padding: 20px;
}

.profileContentArea .calendarArea .date {
  padding: 5px;
  background-color: var(--main_color);
  color: white;
  border-radius: 5px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profileContentArea .calendarArea .table th {
  white-space: nowrap;
  border: none;
}

.profileContentArea .calendarArea .table tr {
  border-bottom: 1px solid #c5c5c5;
}

.profileContentArea .calendarArea .tableLeftHeader {
  font-size: 14px;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profileContentArea .calendarArea .status {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #c5c5c5;
  padding: 5px;
  border-radius: 7px;
  cursor: pointer;
}

.profileContentArea .calendarArea .selectAppointmentClock {
  background-color: var(--main_color);
  color: white;
}

.profileContentArea .calendarArea .nextWeek,
.profileContentArea .calendarArea .lastWeek {
  border: none;
  padding: 5px 10px;
  color: white;
  background-color: lightsalmon;
  border-radius: 5px;
}

.profileContentArea .settings input {
  border: none;
  padding: 10px;
  background-color: #f5f5f5;
  outline-color: var(--main_color);
}

.profileContentArea .settings .inputFile {
  background: none;
  font-size: 13px;
}

.profileContentArea .settings .inputFile::file-selector-button {
  color: white;
  background-color: var(--main_color);
  border: none;
  padding: 5px;
  font-size: 13px;
  border-radius: 5px;
}

.profileContentArea .settings .fixedInput {
  color: gray;
  outline:
    none;
}

.profileContentArea .settings textarea {
  border: none;
  padding: 10px;
  background-color: #f5f5f5;
  outline-color: var(--main_color);
  height: 75px;
  resize: none;
}

.profileContentArea .settings .updateBtn {
  background-color: var(--main_color);
  color: white;
  border-radius: 7px;
  border: none;
  padding: 7px 10px;
  margin-top: 12px;
  width: 200px;
}

.profileContentArea .blogPostArea {
  padding: 15px;
}

.profileContentArea .blogPostArea textarea,
.profileContentArea .blogPostArea input {
  border: none;
  background-color: #f5f5f5;
  padding: 10px;
  outline-color: var(--main_color);
}

.profileContentArea .blogPostArea .fileInput {
  background: transparent;
}

.profileContentArea .blogPostArea input::file-selector-button {
  color: white;
  background-color: var(--main_color);
  border: none;
  padding: 10px;
  border-radius: 7px;
  cursor: pointer;
}

.profileContentArea .blogPostArea .blogUploadBtn {
  background-color: white;
  border-radius: 7px;
  border: 2px solid var(--main_color);
  color: var(--main_color);
  padding: 5px 15px;
  font-weight: 500;
}

.profileContentArea .blogPostArea .blogUploadBtn:hover {
  background-color: var(--main_color);
  color: white;
  transition: 0.3s ease;
}

.profileContentArea .ratingBtn {
  border: none;
  padding: 5px 20px;
  color: var(--main_color);
  border-radius: 20%;
}

.profileContentArea .ratingBtn i {
  font-size: 18px;
}

#ratingModal .rate {
  float: left;
  height: 46px;
  padding: 0 10px;
}

#ratingModal .rate:not(:checked)>input {
  position: absolute;
  top: -9999px;
}

#ratingModal .rate:not(:checked)>label {
  float: right;
  width: 1em;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  font-size: 30px;
  color: #ccc;
}

#ratingModal .rate:not(:checked)>label:before {
  content: '★ ';
}

#ratingModal .rate>input:checked~label {
  color: #ffc700;
}

#ratingModal .rate:not(:checked)>label:hover,
#ratingModal .rate:not(:checked)>label:hover~label {
  color: #deb217;
}

#ratingModal .rate>input:checked+label:hover,
#ratingModal .rate>input:checked+label:hover~label,
#ratingModal .rate>input:checked~label:hover,
#ratingModal .rate>input:checked~label:hover~label,
#ratingModal .rate>label:hover~input:checked~label {
  color: #c59b08;
}

#ratingModal .ratingArea textarea {
  padding: 10px;
  background-color: #f5f5f5;
  height: 100px;
  resize: none;
  border: none;
  margin-top: 5px;
  outline-color: var(--main_color);
}

#ratingModal .ratingBtn {
  color: white;
  background-color: var(--main_color);
  border: none;
  border-radius: 7px;
  padding: 10px 15px;
  font-size: 13px;
}

#randevuModal .tabs i {
  font-size: 18px;
  margin-top: 2px;
  color: var(--main_color);
  cursor: pointer;
}

#randevuModal .days {
  gap: 20px;
}

#randevuModal .days .day {
  color: var(--main_color);
  background-color: white;
  border: 1px solid var(--main_color);
  padding: 5px 15px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 14px;
}

#randevuModal .days .day:hover {
  color: white;
  background-color: var(--main_color);
  transition: 0.3s ease;
}

#randevuModal .days .currentDay {
  color: white;
  background-color: var(--main_color);
}

#randevuModal .appointmentTimes {
  margin-top: 25px;
}

#randevuModal .appointmentTimes .time {
  font-size: 13px;
  padding: 5px 10px;
  background-color: #8BB174;
  color: white;
  border-radius: 5px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#randevuModal .appointmentTimes .disableItem {
  /* background-color: var(--red-color); */
  background-color: #c5c5c5;
}

#randevuModal .appointmentTimes .selectedItem {
  background-color: var(--main_color) !important;
}

#randevuModal .disabledItem {
  color: white;
  background-color: #c5c5c5;
  padding: 5px 20px;
  border-radius: 7px;
  font-size: 12px;
}

#randevuModal .selectedItem {
  color: white;
  background-color: var(--main_color);
  padding: 5px 20px;
  border-radius: 7px;
  font-size: 12px;
}

#randevuModal .emptyItem {
  color: white;
  background-color: #8BB174;
  border-radius: 7px;
  padding: 5px 20px;
  font-size: 12px;
}

#randevuModal .nextStepBtn {
  padding: 5px 20px;
  border: 1px solid var(--main_color);
  color: var(--main_color);
  background-color: white;
  border-radius: 5px;
  font-size: 14px;
}

#randevuModal .nextStepBtn:hover {
  background-color: var(--main_color);
  color: white;
  transition: 0.3s ease;
}

#paymentModal .modal-header h5,
#randevuModal .modal-header h5 {
  font-size: 18px;
}

#randevuModal .modal-header,
#paymentModal .modal-header {
  padding: 15px 20px;
}

#paymentModal .paymentArea input {
  border: none;
  outline-color: var(--main_color);
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 7px;
  font-size: 13px;
}

#paymentModal .paymentBtn {
  border: none;
  color: white;
  background-color: var(--main_color);
  padding: 10px 15px;
  border-radius: 7px;
  font-size: 14px;
}


#randevuModal2 .nextStepBtn {
    padding: 5px 20px;
    border: 1px solid var(--main_color);
    color: var(--main_color);
    background-color: white;
    border-radius: 5px;
    font-size: 14px;
}

.applyForm .customRow {
  padding: 0;
}

.applyForm .customRow .applyFormRight {
  background-color: var(--main_color);
  padding: 45px 20px;
}

.applyForm .customRow .applyFormRight .title {
  color: white;
  font-weight: 600;
  font-size: 24px;
  margin-bottom: 10px;
  text-align: center;
}

.applyForm .customRow .applyFormRight textarea {
  border: none;
  padding: 10px;
  border-radius: 7px;
  background-color: #f5f5f5;
}

.applyForm .customRow .applyFormRight .btnLogin {
  border: 1px solid white;
  color: white;
  font-weight: 500;
  margin-top: 10px;
}

.applyForm .customRow .applyFormRight .btnLogin:hover {
  color: var(--main_color);
  background-color: white;
  transition: 0.3s ease;
}

.offcanvas-end {
  width: 300px;
}

.mobileMenu a {
  text-decoration: none;
  color: var(--main_color);
  font-size: 16px;
  font-weight: 500;
  width: 100%;
  padding: 10px;
  text-align: center;
  border-bottom: 1px solid #e6e6e6;
}

#mobileMenu .mobileMenuButtons {
  gap: 20px;
}

#mobileMenu .mobileMenuRegisterBtn,
#mobileMenu .mobileMenuLoginBtn {
  border: none;
  padding: 5px 10px;
  background-color: var(--main_color);
  color: white;
  border-radius: 7px;
  font-size: 14px;
}

.mobileMenuHeader {
  background-color: var(--main_color);
}

.mobileMenuHeader h5 {
  color: white;
  margin: 0;
}

#mobileMenu .offcanvas-body {
  padding: 0;
}

.termsOfUse .title,
.kvkk .title,
.cookies .title,
.privacyPolicy .title,
.aboutPage .title {
  font-size: 24px;
  font-weight: 600;
  text-align: center;
  margin-top: 20px;
}

.termsOfUse .content p,
.kvkk .content p,
.cookies .content p,
.privacyPolicy .content p,
.aboutPage .content p {
  font-size: 13px;
}

.termsOfUse .content,
.kvkk .content,
.cookies .content,
.privacyPolicy .content,
.aboutPage .content {
  padding: 10px;
}

.footer {
  background-color: var(--main_color);
  padding-top: 20px;
  padding-bottom: 10px;
}

.footer .footerMenu a {
  text-decoration: none;
  color: white;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 5px;
}

.footer .title {
  font-weight: 600;
  color: white;
  margin-bottom: 10px;
}

.footer .image {
  font-size: 20px;
  color: white;
  font-weight: 600;
}

.footer .text {
  color: white;
  font-size: 13px;
  width: 75%;
}

.footer .contact .item {
  color: white;
  margin-bottom: 5px;
  font-size: 13px;
}

.footer .contact .item i {
  margin-right: 5px;
}

.footerBottom {
  padding: 5px;
  background-color: #f2f2f2f2;
}

.footerBottom .content {
  font-size: 12px;
}

.footerBottom .content a {
  text-decoration: none;
  text-transform: uppercase;
  color: var(--main_color);
  margin-left: 3px;
}

@keyframes pulsate {
  0% {
    background-color: #47a942;
    box-shadow: 0 0 10px 2px #47a942;
  }

  50% {
    background-color: #4dc247;
    box-shadow: 0 0 20px 5px #4dc247;
  }

  100% {
    background-color: #47a942;
    box-shadow: 0 0 10px 2px #47a942;
  }
}

.chatBtn {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-color: #4dc247;
  color: white;
  bottom: 2%;
  right: 2%;
  z-index: 10;
  cursor: pointer;
  box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
  animation: pulsate 1.5s infinite;
}

.chatBtn i {
  font-size: 23px;
}

.helpDesk {
  position: fixed;
  bottom: 4%;
  right: 6%;
  width: 275px;
  background-color: white;
  z-index: 99;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.helpDesk_header {
  background-color: var(--main_color);
  padding: 10px 15px;
  color: white;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.helpDesk_body {
  padding: 15px;
  min-height: 40vh;
}

.helpDesk_body .text {
  font-size: 11px;
}

.helpDesk_body .sender .text {
  margin-left: 10px;
  margin-bottom: 10px;
  background-color: cadetblue;
  padding: 5px;
  border-radius: 5px;
  color: white;
}

.helpDesk_body .receiver .text {
  margin-right: 10px;
  margin-bottom: 10px;
  background-color: bisque;
  border-radius: 5px;
  padding: 5px;
  color: black;
}

.helpDesk_footer {
  padding: 5px;
}

.helpDesk_footer .sendBtn {
  padding: 10px;
  background-color: var(--main_color);
  color: white;
  border-radius: 30%;
  cursor: pointer;
}

.helpDesk_footer input {
  border: none;
  outline: none;
  font-size: 12px;
}

.helpDesk_header .closeBtn {
  cursor: pointer;
}

.chatPanel .chatLeftMenu {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

.chatPanel .chatRightContent {
  padding-left: 0;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

.chatLeftMenu .chatMenuHeader {
  padding: 20px;
  padding-bottom: 5px;
}

.chatMenuHeader .title {
  font-size: 22px;
  font-weight: 600;
}

.chatMenuHeader .searchBar_messages {
  padding-bottom: 15px;
}

.chatMenuHeader .searchBar_messages input {
  background-color: #f5f5f5;
  border: none;
  padding: 10px 15px;
  border-radius: 22px;
  font-size: 14px;
  outline: none;
}

.chatMenuHeader .searchBar_messages i {
  position: absolute;
  margin-top: 11px;
  margin-left: -35px;
  font-size: 20px;
  color: #b1b1b1;
}

.chatLeftMenu .subTitle {
  text-transform: uppercase;
  color: #b1b1b1;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 15px;
  padding-left: 20px;
}

.chatLeftMenu .subTitle i {
  margin-right: 10px;
  font-size: 16px;
  margin-top: -1px;
}

.chatPanel .chatLeftMenu .chatMenuBody .selectedUser {
  background-color: #f5f5f5;
}

.chatLeftMenu .chatMenuBody .item {
  padding: 10px 15px 10px 15px;
}

.chatLeftMenu .chatMenuBody .avatar {
  width: 50px;
  height: 50px;
}

.chatMenuBody .avatar img {
  border-radius: 50%;
  width: 100%;
}

.chatMenuBody .profileDetails {
  margin-left: 10px;
  margin-top: 3px;
}

.chatMenuBody .item .name {
  font-size: 15px;
  font-weight: 600;
}

.chatMenuBody .item .lastMessage {
  font-size: 12px;
  font-weight: 400;
  opacity: 0.6;
}

.chatMenuBody {
  overflow-y: auto;
  max-height: 60vh;
}

.chatMenuBody::-webkit-scrollbar {
  width: 5px;
}

.chatMenuBody::-webkit-scrollbar-thumb {
  background: var(--main_color);
  border-radius: 3px;
}

.chatMenuBody::-webkit-scrollbar-track {
  background: #f5f5f5;
}

.chatMenuBody .messageTime {
  font-size: 13px;
  font-weight: 500;
  color: #b1b1b1;
}

.chatMenuBody .unreadMessages {
  width: 20px;
  height: 20px;
  font-size: 14px;
  background-color: var(--main_color);
  border-radius: 50%;
  color: white;
  margin-top: 3px;
}

.whyUs {
  margin-top: 50px;
}

.whyUs .image img {
  width: 100%;
}

.chatArea .chatHeader {
  padding: 15px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 0px 0px;
}

.chatHeader .avatar {
  width: 75px;
  height: 75px;
}

.chatHeader .avatar img {
  border-radius: 50%;
}

.chatHeader .details {
  margin-left: 20px;
}

.chatHeader .profile .name {
  font-size: 18px;
  font-weight: 600;
}

.chatHeader .profile .subtext {
  font-size: 13px;
  opacity: 0.8;
  font-weight: 400;
}

.chatArea .chatBody {
  padding: 20px;
  min-height: 60vh;
  overflow-y: scroll;
}

.chatArea .chatBody::-webkit-scrollbar {
  width: 5px;
}

.chatArea .chatBody::-webkit-scrollbar-thumb {
  font-variant: var(--main_color);
}

.chartArea .chatBody::-webkit-scrollbar-track {
  color: #f5f5f5;
}

.chatBody .messages .avatar {
  width: 40px;
  height: 40px;
}

.chatBody .messages .avatar img {
  width: 100%;
  border-radius: 50%;
}

.chatBody .messages .messageContent {
  width: 50%;
  font-size: 13px;
  padding: 10px 15px 10px 25px;
  border-radius: 25px;
  margin-bottom: 20px;
}

.chatBody .messages .receiver .messageContent {
  background-color: #f5f5f5;
  border-top-left-radius: 0;
  margin-left: 5px;
}

.chatBody .messages .sender .messageContent {
  background-color: var(--main_color);
  color: white;
  border-top-right-radius: 0;
  margin-right: 5px;
}

.chatArea .chatFooter {
  padding: 10px 20px;
}

.chatArea .chatFooter input {
  border: none;
  padding: 5px 15px;
  background-color: #f5f5f5;
  border-radius: 17px;
  height: 50px;
  font-size: 13px;
  outline: none;
}

.chatArea .chatFooter .sendBtn i {
  font-size: 24px;
  color: var(--main_color);
  margin-right: 55px;
  position: absolute;
  cursor: pointer;
}

.addDetailsModal input {
  border: none;
  outline-color: var(--main_color);
  padding: 10px;
  background-color: #f5f5f5;
  font-size: 14px;
}

.addDetailsModal textarea {
  padding: 10px;
  border: none;
  outline-color: var(--main_color);
  font-size: 14px;
  background-color: #f5f5f5;
  height: 100px;
  resize: none;
}

.addDetailsModal .addBtn {
  background-color: var(--main_color);
  color: white;
  border: none;
  border-radius: 7px;
  font-size: 14px;
  padding: 5px 25px;
}

/* Responsive Area */
@media(max-width:991px) {
  .header .navbar {
    display: none !important;
  }

  .header .headerButtons {
    display: none !important;
  }

  .whyUs .title,
  .sloganArea .title {
    font-size: 24px;
  }

  .chatMenuHeader .searchBar_messages input,
  .footer .contact .item,
  .footer .footerMenu a,
  .searchBar input,
  .sloganArea p {
    font-size: 12px;
  }

  .psicoArea .mainTitle,
  .howItWorks .mainTitle,
  .searchBar i {
    font-size: 18px;
  }

  .boxBody .item {
    padding: 5px 15px;
  }

  .userProfile .profileLeftMenu .name,
  .blogDetail .author .name,
  .boxHeader .name .title,
  .chatMenuBody .item .name {
    font-size: 13px;
  }

  .userProfile .profileLeftMenu .subtext,
  .blogDetail .author .subtext,
  .boxHeader .name .subtext,
  .chatHeader .profile .subtext,
  .chatMenuBody .messageTime {
    font-size: 11px;
  }

  .psicoBox .image {
    height: 66px;
  }

  .profileContentArea .boxTitle,
  .profileContentArea .table .btnDelete,
  .profileContentArea .table .btnEdit,
  .profileContentArea .boxHeader .addBtn,
  .profileContentArea .table th,
  .userProfile .profileNavbar a,
  .userProfile .profileChatButton a,
  .footer .title,
  .homepageBlog .title {
    font-size: 14px;
  }

  .businessPage .businessRow .businessRight {
    padding: 115px 30px;
  }

  .contactPage .contactRow .contactRight {
    padding: 110px 0;
  }

  .applyForm .applyFormLeft {
    padding: 90px 20px;
  }

  .footer .text {
    font-size: 11px;
    width: 100%;
  }

  .testArea .headBar .item {
    margin: 15px;
    font-size: 12px;
  }

  .chatMenuHeader .title {
    font-size: 18px;
  }

  .chatHeader .profile .name {
    font-size: 14px;
  }

  .chatMenuBody .item .lastMessage {
    font-size: 10px;
  }

  .chatMenuBody .unreadMessages {
    width: 16px;
    height: 16px;
    font-size: 10px;
  }

  .chatBody .messages .messageContent {
    width: 70%;
    font-size: 12px;
  }

  .chatArea .chatFooter .sendBtn i {
    font-size: 20px;
  }

  .blogDetail .contentArea .text .title {
    font-size: 18px;
  }

  .testPageArea .categoriesTopArea {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
  }
}

@media(max-width:767px) {
  .psicoBox .image {
    height: 75px;
  }

  .boxBody .item {
    padding: 5px 25px;
  }

  .applyForm .applyFormLeft,
  .contactPage .contactRow .contactRight,
  .businessPage .businessRow .businessRight {
    order: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
  }

  .applyForm .applyFormRight,
  .contactPage .contactRow .contactLeft,
  .businessPage .businessRow .businessLeft {
    order: 2;
  }

  .applyForm .applyFormLeft .image,
  .contactPage .contactRight .image,
  .businessPage .businessRight .image {
    width: 50%;
  }

  .blogDetail .contentArea .author .date,
  .profileContentArea .table td,
  .profileMenu .menuItems {
    font-size: 12px;
  }

  .footerBottom .content {
    font-size: 10px;
  }

  .testArea .question .title {
    flex-direction: column;
    align-items: start;
  }

  .testArea .question .title .text {
    margin-left: 0;
    margin-top: 5px;
    font-size: 14px;
  }

  .testArea .title {
    font-size: 18px;
  }

  .questions .title {
    margin-bottom: -25px;
  }

  .userProfile .profileContentArea .title,
  .profileContentArea .item {
    padding: 15px;
  }

  .chatLeftMenu,
  .chatArea {
    margin-top: 25px;
  }

  .blogDetail .contentArea .text .title {
    font-size: 16px;
  }

  .blogDetail .contentArea p {
    font-size: 12px;
  }

  input,
  label {
    font-size: 13px;
  }

  .profileContentArea .blogPostArea input::file-selector-button,
  .profileContentArea .blogPostArea .blogUploadBtn,
  .profileContentArea .settings .updateBtn {
    font-size: 14px;
  }

  .psicoCard {
    flex-wrap: wrap;
  }

  .psicoCard .image {
    padding-left: 25px;
  }

  .psicoCard .buttonsArea {
    flex-direction: row !important;
    margin-top: 0 !important;
    flex-wrap: wrap;
    padding-left: 25px;
  }

  .psicoCard .buttonsArea .infoBtn {
    position: absolute;
    top: 20px;
    right: 38px;
    color: gray;
    font-size: 14px;
    font-weight: 500;
    cursor: default;
  }

  .ownTestTopArea {
    display: flex;
    flex-direction: column;

  }

  .whyUsOuter
  {
    display:block!important;
  }
}

@media(max-width:522px) {
  .profileMenu {
    justify-content: space-between !important;
  }

  .profileMenu .menuItems {
    font-size: 10px;
    padding: 5px 5px;
  }
}

@media(max-width:500px) {

  .businessPage .businessRow .title,
  .contactPage .contactRow .title,
  .applyForm .customRow .applyFormRight .title {
    font-size: 20px;
  }

  .businessPage .businessBtn,
  .contactPage .contactBtn,
  .contentArea .certificates .title,
  .contentArea .education .title,
  .modal-title,
  .profileContentArea .item .name {
    font-size: 14px;
  }

  .contentArea .certificates .text,
  .contentArea .education .context .school,
  .contentArea .cvDetails p,
  .contentArea .comments .commentText p,
  #randevuModal .days .day,
  #randevuModal .disabledItem,
  #randevuModal .emptyItem,
  #randevuModal .selectedItem {
    font-size: 12px;
  }

  .contentArea .certificates .date,
  .contentArea .education .context .date,
  #randevuModal .appointmentTimes .time {
    font-size: 11px;
  }

  .psyProfileArea .profile .randevuBtn button {
    padding: 5px 10px;
  }

  #randevuModal2 .nextStepBtn {
      font-size: 12px;
  }

  .titleProfession,
  .contentArea .description .title {
    font-size: 16px;
  }

  .products {
    margin: 0 50px;
  }

  .contentArea .products .box {
    justify-content: center;
  }

  .contentArea .products .box .body {
    padding-left: 20px;
    margin-left: 20px;
  }

  #randevuModal .days {
    gap: 10px;
  }

  #randevuModal .appointmentTimes .time {
    padding: 5px 0;
  }

  .profileContentArea .item {
    padding: 10px;
  }

  .blogUploadBtn {
    width: 100% !important;
  }

  .profileContentArea .blogPostArea input::file-selector-button {
    font-size: 12px;
  }

  .main {
    padding-top: 20px;
  }

  .sloganArea .image {
    margin-top: 20px;
  }

  .sloganArea {
    margin-bottom: 0;
  }

  .howItWorks .content {
    margin: 0;
  }

  .howItWorks .item {
    margin-bottom: 25px;
  }

  .homepageBlog .mainTitle,
  .psicoArea .mainTitle,
  .howItWorks .mainTitle,
  .howItWorks .item .icon {
    margin-bottom: 10px;
  }

  .whyUs {
    margin-bottom: 70px;
  }

  .blogDetail .contentArea .author .date {
    margin-top: 5px;
  }

  #randevuModal .nextStepBtn {
    font-size: 12px;
  }

  .chatMenuHeader .searchBar_messages input,
  .footer .contact .item,
  .footer .footerMenu a,
  .searchBar input,
  .sloganArea p {
    font-size: 11px;
  }
}

@media(max-width:495px) {
  .boxBody .item {
    padding: 5px 10px;
  }
}

@media(max-width:479px) {
  .homepageBlog .blogheader .image {
    max-width: 100%;
  }
}

@media(max-width:385px) {
  #randevuModal .appointmentTimes .time {
    font-size: 10px;
  }

  #randevuModal .days .day {
    font-size: 11px;
  }
}

@media(max-width:375px) {
  .contentArea .products .box .body {
    padding-left: 10px;
    margin-left: 10px;
  }

  #randevuModal .disabledItem,
  #randevuModal .emptyItem,
  #randevuModal .selectedItem,
  .blogDetail .author .subtext {
    font-size: 10px;
  }

  #randevuModal .appointmentTimes .time {
    font-size: 9px;
  }

  #randevuModal .days .day {
    padding: 5px 10px;
  }
}

@media(max-width:365px) {
  .profileMenu .menuItems {
    padding: 5px 0;
  }
}

/* Revize */
.phoneNumberArea select {
  border: none;
  background-color: #f5f5f5;
  padding: 10px;
  font-size: 13px;
  border-radius: 7px;
  outline-color: var(--second_color);
  color: gray;
}

.phoneNumberArea {
  gap: 10px;
}

.psicoTitle {
  font-size: 22px;
  font-weight: 500;
  margin: 20px 0;
}

.testResult .psicoTitle {
  font-size: 20px;
  color: grey;
}

.testResult .psicoTitlePoint {
  height: 55px;
  width: 55px;
  border-radius: 30px;
  background-color: var(--main_color);
  font-size: 28px;
  color: #fff;
  font-weight: 600;
}


.psicoCard {
  gap: 15px;
  padding: 15px;
  box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 48px;
  border-radius: 17px;
  margin-bottom: 25px;
  position: relative;
}

.psicoCard .status {
  color: var(--main_color);
  font-weight: 500;
  text-align: center;
}

.psicoCard .image img {
  border-radius: 50%;
  width: 100px;
  border: 3px solid var(--main_color);
}

.profileDetails {
  padding-left: 20px;
}

.psicoCard .profileDetails .name {
  font-size: 22px;
  font-weight: 600;
}

.psicoCard .profileDetails .subtext {
  color: gray;
  font-size: 14px;
  font-weight: 400;
}

.profileDetails .price {
  font-weight: 600;
  color: gray;
}

.psicoCard .expertise {
  gap: 10px;
}

.psicoCard .expertise .item {
  background-color: var(--main_color);
  color: white;
  border-radius: 15px;
  padding: 5px 10px;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.psicoCard .contentHide{
  max-height: 45px;
  overflow: hidden;
}
.psicoCard .contentShow{
  max-height: max-content;
}

.psicoCard .content p {
  font-size: 14px;
  color: gray;
  font-weight: 400;

}
 .readMore {
  color: var(--main_color);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}

.psicoCard .buttonsArea {
  gap: 10px;
  margin-top: 40px;
}

.psicoCard .buttonsArea .infoBtn {
  position: absolute;
  bottom: 10px;
  color: gray;
  font-size: 14px;
  font-weight: 500;
  cursor: default;
}

.buttonsArea .infoBtn .descriptionArea {
  position: absolute;
  color: white;
  font-size: 12px;
  padding: 5px;
  text-align: center;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.7);
  z-index: 2;
  display: none;
}

.buttonsArea .infoBtn:hover .descriptionArea {
  display: block;
}

.psicoCard .danisBtn,
.psicoCard .meetingBtn,
.psicoCard .showProfile {
  padding: 6px 12px;
  border-radius: 12px;
  color: white;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 13px;
  min-width: 155px;
  min-height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.psicoCard .danisBtn {
  background-color: #5f6fa0;
}

.psicoCard .meetingBtn {
  background-color: #8BB174;
}

.psicoCard .showProfile {
  color: var(--main_color);
  border-color: var(--main_color);
}

.psicoCard .meetingDetails {
  gap: 15px;
  color: gray;
  font-weight: 500;
  font-size: 14px;
}

.psicoCard .meetingDetails .item i {
  margin-right: 10px;
}

.phoneAreaApplyForm {
  gap: 15px;
}

.loginArea select,
.phoneAreaApplyForm select {
  border: none;
  background-color: #f5f5f5;
  padding: 10px;
  font-size: 13px;
  border-radius: 7px;
  outline: none;
  color: gray;
}

.loginArea label {
  color: white;
  font-size: 12px;
  margin-bottom: 5px;
  font-weight: 500;
}

.loginArea input::file-selector-button {
  background-color: transparent;
  color: var(--main_color);
  border: 1px solid var(--main_color);
  border-radius: 7px;
  padding: 5px 10px;
  font-size: 13px;
}

.loginArea .fileInput {
  color: var(--main_color);
}

.chatPanel {
  margin: 45px 0;
}

.succesIcon i {
  font-size: 64px;
  color: var(--main_color);
}

.succesIcon .desc {
  font-size: 13px;
  color: gray;
}

.succesModalBtn {
  color: white;
  background-color: var(--main_color);
  padding: 8px 16px;
  border-radius: 12px;
  border: none;
  font-size: 13px;
}

.succesModalBtnMeeting {
  color: white;
  background-color: var(--main_color);
  padding: 8px 16px;
  border-radius: 12px;
  border: none;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
}

.succesModalBtnMeeting:hover {
  color: white;
  background-color: var(--main_color);
  padding: 8px 16px;
  border-radius: 12px;
  border: none;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
}

.profileContentArea .blogsBtn {
  border: 1px solid white;
  font-size: 13px;
  padding: 5px 10px;
  border-radius: 12px;
  cursor: pointer;
}

.profileContentArea .blogsBtn:hover {
  color: var(--main_color);
  background-color: white;
  transition: 0.3s ease;
}

.blogPostArea {
  display: flex;
  flex-direction: column;
}

.blogPostArea .image {
  width: 100px;
  height: 100px;
}

.blogPostArea .image img {
  width: 100%;
  border-radius: 12px;
}

.blogPostArea .blogTitle {
  font-weight: 600;
}

.blogPostArea .date {
  font-weight: 500;
}

.blogPostArea .table td {
  vertical-align: middle;
}

.blogPostArea .deleteBtn {
  padding: 5px;
  color: white;
  background-color: #ff3b3b;
  border-radius: 12px;
  cursor: pointer;
}

.blogPostArea .showBtn {
  padding: 5px;
  color: white;
  background-color: var(--main_color);
  border-radius: 12px;
  cursor: pointer;
}

.source .titleSource {
  font-weight: 500;
}

.source .titleSource span {
  font-size: 14px;
  font-style: italic;
  font-weight: 400;
  margin-left: 5px;
}

.contactLeft .formArea select {
  border: none;
  background-color: #f4f4f4;
  padding: 10px;
  font-size: 13px;
  color: gray;
}

.contactLeft .formArea label {
  margin-left: 5px;
  font-weight: 500;
  font-size: 14px;
  color: var(--main_color);
}

.goChatBtn {
  border: none;
  color: white;
  background-color: var(--main_color);
  font-size: 14px;
  width: 32px;
  height: 32px;
  border-radius: 36%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.filterTitle {
  font-size: 22px;
  font-weight: 500;
  margin: 20px 0;
}

.filterBox {
  padding: 15px;
  border-radius: 17px;
  box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 48px;
}

.filterBox label {
  font-size: 14px;
  font-weight: 500;
}

.filterBox input,
.filterBox select {
  border: none;
  background-color: #f5f5f5;
  border-radius: 7px;
  padding: 10px;
}

.filterBox .filterBtn {
  padding: 5px 10px;
  background-color: var(--main_color);
  color: white;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.testPageArea {
  margin: 30px 0;
  gap: 20px;
}

.categoriesBox {
  border-radius: 17px;
  margin-bottom: 20px;
  padding: 15px 0;
  box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 48px;
}

.categoriesBox .categoriesTitle {
  font-weight: 600;
  margin-bottom: 15px;
  padding-left: 15px;
  padding-top: 15px;
}

.categoriesBox .tabsArea .item {
  padding: 10px 15px 10px 15px;
  border-left: 5px solid transparent;
  font-size: 14px;
  cursor: pointer;
}

.categoriesBox .tabsArea .activeItem {
  border-color: var(--main_color);
}

.testsArea .testBox .image {
  height: 150px;
}

.testsArea .testBox .image img {
  width: 100%;
  height: 150px;
  border-top-left-radius: 17px;
  border-top-right-radius: 17px;
}

.testsArea .testBox .content {
  padding: 15px;
  border-bottom-left-radius: 17px;
  border-bottom-right-radius: 17px;
  box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 48px;
}

.testsArea .testBox .title {
  font-weight: 600;
}

.testsArea .testBox .description {
  font-size: 12px;
  color: gray;
}

.testsArea .testBox .startTestBtn {
  font-size: 14px;
  padding: 5px 10px;
  background-color: var(--main_color);
  border-radius: 12px;
  color: white;
  text-align: center;
  cursor: pointer;
}

.testsArea .testBox {
  margin-bottom: 15px;
}

.testPageArea .titleTestCategory {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 15px;
}

@keyframes blink {
  0% {
    color: rgb(252, 68, 68);
  }

  50% {
    color: rgb(255, 173, 173);
  }

  100% {
    color: rgb(252, 68, 68);
  }
}

.infoestCategory {
  animation: blink 3s infinite;
  font-size: 15px;
}

.aboutRow {
  margin: 25px 0;
}

.aboutRow .contentWrapper {
  padding: 15px;
}

.aboutRow .contentWrapper .subTitle {
  color: var(--main_color);
  font-weight: 600;
  font-size: 14px;
}

.aboutRow .contentWrapper .mainTitle {
  font-weight: 600;
  font-size: 22px;
}

.aboutRow .contentWrapper .aboutContent {
  font-size: 13px;
}

.aboutRow .contentWrapper .item {
  gap: 10px;
}

.aboutRow .contentWrapper .item i {
  color: white;
  font-size: 12px;
  width: 24px;
  height: 24px;
  background-color: var(--main_color);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.aboutRow .contentWrapper .item .text {
  font-size: 14px;
  font-weight: 600;
}

.aboutRow .btnAbout {
  padding: 8px 16px;
  background-color: var(--main_color);
  color: white;
  font-size: 14px;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 25px;
  cursor: pointer;
}

.aboutRow1 .image {
  height: 300px;
}

.aboutRow1 .image img {
  height: 300px;
}

.aboutRow1 p {
  font-size: 13px;
}

.customFileInput {
  border: none;
  background-color: #f5f5f5;
  padding: 10px;
  font-size: 13px;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  border-bottom: 1px solid #c5c5c5;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.filesWrapper {
  padding: 10px;
  background-color: #f5f5f5;
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
}

.filesWrapper .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--main_color);
}

.filesWrapper .item i {
  cursor: pointer;
}

.cancelBtn {
  border: none;
  padding: 6px 12px;
  color: white;
  background-color: crimson;
  border-radius: 7px;
  border: 1px solid transparent;
  cursor: pointer;
}

.cancelBtn:hover {
  background-color: white;
  color: crimson;
  border-color: crimson;
  transition: 0.3s ease;
}

.testCompleteBtn {
  margin: 25px 0;
  padding: 8px 16px;
  background-color: var(--main_color);
  width: max-content;
  border-radius: 7px;
  color: white;
  border: 1px solid transparent;
  cursor: pointer;
}

.testCompleteBtn:hover {
  background-color: white;
  color: var(--main_color);
  border-color: var(--main_color);
  transition: 0.3s ease;
}

.testResult .ownTestTitle {
  color: var(--main_color);
  font-weight: 600;
  font-size: 25px;
}

.testResult .imageTestDetail {
  height: 400px;

}

.testResult .imageTestDetail img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.testResultTitle {
  font-size: 24px;
  font-weight: 500;
}

.testResultArea .image {
  max-width: 600px;
}

.testResultArea .image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.backBtn {
  gap: 10px;
  color: var(--main_color);
  cursor: pointer;
}

.seansModalBody .modalItemHeader {
  font-size: 16px;
  font-family: monospace;
  font-weight: 600;
  gap: 10px;
}

.seansModalBody .modalItemBottom {
  font-size: 13px;
}

.seansModalBody .modalItem {
  padding: 10px;
  border: 1px solid #e1e1e1;
  cursor: pointer;
  background-color: #fff;
}

.seansModalBody .modalItem:hover {
  background-color: var(--main_color);
  transition: 0.3s ease;
}

.seansModalBody .modalItem:hover .modalItemBottom,
.seansModalBody .modalItem:hover .modalItemHeader {
  color: white;
}

.seansModalBody .itemSelected {
  background-color: var(--main_color);
}

.seansModalBody .itemSelected .modalItemBottom,
.seansModalBody .itemSelected .modalItemHeader {
  color: white;
}

.seansModalBody .modalItem span {
  text-decoration: line-through;
  color: gray;
}

.testResult .viewAllBtn {
  padding: 6px 12px;
  background-color: var(--main_color);
  color: white;
  border-radius: 7px;
  margin: 25px 0;
  cursor: pointer;
}

.accordion-button:focus {
  border: none;
  box-shadow: none !important;
  background-color: #8dced8b1;
  color: var(--second_color);
  font-weight: 500;
}

.customBlogImage
{
  width:100%;
  height:auto;
  background-color:#dadada;
  float:left;
  border-radius:50%;
  background-size:cover;
}

.customBlogImage:before
{
  content:'';
  display:block;
  padding-bottom:100%;
}

.customBlogBoxImage
{
  width:100%;
  height:250px;
  background-color:#dadada;
  border-radius:10px 10px 0px 0px;
  background-repeat:no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}

.customBlogBoxImage img
{
  width:100%;
  height:250px;
  object-fit: contain;
  position:relative;
  z-index:5;
}

.customBlogBoxImageBack
{
  width:100%;
  height:100%;
  position:absolute;
  left:0px;
  top:0px;
  background-size:cover;
  background-position:center;
  z-index:2;
  filter:blur(5px);
  opacity:0.7;
}

.customCalendarAreaOuter
{
  width:100%;
  min-height:20px;
  background-color:aqua;
  float:left;
  margin-top:20px;
  border:1px solid #efefef;
}

.customCalendarAreaTopline
{
  width:100%;
  height:40px;
  background-color:#fff;
  float:left;
  border:1px solid #efefef;
  display:flex;
  align-items:center;
  justify-content:center;
}

.customCalendarAreaTopLineBtn
{
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  font-weight:500;
  color:#333;
  cursor:pointer;
  border-right:2px solid #efefef;
}

.customCalendarAreaTopLineBtn:last-child
{
  border-right:0px;
  border-left:2px solid #efefef;
}

.customCalendarAreaTopLineCenter
{
  flex:1;
  height:40px;    
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  font-weight:500;
  color:#333;
}

.customCalendarAreaDaysOuter
{
  width:100%;
  height:30px;
  background-color:var(--main_color);
  float:left;
  display:flex;
  align-items:center;
  justify-content:center;
}

.customCalendarAreaDayName
{
  flex:1;
  height:30px;    
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:400;
  color:#fff;
  border-right:2px solid #fff;
}

.customCalendarAreaDayName:last-child
{
  border-right:0px;
}

.customCalendarAreaDaysBoxes
{
  width:100%;
  min-height:20px;
  background-color:#fff;
  float:left;
}

.customCalendarAreaDayBoxDefault
{
  width:calc(100% / 7);
  height:auto;
  float:left;    
  position:relative;
  border:1px solid #efefef;
  background-color:#efefef;
}

.customCalendarAreaDayBoxDefault:before
{
  content:'';
  display:block;
  padding-bottom:100%;
}

.customCalendarAreaDayBox
{
  width:calc(100% / 7);
  height:auto;
  float:left;    
  position:relative;
  border:1px solid #efefef;
  cursor:pointer;
}

.customCalendarAreaDayBox:before
{
  content:'';
  display:block;
  padding-bottom:100%;
}

.customCalendarAreaDayBox span
{
  position:absolute;
  right:10px;
  top:5px;
}

.customCalendarAreaDayBox span i
{
  font-size:10px;
  float:left;
  color:#e2e2e2;
  margin-right:6px;
  margin-top:6px;
}

.customCalendarAreaOuterTopInfos
{
  width:100%;
  min-height:30px;
  border:2px solid #efefef;
  margin-top:20px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:10px;
  gap:10px;
}

.customCalendarAreaOuterTopInfoBox
{
  min-width:10px;
  height:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  color:#333;
  padding-top:2px;
}

.customCalendarAreaOuterTopInfoBox i
{
  font-size:10px;
  margin-right:7px;
  float:left;
}

@media only screen and (max-width: 600px) 
{
  .customCalendarAreaDayBox span
  {
      font-size:10px;         
      right:5px;
      top:5px;
  }

  .customCalendarAreaDayBox span i
  {
      font-size: 7px;
      margin-top: 4px;
      margin-right: 4px;
  }

  .customCalendarAreaDayName
  {   
      font-size:10px;
  }

  .customCalendarAreaTopLineCenter
  {   
      font-size:13px;
  }

  .customCalendarAreaOuterTopInfoBox
  {
      font-size:10px;
  }
}

.clockButtonsOuter
{
    width:100%;
    min-height:20px;
    float:left;
    margin-bottom:-10px;
}

.clockButton
{
    width:calc((100% / 3) - (20px / 3));
    height:35px;
    background-color:#f3f3f3;  
    margin-right:10px;
    float:left;
    margin-bottom:10px;
    border-radius:4px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    padding-top:2px;
    cursor:pointer;
}

.clockButton:nth-child(3n + 3)
{
    margin-right:0px;
}

.clockBtnDanger
{   
    background-color:var(--main_color);  
    color:white;
}

.modal-header-al{
  border-bottom: none !important;
}

.modal-footer-al{
  border-top: none !important;
}

.btn-pre-test-modal{
  background-color: var(--main_color);
}

.btn-pre-test-modal:focus{
  background-color: var(--main_color);
  border-color: var(--main_color);
  box-shadow: none;
}


.btn-pre-test-modal:active{
  box-shadow: none !important;
  color: white;
}

.btn-pre-test-modal:hover{
  border-color: var(--main_color);
  color: black;
}

.icon_al{
  display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    background-color: var(--main_color);
    width: 30px;
    height: 30px;
    border-radius: 35%;
    font-size: 15px;
    font-weight: 600;
}

.text_al{
  padding: 5px 10px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    color: gray !important;
    border: 1px solid gray !important;
    font-weight: 500 !important;
    width: max-content;
    margin-top: 10px;
    cursor: pointer;
}

.text_al_active{
  background-color: var(--main_color) !important;
  color: white !important;
  border-color: var(--main_color) !important;
}

.index_pre_test_modal2_modal_body_container{
  width: 100%;
  min-height: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.index_pre_test_modal2_modal_body_img{
  width: 100px;
  height: 100px;
  border-radius: 100%;
  border: 3px solid var(--main_color);
  object-fit: contain;
}

.name_al{
  font-size: 22px;
    font-weight: 600;
}

.subtext_al{
  color: gray;
    font-size: 14px;
    font-weight: 400;
}

@media screen and (max-width: 600px) {
  .finish_modal_text_al{
   font-size: 12px !important;
  }

  .text_al{
    width: 100% !important;
  }
 }