/*
Theme Name: Network Child
Description: A <a href='http://codex.wordpress.org/Child_Themes'>Child Theme</a> for the Network WordPress theme.
Version: 1.0
Author: GhostPool
Author URI: http://www.ghostpool.com
Text Domain: network
Template: network
*/

/* Add your own CSS code here */



@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');


body {
    overflow: hidden;
}

.tooltip {
    position: absolute;
    right: 10px;
    cursor: pointer;
    font-size: 20px;
    color: #007BFF;
    margin-top: -67px;

}



@keyframes popup {
    0% {
        transform: translate(-50%, -50%) scale(0);
        /* Start small */
        opacity: 0;
        /* Start transparent */
    }

    60% {
        transform: translate(-50%, -50%) scale(1.1);
        /* Over-scale for a bounce effect */
        opacity: 1;
        /* Fade in */
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        /* Set to final size */
        opacity: 1;
    }
}


.container2222 {
    display: none;
    text-align: center;
    background-color: #fff;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    margin: auto;
    max-width: fit-content;
    border-radius: 10px;
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
    position: absolute;
    /* Use absolute positioning */
    top: 50%;
    /* Center vertically */
    left: 50%;
    /* Center horizontally */
    transform: translate(-50%, -50%)scale(1);
    animation: popup 0.6s ease-out forwards;
    /* Apply animation */

}

.dashboard-sixth-button {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    color: #fff;
    background-color: red;
    text-decoration: none;
    font-size: 18px;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.dashboard-sixth-button:hover {

    background-color: #000;
}



/*.ArtX-heading img {*/
/*    padding-top: 13px;*/
/*}*/


.FL-form {
    display: none;
}

.artx-THIRD-form {
    position: relative;
    MAX-WIDTH: 700PX;
    left: 65px;
    HEIGHT: 463PX;
    TOP: 30PX;
}

.form-button {
    padding: 10px 20px;
    border: 1px solid black;
    border-radius: 2px;
}


/*.form-container{*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    margin-left: 50%;*/
/*}*/

body {
    overflow-x: hidden;
}

.story-form-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 4%;
    width: 100%;
}

.welcome-msg {
    font-size: 20px;
    color: green;
    font-weight: 500;
    text-align: center;

}

#personal-details-container {
    display: none;
}

#story-title-container {
    /*display: none;*/
}

#select-group-container {
    display: none;
}

.form-details-msg {
    font-size: 20px;
    font-weight: 500;
    color: blue;
}

#story_title {
    width: 100%;
}

#artist-recommendation-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 2%;
    gap: 10px;
    width: 50%;
}

/*#create-story-container{*/
/*    display:none;*/
/*}*/

#code-validation-container {
    /*display:none;*/
}

#upload-file-container {
    display: none;
}


/* Container styling */
.form-container,
.second-form,
.third-form {
    max-width: 486px;
    padding: 24px;
    border: 2px solid #EE7D6E;
    border-radius: 20px;
    background-color: rgba(212, 212, 212, 0.2);
    box-shadow: 20px 20px 50px 0px rgba(210, 92, 189, 0.55);
}


.first-form {
    position: absolute;
    top: 50%;
    left: 30%;
    transform: translate(-50%, -50%);
    box-shadow: 20px 20px 50px 0px rgba(210, 92, 189, 0.55);
}

/* Form styling */


/* Button styling */
.form-common button {
    width: 100%;
    border: none;
    border-radius: 4px;
    background-color: #00C87B;
    color: white;
    font-size: 16px;
    cursor: pointer;
}

/* Button hover effect */
.form-common button:hover {
    background-color: #45a049;
}






.form-common input[type="text"],
.form-common input[type="email"],
.form-common input[type="number"],
.form-common input[type="password"],
.select_bp_group {
    font-family: 'Helvetica';
    width: 215px;
    box-sizing: border-box;
    font-size: 14px !important;
    font-weight: 400;
    border: 2px solid #D57490;
    /*border-image-source: linear-gradient(90deg, #EE7D6E 0%, #78226F 100%);*/
    border-image-slice: 1;
    border-radius: 20px !important;
    background-color: transparent;
    margin-bottom: 24px;
    height: 56px;
    color: #ffffff;
}

