@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');


[data-app-theme="new"] {
  /* --hover-color: #ddedf8; */
  --hover-color: #E1F5FD;
  /* --border-color: #0071D7; */
  --border-color: #0DB2EC;
  --border-color2: #0083F9;
}


[data-app-theme="new"] {
  --first-color: #F3F3F3;
  --second-color: #131313;
  --third-color: #707070;
  --fourth-color: #131313bd;
  --white-color: #FFFFFF;
  --shadows-color: #afacacba;
  --red-color: #EF0E0E;
  --hover-color: #ddedf8;
  --border-color: #0071D7;
  --border-color2: #0083F9;
  --bs-red: #dc3545;
  --line-color:#03253B;
  --box-border-color: #DCDBDD;
  --thired-color: #D1F0FF;
  --dark-color: #073850;
  --preview-title : #D1F0FF;
}

* {
    box-sizing: border-box;
    scrollbar-width: thin;  
    scrollbar-color: transparent transparent;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    
}
::-webkit-scrollbar {
  width: 0px; 
}
.email-template{
  position: relative;
  background: none;
}
.email-template-header{
  height: 30vh; 
  padding-top: 2% ;
  position: relative;
  background: url(../icons-mp/header-bg.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  text-align: center;
  z-index: 3;
}
.email-template-body{
  background: #FFFFFF;
  position: relative;
  z-index: 5;
  margin-top: -3rem;
}

.no-paper{
    background-image: url(../icons-mp/header-bg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: auto;
    min-height: calc(100vh - 1px);
    /* background-size: 100%; */
    overflow: hidden;
}
.logout-bg{
  background-image: url(../icons-mp/header-bg.png);
}
.log-in-container
{
    background-color: var(--white-color);
    height: 50%;
    padding: 2%;
    border-radius: 10px;
}

.body_container
{
    /*height: 88vh;*/
    min-height: 88vh;
    width: 100%;
}
.body_container_inner
{
    background-color: var(--white-color);
    min-height: 88vh;
    /*height: 88vh;*/
    width: 100%;
    /* overflow-y: scroll !important; */
}
.nav-design-new
{
    border: 1px solid var(--second-color);
    color: var(--first-color);
    background-color: var(--first-color);
    text-decoration: none;
    border-radius: 5px;
    padding: 10px;
    cursor: pointer;
    width: 20vh;
}
.connector-design
{
    height: 10px;
    width: 20px;
    margin-top: 1%;
    z-index: 1;
}
.nav-design-new.active
{
    /* border: 1px solid var(--fifth-color); */
    /* background-color: var(--sixth-color); */
    /* background-color: #4F8DCA !important;  */
    border: none !important;
    background-image: linear-gradient(var(--border-color),var(--border-color2)) !important;
    color: var(--white-color) !important;
    font-weight: 600 !important;
}

/* buttons */
.new-button
{
    padding: 1% 3% 1% 3%;
    border-radius: 5px;
    background-color: var(--white-color);
    box-shadow: inset 0px 0px 2px 3px var(--first-color);
    margin-top: 2%;
    border: 0px;
    font-weight: 600;
    border: 1px solid var(--border-color);
}

.login-button,
.login-button:disabled,
.login-button:active,
.login-button:focus {
  padding: 1.5% 7%;
  cursor: pointer;
  border-color: var(--dark-color) !important;
  background: var(--dark-color) !important;
  color: var(--white-color) !important;
  box-shadow: none !important;
}

.login-button:hover {
  background: var(--white-color) !important;
  color: var(--dark-color) !important;
}

.new-button:hover
{ 
    box-shadow: inset 0px 0px 20px 3px var(--hover-color);
    color: var(--border-color);
    border: 1px solid var(--border-color);
}

.new-button-2
{
    border: 1px solid var(--second-color);
    color: var(--second-color);
    border-radius: 5px;
    background-color: var(--white-color);
    padding: 1% 4% 1% 4%;
    margin-top: 2%;
    font-weight: 600;
}
.new-button-2:hover
{
    background-color: var(--fourth-color);
    border: 0px;
    padding: 1% 4% 1% 4%;
    box-shadow: inset 0px 0px 2px 3px var(--third-color);
    color: var(--second-color);
}
/* buttons end */




 /* input field designs */
 .form-group2 {
    position: relative;
  }
  .form-group2 input, .form-group2 select, .form-group2 textarea{
    width:100%;
    border: 1px solid var(--dark-color);
    padding: 8px;
    border-radius: 5px;
    font-size: 16px;
    resize: none;
    color: var(--black-color) !important;
  }
  .form-group2 textarea{
    height: 8rem;
  }

  .form-group2 select
  {
    background-color: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* margin-top: -2%; */
  }
  select::-ms-expand {
    display: none; 
  }
  .form-group2 label {
    position: absolute;
    top: 0.5rem;
    left: 2%;
    font-size: 0.875rem;
    transition: all 0.2s ease-out;
    pointer-events: none; /* Allow clicks to pass through the label */
    color: var(--bg-inverse-color);
    font-size: 16px;
  }

    .form-group2 input:focus + label,
  .form-group2 textarea:focus + label,
  .form-group2 select:focus + label,
  .form-group2 input:not(:placeholder-shown) + label,
  .form-group2 textarea:not(:placeholder-shown) + label,
  .form-group2 select:valid + label {
    top: -1rem;
    left: 2%;
    font-size: 0.75rem;
    color: var(--bg-inverse-color);
    background-color: var(--white-color);
    padding: 0.2rem;
    transition: 0.5s;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: 16px;
  }
  .form-group2.other-input {
    display: none;
  }
  .form-group2 input:focus,
  .form-group2 textarea:focus,
  .form-group2 select:focus{
    outline: none;
    box-shadow: 2px 2px 4px var(--first-color);
  }


  .input-field-container1
  {
    margin-left: 15%;
    margin-top: 5%;
    width: 70%;
  }
  .login-input{
    margin-top: 3.5%;
  }
  .input-field-container1.top-min{
    margin-top: 3%;
  }
  .input-field-container1.half{
    width: 48%;
    margin-left: 1.25%;
  }
  .input-field-container1.onebythree{
    width: 32%;
    margin-left: 1%;
    margin-top: 1%;
  }
  .half-input-div{
    display: flex;
    margin-left: 14.2%;
  }
  .form-group.input-field-container1{
    width: 100%;
    height: 100px;
    content: "upload";
  }

  
/* end of input fields */



.iconimages {
  width: 1.4rem;
  height: 1rem;
}

/* new table design */
.table-d1 {
    border-collapse: collapse;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    margin: auto;
  }
  
  .td-d1 {
    text-align: left;
    border-bottom: 1px solid var(--first-color);
    background-color: var(--hover-color);
  }
 
  .th-d1{
      padding: 1% 2% 1% 2% ;
      text-align: left;
      /* background-color: var(--border-color); */
      background-image: linear-gradient(var(--border-color),var(--border-color2));
      color:var(--white-color);
      border-bottom: 3px solid var(--white-color);
  }

  .tr-d3 {
    /* box-shadow: inset 0px 0px 2px 3px var(--first-color); */
    background-color: var(--hover-color);
  }
  .td-d1-white{
    background-color: var(--hover-color);
  }

  .th-d1:first-child {
    border-top-left-radius: 10px;
  }
  
  .th-d1:last-child {
    border-top-right-radius: 10px;
  }
  
  .td-d1, .td-d2{
    /* padding: 2%; */
    padding: 1.5% 2% 1.5% 2% ;
    text-align: left;
  }
 
  .nowidth {
    width: 4%;
  }
  .datewidth {
    width: 20%;
  }

  .emailwidth {
    width: 25%;
  }
  .statuswidth {
    width: 8%;
  }
  .activewidth {
    width: 12%;
  }
  .namewidth {
    width: 15%;
  }
  /* new table design ends */



  
.login-center-box
{
  background-color: var(--white-color); 
  border: 1px solid transparent;
  margin-top:10%;
  padding: 5%;
  border-radius: 10px;
  box-shadow: 2px 2px 4px rgba(209, 207, 207, 0.644);
}
.tab-names{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0px 4px;
  /* background: var(--white-color); */
  border-radius: .5rem;
  /* background: var(--white-color); */
  /* padding: 1rem; */
}
/* .tab-names  */


.no_paper_logo
{
    background-color: var(--white-color);
    box-shadow: 0px 0px 6px var(--shadows-color);
    padding: 2.5% 10% 2.5% 10%;
    border: 0px;
    border-radius: 2px;
    margin: 1%;
    margin-left: 5%;
}
.no_paper_logo.template
{
    padding: 1% 5% 1% 5%;
}
.npd_logo
{
  width: 8rem;
  height: auto;
}
.user_logo
{
  background-color: var(--white-color);
  border: 0.25px solid var(--shadows-color);
  border-radius: 50%;
  box-shadow: 0px 0px 6px var(--shadows-color);
  color: var(--second-color);
  font-weight: 600;
  padding: 15px;
  display: inline-block;
  margin-right: 30px;
  margin-top: 10px;
  font-size: 1.25rem;
}



/* check box remember design statrt */

.checkbox-label {
  display: inline-block;
  position: relative;
  cursor: pointer;
  padding-left: 25px; 
}

.checkbox-custom {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px; 
  height: 20px; 
  background: var(--white-color);
  border: 1px solid var(--dark-color);
  border-radius: 4px;
}

.checkbox-label::after {
  content: "";
  position: absolute;
  display: none;
  left: 7px;
  top: 2px; 
  width: 5px; 
  height: 14px; 
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

#remember {
  display: none;
}

#remember:checked + .checkbox-label .checkbox-custom {
  background: var(--first-color);
  border: 1px solid var(--first-color);
}

#remember:checked + .checkbox-label::after {
  display: block;
  content: "";
}
/* check box remember design end */


  /* modal desigsn start */
