html{font-size: 16px;}
* { outline:0px; padding:0px; border: none; margin:0px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box }
:before, :after { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box }
ol, ul { padding:0; margin:0; }
a { text-decoration:none; color:#4c0f5c; transition: all 200ms ease 0s; }
a:hover { text-decoration:none; }
a, button, img, input, span {transition: all 0.3s ease 0s;}
b,
strong { font-weight:600 }
.relative{position:relative}
img{max-width: 100%; height: auto; border: none;}
body{margin: 0; padding: 0;background:#e4f7fe; font-family:'Rubik', Arial, Helvetica, sans-serif; font-size:1rem; color:#1E052E; line-height:1.5; font-weight:400;overflow-x: hidden;}
h1, h2, h3, h4, h5, h6 {font-family:'Rubik', Arial, Helvetica, sans-serif;font-weight:500; margin:0px;color:#1E052E }
h1{font-size:3rem}
h2{font-size:2.5rem}
h3{font-size:1.875rem}
h4{font-size:1.5rem}
h5{font-size:1.125rem}
h6{font-size:1rem}
p{font-size:1rem;  color:#1E052E; line-height:1.5;  font-weight:400}
.btn{font-family:'Rubik', Arial, Helvetica, sans-serif; border-radius:2.5rem;  font-weight:500;font-size: 1rem; text-transform:capitalize; text-align:center; font-weight:500;padding:0.93rem 1.5rem	;line-height: 1;height: 2.75rem; border:none; min-width:120px;}
   
.btn-primary{ background: rgb(125, 235, 250);background: linear-gradient(130deg, rgba(125, 235, 250, 1) 0%, rgba(174, 135, 237, 1) 100%);color:#1E052E;}
.btn-primary:hover{background: rgb(174, 135, 237); background: linear-gradient(130deg, rgba(174, 135, 237, 1) 0%, rgba(125, 235, 250, 1) 100%);color:#1E052E; }

.btn-outline-primary{background: rgb(125, 235, 250);background: linear-gradient(130deg, rgba(125, 235, 250, 1) 0%, rgba(174, 135, 237, 1) 100%);color:#1E052E; overflow:hidden; position:relative}
.btn-outline-primary:before{content:''; background: #fff; left: 1px; right: 1px; top: 1px;  bottom: 1px;  position: absolute; border-radius: 2.5rem;}
.btn-outline-primary span{ position:relative}
.btn-outline-primary:hover{background: rgb(174, 135, 237); background: linear-gradient(130deg, rgba(174, 135, 237, 1) 0%, rgba(125, 235, 250, 1) 100%);color:#1E052E;}
.btn-outline-primary:hover:before{ display:none;}



.skyblue-btn{ background-color:#E4F6FE; color:#1E052E; font-family:'Rubik', Arial, Helvetica, sans-serif; font-size:1rem; font-weight:500; border-radius:8px;width: 14rem; height: 2.5rem;  display: block; margin: auto;}
.skyblue-btn:hover{ background:#1E052E; color:#fff}

.btn-success{ background-color:#C9EBC3; color:#1E052E; font-family:'Rubik', Arial, Helvetica, sans-serif; font-size:1rem; font-weight:500; border-radius:8px;width: 5rem; height: 2.5rem;  display: block; margin: auto;}
.btn-success:hover{ background:#1E052E; color:#fff}

.gray-link a{ text-decoration:underline;color: #1e052e; font-weight:400}
.gray-link a:hover{color:#7D6AA3 !important}

.form-control { display: block; width: 100%;  padding: 0.375rem 1rem !important; font-family:'Rubik', Arial, Helvetica, sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #1E052E; background-color: #fff;  border: 1px solid #c9c9c9; height:2.75rem; border-radius:0.25rem; outline:none; box-shadow:none !important }
.form-control.text-area{
	padding: 1rem;
	resize: none;
	height:11.875rem;
}
.form-control::-webkit-input-placeholder {color: #1E052E;opacity: 1;}
.form-control::-moz-placeholder {color: #1E052E;opacity: 1;}
.form-control:-ms-input-placeholder {color: #1E052E; opacity: 1;}
.form-control::-ms-input-placeholder {color: #1E052E; opacity: 1;}
.form-control::placeholder {color: #1E052E; opacity: 1;}
:focus-visible {
  outline: none !important;
}
.form-control:focus-visible{outline:none;}

#layout{overflow-x: hidden;}
.wrapper{width:100%; padding:30px 10px;}
.wrapper .max-w-xl{ max-width:660px; margin-left: auto;margin-right: auto;}
.wrapper .container{width: 100%; max-width:870px; margin:0 auto; padding:0 15px;}
.header-title{font-size:1.875rem;font-weight:500; display:block; text-align:center; margin-bottom:20px;}
/*----------create Start-------------*/
.d-flex{ display:flex;flex-wrap:wrap;}
.d-flex.col-2 .column {}
.d-flex.col-3 .column {}
.d-flex.col-4 .column {}
 .justify-end{ justify-content: flex-end;}
.tabs-wrap {margin-top: 20px;}
.tab-content .tab-pane {padding: 20px 0;}
.tabs-wrap nav ul{display: flex;justify-content: center; flex-wrap: wrap;}
.tabs-wrap nav ul li{ text-transform:uppercase; font-size:16px; font-weight:700; color:#596C80;position: relative; padding: 8px 0; margin:0 25px 0 18px;}
.tabs-wrap nav ul li.completed:before{content:''; background:url(/images/check-icon.svg) no-repeat center center; width: 1.125rem; height: 1.125rem; flex: 0 0 1.125rem; background-size: 1.125rem;    position: absolute; right: -1.5rem;}
.tabs-wrap nav ul li:after{content:'';width: 100%;position: absolute;left: 0;bottom: 0;height:3px;display: block;background: transparent;}
.tabs-wrap nav ul li.text-blue{color:#1E052E    }
.tabs-wrap nav ul li.text-blue:after{background:#1E052E}

.white-container{background:#fff; padding:30px; border-radius:24px; border:2px solid #D3D7F8; box-shadow:0 8px 16px 0 #35095E1A; min-height:600px;}
.purpose-section .font-mediu{font-size:18px; color: #1E052E; font-weight:500; }
.radio-label {transition: background-color 0.3s ease-in-out; background:#CFD9E6; font-size:14px; font-weight:400;  color: #1E052E; padding:1px;border-radius:6px; min-width:134px;}


.avatar-option:hover,
.avatar-option.selected,
.radio-label:hover,
.radio-label.selected{ background:linear-gradient(130deg, #7DEBFA 0%, #AE87ED 100%) !important;}
.radio-label.selected {font-weight:600;}

.avatar-option .bg-white,
.radio-label .bg-white{ width:100%; background:#fff;border-radius: 5px; height: 100%; display: flex; align-items: center; justify-content: center; padding:0.5rem 1rem;position:relative;}

.avatar-option{border: none !important;
    background: #CFD9E6;
    padding: 1px;
    overflow: hidden;
    border-radius: 6px;}
	


.avatar-option .bg-white{ flex-direction: column;
    min-height: 190px;
    align-items: center;
    justify-content: center; position:relative;}
.avatar-option .bg-white .text-sm{font-size:1rem; font-weight:500}

.avatar-option .bg-white .circle{width: 6.125rem; flex: 0 0 6.125rem; height: 6.125rem; display: flex; margin: 0 auto 15px;  border: 1px solid #CFD9E6;  border-radius: 90%; background: #fff; justify-content: center;
    align-items: center;}
.avatar-option .bg-white .circle img{width: 6.125rem;flex: 0 0 6.125rem;margin: 0;}
.avatar-option .bg-white .circle.none{ border:none}

.avatar-option.selected{padding:2px;}

.avatar-option.selected .bg-white:before{content:''; background:url(/images/check-icon.svg) no-repeat center center; width: 1.125rem; height: 1.125rem; flex: 0 0 1.125rem; background-size: 1.125rem;
    position: absolute;top: 0.5rem;right: 0.5rem;}

.avatar-option:hover .bg-whiter,
.avatar-option.selected .bg-white,
.radio-label:hover .bg-white, 
.radio-label.selected .bg-white{ background:linear-gradient(130deg, #E5F7FF 0%, #E5E8FF 100%) !important;color: #1E052E;  }
.radio-label.radio-option.selected{padding:2px;font-weight:500;} 
.item-row{ margin-bottom:1.5rem;}
.btn-row{ margin-top:3rem;}
.subtitle {    font-size: 1.5rem;
    font-weight: 600;
    margin: 0.5rem auto 2rem;  
    width: 100%;
    max-width: 35rem;}
.subtitle .gradient-brd{ position:relative; padding-bottom:5px;}    
.subtitle .gradient-brd:after{content:''; background:linear-gradient(90deg, #aaf5ff 0%, #c2a6f1 100%); width:100%; height:0.3125rem; position:absolute; left:0; bottom:0;}  

.label-heading.font-medium{ font-size:1.125rem;} 
label.label-heading{display: flex; align-items: center; justify-content: space-between;}
.label-heading.font-medium .text-optional{ font-size:14px; font-weight:400; color:#595959} 


/*----------configure -------------*/
h5.font-medium{    font-size: 1.125rem;
    display: block;
    padding: 20px 0;
    font-weight: 500;}
.min-height-500{min-height:490px;}
.configure-sec{/*align-items:center*/}
.configure-sec .middle-column{font-size: 1.125rem; font-weight:500; width: 4rem; text-align: center; align-self:center}
.configure-sec .radio-label .bg-white{min-height: 7.8125rem;  text-align: center; justify-content: center; flex-direction: column;}
.configure-sec .radio-label .bg-white .font-medium{font-size: 1.125rem; margin-bottom: 5px;display: block;}
.configure-sec .radio-label .bg-white span{ font-size:0.9375rem;width: 100%;  max-width: 13.5rem;}

/*----------customize -------------*/
.wrapper .customize-section.max-w-xl{max-width: 760px;}
textarea.prompt{ height:19.375rem; resize:none}
.promptbox{padding-top:18px;}
.promptchatbox{border: 1px solid #CFD9E6; border-radius: 0.5rem; height:22.5rem; display: flex; flex-direction: column; margin-top: 16px; overflow:hidden;}
.chat-messages{ padding:10px 20px}
.chat-messages .message { border-radius:8px;margin-bottom:15px; padding:15px; position:relative;}
.chat-messages .message.user { background:#C9EBC3;border-bottom-right-radius: 0px; margin-left: 40px;}
.chat-messages .message.user:after { content:''; width: 0;height: 0;border-top: 12px solid transparent; border-bottom: 0px solid transparent; border-left: 12px solid #C9EBC3;position: absolute;
    left: 100%;
    bottom: 0;}
.chat-messages .message.bot { background:#CADCE5;border-bottom-left-radius: 0; margin-right: 40px;}
.chat-messages .message.bot:before { content:''; width: 0; height: 0; border-top: 12px solid transparent;border-bottom: 0px solid transparent; border-right:12px solid #CADCE5;position: absolute;
    right: 100%;
    bottom: 0; }
/*----------construct Start-------------*/
.template-container .template{ position:relative;border: 1px solid #CFD9E6; border-radius: 8px;}
.template-container .template.selected:before{content:''; background: linear-gradient(130deg, #7DEBFA 0%, #AE87ED 100%) !important; position: absolute;left: -2px; right: -2px;
    top: -2px; bottom: -2px; border-radius: 8px;}
.template-container .template img{width:100%; display:block; border-radius:7px; position:relative; z-index:1}
.template-container .template.selected:after{content:''; background:url(/images/check-icon.svg) no-repeat center center; width: 1.125rem; height: 1.125rem; flex: 0 0 1.125rem; background-size: 1.125rem; position: absolute;top: 0.35rem;right: 0.35rem; z-index:2}
.template-container .template input[type="radio"]{ display:none}
.template-container .template p{display:none}

.btn-disabled {
    background-color: #ccc !important;  /* Light gray */
    color: #666 !important;  /* Darker text */
    cursor: not-allowed !important;  /* Not-allowed cursor */
    opacity: 0.6 !important;  /* Reduce opacity */
}
img#uploadedAvatarPreview {
    border-radius: 50%;
}
/*----------Footer End-------------*/


/*----------media screen-------------*/
 @media (min-width: 768px) {
.col-md-1 { -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-md-2 { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-md-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; }
.col-md-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-md-5 { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-md-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
.col-md-7 { -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-md-8 { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-md-9 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; }
.col-md-10 { -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-md-11 { -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-md-12 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
}
 @media (min-width: 992px) {
.col-lg-1 { -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-lg-2 { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-lg-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; }
.col-lg-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-lg-5 { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-lg-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
.col-lg-7 { -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-lg-8 { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-lg-9 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; }
.col-lg-10 { -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-lg-11 { -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-lg-12 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
}

 @media (max-width: 991px) {
.min-h-screen{min-height:1px !important}
.tabs-wrap nav ul li{ margin:0 20px 0 18px;font-size:15px;}
 }
 
  @media (max-width: 767px) {
	  .tabs-wrap nav ul li{font-size:14px;}
	  .customize-section .grid-cols-2{grid-template-columns: repeat(1, minmax(0, 1fr));}
	  .promptbox{padding-top:0}
	  textarea.prompt{height:13rem}
	  .promptchatbox{height:16rem;}
.chat-messages{height:11rem !important;}
	  label.label-heading{flex-wrap: wrap;}
	  .label-heading.font-medium .text-optional{margin-top:5px;}

  }
  
  @media (max-width: 576px) {
.wrapper{ padding:30px 0}
	  .tabs-wrap{margin-top:0}
	  .subtitle{font-size:1.25rem;  line-height: 1.35;}
	  .construct-section .grid-cols-3.avatar-grid{grid-template-columns: repeat(2, minmax(0, 1fr));}
	  .construct-section .grid-cols-3.avatar-grid .avatar-option.last{grid-column: 1/-1;}
	  .chat-messages .message{font-size:14px;}
	  .chat-messages .message.user { margin-left: 10px;}
.chat-messages .message.bot{ margin-right: 10px;}
.avatar-option .bg-white{min-height:160px; padding:0.5rem}
.avatar-option .bg-white .text-sm {
  font-size: 0.9rem;}
  }
    @media (max-width: 480px) {
	  .tabs-wrap nav ul li{font-size:14px;}
	 .radio-label{ min-width: 132px;}
	  .label-heading.font-medium{font-size:1rem;}
	  .d-flex.col-4 .column {width: 48.5%;}
	  .configure-sec{flex-wrap: wrap;}
	  .configure-sec .middle-column{width:100%}
	  .configure-sec .radio-label { width:100% !important}
	  .form-control.text-area{height:9rem}
  }