.form-common button[type="submit"] {
    font-family: "Bebas Neue";
    font-size: 32px;
    font-weight: 400;
    line-height: 28.48px;
    padding: 18px 65px;
    border: none;
    border-radius: 25px;
    background-color: #C725D6;
    color: #ffffff;
    max-width: fit-content;
    /*max-height: 48.8px;*/
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.form-common button[type="submit"]:hover {
    background-color: rgba(210, 92, 189, 1);
}

.form-common {
    text-align: center;
}

.form-common h2 {
    margin-top: 0;
    margin-bottom: 24px;
    font-family: 'Montserrat';
    font-size: 30px;
    font-weight: 600;
    color: #fff;
    text-align: left;
}

.ArtX-heading h1 {
    font-family: 'Montserrat';
    font-size: 60px;
    font-weight: 700;
    line-height: 73.14px;
    text-align: center;
    margin-top: 55px;
}

.ArtX-heading {
    padding-top: 4px;
    text-align: center;
}

.f-form {
    width: 100%;
    height: 100vh;
    background-image: url("https://artxhub.com/wp-content/themes/network-child/images/artx-page1.png") !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.form-common input::placeholder {
    font-family: 'Helvetica';
    font-weight: 700;
    font-size: 14px;
    color: #ffffff !important;
}

.form-common input:-moz-placeholder {
    font-size: 20px;
    color: #ffffff;
}

.form-common input:-ms-input-placeholder {
    font-size: 20px;
    color: #ffffff !important;
}

.sd-form {
    width: 100%;
    height: 100vh;
    background-image: url("https://artxhub.com/wp-content/themes/network-child/images/secondpage.png") !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.FR-form {
    width: 100%;
    height: 100vh;
    overflow: scroll;
    background-image: url("https://artxhub.com/wp-content/themes/network-child/images/forthpage.png") !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.second-form {
    position: relative;
    top: 9%;
    left: 19%;
}

.TR-form {
    width: 100%;
    height: 100vh;
    background-image: url("https://artxhub.com/wp-content/themes/network-child/images/thirdpageimage.png") !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-color: rgba(0, 0, 0, 0.40);

}

.FL-form {
    width: 100%;
    height: 100vh;
    background-image: url("https://artxhub.com/wp-content/themes/network-child/images/fifthPage.png") !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    overflow-y: scroll;
}

.select_bp_group {
    appearance: none;
    background-image: url('https://artxhub.com/wp-content/themes/network-child/images/Vector.svg');
    background-repeat: no-repeat;
    background-position: 94% center;
    cursor: pointer;

}

.select_bp_group option {
    /*background-color: rgba(212, 212, 212, 0.2);*/
    background-color: #D4D4D4;

}

.third-form {
    position: relative;
    top: 9%;
    left: 17%;

}

.gp-toggle-sidebar-small .gp-main-wrapper {
    width: 100%;
}




/* 4th form upload file*/


.frth-form {
    max-width: 522px;
    padding: 24px;
    border: 2px solid #EE7D6E;
    border-radius: 20px;
    background-color: rgba(212, 212, 212, 0.2);
    box-shadow: 20px 20px 50px 0px rgba(210, 92, 189, 0.55);
    position: relative;
    top: 9%;
    left: 17%;

}


.file-upload-wrapper input[type="file"] {
    position: relative;
    top: 40px;
    left: 40px;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.file-upload-wrapper .upload-image1 {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    left: 42%;

}

.file-upload-wrapper .upload-image2 {
    height: 40px;
    width: 40px;
}

.file-upload-wrapper {

    position: absolute;
    display: inline-block;
    cursor: pointer;
    top: 24%;
    left: 56px;
}

.browser-files {
    display: flex;
    padding-left: 185px;
    /*padding-top: 24px;*/
}

.browser h3 {
    font-family: 'Bebas Neue';
    font-size: 31px;
    font-weight: 400;
    line-height: 28.48px;
    text-align: center;
    color: #fff !important;
    margin-top: 44px;
    margin-bottom: 24px;
}

.file-upload {

    position: relative;
}

.profile-upload {
    position: relative;
}

.frth-form h2 {
    text-align: center;
}

.textarea {
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
}

textarea {
    /*border: 2px solid #EE7D6E;*/
    /*border-radius: 30px !important;*/
    background-color: rgb(255, 255, 255, 0.05);
    margin: 0;

}

#profileDescription {
    font-size: 22px;
    color: #C725D6;
    border: none;
    background-color: transparent;
    font-family: Helvetica;
    font-weight: 700;
    line-height: 16.1px;
    text-align: left;
    max-width: 500px;
}

textarea::placeholder {
    font-family: Helvetica;
    font-weight: 700;
    font-size: 14px;
    text-align: left;
    line-height: 1;
    color: #C725D6 !important;

}

.cntn-txtblock textarea:-moz-placeholder {
    font-size: 20px;
    color: #ffffff;
}

.cntn-textblock textarea:-ms-input-placeholder {
    font-size: 20px;
    color: #ffffff !important;
}


.fourth-form {
    display: none;
}


.file-upload-wrapper p {
    font-family: 'Bebas Neue';
    font-size: 14px;
    font-weight: 400;
    line-height: 16.8px;
    text-align: center;
    color: #F15CFF;
    margin-top: -28px;
    max-width: 190px;
    overflow-wrap: break-word;

}

/*5th form*/

.ffth-form {
    max-width: 493px;
    padding: 24px;
    border: 1px solid #EE7D6E;
    border-radius: 30px;
    background-color: rgba(212, 212, 212, 0.05);
    box-shadow: 20px 20px 50px 0px rgba(200, 77, 182, 0.55);

}

.form-row label {
    font-family: 'Montserrat';
    font-size: 30px;
    font-weight: 700;
    line-height: 36.57px;
    text-align: left;
    color: #FFFFFF;

}

.form-row {
    text-align: left;
}


/*======== artx ==========*/
.ArtX-heading h2 {
    color: #FFF;
    font-family: "Playfair Display";
    font-size: 70px;
    font-weight: 400;
    margin: 0;
}

.ArtX-heading h2 span {
    background: linear-gradient(90deg, #C725D6 40.5%, #D57490 76.5%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ArtX-heading p {
    color: #FFF;
    text-align: center;
    font-family: "Playfair Display";
    font-size: 30px;
    font-weight: 400;
    max-width: 731px;
    line-height: normal;
    margin: 0 auto;
    padding-top: 22px;
}

/*.ArtX-heading img{*/
/*    padding-top: 23px;*/
/*}*/

.artx-ffth-form {
    max-width: 600px;
    height: 350px;
    /*background-image: url('https://artxhub.com/wp-content/themes/network-child/images/artx-bg-connect-op.svg');*/
    position: relative;
    top: 75px;
    left: 125px;
}

.artx-form-common h4 {
    color: #FFF;
    text-align: center;
    font-family: Helvetica;
    font-size: 40px;
    font-weight: 700;
    padding-bottom: 16px;
    margin: 0;
}

.artx-form-common {
    width: 438px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.artx-form-common .form-row input {
    border: 2px solid #C725D6 !important;
}

.artx-form-common .form-row #user_email::placeholder,
.artx-form-common .form-row #invitation_code::placeholder {
    color: #FFF;
    font-family: Helvetica;
    font-size: 18px;
    font-weight: 700;
}

.artx-ffth-form .artx-form-common .form-button {
    color: #FFF;
    /*font-family: "Bebas Neue";*/
    font-family: "Bebas Neue", sans-serif;
    font-size: 24px;
    font-weight: 400;
    text-transform: uppercase;
    border-radius: 25px;
    background: #C725D6;
    max-width: 150px;
    padding: 10px 0px 8px 0;

}





ƒ
/*================2nd form ==========================*/


.first-frm .form-row input {
    width: 438px !important;
}

.first-frm input {
    width: 438px !important;


}

.artx-SECOND-form .artx-form-common {
    width: 620px;
    position: absolute;
    top: 65%;
    left: 69%;
    transform: translate(-50%, -50%);
}

/*.artx-SECOND-form{*/
/*    position: relative;*/
/*}*/

.artx-SECOND-form {
    position: relative;
    MAX-WIDTH: 700PX;
    left: 65px;
    HEIGHT: 530PX;
    top: -10px;
}

.form-column {
    display: flex;
    gap: 8px;
}

.ArtX-heading svg {
    margin-top: 21px;
}

.ArtX-heading p {
    padding-top: 10px;
}

.artx-SECOND-form svg {
    fill: rgba(255, 255, 255, 0.05) !important;
    stroke-width: 1.2px;
    stroke: #D57490;
    filter: drop-shadow(12px 12px 60px rgba(158, 64, 144, 0.25));
    /*margin-left: 16px;*/
    /*margin-top: -11px;*/
}

/*3rd form*/

/*.artx-THIRD-form .artx-form-common {*/

/*    transform: translate(-168%, -20%);*/
/*}*/
.form-column3 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

}

.artx-THIRD-form {
    /*TEXT-ALIGN: CENTER;*/
    /*MARGIN-TOP: 51PX;*/
    /*    padding-left: 100px;*/
}

.artx-THIRD-form .artx-form-common h4 {
    font-size: 33px;

}

.form-column3 {
    display: flex
}

.form-row3 {
    text-align: left;
    display: flex;
    flex: 0 0 30%;
    margin-bottom: 31px;
    align-items: baseline;
    max-width: 140px;
    overflow: hidden;
    overflow-wrap: break-word;
    white-space: normal;

}

.form-row3 label {
    font-family: Helvetica;
    font-size: 14px;
    font-weight: 700;
    line-height: 16.1px;
    text-align: left;
    color: #ffffff;
}

.artx-THIRD-form .form-column-container {
    padding-left: 0px;
    display: flex;
    flex-direction: column;
}



/* custom css*/

.artx-THIRD-form .form-common button[type="submit"] {
    margin-top: -9px;
}

.form-row3 {
    display: flex;
    align-items: center;
}

.form-row3 input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    /* Hide the default checkbox */
    cursor: pointer;
}

.form-row3 label {
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 30px;
    /* Space for the custom checkbox */
    cursor: pointer;
    font-size: 16px;
    line-height: 20px;
}

/* Custom Checkbox Style */
.form-row3 label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 15px;
    /* Checkbox width */
    height: 15px;
    /* Checkbox height */
    border-radius: 4px;
    /* Rounded corners */
    border: 2px solid transparent;
    /* Transparent border initially */
    background: linear-gradient(180deg, #C725D6 0%, #D57490 100%);
    /* Gradient border */
    -webkit-mask:
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    /* Clip background */
    mask:
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
}

/* Checkmark Style */
.form-row3 label::after {
    content: "✔";
    /* Checkmark symbol */
    position: absolute;
    color: rgb(0, 0, 0, 0.5);
    left: 3px;
    top: 0px;
    width: 15px;
    height: 15px;
    background-color: transparent;
    /* Transparent background initially */
    border-radius: 2px;
    /* Rounded corners */
    transition: background-color 0.3s ease;
    /* Smooth transition */
    opacity: 0;
}

/* Checked State */
.form-row3 input[type="checkbox"]:checked+label::after {
    opacity: 1;
}

/* Checked State Background */
.form-row3 input[type="checkbox"]:checked+label::before {
    background: linear-gradient(180deg, #D57490 0%, #C725D6 100%);
    transform: scale(1.1);
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
}

.artx-THIRD-form svg {
    /*fill: rgba(255, 255, 255, 0.05) !important;*/
    /*stroke-width: 1.2px;*/
    /*stroke: #D57490;*/
    /*filter: drop-shadow(12px 12px 60px rgba(158, 64, 144, 0.25));*/

    stroke: url(#gradientStroke1);
    fill: rgba(255, 255, 255, 0.05) !important;
    stroke-width: 1.2px;
    filter: drop-shadow(12px 12px 60px rgba(158, 64, 144, 0.25));
}

/* forth form*/
.artx-FOURTH-form svg {
    stroke: url(#gradientStroke);
    /* Applies the gradient to the stroke */
    fill: rgba(255, 255, 255, 0.05) !important;
    stroke-width: 1.2px;
    filter: drop-shadow(12px 12px 60px rgba(158, 64, 144, 0.25));
}

.profile-svg2 svg {
    stroke: url(#gradientStroke9);
    /* Applies the gradient to the stroke */
    fill: rgba(255, 255, 255, 0.05) !important;
    stroke-width: 1.2px;
    filter: drop-shadow(12px 12px 60px rgba(158, 64, 144, 0.25));
}

.artx-SECOND-form svg {
    stroke: url(#gradientStroke1);
    /* Applies the gradient to the stroke */
    fill: rgba(255, 255, 255, 0.05) !important;
    stroke-width: 1.2px;
    filter: drop-shadow(12px 12px 60px rgba(158, 64, 144, 0.25));

}

.artx-ffth-form svg {
    stroke: url(#gradientStroke8);
    /* Applies the gradient to the stroke */
    fill: rgba(255, 255, 255, 0.05) !important;
    stroke-width: 1.2px;
    filter: drop-shadow(12px 12px 60px rgba(199, 37, 214, 0.25)) !important;
}

.textarea-contnt {
    /*position: relative;*/
    /*text-align: left;*/
    /*padding-left: 75px;*/
    /*margin-left: -20px;*/
    /*margin-top: -35px;*/

    position: relative;
    MAX-WIDTH: 700PX;
    left: 135px;
    HEIGHT: 433PX;
    TOP: 30PX;
    margin-top: -90px;

}

.story-svg {
    text-align: left;
    /*padding-left: 51px;*/

}

.cntn-txtblock {
    text-align: justify;
    /*position: absolute;*/
    /*top: 71px;*/
    /*left: 17.5%;*/
    /*max-width: 470px;*/
    width: 500px;
    position: absolute;
    top: 61%;
    left: 66%;
    transform: translate(-50%, -50%);
}

.cntn-txtblock h6 {
    font-family: Helvetica;
    font-size: 34px;
    font-weight: 700;
    line-height: 29.9px;
    text-align: center;
    color: #fff;
    margin: 10px 0 0 0;
}

.FR-form .ArtX-heading {
    padding-top: 12px;
}

/*fifth form*/
.artx-FIFTH-form svg {
    /*stroke: url(#gradientStroke9);  */
    /*fill: rgba(255, 255, 255, 0.05) !important;*/
    /*stroke-width: 1.2px;*/
    /*filter: drop-shadow(12px 12px 60px rgba(158, 64, 144, 0.25)) !important;*/

    stroke: url(#gradientStrokeCredit5);
    fill: rgba(255, 255, 255, 0.05) !important;
    stroke-width: 1.2px;
    filter: drop-shadow(12px 12px 60px rgba(199, 37, 214, 0.25)) !important;
}

/*.artx-FIFTH-form .artx-form-common {*/
/*    transform: translate(-155%, -42%);*/
/*}*/
.artx-FIFTH-form .artx-form-common h4 {
    font-size: 32px;

}

.story-title {
    display: flex;
    flex-direction: column;
}

.story-title {
    max-width: 100%;
}

.story-title input {
    width: 441px !important;
}

.story-title textarea {
    border-radius: 20px !important;
    height: 129px;
    background: transparent;

}

.story-title input::placeholder {
    color: #ffffff;
}

.story-title input:-moz-placeholder {
    font-size: 14px;
    color: #ffffff;
}

.story-title input:-ms-input-placeholder {
    font-size: 14px;
    color: #ffffff !important;
}

/* Custom styled label as button */
.custom-file-upload {
    display: inline-block;
    padding: 18px 65px;
    color: white;
    /* Text color */
    background-color: #C725D6;
    /* Purple button background */
    border-radius: 25px;
    /* Rounded corners */
    cursor: pointer;
    /* Cursor change to pointer */
    transition: background-color 0.3s ease;
    /* Smooth background transition */
    text-transform: uppercase;
    /* Uppercase text */
    font-family: "Bebas Neue";
    font-size: 32px;
    font-weight: 400;
    line-height: 28.8px;
    text-align: left;

}

/* Hover effect */
.custom-file-upload:hover {
    background-color: #E543DA;
    /* Slightly lighter purple on hover */
}

.btn-grp {
    display: flex;
    justify-content: space-evenly;
    padding-top: 28px;

}

.btn-grp input {
    display: none;
}


.artx-FIFTH-form {
    position: relative;
    MAX-WIDTH: 600PX;
    left: 65px;
    HEIGHT: 461PX;
    TOP: 67PX;
}

.story-title textarea::placeholder {
    color: rgb(255, 255, 255, 1) !important;
}

#storycontent,
#storytitle {
    border: 2px solid #C725D6 !important;
    color: #ffffff;
    width: 100% !important;
}

/* Vendor Prefixes for Compatibility */
input::-webkit-input-placeholder,
/* Chrome, Safari, Opera */
textarea::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 1);
    opacity: 1;
}

input:-ms-input-placeholder,
/* Internet Explorer 10-11 */
textarea:-ms-input-placeholder {
    color: rgba(255, 255, 255, 1);
    opacity: 1;
}

textarea::-ms-input-placeholder {
    color: rgba(255, 255, 255, 1);
    opacity: 1;
}

input::placeholder,
textarea::placeholder {
    color: rgba(255, 255, 255, 1);
    opacity: 1;
}

@media(max-width:1440px) {
    .second-form {
        top: 1%;
    }

    .frth-form {
        top: 2%;
    }

    .textarea-contnt {
        margin-top: -90px;
    }


}

@media (max-width: 1280px) {

    /*.cntn-txtblock {*/
    /*    left: 23%;*/
    /*}*/
    /*.All-points{*/
    /*    position: absolute;*/
    /*right: 249px;*/
    /*bottom: -166%;*/
    /*}*/
    textarea {
        height: 143px;
    }

    .story-svg svg {
        height: 400px;
    }

    .textarea-contnt {

        HEIGHT: 373PX;
    }

}

@media (max-width:1024px) {

    .first-form {
        left: 50%;
    }

    .third-form {
        left: 16%;
    }




}

@media(max-width:767px) {
    .ArtX-heading h2 {
        font-size: 50px;
    }

    /*Mahesh CSS*/
    .credit-content {
        left: 24%;
        top: 52px !important;
    }

    .credit-points {
        top: 30px !important;
    }

    #code-validation-container .artx-form-common {
        top: 65%;
        left: 51%;
    }

    .first-frm h4 {
        font-size: 20px !important;
    }

    /*.invit-heading h*/
    .artx-email-tooltip {
        padding: 2px;
        left: 47% !important;
        top: 45% !important;
    }

    .ArtX-heading p {
        font-size: 15px;
        margin: 0px 20px;
    }

    .artx-ffth-form {
        margin: 0 auto;
        max-width: 348px;
        left: unset;
        height: 347px;
        top: 0px;
    }

    .artx-ffth-form svg {
        width: 348px;
    }

    .artx-ffth-form .artx-form-common {
        width: 280px;
    }

    .artx-form-common h4 {
        font-size: 21px;
        padding-bottom: 9px;

    }

    .artx-form-common .form-row input {
        padding: 7px 10px 7px 12px !important;
        margin-bottom: 13px;
        font-size: 16px !important;

    }

    .artx-ffth-form .artx-form-common .form-button {
        max-width: 102px;
        padding: 0px 0px 0px 0;
        font-size: 18px;
    }

    input::-webkit-input-placeholder,
    /* Chrome, Safari, Opera */
    textarea::-webkit-input-placeholder {
        font-size: 16px !important;
    }

    input:-ms-input-placeholder,
    /* Internet Explorer 10-11 */
    textarea:-ms-input-placeholder {
        font-size: 16px;
    }

    textarea::-ms-input-placeholder {
        font-size: 16px;
    }

    input::placeholder,
    textarea::placeholder {
        font-size: 16px;
    }

    .artx-SECOND-form {
        left: unset;
        HEIGHT: unset;
        top: 140px;
    }

    .artx-SECOND-form svg {
        display: none;
    }

    .artx-SECOND-form .artx-form-common {
        width: 338px;

    }

    .scnd-frm input {
        width: 165px !important;
    }

    .artx-THIRD-form {
        MAX-WIDTH: 360PX;
        left: unset;
        HEIGHT: unset;
        TOP: 170PX;
        margin: 0 auto;
    }

    .form-row3 {
        flex: 0 0 50%;
        margin-bottom: 16px;
    }

    .heading-tooltip .invitation-code-tool {
        top: -115px !important;
        left: -135px !important;
    }

    .artx-THIRD-form .artx-form-common h4 {
        font-size: 16px;
        padding-bottom: 19px;
        text-align: center;


    }

    .data-container-new-pos {

        right: 80%;
    }

    .tooltip-svg svg {
        max-width: 100%;
    }

    #tooltip-group-heading .tooltiptext {
        top: 46% !important;
        left: 72%;
        width: 160px;
    }

    .artx-FOURTH-form .profile-svg1 svg,
    .artx-FOURTH-form .profile-svg2 svg {
        width: 70% !important;
    }

    .artx-THIRD-form .artx-form-common {
        width: 288px;

    }

    .artx-THIRD-form .form-column-container {
        padding-left: 0;
    }

    .artx-THIRD-form .form-common button[type="submit"] {
        margin-top: 9px;
    }

    .btn-grp {
        padding-top: 0px;

    }

    .custom-file-upload {
        padding: 0px 16px;
        font-size: 17px;

    }

    .Fifth-final-form .heading-tooltip .invitation-code-tool {
        top: -115px !important;
        left: -140px !important;
    }

    .artx-story-heading .tooltiptext {
        top: 49% !important;
        left: 49% !important;
        width: 153px !important;
    }

    .btn-grp p {
        margin: 0;
    }

    .btn-grp button {
        font-size: 18px !important;
        padding: 0px !important;
        max-width: 90px !important;
    }


    .upload-profile-photo #profilePicLabel {
        margin-top: 32px;
    }

    .upload-image-tooltip .heading-tooltip {
        margin-top: 30px;
    }

    #profileDescription {
        height: 73px;
        padding: 0;
        font-size: 14px;
    }

    .cntn-txtblock h6 {
        font-size: 18px;
    }

    .cntn-txtblock {
        /*top: 27%;*/
        /*left: 18%;*/
        width: 255px;
    }

    .story-svg svg {
        width: 390px;
    }

    .story-svg {
        padding-left: 0px;
    }

    .textarea-contnt {
        padding-left: 0px;
        max-width: 380px;
        margin: 0 auto;
        margin-top: -100px;
        left: -7px;
        TOP: -55px;
    }

    .profile-svg2 svg {
        width: 220px;
    }

    .file-upload {
        max-width: 340px;
        margin: 0 auto;
        MARGIN-TOP: -50PX;
    }

    .file-upload-wrapper p {
        font-size: 10px;
        margin-top: -12px;
    }

    .profile-upload {

        max-width: 340px;
        margin: 0 auto;
    }

    .profile-svg1 svg {
        width: 220px;
    }




    .artx-FIFTH-form {
        MAX-WIDTH: 340PX;
        left: unset;
        HEIGHT: unset;
        TOP: unset;
        margin: 0 auto;
    }

    .ff-svg {
        width: 300px;

    }

    .artx-FIFTH-form svg {
        width: 340px;

    }

    .artx-FIFTH-form .artx-form-common {
        width: 278px;

    }

    .artx-FIFTH-form .artx-form-common h4 {
        font-size: 16px;
        padding-bottom: 10px;

    }

    #storycontent,
    #storytitle {
        width: 220px !important;
        padding: 7px 12px;
        margin-bottom: 7px;


    }

    .story-title textarea {
        height: 80px;

    }

    .story-title {
        display: block;

    }


    .form-common input[type="text"],
    .form-common input[type="email"],
    .form-common input[type="number"],
    .form-common input[type="password"] {
        height: unset;
    }

    .form-common button[type="submit"] {
        font-size: 22px;
        padding: 4px;
        max-width: 120px;
        margin: 0;

    }

    .third-form {
        margin: 0 20px;
        left: 0;
    }

    .frth-form {
        left: 0;
        margin: 0px 18px;
    }

    .browser-files {
        padding: 0;
        display: block;
        margin-top: -15px;


    }

    .file-upload-wrapper {
        max-width: 168px;
        max-height: 105px;
        padding: 15.75px;
        top: 17%;

        left: 25%;
    }

    .file-upload-wrapper .upload-image1 {
        width: 37.44px;
        height: 35.01px;
    }

    .file-upload-wrapper .upload-image2 {
        height: 37.44px;
        width: 40.01px;
        margin-top: 13px;
    }

    #browserFile {
        top: 10px !important;
    }

    .browser h3 {
        font-size: 17px;
        margin-top: 0px;

        line-height: 28.48px;
    }


    .ArtX-heading {
        padding-top: 18px;
    }

    .ArtX-heading img {
        max-width: 80%;
    }

    .ArtX-heading svg {
        margin-top: 9px;
        width: 316px;

    }

    #tooltip-user-firstname .tooltiptext {
        left: 45%;
    }

    #tooltip-user-lastname .tooltiptext {
        left: 45%;
    }

    #tooltip-user-username .tooltiptext {
        top: 50%;
        left: 45%;
    }

    #tooltip-user-password .tooltiptext {
        left: 45%;
    }

    #tooltip-user-confirmpassword .tooltiptext {
        left: 45%;
    }

    #tooltip-user-phonenumber .tooltiptext {
        left: 45%;
    }

    #tooltip-group-heading .tooltiptext {
        top: 49% !important;
        left: 50%;
        width: 160px;
    }

    .artx-story-heading .tooltiptext {
        top: 52% !important;
        left: 49% !important;
        width: 100px !important;
    }

    .additional-container-step5 {
        top: 385px !important;
        left: 50% !important;
    }

    #tooltip-block-heading .tooltiptext {
        left: 49%;
    }

    #tooltip-user-heading .tooltiptext {
        left: 48%;
    }

    .first-form-credit-points {
        top: 30px;
    }
}