.partcenter_section {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
}
  
.modal {
  display: none;
  position: fixed; 
  z-index: 101; 
  padding-top: 12%; 
  padding-left: 12%;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%; 
  overflow: auto;
  background-color: rgb(0,0,0); 
  background-color: rgba(0, 0, 0, 0.322); 
  
}

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 10px;
  border: 1px solid #888;
  width: 50% !important;
  height: 50%;
  scrollbar-color: rgb(144, 126, 126);
  overflow-y: auto;
  padding-left: 2%;
}

.modalclose {
  color: var(--black-color);
  margin-left: 95%;
  font-size: 28px;
  font-weight: bold;
}

.modalclose:hover,
.modalclose:focus {
  color: var(--black-color);
  text-decoration: none;
  cursor: pointer;
}

.confirmation_section {
  width: 550px;
  margin: auto;
  background-color: #FFFFFF;
  padding: 10px 10px 10px 10px !important;
  border-radius: 25px 0px 0px 0px;
  border: 1px solid #D9D9D9;    ;
}
.login_sec {    
  width: 100%;
  margin: auto;
  padding: 1px 30px;
  text-align: center;
}
.confirmation_section1 {
  width: 550px;
  margin: auto;    
  height: 5px;
  border: 1px solid #FFFFFF;    
}
.confirmation_section2 {
  width: 550px;
  margin: auto;
  background-color: var(--first-color);
  padding: 5px 50px 5px 50px;
  border-radius: 0px 0px 0px 0px;
  /* border-left: 1px solid #8AD4DF;
  border-right: 1px solid #8AD4DF;
  border-bottom: 1px solid #8AD4DF; */
  border-top: none;
}
.confirm_1 {
  width: 100px;
  padding: 5px;
  background-color: #000000;
  border: none;
  border-radius: 5px;
  color: #FFFFFF;
}


  /* modal desigsn end */



  .non-editable-fields
  {
    pointer-events: none;
    cursor: no-drop;
    color: var(--black-color);
    resize: none;
  }



  /* user info tab design */
  
 
  .inner-panel-design{
    display:none;
    animation: fadein .8s;
  }
  .shadow-outline{
    box-shadow: inset rgba(0, 0, 0, 0.06) 1px 1px 10px 5px;
    padding: 2rem;
    border-radius: 5px;
  }
  @keyframes fadein {
      from {
          opacity:0;
      }
      to {
          opacity:1;
      }
  }
  
  .tabs-radio-button{
    display:none;
  }
   
  

  #individual_radio:checked ~ .all-panels-list #individual_panel,
  #multiple_radio:checked ~ .all-panels-list #multiple_panel,
  #video_radio:checked ~ .all-panels-list #video_panel,
  #display_radio:checked ~ .all-panels-list #display_panel,
  #basic_radio:checked ~ .all-panels-list #basic_panel,
  #service_radio:checked ~ .all-panels-list #service_panel,
  #payment_radio:checked ~ .all-panels-list #payment_panel,
  #preview_radio:checked ~ .all-panels-list #preview_panel,
  #security_radio:checked ~ .all-panels-list #security_panel
  {
    display:block
  }
  #individual_radio:checked ~ .all-tabs-collection #individual_tab,
  #multiple_radio:checked ~ .all-tabs-collection #multiple_tab
  {
    background:var(--first-color);
    color:var(--second-color);
    border-top: 3px solid var(--second-color);
  }
  /* user info tabs design ends */



