@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500&family=Tangerine:wght@400;700&display=swap');

html, body {
   font-family: 'Rajdhani',sans-serif;
   font-size: 18px;
   font-weight: 400;
   text-size-adjust: auto;
   letter-spacing: normal;
   
}

#mainBody{
padding-top:8rem ;
}
#mainSection {
margin-top: -5rem;
   background-image: url(/images/dolsaHero.webp);
   background-size: 100% 100%;
   background-repeat: no-repeat;
}
main {
   background-color: black;
   background-size: 100% 100%;
   opacity: 0.9;
}

.svg1-border {
   border: .1rem solid #cd1818;
   border-radius: 50% 50%;
   padding: 1rem 1rem 1rem 1rem;
   width: 300px;
   height: 300px;
}
p {
   font-family: 'Rajdhani',sans-serif;
   font-size: 18px;
   text-size-adjust: auto;
}

h1, h2, h3, h4, h5 {
   font-family: 'Rajdhani',sans-serif;
}

h4 {
   text-transform: uppercase;
   font-size: 0.6rem;
}

.dobLabel {
   text-transform: uppercase;
   font-size: 0.7rem;
   color: #cd1818;
   margin-top: -5px;
}
.img-circle{
border-radius: 50% 50%;
width:25rem;
height:25rem;
}

.service-list {
   border-top: 1px solid #cd1818;
   padding: 3rem 0 3rem 0;
}
.service-list h3{
text-transform:uppercase;
color:#cd1818;
font-size:1rem;
font-weight:bold;
}
h1:focus {
   outline: none;
}

.page-item.active {
   background-color: transparent;
   color: #cd1818;
}

.half-input-container {
   display: flex;
   justify-content: space-between;
}


.custom-message-input {
   height: 4rem;
   width: stretch;
   margin-bottom: 1rem;
   margin: 1rem 0 1rem 0;
   border: 0;
   border-bottom: 0.5px solid white;
   background: none;
   color: white;
}
.custom-form-select {
   display: block;
   height: 2rem;
   width: 95%;
   text-align: center;
   padding: .375rem 2.25rem .375rem .75rem;
   border: 0;
   border-bottom: 0.5px solid #474747;
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
   background-repeat: no-repeat;
   background-position: right .75rem center;
   background-size: 16px 12px;
   appearance: none;
   margin-top: 3rem;
}


custom-message-input:focus::placeholder {
   color: black;
}
.custom-file-input::-webkit-file-upload-button {
   visibility: hidden;
}