/*Loader css*/


#page_loader {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #00000050;
    z-index: 999;
    pointer-events: none;
    opacity: 0;
    /* display: block; */
}

#page_loader img {
    mix-blend-mode: hard-light;
    max-width: 50px;
}

.ajax-loader-brakes {
    position: relative;
}

.ajax-loader-brakes::before {
    content: "";
    position: absolute;
    background: url(../images/ajax-loader.gif) no-repeat center/ 50px, #00000020;
    z-index: 1;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 6px;
}


.btn-grp p {
    margin: 0;

    font-family: 'Bebas Neue';
    font-size: 14px;
    font-weight: 400;
    line-height: 16.8px;
    text-align: center;
    color: #F15CFF;

    max-width: 190px;
    overflow-wrap: break-word;
}



/* activity upload photo css*/

#drag-drop-area .rtm-select-files {
    display: none;
}

select#rtSelectPrivacy:nth-child(3) {
    display: none;
}

/*new css*/
/*.credit-content{*/
/*    display: flex;*/
/*    align-items: flex-end;*/
/*    text-align: center;*/
/*}*/
.credit-div {
    position: relative;
}

.All-points {
    position: absolute;
    top: 0;
    right: 110px;
}

.credit-points {
    position: relative;
    top: 0;
    height: 30px;
}