/* multiple mail id design start */
#email-whole-wrapper
{
  border: 1px solid var(--border-color);
  border-radius: 5px;
  margin-left: 15%;
  width: 70%;
}
.email-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.default-dispatch{
    padding-right: 5px;
}
.email-tag {
  display: flex;
  align-items: center;
  background-color: var(--white-color);
  padding: 3px 5px;
  border-radius: 5px;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
  margin: 10px 0px 10px 10px;
}
.email-values {
  margin-right: 5px;
  /* cursor: none; */
}
.close-icon {
    cursor: pointer;
    color: rgb(140, 138, 138);
    font-size: 20px;
    font-weight: 800;
    margin: 3px;
}

.close-icon:hover {
    -webkit-text-stroke: .5px var(--fourth-color);
    text-decoration: none;
    cursor: pointer;
}
#inputArea
{
  width: 100%;
  border: 0px;
  resize: none;
  padding: 0.2% 1% 0.2% 1%;
  border-radius: 10px;
}
#inputArea:focus
{
  outline: none;
}

.inputArea {
  width: 100%;
  border: 0px;
  resize: none;
  padding: 0.2% 1% 0.2% 1%;
  border-radius: 10px;
}

.inputArea:focus {
  outline: none;
}
/* multiple mail id design end */

.service_option_form {
  width: 90%;
  padding: 5% 0%;
  padding-top: 2%;
  padding-bottom: 0%;
}


.non-input-style
{
  border: 0px;
  cursor: none;
  pointer-events: none;
  width: 100%;
}
.non-input-style:focus
{
  outline: none;
}


/* tree table start */
.main-row {
  cursor: pointer;
 background-color: var(--hover-color);
}

.sub-row {
  display: none;
}

.sub-row.expanded {
  display: table-row;
  transition: all 3s ease-in-out;
}
.sub-row>td{
  border: none;
  padding: 1% 3% !important;
  background-color: var(--white-color);
  /* margin-top: -0.8%; */
  border: 3px solid var(--white-color);
  border-radius: 8px;
  /* width: 96%; */
  /* margin-left: 2%; */
}

.main-row.clicked td
{
  font-weight: 600;
}

#client{
  border: none !important;
}
.clicked>td{
    color: var(--second-color);
    /* background-color: var(--border-color); */
    background-color: #F7F7F7;
    border: none;
}
.tree-nodes
{
text-decoration: none;
color: var(--second-color);
border: 1px solid var(--shadows-color);
padding: 3% 5%;
border-radius: 5px;
}
/* tree table end */





/*Multi Select CSS Start*/
.multiselect-dropdown {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  border-radius: 4px;
  border: solid 1px var(--box-border-color);
  background-color: var(--white-color);
  position: relative;
  /* 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 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right .25rem center; */
  background-size: .65rem;
  padding-top: .65rem;
  padding-bottom: .2rem;
  min-height: 2.5rem;
}

.multiselect-dropdown span.optext,
.multiselect-dropdown span.placeholder {
  margin-right: 0.5em;
  margin-bottom: 2px;
  padding: 1px 0;
  border-radius: 4px;
  display: inline-block;
}

.multiselect-dropdown span.optext {
  background-color: var(--box-border-color);

  padding: 1px 0.75em;
}

.multiselect-dropdown span.optext .optdel {
  float: right;
  margin: 0 -6px 1px 5px;
  font-size: 0.7em;
  margin-top: 2px;
  cursor: pointer;
  color: #666;
}

.multiselect-dropdown span.optext .optdel:hover {
  color: #c66;
}

.multiselect-dropdown span.placeholder {
  color: var(--label-text-color);
  background-color: var(--white-color);
  position: absolute;
  top: -.9rem;
  opacity: 1;
  padding-right: 1rem;
  left: 1rem;
  font-size: 14px;
  z-index: 1;
}

.multiselect-dropdown-list-wrapper {
  box-shadow: var(--gray-shadow) 0 3px 8px;
  z-index: 10!important;
  padding: 2px;
  border-radius: 4px;
  border: solid 1px var(--box-border-color);
  display: none;
  margin: -1px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: var(--white-color);
  z-index: 2;
}

.multiselect-dropdown-list-wrapper .multiselect-dropdown-search {
  margin-bottom: 5px;
  padding: .25rem;
  border-radius: .2rem;
  border: 1px solid var(--box-border-color);
  outline: 0;
}

.multiselect-dropdown-list {
  padding: 2px;
  max-height: 15rem;
  overflow-y: auto;
  overflow-x: hidden;
}

.multiselect-dropdown-list::-webkit-scrollbar {
  width: 6px;
}

.multiselect-dropdown-list::-webkit-scrollbar-thumb {
  background-color: #bec4ca;
  border-radius: 3px;
}

.multiselect-dropdown-list div {
  padding: 5px;
}

.multiselect-dropdown-list input {
  height: 1.15em;
  width: 1.15em;
  margin-right: 0.35em;
}

.multiselect-dropdown-list div:hover {
  background-color: var(--second-color);
}

.multiselect-dropdown span.maxselected {
  width: 100%;
}

.multiselect-dropdown-all-selector {
  border-bottom: solid 1px var(--box-border-color);
}

.multiselect-dropdown-search.form-control:active,
.multiselect-dropdown-search.form-control:focus {
  outline: none;
  box-shadow: none;
  border-color: var(--box-border-color);
}

/*Multi Select CSS End*/
  


/*Multiple File Uploader CSS Start*/

.file-upload-holder, .imgfile-upload-holder {
  padding: 10px;
  cursor: pointer;
  border: 1px solid var(--box-border-color);
  border-radius: .25rem;
}