.custom-file-input::before {
   content: 'Click To Upload Images';
   display: inline-block;
   background: linear-gradient(top, #f9f9f9, #cd1818);
   border: 1px solid #cd1818;
   border-radius: 1.5rem;
   padding: 1rem 2rem;
   outline: none;
   white-space: nowrap;
   -webkit-user-select: none;
   cursor: pointer;
   text-shadow: 1px 1px #fff;
   font-weight: 700;
   font-size: 1rem;
}

.custom-file-input:hover::before {
   border-color: #cd1818;
   background-color: #cd1818;
   
}

.custom-file-input:active::before {
   background: -webkit-linear-gradient(top, #e3e3e3, #cd1818);
}
a, .btn-link {
   color: #0071c1;
}

.btn-primary {
   color: #fff;
   background-color: #1b6ec2;
   border-color: #1861ac;
}

.input-section {
   margin-bottom: 2rem;
}

.input-description {
   margin-bottom: 0.5rem;
}

.radio-item-group input[type="radio"] {
   display: none;
}

.radio-item-group label {
   border-color: #cd1818;
   border-width: 1px;
   padding: 0.3rem 1.5rem;
   border-radius: 10px;
   width: 100%;
   border-style: solid;
}

.radio-item-group input[type="radio"]:checked + label {
   background-color: #cd1818;
   color: white;
   width: 100%;
   border: 1px solid;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
   box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

tr {
   padding-top: 2rem;
   padding-bottom: 1rem;
}

/* Custom Round Radio Button */
.customaccordion-button {
   position: relative;
    align-items: center;
   width: 100%;
   padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
   font-size: 1.15rem;
text-transform:uppercase;
   color: var(--bs-accordion-btn-color);
   text-align: left;
   background-color: var(--bs-accordion-btn-bg);
   border:2px solid black;
   border-radius: 0;
   overflow-anchor: none;
   transition: var(--bs-accordion-transition);
}

.InputRadiocontainer {
   display: block;
   position: relative;
   padding-left: 35px;
   margin-bottom: 12px;
   cursor: pointer;
   font-size: 22px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

   /* Hide the browser's default radio button */
   .InputRadiocontainer input {
      position: absolute;
      opacity: 0;
      cursor: pointer;
   }

/* Create a custom radio button */
.checkmark {
   position: absolute;
   top: 0;
   left: 0;
   height: 1.2rem;
   width: 1.2rem;
   background-color: #b8bbbf;
   border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.InputRadiocontainer:hover input ~ .checkmark {
   background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.InputRadiocontainer input:checked ~ .checkmark {
   background-color: #f32121;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
   content: "";
   position: absolute;
   display: none;
}

/* Show the indicator (dot/circle) when checked */
.InputRadiocontainer input:checked ~ .checkmark:after {
   display: block;
}

/* Style the indicator (dot/circle) */
.InputRadiocontainer .checkmark:after {
   top: .45rem;
   left: .45rem;
   width: .4rem;
   height: .4rem;
   border-radius: 50%;
   background: white;
}

 main .card {
      border-radius: 3rem;
      border: none;
background-color:black;
   }

   main h1 {
      font-size: 2rem;
      font-weight: 800;
      font-family: 'Rajdhani',sans-serif;
      color: white;
   }

.introCard p {
   color: white;
}

.introCard h5 {
   color: white;
}


.content {
   padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
   outline: 1px solid #26b050;
}

.invalid {
   outline: 1px solid #cd1818;
}

.validation-message {
   color: #cd1818;
}

#passwordHelpBlock {
   font-size: .7rem;
   font-style: italic;
}

#blazor-error-ui {
   background: lightyellow;
   bottom: 0;
   box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
   display: none;
   left: 0;
   padding: 0.6rem 1.25rem 0.7rem 1.25rem;
   position: fixed;
   width: 100%;
   z-index: 1000;
}
/*Navigation*/



.navbar-brand {
   font-size: 1.1rem;
   color: #fff;
}

.oi {
   width: 2rem;
   font-size: 1rem;
   vertical-align: text-top;
   top: -2px;
}

.navbar-toggler1 {
   padding: .25rem;
   line-height: 1;
   color: white;
   background-color: transparent;
   border: var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);
   border-radius: var(--bs-navbar-toggler-border-radius);
   transition: var(--bs-navbar-toggler-transition);
}

.mnav {
   padding: 0 1rem 0 1rem;
   color: whitesmoke;
   text-decoration: none;
   align-content: center;
   text-align: center;
}

.mnav-bottom-text {
   font-size: .4rem;
   align-content: center;
}

.notify {
   font-size: .7rem;
}

.nav-item {
   font-size: 0.9rem;
   padding-bottom: 0.5rem;
}

   .nav-item:first-of-type {
      padding-top: 1rem;
   }

   .nav-item:last-of-type {
      padding-bottom: 1rem;
   }

@media (min-width: 990px) {
   .navbar-toggler {
      display: none;
   }

   .collapseqw {
      /* Never collapse the sidebar for wide screens */
      display: block;
   }
}

@media (max-width: 989px) {
   .navbar-toggler {
      display: none;
   }

   .collapseqw {
      /* Never collapse the sidebar for wide screens */
      display: none;
   }
}
@media (max-width:470px){
   .img-circle {
      border-radius: 50% 50%;
      width: 20rem;
      height: 20rem;
   }
}

#blazor-error-ui .dismiss {
   cursor: pointer;
   position: absolute;
   right: 0.75rem;
   top: 0.5rem;
}

.blazor-error-boundary {
   background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
   padding: 1rem 1rem 1rem 3.7rem;
   color: white;
}

   .blazor-error-boundary::after {
      content: "An error has occurred."
   }

.loading-progress {
   position: relative;
   display: block;
   width: 8rem;
   height: 8rem;
   margin: 20vh auto 1rem auto;
}

   .loading-progress circle {
      fill: none;
      stroke: #cd1818;
      stroke-width: 0.6rem;
      transform-origin: 50% 50%;
      transform: rotate(-90deg);
   }

      .loading-progress circle:last-child {
         stroke: #cd1818;
         stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
         transition: stroke-dasharray 0.05s ease-in-out;
      }

.loading-progress-text {
   position: absolute;
   text-align: center;
   font-weight: bold;
   color: #cd1818;
   opacity: 0.7;
   inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

   .loading-progress-text:after {
      content: var(--blazor-load-percentage-text, "DOLSA");
   }

/*
Member details command Edit color-profile Tab
Update the smaller screens as well 
*/


.tab {
   overflow: hidden;
   border: 1px solid #ccc;
   background-color: #cd1818;
}

   .tab button {
      background-color: inherit;
      float: left;
      border: none;
      outline: none;
      cursor: pointer;
      padding: 14px 16px;
      transition: 0.3s;
      font-size: 17px;
   }

      .tab button:hover {
         background-color: #ddd;
      }

.tab-button-active {
   background-color: #ddd;
}

.tab-content {
   padding: 6px 12px;
   border-top: none;
}


.labelText {
   color: #1f2226;
}


td {
   font-size: 0.7rem;
}

/*Member And Like Component*/
/*.card :hover img {
   transform: scale(1.2, 1.2);
   transition-duration: 500ms;
   transition-timing-function: ease-out;
   opacity: 1;
}


.card-img {
   transform: scale(1.0, 1.0);
   transition-duration: 500ms;
   transition-timing-function: ease-out;
}*/




.photo-editorImg {
   width: 100%;
   height: auto;
}



.member-component-right .member-icons {
   bottom: 0;
   opacity: 1;
}



/*Message Component*/

#messages p {
   font-size: .7rem;
}

#messages h5 {
   font-size: 1rem;
   text-transform: uppercase;
   color: #cd1818;
}

.chat-online {
   color: #34ce57;
   animation-name: blink;
   animation-duration:0.5s;
   animation-iteration-count: infinite;
}

@keyframes chat-online {
   50% {
      opacity: 0;
   }
}



.chatTime {
   font-size: .5rem;
   font-style: italic;
   padding-left: 1rem;
   margin-right: 0px;
}

   .chatTime:hover {
      font-size: .5rem;
      font-style: italic;
      padding-left: 1rem;
      color: whitesmoke;
   }

.chat-offline {
   color: #e4606d
}

.cardMessage {
   position: relative;
   display: flex;
   flex-direction: column;
   min-width: 0;
   word-wrap: break-word;
   background-color: #fff;
   background-clip: border-box;
   border: 1px solid rgba(0,0,0,.125);
   border-radius: .25rem;
}

.messageCard {
   color: white;
}

   .messageCard :hover {
      color: #cd1818;
   }

.chat-wrapper{
   width: 40rem;
   max-width: 100%;
   position: relative;
}
   .chat-wrapper button {
      height: 90%;
      border-radius: 50%;
      aspect-ratio: 1;
      background:#ced4da;
      position: absolute;
      border: 1px solid #cd1818;     
      right: 0;
   }
.form-control-chatbox {
   width: 100%;
   padding: .35rem 2rem;
   font-size: .75rem;
   color: #212529;
   background-color: #fff;
   border: 2px solid #ced4da;
   border-radius: 3rem;
}
.chat-messages {
   display: flex;
   flex-direction: column;
   max-height: 600px;
   overflow-y: scroll;
}

.chat-message-left,
.chat-message-right {
   display: flex;
   flex-shrink: 0
}

.chat-message-left {
   margin-right: auto
}

.chat-message-right {
   flex-direction: row-reverse;
   margin-left: auto
}

.py-3 {
   padding-top: 1rem !important;
   padding-bottom: 1rem !important;
}

.px-4 {
   padding-right: 1.5rem !important;
   padding-left: 1.5rem !important;
}

.flex-grow-0 {
   flex-grow: 0 !important;
}

.border-top {
   border-top: 1px solid #dee2e6 !important;
}


@media (max-width: 768px) {
   .half-input-container {
      display: flex;
      flex-flow: column;
      padding: 0;
   }

   .custom-date-input {
      height: 2rem;
      width: auto;
      margin: 3rem 0 0 0;
      padding: 0 1rem 0 1rem;
      border: 0;
      border-radius: 15px;
      background: none;
      color: white;
      background-color: orangered;
   }
}

@media (min-width:1200px) {
   .oi {
      width: 1.3rem;
      font-size: 1rem;
      vertical-align: text-top;
      /* top: -2px;*/
   }
}

input[type=file]::file-selector-button {
   margin-right: 20px;
   border: 2px solid #cd1818;
   padding: 10px 20px;
   border-radius: 10px;
   color: #cd1818;
   cursor: pointer;
   transition: background .2s ease-in-out;
}

   input[type=file]::file-selector-button:hover {
      background: #cd1818;
      color: #fff;
   }

.auth-card {
   box-shadow: 0 3px 8px 2px #FF0000, 0 6px 20px 0 #E4E4E4;
   padding-bottom: 4rem;
   border-radius: 3rem;
}
.user-card {
   box-shadow: 0 3px 8px 2px #FF0000, 0 6px 20px 0 #E4E4E4;
   padding-bottom: .6rem;
   margin-bottom:.5rem;
   border-radius: 1rem;
}
}
#file-input {
   display: none;
}