.credit-content {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    position: absolute;
    left: 15%;
    top: 25px;

}

.THIRD-form svg {}

.credit-points svg {
    stroke: url(#gradientStrokeCredit);
    /* Applies the gradient to the stroke */
    fill: rgba(255, 255, 255, 0.05) !important;
    stroke-width: 1.2px;
    filter: drop-shadow(12px 12px 60px rgba(158, 64, 144, 0.25));
}

.SECOND-form .credit-points svg {
    stroke: url(#gradientStrokeCredit2);
    /* Applies the gradient to the stroke */
    fill: rgba(255, 255, 255, 0.05) !important;
    stroke-width: 1.2px;
    filter: drop-shadow(12px 12px 60px rgba(158, 64, 144, 0.25));
}

.THIRD-form .credit-points svg,
.THIRD-form .additional-block-svg svg,
.tooltip-svg {
    stroke: url(#gradientStrokeCredit3);
    /* Applies the gradient to the stroke */
    fill: rgba(255, 255, 255, 0.05) !important;
    stroke-width: 1.2px;
    filter: drop-shadow(12px 12px 60px rgba(158, 64, 144, 0.25));
}

.FOURTH-form .credit-points svg {
    stroke: url(#gradientStrokeCredit4);
    /* Applies the gradient to the stroke */
    fill: rgba(255, 255, 255, 0.05) !important;
    stroke-width: 1.2px;
    filter: drop-shadow(12px 12px 60px rgba(158, 64, 144, 0.25));
}

.Fifth-final-form .credit-points svg {
    stroke: url(#gradientStrokeCredit5);
    /* Applies the gradient to the stroke */
    fill: rgba(255, 255, 255, 0.05) !important;
    stroke-width: 1.2px;
    filter: drop-shadow(12px 12px 60px rgba(158, 64, 144, 0.25));
}

.additional-block-svg svg {
    stroke: url(#gradientStrokeBlock);
    /* Applies the gradient to the stroke */
    fill: rgba(255, 255, 255, 0.05) !important;
    stroke-width: 1.2px;
    filter: drop-shadow(12px 12px 60px rgba(158, 64, 144, 0.25));
}

.inside-credits {
    font-family: "Playfair Display";
    font-size: 30.77px;
    font-weight: 400;
    line-height: 41.02px;
    text-align: center;
    color: #fff;
}

.tooltip-svg {
    position: relative;

}

.tooltiptext {
    position: absolute;
    top: 30%;
    /*left: 12%;*/
    width: 160px;
    /*overflow-y: scroll;*/
    height: 76px;

}

.tooltiptext h4 {
    font-family: 'Bebas Neue';
    font-size: 14px !important;
    font-weight: 400;
    line-height: 22.4px;
    text-align: center;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.tooltip-heading {
    position: absolute;
    right: 10px;
    cursor: pointer;
    font-size: 20px;
    color: #007BFF;
    margin-top: -67px;
}

.invit-heading {
    display: flex;
    align-items: baseline;
    /*gap:5px;*/
}

#invitation-heading {
    cursor: pointer;
}

.user-information-carousel {
    text-align: center;
    max-width: 95%;
    margin: 0 auto;
    background: #2B2232;
    border-radius: 20px;
    border: 1px solid rgba(199, 37, 214, 1);
}


.user-information-carousel-bottom {
    position: absolute;
    bottom: 11px;
    text-align: center;
    width: 95%;
    left: 50%;
    transform: translateX(-50%);
    background: #2B2232;
    border-radius: 20px;
    border: 1px solid rgba(199, 37, 214, 1);
}

.common-carousel-block {
    height: 50px;
    padding-top: 10px;
}

.inside-credit {
    font-family: Playfair Display;
    font-size: 30.77px;
    font-weight: 400;
    line-height: 41.02px;
    text-align: center;
    color: #fff;
}

.slick-slide {
    color: #fff !important;
}

.form-column-container .form-row {
    position: relative;
}

.user-details {
    margin-top: 30px;
    /*position: unset;*/

}

.user-details-second {
    margin-top: 40px;
    bottom: -44px;
    /*position: unset;*/
}

.invitation-code-tooltip {
    position: absolute;

    display: none;

    scrollbar-width: none;
    -ms-overflow-style: none;
    bosx-shadow: none;
}

.invitation-code-tooltip ::-webkit-scrollbar {
    display: none;
}

#tooltip-block-heading {
    /*position: fixed;*/
    top: 12%;
    left: 58%;

}

#tooltip-block-email {
    top: 32%;
    left: 112%;

}

#tooltip-block-invitatincode {

    top: 24%;
    left: 85%;


}

.additional-container {
    position: absolute;
    top: 19%;
    left: 116%;
}

.additional-block-content {
    position: absolute;
    width: 300px;
    top: -100px;
    left: 220px;
    font-family: 'Bebas Neue';
    font-size: 14px;
    font-weight: 400;
    line-height: 22.4px;
    text-align: center;
    color: #fff;
    height: 440px;
    overflow-y: scroll;
    scrollbar-width: none;
    display: flex;
    align-items: center;
    -ms-overflow-style: none;
    /*text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);*/
}

.additional-block-content h4 {
    margin-block-start: unset;
    margin-block-end: unset;
    overflow-wrap: normal;
    font-size: 32px;
    text-shadow: 7px 10px 19px rgba(0, 0, 0, 29.5);
}


.additional-block-content::-webkit-scrollbar {
    display: none;
}

.second-additional-block {

    top: 29%;
        /*left: 1042px;*/
}

/*.slick-track{*/
/*    top: 9px !important;*/
/*}*/

.artx-THIRD-form .artx-form-common {
    width: 460px;

}

.artx-THIRD-form .invit-heading {
    gap: 2px;
    margin-bottom: 10px;

}

.heading-tooltip:hover {
    cursor: pointer;

}

/*    .heading-tooltip:hover + .invitation-code-tool {*/
/*    display: block;*/
/*}*/

/*.invitation-code-tool {*/
/*    display: none;  */
/*    position: absolute;  */

/*}*/

.heading-tooltip {
    position: relative;
}

.heading-tooltip svg {
    stroke-width: 0.4px;
}

.tooltip svg {
    stroke-width: 0.4px;
}

.heading-tooltip .invitation-code-tool {
    display: none;
    position: absolute;
    z-index: 10;
    /*top: -44%;*/
    /*right: -46%;*/
    top: -115px;
    left: 9px;
}

.heading-tooltip:hover .invitation-code-tool {
    display: block;
    /* Show the tooltip when hovering */
}

#tooltip-user-heading {
    top: 12%;
    left: 71%;

}

#tooltip-user-firstname {
    top: 25%;
    left: 65%;

}

#tooltip-user-username {
    top: 39%;
    left: 65%;
}