.file-uploader, .imgfile-uploader {
  /* min-height: 150px; */
  padding: 10px;
  text-align: center;
  display: block;
  font-size: .9rem;
  /* text-decoration: underline; */
  line-height: 250%;
}

.file-uploader:hover {

  box-shadow: 0 0 8px var(--primary-color-3);
}

.file-uploader:empty::after {
  content: "Drag files or click here to upload";
  text-align: center;
  display: block;
  margin-top: 40px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 20px;
}

.file-icon {
  width: 40px;
}

.file-uploader[max-file="1"]:empty::after {
  content: "Drag file or click here to upload";
}

.file-upload-highlight {
  border-color: var(--primary-color-2);
}

.file-uploader .file .filepreview, .imgfile-uploader .file .filepreview {
  width: 100px;
  height: 100px;
  border: 1px solid var(--primary-color-2);
  border-radius: 5px;
  padding-top: 20px;
  margin: auto;
  text-transform: uppercase;
}

.file-uploader .file .filepreview img, .imgfile-uploader .file .filepreview img {
  max-width: 100%;
  max-height: 100%;
}

.file-uploader .file .filename, .imgfile-uploader .file .filename {
  margin: auto;
  text-align: center;
  word-wrap: break-word;
  font-size: .8rem;
  width: 200px;

}

.file-uploader .file .removelink, .imgfile-uploader .file .removelink {
  text-align: center;
}

.file-uploader .file .removelink span, .imgfile-uploader .file .removelink span {
  color: var(--primary-color-5);
}

.file-uploader .file .removelink span:hover, .imgfile-uploader .file .removelink span:hover {
  color: var(--primary-color-4);
}


.file-upload-holder input[type="file"], .imgfile-upload-holder input[type="file"] {
  visibility: hidden;
  position: absolute;
}
.imgfile-upload-holder .file
{
  text-align: center;
}
.imgfile-upload-holder .img-preview
{
  max-width: 80%;
  max-height: 100px;
  background-color: #EEE;
}

.primary-progress {
  height: .75rem;
  border-radius: .25rem;
}

.primary-progress .progress-bar {

  background-color: var(--first-color)
}

#pfile
{
  border: 1px solid var(--shadows-color);
  border-radius: 5px;
}
/*Multiple File Uploader CSS End*/

/*Multi Select CSS Start*/



.multiselect-dropdown {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  border-radius: 4px;
  border: solid 1px var(--border-color);
  background-color: var(--white-color);
  position: relative;
  /* 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 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right .25rem center;
  background-size: .65rem; */
  padding-top: .65rem;
  padding-bottom: .2rem;
  min-height: 2.5rem;
  min-width: 20vh;
}

.multiselect-dropdown span.optext,
.multiselect-dropdown span.placeholder {
  margin-right: 0.5em;
  margin-bottom: 2px;
  padding: 1px 0;
  border-radius: 4px;
  display: inline-block;
}

.multiselect-dropdown span.optext {
  background-color: var(--hover-color);
  padding: 1px 0.75em;
}

.multiselect-dropdown span.optext .optdel {
  float: right;
  margin: 0 -6px 1px 5px;
  font-size: 0.7em;
  margin-top: 2.5px;
  cursor: pointer;
  color: black;
}

.multiselect-dropdown span.optext .optdel:hover {
  color: var(--border-color);
}

.multiselect-dropdown span.placeholder {
  color: var(--label-text-color);
  background-color: var(--white-color);
  position: absolute;
  top: -.9rem;
  opacity: 1;
  padding-right: 1rem;
  left: 1rem;
  font-size: 14px;
  z-index: 1;
}

.multiselect-dropdown-list-wrapper {
  box-shadow: var(--gray-shadow) 0 3px 8px;
  z-index: 10!important;
  padding: 2px;
  border-radius: 4px;
  border: solid 1px var(--box-border-color);
  display: none;
  margin: -1px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: var(--white-color);
  z-index: 2;
}

.multiselect-dropdown-list-wrapper .multiselect-dropdown-search {
  margin-bottom: 5px;
  padding: .25rem;
  border-radius: .2rem;
  border: 1px solid var(--border-color);
  outline: 0;
}

.multiselect-dropdown-list {
  padding: 2px;
  max-height: 15rem;
  overflow-y: auto;
  overflow-x: hidden;
}

.multiselect-dropdown-list::-webkit-scrollbar {
  width: 6px;
}

.multiselect-dropdown-list::-webkit-scrollbar-thumb {
  background-color: #bec4ca;
  border-radius: 3px;
}

.multiselect-dropdown-list div {
  padding: 5px;
}

.multiselect-dropdown-list input {
  height: 1.15em;
  width: 1.15em;
  margin-right: 0.35em;
}

.multiselect-dropdown-list div:hover {
  background-color: var(--shadows-color);
}

.multiselect-dropdown span.maxselected {
  width: 100%;
}

.multiselect-dropdown-all-selector {
  border-bottom: solid 1px var(--box-border-color);
}

.multiselect-dropdown-search.form-control:active,
.multiselect-dropdown-search.form-control:focus {
  outline: none;
  box-shadow: none;
  border-color: var(--hover-color);
}

/*Multi Select CSS End*/




.ra_div {
  width: 70%;
  margin: 2%;
  box-shadow: 2px 2px 4px rgba(209, 207, 207, 0.644);  
  margin-left: 15%;
  border-radius: 5px;
  padding: 2%;
}



/* check box design for multi select */
.form-group-itz-checkbox input {
  display: none;
}

.form-group-itz-checkbox label::before {
  content: "";
  font-size: 1.5rem;
  position: absolute;
  margin-left: -3rem;
  margin-top: -.2rem;
  color: var(--first-color);
  width: 2rem;
  height: 2rem;
  background-image: url('../icons-mp/toggle-off.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.form-group-itz-checkbox label {
  position: relative;
  padding-left: 3rem;

}


.form-group-itz-checkbox input:checked~label::before {
  background-image: url('../icons-mp/toggle-on.png');
}
/* check box design for multi select - end */



/* grading range bar design start */
.rangebar-container {
  width: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.range-bar-slider {
  width: 100%;
}

.slider-bar {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 8%;
  border-radius: 5px;   
  background: var(--shadows-color);
  outline: none;
}

.slider-bar::-webkit-slider-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 3vh;
  height: 3vh;
  border-radius: 3px;
  color: var(--white-color);
  background: var(--second-color); 
}

.slider-bar::-moz-range-thumb {
 width: 3vh;
 height: 3vh;
 background: var(--second-color); 
}




#thumb-value {
  position: relative;
  margin-top: -6.5%;
  padding-left: 53%;
  font-size: 12px;
  color: var(--white-color);
  cursor: none;
  pointer-events: none;
  caret-color: transparent;
}