#file-input-label {
   font-size: 1.3em;
   padding: 10px 15px;
   border: 1px solid #cd1818;
   color: #cd1818;
   border-radius: 4%;
}
/* HTML: <div class="loader"></div> */
.loader {
   position: relative;
   display: block;
   margin: 20vh auto 1rem auto;
   width: 20rem;
   aspect-ratio: 1;
   background: linear-gradient(#dc1818 0 0) bottom/100% 0% no-repeat #ccc;
   -webkit-mask: radial-gradient(circle at 60% 65%, #000 62%, #0000 65%) top left, radial-gradient(circle at 40% 65%, #000 62%, #0000 65%) top right, linear-gradient(to bottom left, #000 42%,#0000 43%) bottom left, linear-gradient(to bottom right,#000 42%,#0000 43%) bottom right;
   -webkit-mask-repeat: no-repeat;
   animation: l19 2s infinite linear;
}

@keyframes l19 {
   90%,100% {
      background-size: 100% 100%
   }
}

.admin_card {
   padding: 2rem;
   /*height: 400px;*/
   box-shadow: 0 3px 8px 2px #FF0000, 0 6px 20px 0 #E4E4E4;
   padding-bottom: 2rem;
   border-radius: 3rem;
   margin: 1rem;
}

.oi {
   width: 2rem;
   font-size: 1.1rem;
   vertical-align: text-top;
   top: -2px;
}



@media (min-width: 990px) {
   .navbar-toggler

{
   display: none;
}


}