#tooltip-user-password {
    top: 54%;
    left: 65%;
}

#tooltip-user-lastname {
    top: 24%;
    left: 110%;
}

#tooltip-user-phonenumber {
    top: 39%;
    left: 110%;
}

#tooltip-user-confirmpassword {
    top: 54%;
    left: 110%;
}

.slick-list {
    /*height:35px;*/
}

.additional-container-step4 {
    position: absolute;
    top: 60%;
    left: 114%;
}

.artx-FOURTH-form {
    position: relative;
    width: 800px;
}



.user-carousel .carousel-item img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.user-carousel .carousel-item strong {
    font-size: 16px;
    line-height: 40px;
    max-height: 40px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.img-and-name {
    display: flex;
    gap: 20px;
    align-items: center;
}

.additional-container-step5 {
    position: absolute;
    top: 32%;
    left: 150%;
}

.credit-fifth {
    left: 25%;
    gap: 2px;
}

.user-detail {
    margin-top: 20px;
    /*position: unset;*/

}

.user-information-carousel-bottom-step5 {
    position: absolute;
    bottom: 11px;
    text-align: center;
    width: 95%;
    left: 50%;
    transform: translateX(-50%);
    /*margin-top: 100px;*/
    background: #2B2232;
    border-radius: 20px;
    border: 1px solid rgba(199, 37, 214, 1);
}

#tooltip-group-heading .tooltiptext {
    padding: 12px;
}