.visuallyhidden { 
  position: absolute; 
  overflow: hidden; 
  clip: rect(0 0 0 0); 
  height: 1%; width: 1%; 
  margin: -1%; padding: 0; border: 0; 
}

.grade_box
{
  /* box-shadow: 2px 2px 4px var(--first-color); */
  padding: 4% 5% 1.5% 5%;
  /* border: 1px solid var(--border-color); */
}
.risk_point{
  border: 1px solid var(--border-color);
  padding: 2% 5% 1.5% 5%;
}
/* grading range bar design end */



/* double side range bar code start */
.double_slider {
  width: 100%;
  height: 30px;
  overflow: hidden;
  cursor: pointer;
  outline: none;
}

.double_slider,
.double_slider::-webkit-slider-runnable-track,
.double_slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: none;
}

.double_slider::-webkit-slider-runnable-track {
  width: 320px;
  height: 3px;
  background: var(--third-color);
}

.double_slider:nth-child(2)::-webkit-slider-runnable-track {
  background: none;
  z-index: 5;
}

.double_slider::-webkit-slider-thumb {
  position: relative;
  height: 15px;
  width: 15px;
  margin-top: -7px;
  background: #fff;
  border: 1px solid black;
  background-color: white;
  border-radius: 25px;
  z-index: 5;
}

.double_slider:nth-child(1)::-webkit-slider-thumb {
  z-index: 5;
}

.double_rangeslider {
  position: relative;
  height: 0rem;
  width: 90%;
  display: inline-block;
  margin-top: 0%;
  margin-left: 0px;
}

.double_rangeslider input {
  position: absolute;
}

.double_rangeslider span {
  position: absolute;
  color: var(--second-color);
  transition: left 0.2s;
}

.double_rangeslider .range_min {
  margin-top: -16%;
}

.double_rangeslider .range_max {
  margin-top: -15%;
}
.double_rangeslider .range_min.left {
  left: 0;
}

.double_rangeslider .range_max.right {
  right: 0;
}

.double_rangeslider .scale {
  display: flex;
  justify-content: space-between;
  margin-top: -5vh;
  width: 100%;
}

.double_rangeslider .scale span {
  color: var(--third-color);
  position: relative;
  margin-top: 2vh;
  font-size: 10px;
  color: var(--second-color);
}
.dash_slider_span{
  position: relative !important;
  top: -3vh;
  left: -0.3vh;
}
/* Proof of concept for Firefox */
@-moz-document url-prefix() {
  .double_rangeslider::before {
      content: '';
      width: 100%;
      height: 2px;
      background: var(--third-color);
      display: block;
      position: relative;
      top: 16px;
  }

  .double_slider:nth-child(1) {
      position: relative;
      top: 2.5vh !important;
      overflow: visible !important;
      height: 0;
      z-index: 5;
  }

  .double_slider:nth-child(2) {
    position: relative;
    top: -1.5vh !important;
    overflow: visible !important;
    height: 0;
    z-index: 5;
  }

  .double_slider::-moz-range-thumb {
      position: relative;
      height: 15px;
      width: 15px;
      margin-top: -7px;
      background: #fff;
      border: 1px solid var(--second-color);
      border-radius: 25px;
      z-index: 1;
  }

  .double_slider:nth-child(1)::-moz-range-thumb {
      transform: translateY(-20px);
  }

  .double_slider:nth-child(2)::-moz-range-thumb {
      transform: translateY(-20px);
  }
}
/* double side range bar code end */


.risk_buttons
{
  background-color: var(--white-color);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  box-shadow: 0px 0px 4px var(--hover-color);
  color: var(--second-color);
  padding: 2%;
  float: center;
  font-weight: 600;
  margin: 5%;
  cursor: pointer;
}
.risk_buttons:hover{
  border: 2px solid var(--border-color);
  color: var(--border-color);
}

/* saravanan slider styles -start */
.confirmation_section{
  padding: 2% 3% 2% 2%;
}
/* slider */
.slider {
margin: 50px;
background-color: var(--third-color);
background-color: white;
width: 100%;
border-radius: 0.3rem;
margin-top: 0%;
}
.add-slider{
 width: 80%;
}
/* round toogle */
.noUi-handle:before {
content: attr(data-value);
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border-radius: 50%;
width: 25px;
height: 25px;
border: 2px solid #ffff;
display: flex;
justify-content: center;
align-items: center;
/* background-color: #B7A1FD; */
background-color: var(--border-color);
color: #ffffff;
font-size: 0.7rem !important;
font-weight: 600;
z-index: 10;
visibility: visible !important;
}
.single-slider .noUi-handle-upper::before{
 display: none;
}
/* selected range */
.noUi-connect{
background-color: var(--border-color);
}
.noUi-handle-lower:before {
content: attr(data-value);
}

.noUi-handle-upper:before {
content: attr(data-value);
}
/* bar codes */
.noUi-marker{
margin-top: -6%;
}
/* values */
.noUi-value{
margin-top: -3%;
font-size: 0.8rem;
}
.noUi-handle{
visibility: hidden;
}
.slider-value{
display: none;
}
/* saravanan slider styles - end */



.new_preview_table {
  width: 100%;
  border-collapse: collapse; 
  border-radius: 10px; 
  overflow: hidden;
}

.new_preview_table .new_preview_table_row {
  border: 1px solid var(--shadows-color);
}

.new_preview_table td,
.new_preview_table th {
  padding: 1% 5% 1% 5%; 
  background-color: var(--white-color);
  border: 1px solid var(--hover-color);
}

.new_preview_table th {
  background-color: var(--hover-color);
}

.non-input-style-2
{
  border: 0px;
  cursor: none;
  pointer-events: none;
  width: 5vh;
}
.non-input-style-2:focus
{
  outline: none;
}
.services_box{
  margin-top: -2.5%;
}
.master_tree_table{
  width: 90%; 
  margin-left: 5%;
  /* margin-bottom: 5%; */
  margin-top: -3%;
}
.whole_form{
  width: 80%;
  margin-left: -8%;
  margin-top: 3%;
}