/*Nitin Resoponsive*/
@media (max-width: 767px) {
    body {
        overflow-y: scroll;
    }

    .tooltiptext {
        left: 48%;
    }

    .invit-heading {
        justify-content: center;
        align-items: center;
        gap: 5px;
    }

    .ArtX-heading svg {
        margin-top: 9px;
        width: unset;
    }

    .All-points {
        top: 170px;
        right: unset;
        left: 50%;
        transform: translateX(-50%);
    }

    .artx-ffth-form {
        top: 45px;
    }

    .artx-ffth-form svg {
        width: 100%;
    }

    .artx-form-common h4 {
        font-size: 16px;
        padding-bottom: 12px;
    }

    .ArtX-heading p {
        margin-bottom: 10px;
    }

    .form-row {
        position: relative;
    }

    .tooltip {
        position: absolute;
        right: 10px;
        cursor: pointer;
        font-size: 20px;
        color: #007BFF;
        margin-top: unset;
        top: 50%;
        transform: translateY(-50%);
    }

    .user-information-carousel-bottom {
        margin: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .additional-container {
        position: absolute;
        top: 80%;
        left: 0;
        /*right: 80%;*/
    }

    .data-container-new-pos {
        top: 35% !important;
        right: 80% !important;
    }

    .f-form {
        width: 100%;
        /*height: 130vh;*/
    }

    .additional-block-content {
        top: 54px;
        left: 15%;
    }

    .additional-block-content h4 {
        font-size: 22px;
    }

    /*#tooltip-block-heading {*/
    /*    top: -21%;*/
    /*    left: 61%;*/
    /*}*/

    .tooltiptext {
        top: 35%;
        left: -10%;
        height: 76px;
    }

    .tooltiptext h4 {
        font-size: 12px !important;
        line-height: 15.4px;
    }

    #tooltip-block-heading {
        top: 16%;
        left: 25%;
    }

    #tooltip-block-email {
        top: 29%;
        left: 43%;
    }

    #tooltip-block-invitatincode {
        top: 21%;
        left: 40%;
    }


    /*Second Form*/

    .SECOND-form .ArtX-heading svg {
        width: 80%;
        margin: 0;
        height: unset;
    }

    .artx-SECOND-form .artx-form-common {
        max-width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .artx-SECOND-form svg {
        height: unset;
    }

    .artx-SECOND-form {
        top: 145px;
    }

    .SECOND-form .user-information-carousel-bottom {
        position: absolute;
        bottom: -58%;
        width: 100%;
    }

    .SECOND-form .All-points {
        top: 180px;
    }

    .SECOND-form .All-points .credit-points svg {
        width: 100%;
    }

    /*.sd-form {*/
    /*    height: 160vh;*/
    /*}*/

    .SECOND-form .additional-block-content {
        top: 40px;
        left: 65px;
    }

    .artx-SECOND-form svg {
        display: block;
        width: 100%;
    }

    .SECOND-form .additional-container {
        top: 355px;
        left: 50%;
        transform: translateX(-50%);
    }

    .SECOND-form .form-column .tooltip {
        top: 40%;
    }

    .tooltiptext {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 65px;
        width: 110px;
    }

    .artx-SECOND-form>svg {
        width: 120%;
        margin: -30px;
    }

    .artx-form-common.scnd-frm {
        scale: 0.94;
    }

    .artx-SECOND-form .artx-form-common {
        left: 47%;
        top: 46%;
    }

    .artx-SECOND-form .form-column {
        padding: 0 20px;
    }

    .scnd-frm input {
        width: 100% !important;
    }

    .invit-heading {
        margin-bottom: 10px;
    }

    .artx-form-common h4 {
        padding: 0;
        margin: 0;
        font-size: 20px;
    }

    .SECOND-form .additional-block-svg>svg {
        width: 380px;
    }

    #tooltip-user-heading {
        top: -2%;
        left: 35%;
    }

    .artx-user-heading-content {
        left: 49%;
        top: 48%;
    }

    #tooltip-user-firstname {
        top: 9%;
        left: 44%;
    }

    #tooltip-user-lastname {
        top: 10%;
        left: 49%;
    }

    #tooltip-user-username {
        top: 23%;
        left: 44%;
    }

    .username-tooltip-text {
        top: 49%;
    }

    #tooltip-user-password {
        top: 36%;
        left: 44%;
    }

    #tooltip-user-phonenumber {
        top: 23%;
        left: 48%;
    }

    #tooltip-user-confirmpassword {
        left: 49%;
        top: 36%;
    }

    #select-group-container .artx-form-common {
        top: 44% !important;
        left: 47% !important;
    }


    /*Third Form*/
    .THIRD-form .ArtX-heading svg {
        width: 80%;
        margin: 0;
        height: unset;
    }

    .THIRD-form .All-points {
        top: 200px;
    }

    .THIRD-form .All-points .credit-points svg {
        width: 100%;
    }

    .THIRD-form .user-information-carousel-bottom {
        position: absolute;
        bottom: 0;
        width: 100%;
    }

    .artx-THIRD-form .artx-form-common {
        width: 100%;
        scale: 0.9;
    }

    /*.TR-form {*/
    /*    height: 150vh;*/
    /*}*/

    .THIRD-form .additional-block-content {
        top: 50%;
        transform: translate(-50%, -50%);
        left: 50%;
    }

    .artx-THIRD-form {
        top: 165px;
    }

    .artx-THIRD-form>svg {
        display: block;
        width: 140%;
        height: unset;
        margin: -60px;
    }

    .THIRD-form .artx-form-common {
        top: 45%;
        left: 46%;
    }

    .THIRD-form .additional-block-svg>svg {
        display: block;
        width: 100%;
    }

    .THIRD-form .additional-container {
        top: 395px;
        left: 50%;
        transform: translateX(-50%);
    }

    .second-additional-block .additional-block-content {
        position: unset;
    }

    #select-group-container .second-additional-block .additional-block-content {
        position: absolute;
    }

    #code-validation-container .additional-container .additional-block-content {
        position: relative;
        top: 280px;
        left: 38%;
    }

    #code-validation-container .credit-div .credit-content {
        left: 20%;
    }

    .artx-THIRD-form .form-common button[type="submit"] {
        margin: 0;
    }




    /*Fourth Form*/
    .FOURTH-form .ArtX-heading svg {
        width: 80%;
        margin: 0;
        height: unset;
    }

    .FOURTH-form .All-points {
        top: 190px;
    }

    .FOURTH-form .All-points .credit-points svg {
        width: 100%;
    }

    .FOURTH-form .form-common {
        text-align: center;
        margin-top: 120px;
    }

    .FOURTH-form .profile-upload {
        max-width: 100%;
        margin: 0;
    }

    .FOURTH-form .textarea-contnt {
        max-width: 100%;
        margin: 0;
    }

    .file-upload {
        max-width: 100%;
        margin: 0;
        MARGIN-TOP: -95px;
    }

    .FR-form {
        height: 140vh;
    }

    .FOURTH-form .file-upload-wrapper {
        max-width: 100%;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 0;
    }

    .FOURTH-form .cntn-txtblock h6 {
        font-size: 16px;
        margin: 0;
    }

    .heading-tooltip {
        line-height: 0;
    }

    .FOURTH-form .artx-FOURTH-form {
        width: 100%;
    }

    .artx-FOURTH-form .profile-svg1 svg,
    .artx-FOURTH-form .profile-svg2 svg {
        width: 100%;
    }

    .profile-svg2 svg {
        width: 100%;
    }

    .artx-FOURTH-form .browser h3 {
        margin: 0;
        font-size: 16px;
    }

    .artx-FOURTH-form #browserID {
        transform: translateY(30px);
        margin-top: -46px;
    }

    .upload-portfolio-tooltip .heading-tooltip {
        margin-top: -10px;
    }

    .artx-FOURTH-form .textarea-contnt {
        HEIGHT: 100%;
    }

    .cntn-txtblock {
        top: 51%;
        left: 53%;
    }

    .FOURTH-form .heading-tooltip .invitation-code-tool .tooltiptext {
        top: 48%;
        left: 51%;
        width: 100px;
    }

    .artx-FOURTH-form .story-svg svg {
        height: 100%;
        width: 110%;
        margin: -10px;
    }

    .FOURTH-form .user-information-carousel-bottom {
        position: absolute;
        bottom: -370px;
        width: 100%;
    }

    .FOURTH-form .cntn-txtblock {
        padding-bottom: 20px;
    }

    .FOURTH-form .file-upload {
        margin-top: -95px;
    }

    .FOURTH-form .additional-container-step4 {
        position: absolute;
        left: 50%;
        top: 100%;
        transform: translateX(-50%);
    }

    .FOURTH-form .additional-block-content {
        top: -55px;
        left: 50%;
        transform: translateX(-50%);
    }

    .artx-FOURTH-form svg {
        width: 100%;
    }

    .FOURTH-form .heading-tooltip .invitation-code-tool {
        top: -114px !important;
        left: -140px !important;
    }

    /*Fifth Form*/
    .Fifth-final-form .ArtX-heading svg {
        width: 80%;
        margin: 0;
        height: unset;
    }

    .bio-tooltip-contetn .tooltiptext {
        top: 47% !important;
        left: 49% !important;
        width: 109px !important;
    }

    #create-story-form {
        max-width: 600px !important;
        width: unset !important;
        top: 50% !important;
        left: 50% !important;
    }

    .upload-file-tooltip-content .tooltiptext {
        top: 47% !important;
        left: 49% !important;
        width: 100px !important;
    }

    .SECOND-form .user-information-carousel-bottom {
        bottom: 0;
    }

    .sd-form {
        height: 100vh;
    }

    .Fifth-final-form .artx-FIFTH-form {
        margin-top: 45px;
    }
    .credit-fifth{
        left:16%;
    }
    #join-group-heading{
        top: -8px;
    }
}

.Fifth-final-form .All-points {
    top: 190px;
}

.Fifth-final-form .All-points .credit-points svg {
    width: 100%;
}

.Fifth-final-form .artx-FIFTH-form {
    margin-top: 50px;
}

.artx-FIFTH-form svg {
    width: 100%;
}

.Fifth-final-form .heading-tooltip .invitation-code-tool {
    left: 0;
}

.Fifth-final-form .additional-block-content {
    left: 50%;
    transform: translateX(-50%);
}

.FL-form {
    height: 110vh;
}

.user-information-carousel-bottom-step5 {
    position: absolute;
    left: 50%;
    margin: 0;
    bottom: -10%;
    width: 100%;
    transform: translateX(-50%);
}

/*.artx-FIFTH-form .artx-form-common h4 {*/
/*    font-size: 14px;*/
/*}*/

.artx-FIFTH-form .ff-svg svg {
    width: 124%;
    margin: -15px;
}

.Fifth-final-form .heading-tooltip .invitation-code-tool {
    top: -115px;
    left: 0px;
}

.tooltip-svg {
    width: 150px;
}

.tooltip-block {
    pointer-events: none !important;
}


















@media (max-width: 430px) {
    /*.sd-form {*/
    /*    height: 150vh;*/
    /*}*/

    .SECOND-form .user-information-carousel-bottom {
        bottom: 0;
    }

    .All-points {
        top: 160px;
    }

    .SECOND-form .All-points {
        top: 170px;
    }

    .THIRD-form .All-points {
        top: 190px;
    }
}