.toggleRadio
{
  display: none;
}

.toggleRadio ~ label{
  cursor: pointer;
  display: inline-block;
  padding: 2px;
  background-size: 2rem auto;
  background-position: left 1px;
  background-repeat: no-repeat;
  padding-left: 2.75rem;
  background-image: url('../icons-mp/Disable_Toggle.png');
}
.toggleRadio:checked ~ label{

  background-image: url('../icons-mp/Enable_Toggle.png');
}

.beta-note {
  font-size: 3vh;
  color: #ffffff;
  position: absolute;
  right: 0.25%;
  top: 0.5%;
  font-weight: 600;
  padding: 0px 4px 0.5px 4px;
  border-radius: 55%;
  cursor: pointer;
  z-index: 5;
}

.beta-note:hover {
  font-size: 3.2vh;
  font-weight: 700;
  background-color: rgba(255, 255, 255, 1);
  color: #4f8dca;
}

.beta-note-span {
  position: absolute;
  padding: 2px 10px 2px 5px;
  border: 0.5px solid #4f8dca;
  background: rgba(255, 255, 255, 0.85);
  color: #4f8dca;
  right: 1.5%;
  top: 1%;
  font-weight: 700;
  font-size: 1.5vh;
  border-radius: 5px;
  opacity: 0; /* Initially hidden */
  transition: opacity 0.3s ease-in-out; /* Apply transition on opacity property */
  z-index: 1;
}

.beta-note:hover + .beta-note-span {
  opacity: 1; /* Show when hovering */
}

@keyframes textclip {
  to {
    background-position: 200% center;
  }
}


.security-containor1
{
  margin: 5%;
  /* border: 1px solid var(--hover-color); */
  border-radius: 10px;
  background: var(--white-color);
}

.security-containor1 .head
{
  font-weight: 600;
  padding: 15px;
  background: var(--first-color);
  border-radius: 10px 10px 0 0;
  color:var(--white-color);
}
.security-containor1 .body .content
{
  padding: 2%;
}

.security-enable
{
  display: none;
}



.otp_modal
{
  margin-top: -3%;
  margin-left: 28%;
}
.login-center-box
{
  counter-reset: my-sec-counter;
}
/* .subnav-design-new_3:before {
  counter-increment: my-sec-counter;
  content: counter(my-sec-counter);
} */
.err_cls{
  display: none;
  color: var(--bs-red);
  font-size: 16px;
}