@media (max-width: 390px) {
    .SECOND-form .form-row input::placeholder {
        max-width: 97px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}



/*Mahesh CSS*/
.first-form-heading-tooltip {
    left: 14%;
}

/*.tooltiptext {*/
/*    background-image: url("https://artxhub.com/wp-content/themes/network-child/images/tooltip-background.svg") !important;*/
/*    background-size: contain;*/
/*    background-repeat: no-repeat;*/
/*}*/
/*.artx-form-common{*/
/*     background-image: url("https://artxhub.com/wp-content/themes/network-child/images/tooltip-background.svg") !important;*/
/*    background-size: cover;*/
/*    background-repeat: no-repeat;*/
/*}*/
.first-frm {
    width: 100%;
    top: 67%;
    left: 66%;
}

.first-frm h4 {
    font-size: 45px;
}

/*.form-row input{*/
/*    width: 100%;*/
/*}*/
.first-frm input {
    width: 100% !important;
}

.data-container-new-pos {
    top: 35%;
    right: -150%;
}

.scnd-frm {
    left: 58%;
}

#personal-details-container .form-column-container .form-row {
    width: 100%;
}

#personal-details-container .form-column-container .form-row input {
    width: 100%;
}

#select-group-container .artx-form-common {
    top: 54%;
    left: 56%;
}

#browserFileLabel {
    margin-top: -10px;
    margin-left: 15px;
}

#create-story-form {
    width: 600px;
    top: 55%;
    left: 60%;
}

.artx-email-tooltip {
    padding: 2px;
    left: 13%;
}

.username-tooltip-text {
    top: 30%;
    left: 12%;
}

#tooltip-group-heading .tooltiptext {
    top: 28%;
}

.profile-group-heading .tooltiptext {
    top: 23%;
}

.Pportfolio-group-heading .tooltiptext {
    top: 32%;
}

.artx-story-heading .tooltiptext {
    top: 29%;
}

@media(max-width:1920px) {
    .tooltiptext {
        left: 25%;
    }
}

.tooltip-svg svg {
    width: 250px;
}

.tooltiptext {
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* Internet Explorer 10+ */
}

.tooltiptext::-webkit-scrollbar {
    display: none;
}

.profile-group-heading .tooltiptext {
    top: 30%;
}

@media (min-width: 768px) and (max-width: 1024px) {

    .Fifth-final-form .additional-block-content {
        left: 50%;
        transform: translateX(-30%);
    }

    .custom-file-upload {
        font-size: 24px;
        padding: 10px 40px;
    }

    .form-common button[type="submit"] {
        font-size: 24px;
        padding: 10px 40px;
    }

    .artx-FIFTH-form .artx-form-common h4 {
        font-size: 30px;
    }

    #create-story-form {
        max-width: 600px;
        /*width: unset;*/
        top: 52%;
        left: 58%;
    }

    .additional-block-content {
        top: 238px;
    }

    .artx-FIFTH-form {
        left: 29px;
    }

    .artx-story-heading .tooltiptext {
        top: 34%;
        left: 2%;
        width: 140px;
    }

    .tooltiptext h4 {
        font-size: 12px !important;
        line-height: 16.4px;
    }

    .artx-FOURTH-form {
        left: -190px;
    }

    .cntn-txtblock {
        width: 333px;
        max-width: 500px;
        top: 52%;
        left: 62%;
    }

    #add_profile_bio_form {
        display: flex;
        flex-direction: column;
    }

    .cntn-txtblock h6 {
        font-size: 22px;
        line-height: 19.9px;
    }

    .additional-container-step4 {
        left: 53%;
    }

    .artx-THIRD-form {
        left: 50%;
        transform: translateX(-55%);
    }

    .TR-form {
        overflow-y: scroll;
        height: 140vh;
    }

    .group-form-additional-content {
        top: 59%;
        left: 34%;
    }

    .artx-SECOND-form {
        left: -97px;
        top: 10px;
    }

    .about-form-additional-content {
        top: 74%;
        left: 50%;
    }

    .sd-form {
        overflow-y: scroll;
        height: 140vh;
    }

    .FR-form {
        height: 140vh;
    }

    .artx-ffth-form {
        left: -15px;
    }

    .data-container-new-pos {
        top: 67%;
        right: 58%;
        left: unset;
    }

    .first-form-credit-content {
        left: -80%;
        top: 245px;
    }

    .first-form-credit-points {
        top: 220px;
        right: 180px;
    }

    #tooltip-block-heading {
        left: 59%;
    }

    .first-form-heading-tooltip {
        left: 28%;
    }

    .first-form-heading-tooltip h4 {
        font-size: 17px !important;
    }

    #tooltip-block-email {
        left: 73%;
    }

    .credit-points,
    .second-form-credit-points {
        left: -177px;
        top: 226px;
    }

    .credit-content,
    .second-form-credit-content {
        left: -81%;
        top: 250px;
    }

    #tooltip-user-lastname {
        top: 26%;
        left: 76%;
    }

    #tooltip-user-phonenumber {
        top: 41%;
        left: 76%;
    }

    #tooltip-user-phonenumber .tooltiptext {
        left: 31%;
    }

    #tooltip-user-phonenumber .tooltiptext h4 {
        font-size: 17px !important;
        line-height: 16.4px;
    }

    #tooltip-user-confirmpassword {
        top: 56%;
        left: 76%;
    }

    #tooltip-user-confirmpassword .tooltiptext h4 {
        font-size: 17px !important;
        line-height: 16.4px;
    }

    #tooltip-user-password .tooltiptext h4 {
        font-size: 17px !important;
        line-height: 16.4px;
    }

    #tooltip-group-heading {
        left: 7px;
    }

    #tooltip-group-heading .tooltiptext h4 {
        font-size: 17px !important;
        line-height: 16.4px;
    }

    .f-form {
        overflow-y: scroll;
        height: 140vh;
    }

    #tooltip-user-username .tooltiptext h4 {
        font-size: 17px !important;
        line-height: 17.4px;
    }

    #tooltip-user-phonenumber .tooltiptext {}

    .third-form-credit-content {
        left: -80%;
        top: 294px;
    }

    .third-form-credit-points {
        left: -177px;
        top: 273px;
    }

    .profile-group-heading .tooltiptext h4 {
        font-size: 17px !important;
        line-height: 17.4px;
    }

    .upload-file-tooltip-content {
        left: -227px;
    }

    .bio-tooltip-contetn .tooltiptext h4 {
        font-size: 17px !important;
        line-height: 17.4px;
    }

    .fifth-credit-point {
        top: 56px;
    }

    .credit-fifth {
        top: 80px;
    }

    .artx-story-heading {
        left: -230px !important;
    }

    .artx-story-heading .tooltiptext {
        top: 34% !important;
        left: 33% !important;
        width: 140px !important;
    }

    .additional-container-step5 {
        top: 90%;
        left: 50%;
    }

    .user-information-carousel-bottom {
        bottom: -38%;
    }

}


.tooltiptext {
    height: 76px;
    overflow-y: scroll;
}


@media (min-width: 1024px) and (max-width: 1920px) {
    /*.common-carousel-block {*/
    /*    bottom: -18%;*/
    /*}*/

    /*.f-form,*/
    /*.sd-form,*/
    /*.TR-form {*/
    /*    height: 120vh;*/
    /*}*/
.sd-form{
    height: 105vh;
}
    /*.user-detail,*/
    /*.user-information-carousel-bottom {*/
    /*    bottom: -18%;*/
    /*}*/

}

.second-additional-block .additional-block-content{
    height: 570px;
}

.forth-form-add-box .additional-block-content{
    height: 440px;
}
.artx-THIRD-form{
    top: -10px;
}
.additional-container-step4 .additional-block-content{
    top: -290px;
}
.user-detail{
    bottom: 8px;
}
/*.upload-image2{*/
/*    margin-top: -17px;*/
/*}*/