.nav-design-new {
    border: 1px solid var(--border-color);
    color: var(--second-color);
    background-color: var(--hover-color);
    text-decoration: none;
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
    display: flex;
    width: auto;
  }
  
  /* .nav-design-new:hover{
    border: 2px solid var(--border-color);
  } */
  .nav-design-new.active {
    border: 1px solid var(--third-color);
    background-image:linear-gradient(#03253B, #0A82DA, #0DB2EC) !important;
    color: var(--first-color);
  }
  
  .nav-design-new .disimage {
    display: none;
  }
  
  .nav-design-new:active .disimage {
    display: none;
  }
  
  .nav-design-new:active .notdisimage {
    display: block;
  }
  
  .nav-bar-space {
    padding: 20px 40px;
    display: flex;
    text-align: center;
  
  }
  
  .nav-bar-space-row {
    width: 60%;
    margin-left: 25%;
  }
  
  .nav-bar-space_2 {
    padding: 20px 0px;
    display: flex;
    text-align: center;
  }
  
  .nav-bar-space_3 {
    padding: 0px 0px;
    display: flex;
    text-align: center;
    margin-top: -50px;
  }
  
  .subnav-design-new {
    border: 2px solid #5092C5;
    color: var(--second-color);
    background-color: var(--white-color);
    text-decoration: none;
    border-radius: 10px;
    padding: 0.3rem 0.4rem;
    cursor: pointer;
    margin-right: 10px;
    height: 8rem;
    width: 15rem;
    margin-left: 1%;
  }
  
  .subnav-design-new:hover {
    border: 2px solid var(--border-color);
    background-color: var(--hover-color);
  }
  
  .menu {
    margin-top: 5%;
    font-size: 1rem;
    font-weight: 600;
  }
  
  .menu-img {
    margin-top: 1.2rem;
    width: 3rem;
  }
  
  .subnav-design-new_2 {
    border: 1px solid var(--border-color);
    color: var(--second-color);
    background-color: var(--white-color);
    text-decoration: none;
    border-radius: 10px;
    padding: 10px 50px;
    cursor: pointer;
    margin-right: 10px;
  }
  
  .subnav-design-new_2:hover {
    border: 2px solid var(--border-color);
    background-color: var(--hover-color);
  }
  
  .subnav-design-new_3 {
    color: var(--second-color);
    background-color: var(--white-color);
    text-decoration: none;
    border-radius: 15px 15px 0px 0px;
    padding: 10px 10px;
    margin-right: 1rem;
    pointer-events: none;
    cursor: not-allowed;
    font-size: 18px;
    font-weight: 700;
  }
  .sub_nav_active{
    background:var(--hover-color) !important;
    color:var(--second-color) !important;
    border-top: 3px solid var(--second-color) !important;
  }
  
  .subnav-design-new_3:hover {
    border: 1px solid var(--third-color);
    background-color: var(--fourth-color);
    color: var(--first-color);
  }
  
  .nav-design-new_3 {
    /* border: 1px solid var(--first-color);
      color: var(--second-color); */
    background-color: var(--border-color);
    text-decoration: none;
    border-radius: 5px;
    padding: 10px;
    cursor: pointer;
    width: 30vh;
    margin-right: 15px;
  }
  
  .nav-design-new_3.active {
    /*border: 1px solid var(--second-color);*/
    background-color: var(--border-color);
  }
  
  .nav-design-new_3.active1 {
    /*border: 1px solid var(--second-color);*/
    background-color: var(--border-color);
    color: var(--first-color);
  }
  
  .connector-design {
    height: 10px;
    width: 20px;
    margin-top: 1%;
    z-index: 1;
  }
  
  .body-space-center {
    text-align: center;
    width: auto;
    padding-top: 50px;
  }
  
  .invite-design-new {
    border: 1px solid var(--border-color);
    color: var(--second-color);
    background-color: var(--white-color);
    text-decoration: none;
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
    width: 25%;
    margin: auto;
  }
  
  .invite-design-new:hover {
    outline: 2px solid var(--border-color);
    background-color: var(--hover-color);
    font-weight: 500;
  }
  
  .space5m {
    padding-top: 5px;
    padding-bottom: 5px;
  }
  
  .form-container {
    width: 70%;
    border: 1px solid var(--shadows-color);
    margin: auto;
    padding: 20px 20px 40px 20px;
    border-radius: 10px;
    box-shadow: -1px 2px 5px var(--shadows-color);
    margin-top: -2%;
  }
  
  .form-container-h {
    text-align: left;
    font-weight: bold;
    color: var(--fourth-color);
    margin-bottom: 1%;
    margin-left: 1%;
  }
  
  .invite-form {
    padding-top: 50px;
    width: 70%;
    margin: auto;
    padding-bottom: 50px;
  }
  
  .form-field {
    padding-top: 5px;
    padding-bottom: 5px;
  }
  
  .info-list {
    width: 80%;
    margin: auto;
    padding-bottom: 20px;
    padding-top: 20px;
  }
  
  .basic-box {
    padding-left: 80px;
    padding-right: 80px;
    margin: auto;
  }
  
  .basic_form_1 {
    width: 100%;
    padding: 50px;
  }
  
  .basic_form_2 {
    width: 60%;
    padding: 50px;
    margin-left: -4%;
    margin-top: -50px;
  }
  
  .basic_form_3 {
    width: 90%;
    padding: 50px;
    margin: auto;
    margin-top: -50px;
  }
  
  .td_space1 {
    padding: 1%;
    width: 50%;
    vertical-align: top;
  }
  
  /* tab section */
  #video_radio:checked~#video_tab,
  #display_radio:checked~#display_tab,
  #basic_radio:checked~#basic_tab,
  #service_radio:checked~#service_tab,
  #payment_radio:checked~#payment_tab,
  #security_radio:checked~#security_tab,
  #preview_radio:checked~#preview_tab {
    /*border: 1px solid var(--third-color);*/
    background-color: #0E709F ;
    color: var(--first-color);
  }
  
  .nav_ul_table {
    display: table;
    text-align: right;
    padding: 20px 30px 0px 30px;
    width: 100%;
    margin: auto;
  }
  
  .bav_ul_row {
    display: table-row;
  }
  
  .nav_ul_cell_1 {
    display: table-cell;
    font-size: 12px;
    text-align: left;
    color: var(--second-color);
    font-weight: 600;
    padding-bottom: 10px;
    cursor: pointer;
  }
  
  .nav_ul_cell_1:hover {
    font-weight: 700;
  }
  
  .nav_ul_cell_2 {
    display: table-cell;
    width: 10%;
    text-align: right;
    padding-bottom: 20px;
    cursor: pointer;
  }
  
  .nav_ul li {
    text-align: left;
    color: var(--third-color);
    text-decoration: none;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 12px;
    font-weight: bold;
  }
  
  .nav_ul li a {
    text-decoration: none;
    color: var(--third-color);
  }
  
  .nav_ul li a:hover {
    color: var(--shadows-color);
  }
  
  .nav_block {
    background-color: var(--white-color);
    width: 250px;
    position: fixed;
    right: 20px;
    border: 1px solid var(--white-color);
    border-radius: 10px;
    box-shadow: -1px 0px 10px -3px var(--fourth-color);
  }
  
  .exclamation-icon {
    margin-left: 45%;
    position: absolute;
    top: 0%;
    margin-top: 1%;
    color: var(--shadows-color);
  }
  
  .form-group2 input:required+span::after {
    margin-left: 45%;
    position: absolute;
    top: 0%;
    margin-top: 1%;
    color: var(--shadows-color);
    display: none;
  }
  
  .tree-div {
    border: 1px solid var(--third-color);
    text-decoration: none;
    color: var(--second-color);
    border: 1px solid var(--fourth-color);
    padding: 10px;
    border-radius: 5px;
    
  margin: 1rem 1rem;
  }
  
  .basic_title {
    text-align: center;
    font-family: Oswald;
    font-size: 40px;
    font-weight: bolder;
    /* color: var(--second-color); */
    color: var(--white-color);
  }
  
  .tree-client {
    /* border-radius: 10px;     */
    /* box-shadow: -1px 0px 6px -2px var(--shadows-color); */
    /* border: 1px solid red; */
    width: 100%;
    margin: auto;
    margin-bottom: 10px;
  }
  
  .tree-client:active {
    width: 100%;
  }
  
  
  /* checkbox style */
  .tgl {
    display: none;
  }
  
  .tgl,
  .tgl:after,
  .tgl:before,
  .tgl *,
  .tgl *:after,
  .tgl *:before,
  .tgl+.tgl-btn {
    box-sizing: border-box;
  }
  
  .tgl::-moz-selection,
  .tgl:after::-moz-selection,
  .tgl:before::-moz-selection,
  .tgl *::-moz-selection,
  .tgl *:after::-moz-selection,
  .tgl *:before::-moz-selection,
  .tgl+.tgl-btn::-moz-selection {
    background: none;
  }
  
  .tgl::selection,
  .tgl:after::selection,
  .tgl:before::selection,
  .tgl *::selection,
  .tgl *:after::selection,
  .tgl *:before::selection,
  .tgl+.tgl-btn::selection {
    background: none;
  }
  
  .tgl+.tgl-btn {
    outline: 0;
    display: block;
    width: 4em;
    height: 2em;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  .tgl+.tgl-btn:after,
  .tgl+.tgl-btn:before {
    position: relative;
    display: block;
    content: "";
    width: 50%;
    height: 100%;
  }
  
  .tgl+.tgl-btn:after {
    left: 0;
  }
  
  .tgl+.tgl-btn:before {
    display: none;
  }
  
  .tgl:checked+.tgl-btn:after {
    left: 50%;
  }
  
  
  .tgl-skewed+.tgl-btn {
    overflow: hidden;
    transform: skew(-10deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: all 0.2s ease;
    font-family: sans-serif;
    background: #888;
  }
  
  .tgl-skewed+.tgl-btn:after,
  .tgl-skewed+.tgl-btn:before {
    transform: skew(10deg);
    display: inline-block;
    transition: all 0.2s ease;
    width: 100%;
    text-align: center;
    position: absolute;
    line-height: 2em;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
  }
  
  .tgl-skewed+.tgl-btn:after {
    left: 100%;
    content: attr(data-tg-on);
  }
  
  .tgl-skewed+.tgl-btn:before {
    left: 0;
    content: attr(data-tg-off);
  }
  
  .tgl-skewed+.tgl-btn:active {
    background: #888;
  }
  
  .tgl-skewed+.tgl-btn:active:before {
    left: -10%;
  }
  
  .tgl-skewed:checked+.tgl-btn {
    /* background: #131313; */
    background: #FF7228;
    /* background: #031D51; */
  }
  
  #cb2:checked+.tgl-btn {
    background: violet;
  }
  
  #cb3:checked+.tgl-btn {
    background: #131313;
  }
  
  .tgl-skewed:checked+.tgl-btn:before {
    left: -100%;
  }
  
  .tgl-skewed:checked+.tgl-btn:after {
    left: 0;
  }
  
  .tgl-skewed:checked+.tgl-btn:active:after {
    left: 10%;
  }
  
  .cb3:checked+.tgl-btn {
    /*background: #131313;*/
    background-color: var(--fourth-color);
  }
  
  .check_space {
    padding-left: 10px;
    padding-right: 20px;
  }
  
  .form-group-itz-checkbox,
  .form-group-itz-checkbox-after {
    width: 100%;
    text-align: left;
  }
  
  .form-group-itz-checkbox input,
  .form-group-itz-checkbox-after input {
    display: none;
  }
  
  .form-group-itz-checkbox label::before,
  .form-group-itz-checkbox-after label::after {
    content: "";
    font-size: 1.5rem;
    position: absolute;
    margin-left: -3rem;
    margin-top: -.2rem;
    color: var(--first-color);
    width: 2rem;
    height: 2rem;
    background-image: url('../icons-mp/Disable_Toggle.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  
  .form-group-itz-checkbox-after label::after {
    margin-left: 1rem;
  }
  
  .form-group-itz-checkbox label,
  .form-group-itz-checkbox-after label {
    position: relative;
    padding-left: 3rem;
  
  }
  
  .form-group-itz-checkbox-after label {
    padding-left: 0;
    margin-left: -0.7rem;
  }
  
  
  .form-group-itz-checkbox input:checked+label::before,
  .form-group-itz-checkbox-after input:checked+label::after {
    background-image: url('../icons-mp/Enable_Toggle.png');
  }
  
  
  @media only screen and (max-width: 992px) {
    .nav-bar-space-row {
      width: 100%;
      margin-left: 0px;
    }
  }
  
  @media only screen and (max-width: 600px) {
    .nav-bar-space-row {
      width: 60%;
      margin-left: 20%;
      display: block;
    }
  
    .subnav-design-new {
      margin-bottom: 15%;
    }
  
    .invite-design-new {
      width: 35vh;
    }
}


.signup-next-div, .signup-previous-div
{
  cursor: pointer;
}
.signup-next-button {
  background: url(../icons/next-blue.png) no-repeat center right;
  background-size: contain; 
  width: 2rem; 
  height: 2rem; 
}
.signup-next-div:hover .signup-next-button
{
  background: url(../icons/next-black.png) no-repeat center center;
  background-size: contain; 
  width: 2rem; 
  height: 2rem; 
}
.signup-previous-button {
  background: url(../icons/pre-blue.png) no-repeat center center;
  background-size: contain; 
  width: 2rem; 
  height: 2rem; 
}
.signup-previous-div:hover .signup-previous-button
{
  background: url(../icons/pre-black.png) no-repeat center center;
  background-size: contain; 
  width: 2rem; 
  height: 2rem; 
}
.next-pre-text {
  color: #0E709F;
}
.signup-previous-div:hover .next-pre-text {
  color: #000000;
}
.signup-next-div:hover .next-pre-text {
  color: #000000;
}

.image-information
{
  color: grey;
  font-size: 14px;
  font-weight: lighter;
  padding-top: 0.5rem;
}

.disabled {
  opacity: 0.6; 
}
div {
  caret-color: transparent;
}
input, textarea, select {
  caret-color: auto;
}



.form-group-itz {
  position: relative;
}

.form-group-itz input,
.form-group-itz select,
.form-group-itz textarea {
  width: 100%;
  border: 1px solid var(--box-border-color);
  padding: .5rem 1rem;
  border-radius: 5px;
  resize: none;
  background-color: transparent;
}

.form-group-itz .eye-icon {
  position: absolute;
  /* float: right; */
  cursor: pointer;
  color: var(--first-color);
  right: 0rem;
  padding: 0.5rem;
  z-index: 1;
  top: 0;
}

.form-group-itz input:focus,
.form-group-itz textarea:focus {
    outline: none;
}

.form-group-itz input::placeholder,
.form-group-itz textarea::placeholder {
    color: transparent;
}

.form-group-itz input+label,
.form-group-itz textarea+label,
.form-group-itz select+label {
    position: absolute;
    top: 0.5rem;
    left: 1rem;
    padding-right: 1rem;
    font-size: 0.875rem;
    transition: all 0.2s ease-out;
    pointer-events: none;
    color: var(--black-color);
    background-color: var(--white-color);
}

.form-group-itz input:focus+label,
.form-group-itz input:not(:placeholder-shown)+label,
.form-group-itz textarea:focus+label,
.form-group-itz textarea:not(:placeholder-shown)+label,
.form-group-itz select:focus+label,
.form-group-itz textarea:not(:placeholder-shown)+label,
.form-group-itz select+label {

    top: -.6rem;
}

.section-title {
  box-shadow: rgba(0, 0, 0, 0.25) 0px 2px 8px;
  /* border-top: 1px dashed var(--first-color); */
  margin: 20px 0;
  padding-top: .5rem;
  font-weight: 600;
  background-color: var(--thired-color);
  padding-bottom: .5rem;
  color: var(--dark-color);
  margin-top: 1rem;
  max-width: calc(100% + 4rem);
  display: block;
  width: calc(100% + 4rem);
  margin-left: -2rem;
  padding-left: 2rem;
}

.section-title:first-child {
  border-radius: 1rem 1rem 0 0;
  box-shadow: var(--first-color) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
  background-image: linear-gradient(var(--first-color), var(--dark-color));
  color: var(--white-color);

}