* {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

body {
    width: 100%;
    height: 100%;
}
.bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before {
    top: 0;
    border-width: .4rem .4rem 0;
    border-top-color: #5fd7ff !important;
}
.tooltip-inner{
    background-color: #5fd7ff !important;
}
a {
    text-decoration: none !important;
    color: black !important;
}
#topnav .nav-link > i {
    font-size: 26px;
}
@media (max-width: 560px) {
    #topnav .navbar-brand {
        font-size: 14px;
   }
}
.justify-content-evenly{
    justify-content: space-evenly;
}
.bs-example {
    position: relative;
    margin: 15px;
    padding: 15px 15px 25px;
    border: 1px solid #ddd;
    border-radius: 4px 4px 0 0;
}
.bs-example .btn {
    margin: 1.25rem 0.75rem;
}
.bs-example__title {
    margin-bottom: 1rem;
}

@font-face {
    font-family: robotoBold;
    src: url("../fonts/fonts-Roboto-Bold.ttf");
    /* src: url('../fonts/fonts-Roboto-Bold.ttf'); */
}

@font-face {
    font-family: robotoLight;
    src: url("../fonts/fonts-Roboto-Light.ttf");
}

@font-face {
    font-family: robotoMedium;
    src: url("../fonts/fonts-Roboto-Medium.ttf");
}

@font-face {
    font-family: robotoRegular;
    src: url("../fonts/fonts-Roboto-Regular.ttf");
}

@font-face {
    font-family: Alexa;
    src: url("../fonts/fonts-Alexa.ttf");
}

@font-face {
    src: url("../fonts/fonts-Amanda.ttf");
    font-family: Amanda;
}

@font-face {
    src: url("../fonts/fonts-Amsterdam.ttf");
    font-family: Dancer;
}

@font-face {
    src: url("../fonts/fonts-Austin.ttf");
    font-family: Austin;
}

@font-face {
    src: url("../fonts/fonts-Avante.ttf");
    font-family: Avante;
}

@font-face {
    src: url("../fonts/fonts-Barcelona.ttf");
    font-family: Barcelona;
}

@font-face {
    src: url("../fonts/fonts-Bayview.ttf");
    font-family: Bayview;
}

@font-face {
    src: url("../fonts/fonts-Beachfront.ttf");
    font-family: Beachfront;
}

@font-face {
    src: url("../fonts/fonts-Buttercup.ttf");
    font-family: Buttercup;
}

@font-face {
    src: url("../fonts/fonts-Chelsea.ttf");
    font-family: Chelsea;
}

@font-face {
    src: url("../fonts/fonts-ClassicType.ttf");
    font-family: Typewriter;
}

@font-face {
    src: url("../fonts/fonts-Freehand.ttf");
    font-family: Freehand;
}

@font-face {
    src: url("../fonts/fonts-Freespirit.ttf");
    font-family: Freespirit;
}

@font-face {
    src: url("../fonts/fonts-Greenworld.ttf");
    font-family: Greenworld;
}

@font-face {
    src: url("../fonts/fonts-Hamillton.ttf");
    font-family: Hamillton;
}

@font-face {
    src: url("../fonts/fonts-LoveNeon.ttf");
    font-family: LOVENEON;
}

@font-face {
    src: url("../fonts/fonts-LoveNote.ttf");
    font-family: LoveNote;
}

@font-face {
    src: url("../fonts/fonts-Marquee.ttf");
    font-family: Marquee;
}

@font-face {
    src: url("../fonts/fonts-Mayfair.ttf");
    font-family: Mayfair;
}

@font-face {
    src: url("../fonts/fonts-Melbourne.ttf");
    font-family: Melbourne;
}

@font-face {
    src: url("../fonts/fonts-Waikiki.ttf");
    font-family: WAIKIKI;
}

@font-face {
    src: url("../fonts/fonts-NeonGlow.ttf");
    font-family: NeonGlow;
}

@font-face {
    src: url("../fonts/fonts-NeonLite.ttf");
    font-family: NeonLite;
}

@font-face {
    src: url("../fonts/fonts-Neonscript.ttf");
    font-family: Neonscript;
}

@font-face {
    src: url("../fonts/fonts-Neontrace.ttf");
    font-family: NEONTRACE;
}

@font-face {
    src: url("../fonts/fonts-NeoTokyo.ttf");
    font-family: NeoTokyo;
}

@font-face {
    src: url("../fonts/fonts-Nevada.ttf");
    font-family: Nevada;
}

@font-face {
    src: url("../fonts/fonts-NewCursive.ttf");
    font-family: NewCursive;
}

@font-face {
    src: url("../fonts/fonts-Northshore.ttf");
    font-family: Northshore;
}

@font-face {
    src: url("../fonts/fonts-Rocket.ttf");
    font-family: Rocket;
}

@font-face {
    src: url("../fonts/fonts-Royalty.ttf");
    font-family: Royalty;
}

@font-face {
    src: url("../fonts/fonts-SciFi.ttf");
    font-family: SciFi;
}

@font-face {
    src: url("../fonts/fonts-Signature.ttf");
    font-family: Signature;
}

@font-face {
    src: url("../fonts/fonts-Typewriter.ttf");
    font-family: Typewriter;
}

@font-face {
    src: url("../fonts/fonts-Vintage.ttf");
    font-family: Vintage;
}

@font-face {
    src: url("../fonts/fonts-ClassicType.ttf");
    font-family: ClassicType;
}

@font-face {
    src: url("../fonts/fonts-WildScript.ttf");
    font-family: WildScript;
}

@font-face {
    src: url("../fonts/RetroSignature.otf");
    font-family: RetroSignature;
}

@font-face {
    src: url("../fonts/fonts-Monaco.ttf");
    font-family: MONACO;
}
@font-face {
    src: url("../fonts/fonts-Nevada.ttf");
    font-family: Nevada;
}
.Nevada {
    font-family: Nevada !important;
}
.MONACO {
    font-family: MONACO !important;
}

.RetroSignature {
    font-family: RetroSignature !important;
}
.LOVENEON{
    font-family: LOVENEON !important;
}
.WildScript {
    font-family: WildScript !important;
}

.ClassicType {
    font-family: ClassicType !important;
}

.Vintage {
    font-family: Vintage !important;
}

.Typewriter {
    font-family: Typewriter !important;
}

.Signature {
    font-family: Signature !important;
}

.SciFi {
    font-family: SciFi !important;
}
.Buttercup{
    font-family: Buttercup !important;
}

.Royalty {
    font-family: Royalty !important;
}

.Rocket {
    font-family: Rocket !important;
}

.Northshore {
    font-family: Northshore !important;
}

.NewCursive {
    font-family: NewCursive !important;
}

.Nevada {
    font-family: Nevada !important;
}

.NeoTokyo {
    font-family: NeoTokyo !important;
}

.NEONTRACE {
    font-family: NEONTRACE !important;
}

.Neonscript {
    font-family: Neonscript !important;
}

.NeonLite {
    font-family: NeonLite !important;
}

.NeonGlow {
    font-family: NeonGlow !important;
}

.WAIKIKI {
    font-family: WAIKIKI !important;
}

.Roboto {
    font-family: Roboto !important;
}

.Mayfair {
    font-family: Mayfair !important;
}

.Marquee {
    font-family: Marquee !important;
}

.LoveNote {
    font-family: LoveNote !important;
}

.LOVELO {
    font-family: LOVELO !important;
}

.Hamillton {
    font-family: Hamillton !important;
}

.Greenworld {
    font-family: Greenworld !important;
}

.Freespirit {
    font-family: Freespirit !important;
}

.Freehand {
    font-family: Freehand !important;
}

.Typewriter {
    font-family: Typewriter !important;
}

.Chelsea {
    font-family: Chelsea !important;
}

.Melbourne {
    font-family: Melbourne !important;
}

.Beachfront {
    font-family: Beachfront !important;
}

.Bayview {
    font-family: Bayview !important;
}

.Barcelona {
    font-family: Barcelona !important;
}

.Avante {
    font-family: Avante !important;
}

.Austin {
    font-family: Austin !important;
}

.Amsterdam {
    font-family: Dancer !important;
}

.Amanda {
    font-family: Amanda !important;
}

.Alexa {
    font-family: Alexa !important;
}

.robotoBold {
    font-family: robotoBold !important;
}

.robotoLight {
    font-family: robotoLight !important;
}

.robotoMedium {
    font-family: robotoMedium !important;
}

.robotoRegular {
    font-family: robotoRegular !important;
}

.cl-F34EFF {
    color: #F34EFF !important;
}

.f-15 {
    font-size: 15px;
    letter-spacing: 3px;
    color: #3A353A;
}

.f-19-tabs {
    font-size: 19px;
    color: #606060 !important;
}

.f-16-btn {
    font-size: 16px;
    color: #606060 !important;
}

.f-18 {
    font-size: 18px;
    color: #606060 !important;
}

.f-16 {
    font-size: 16px;
    color: #606060 !important;
}


/* .f-17-icon {
    font-size: 17px;
} */

.f-32 {
    font-size: 32px;
}

.f-22 {
    font-size: 14px;
}

.main-padding {
    padding-left: 25px;
    padding-right: 25px;
}

.nav-link-tabs {
    display: block;
    padding: .3rem 1rem !important;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.nav-link-btns {
    display: block !important;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    cursor: pointer;
}
.cp{
    cursor: pointer;
}
.form-control:focus {
    border: 1px solid #ced4da !important;
    box-shadow: none !important;
}

.button-color {
    padding: 3px 12px;
    background-color: #606060;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}

.font-btn {
    /* padding: 8px 10px; */
    font-size: 17px;
    cursor: pointer;
}

.accessary-btn {
    padding: 8px 10px;
    font-size: 16px;
    cursor: pointer;
}
.block-font{
    white-space: normal;
}
.disturb-font {
    font-size: 13px !important;
}


/* .backText1-top {
    top: -8px !important;
}

.backText2-top {
    top: 40px !important;
    left: 368.555px !important;
}

.backText3-top {
    top: 80px !important;
    left: 368.555px !important;
} */

.box-shadow-font {
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.color-selection {
    height: 50px;
    width: 15px;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
    border-radius: 5px;
    transform: rotate(-20deg);
    cursor: pointer;
}

.bordr-white {
    border: 1px solid white;
}

.bg-F34EFF-top,.bg-F34EFF,
.mobile_tab_img_active {
    background-color: #F34EFF !important;
    color: white !important;
}

.cursor-pointer {
    cursor: pointer;
}

.controls-text {
    display: flex;
    justify-content: center;
    position: relative;
    top: -60px;
}


/* / Code Color tube 1 start /  */

.cl-tube-1 {
    background-color: #faeb08 !important;
    transition: 0.5;
}

.cl-tube-1-on {
    background-color: #fff !important;
    box-shadow: 0 0 2px #faeb08, 0 0 10px #faeb08, 0 0 15px #faeb08, 0 0 20px #faeb08, 0 0 35px #faeb08, 0 0 40px #faeb08, 0 0 50px #faeb08, 0 0 75px #faeb08;
}

.cl-tube-1:hover {
    box-shadow: 0 0 2px #faeb08, 0 0 10px #faeb08, 0 0 15px #faeb08, 0 0 20px #faeb08, 0 0 35px #faeb08, 0 0 40px #faeb08, 0 0 50px #faeb08, 0 0 75px #faeb08;
}

.cl-tube-1-text {
    background-color: transparent !important;
    text-shadow: 0 0 2px #faeb08, 0 0 10px #faeb08, 0 0 15px #faeb08, 0 0 20px #faeb08, 0 0 35px #faeb08, 0 0 40px #faeb08, 0 0 50px #faeb08, 0 0 75px #faeb08;
}


/* / Code Color tube 1 end / / Code Color tube 2 start /  */

.cl-tube-2 {
    background-color: rgb(255, 214, 46) !important;
    transition: 0.5;

}

.cl-tube-2-on {
    background-color: #fff !important;
    box-shadow: rgb(255 255 255) 0px 0px 2px, rgb(255 255 255) 0px 0px 4px, rgb(255 214 46) 0px 0px 8px, rgb(255 214 46) 0px 0px 12px, rgb(255 214 46) 0px 0px 16px, rgb(255 214 46) 0px 0px 22px, rgb(255 214 46) 0px 0px 30px;
}

.cl-tube-2:hover {
    box-shadow: rgb(255 255 255) 0px 0px 2px, rgb(255 255 255) 0px 0px 4px, rgb(255 214 46) 0px 0px 8px, rgb(255 214 46) 0px 0px 12px, rgb(255 214 46) 0px 0px 16px, rgb(255 214 46) 0px 0px 22px, rgb(255 214 46) 0px 0px 30px;
}

.cl-tube-2-text {
    background-color: transparent !important;
    text-shadow: rgb(255 255 255) 0px 0px 2px, rgb(255 255 255) 0px 0px 4px, rgb(255 214 46) 0px 0px 8px, rgb(255 214 46) 0px 0px 12px, rgb(255 214 46) 0px 0px 16px, rgb(255 214 46) 0px 0px 22px, rgb(255 214 46) 0px 0px 30px;
}


/* / Code Color tube 2 end / / Code Color tube 3 start /  */

.cl-tube-3 {
    background-color: #ffa101 !important;
    transition: 0.5;

}

.cl-tube-3-on {
    background-color: #fff !important;
    box-shadow: 0 0 2px #ffa101, 0 0 10px #ffa101, 0 0 15px #ffa101, 0 0 20px #ffa101, 0 0 35px #ffa101, 0 0 40px #ffa101, 0 0 50px #ffa101, 0 0 75px #ffa101;
}

.cl-tube-3:hover {
    box-shadow: 0 0 2px #ffa101, 0 0 10px #ffa101, 0 0 15px #ffa101, 0 0 20px #ffa101, 0 0 35px #ffa101, 0 0 40px #ffa101, 0 0 50px #ffa101, 0 0 75px #ffa101;
}

.cl-tube-3-text {
    background-color: transparent !important;
    text-shadow: 0 0 2px #ffa101, 0 0 10px #ffa101, 0 0 15px #ffa101, 0 0 20px #ffa101, 0 0 35px #ffa101, 0 0 40px #ffa101, 0 0 50px #ffa101, 0 0 75px #ffa101;
}


/* / Code Color tube 3 end / / Code Color tube 4 start /  */

.cl-tube-4 {
    background-color: #0002f3 !important;
    transition: 0.5;
    
}

.cl-tube-4-on {
    background-color: #fff !important;
    box-shadow: 0 0 2px #0002f3, 0 0 10px #0002f3, 0 0 15px #0002f3, 0 0 20px #0002f3, 0 0 35px #0002f3, 0 0 40px #0002f3, 0 0 50px #0002f3, 0 0 75px #0002f3;
}

.cl-tube-4:hover {
    box-shadow: 0 0 2px #0002f3, 0 0 10px #0002f3, 0 0 15px #0002f3, 0 0 20px #0002f3, 0 0 35px #0002f3, 0 0 40px #0002f3, 0 0 50px #0002f3, 0 0 75px #0002f3;
}

.cl-tube-4-text {
    background-color: transparent !important;
    text-shadow: 0 0 2px #0002f3, 0 0 10px #0002f3, 0 0 15px #0002f3, 0 0 20px #0002f3, 0 0 35px #0002f3, 0 0 40px #0002f3, 0 0 50px #0002f3, 0 0 75px #0002f3;
}


/* / Code Color tube 4 end / / Code Color tube 5 start /  */

.cl-tube-5 {
    transition: 0.5;
    background-color: #01b7ff !important;
}

.cl-tube-5-on {
    background-color: #fff !important;
    box-shadow: 0 0 2px #01b7ff, 0 0 10px #01b7ff, 0 0 15px #01b7ff, 0 0 20px #01b7ff, 0 0 35px #01b7ff, 0 0 40px #01b7ff, 0 0 50px #01b7ff, 0 0 75px #01b7ff;
}

.cl-tube-5:hover {
    box-shadow: 0 0 2px #01b7ff, 0 0 10px #01b7ff, 0 0 15px #01b7ff, 0 0 20px #01b7ff, 0 0 35px #01b7ff, 0 0 40px #01b7ff, 0 0 50px #01b7ff, 0 0 75px #01b7ff;
}

.cl-tube-5-text {
    background-color: transparent !important;
    text-shadow: 0 0 2px #01b7ff, 0 0 10px #01b7ff, 0 0 15px #01b7ff, 0 0 20px #01b7ff, 0 0 35px #01b7ff, 0 0 40px #01b7ff, 0 0 50px #01b7ff, 0 0 75px #01b7ff;
}


/* / Code Color tube 5 end / / Code Color tube 6 start /  */

.cl-tube-6 {
    transition: 0.5;
    background-color: #02e0e3 !important;
}

.cl-tube-6-on {
    background-color: #fff !important;
    box-shadow: 0 0 2px #02e0e3, 0 0 10px #02e0e3, 0 0 15px #02e0e3, 0 0 20px #02e0e3, 0 0 35px #02e0e3, 0 0 40px #02e0e3, 0 0 50px #02e0e3, 0 0 75px #02e0e3;
}

.cl-tube-6:hover {
    box-shadow: 0 0 2px #02e0e3, 0 0 10px #02e0e3, 0 0 15px #02e0e3, 0 0 20px #02e0e3, 0 0 35px #02e0e3, 0 0 40px #02e0e3, 0 0 50px #02e0e3, 0 0 75px #02e0e3;
}

.cl-tube-6-text {
    background-color: transparent !important;
    text-shadow: 0 0 2px #02e0e3, 0 0 10px #02e0e3, 0 0 15px #02e0e3, 0 0 20px #02e0e3, 0 0 35px #02e0e3, 0 0 40px #02e0e3, 0 0 50px #02e0e3, 0 0 75px #02e0e3;
}


/* / Code Color tube 6 end / / Code Color tube 7 start /  */

.cl-tube-7 {
    transition: 0.5;
    background-color: #08e94f !important;
}

.cl-tube-7-on {
    background-color: #fff !important;
    box-shadow: 0 0 2px #08e94f, 0 0 10px #08e94f, 0 0 15px #08e94f, 0 0 20px #08e94f, 0 0 35px #08e94f, 0 0 40px #08e94f, 0 0 50px #08e94f, 0 0 75px #08e94f;
}

.cl-tube-7:hover {
    box-shadow: 0 0 2px #08e94f, 0 0 10px #08e94f, 0 0 15px #08e94f, 0 0 20px #08e94f, 0 0 35px #08e94f, 0 0 40px #08e94f, 0 0 50px #08e94f, 0 0 75px #08e94f;
}

.cl-tube-7-text {
    background-color: transparent !important;
    text-shadow: 0 0 2px #08e94f, 0 0 10px #08e94f, 0 0 15px #08e94f, 0 0 20px #08e94f, 0 0 35px #08e94f, 0 0 40px #08e94f, 0 0 50px #08e94f, 0 0 75px #08e94f;
}


/* / Code Color tube 7 end / / Code Color tube 8 start /  */

.cl-tube-8 {
    background-color: rgb(255, 144, 255) !important;
    transition: 0.5;
}

.cl-tube-8-on {
    background-color: #fff !important;
    box-shadow: rgb(255 255 255) 0px 0px 2px, rgb(255 255 255) 0px 0px 4px, rgb(255 144 255) 0px 0px 8px, rgb(255 144 255) 0px 0px 12px, rgb(255 144 255) 0px 0px 16px, rgb(255 144 255) 0px 0px 22px, rgb(255 144 255) 0px 0px 30px;
}

.cl-tube-8:hover {
    box-shadow: rgb(255 255 255) 0px 0px 2px, rgb(255 255 255) 0px 0px 4px, rgb(255 144 255) 0px 0px 8px, rgb(255 144 255) 0px 0px 12px, rgb(255 144 255) 0px 0px 16px, rgb(255 144 255) 0px 0px 22px, rgb(255 144 255) 0px 0px 30px;
}

.cl-tube-8-text {
    background-color: transparent !important;
    text-shadow: rgb(255 255 255) 0px 0px 2px, rgb(255 255 255) 0px 0px 4px, rgb(255 144 255) 0px 0px 8px, rgb(255 144 255) 0px 0px 12px, rgb(255 144 255) 0px 0px 16px, rgb(255 144 255) 0px 0px 22px, rgb(255 144 255) 0px 0px 30px;
}


/* / Code Color tube 8 end / / Code Color tube 9 start /  */

.cl-tube-9 {
    background-color: #fd0192 !important;
    transition: 0.5;
}

.cl-tube-9-on {
    background-color: #fff !important;
    box-shadow: 0 0 2px #fd0192, 0 0 10px #fd0192, 0 0 15px #fd0192, 0 0 20px #fd0192, 0 0 35px #fd0192, 0 0 40px #fd0192, 0 0 50px #fd0192, 0 0 75px #fd0192;
}

.cl-tube-9:hover {
    box-shadow: 0 0 2px #fd0192, 0 0 10px #fd0192, 0 0 15px #fd0192, 0 0 20px #fd0192, 0 0 35px #fd0192, 0 0 40px #fd0192, 0 0 50px #fd0192, 0 0 75px #fd0192;
}

.cl-tube-9-text {
    background-color: transparent !important;
    text-shadow: 0 0 2px #fd0192, 0 0 10px #fd0192, 0 0 15px #fd0192, 0 0 20px #fd0192, 0 0 35px #fd0192, 0 0 40px #fd0192, 0 0 50px #fd0192, 0 0 75px #fd0192;
}


/* / Code Color tube 9 end / / Code Color tube 10 start /  */

.cl-tube-10 {
    background-color: #f4051c !important;
    transition: 0.5;
}

.cl-tube-10-on {
    background-color: #fff !important;
    box-shadow: 0 0 2px #f4051c, 0 0 10px #f4051c, 0 0 15px #f4051c, 0 0 20px #f4051c, 0 0 35px #f4051c, 0 0 40px #f4051c, 0 0 50px #f4051c, 0 0 75px #f4051c;
}

.cl-tube-10:hover {
    box-shadow: 0 0 2px #f4051c, 0 0 10px #f4051c, 0 0 15px #f4051c, 0 0 20px #f4051c, 0 0 35px #f4051c, 0 0 40px #f4051c, 0 0 50px #f4051c, 0 0 75px #f4051c;
}

.cl-tube-10-text {
    background-color: transparent !important;
    text-shadow: 0 0 2px #f4051c, 0 0 10px #f4051c, 0 0 15px #f4051c, 0 0 20px #f4051c, 0 0 35px #f4051c, 0 0 40px #f4051c, 0 0 50px #f4051c, 0 0 75px #f4051c;
}


/* / Code Color tube 10 end / / Code Color tube 11 start /  */

.cl-tube-11 {
    background-color: #a301e0 !important;
    transition: 0.5;
}

.cl-tube-11-on {
    background-color: #fff !important;
    box-shadow: 0 0 2px #a301e0, 0 0 10px #a301e0, 0 0 15px #a301e0, 0 0 20px #a301e0, 0 0 35px #a301e0, 0 0 40px #a301e0, 0 0 50px #a301e0, 0 0 75px #a301e0;
}

.cl-tube-11:hover {
    box-shadow: 0 0 2px #a301e0, 0 0 10px #a301e0, 0 0 15px #a301e0, 0 0 20px #a301e0, 0 0 35px #a301e0, 0 0 40px #a301e0, 0 0 50px #a301e0, 0 0 75px #a301e0;
}

.cl-tube-11-text {
    background-color: transparent !important;
    text-shadow: 0 0 2px #a301e0, 0 0 10px #a301e0, 0 0 15px #a301e0, 0 0 20px #a301e0, 0 0 35px #a301e0, 0 0 40px #a301e0, 0 0 50px #a301e0, 0 0 75px #a301e0;
}


/* / Code Color tube 10 end / / Code Color tube 11 start /  */

.cl-tube-12 {
    background-color: #fff2b9 !important;
    transition: 0.5;
}

.cl-tube-12-on {
    background-color: #fff !important;
    box-shadow:rgb(255 255 255) 0px 0px 5px, rgb(255 255 255) 0px 0px 10px, rgb(255 253 207) 0px 0px 20px, rgb(255 253 207) 0px 0px 30px, rgb(255 253 207) 0px 0px 40px, rgb(255 253 207) 0px 0px 55px, rgb(255 253 207) 0px 0px 75px;
}

.cl-tube-12:hover {
    box-shadow:rgb(255 255 255) 0px 0px 5px, rgb(255 255 255) 0px 0px 10px, rgb(255 253 207) 0px 0px 20px, rgb(255 253 207) 0px 0px 30px, rgb(255 253 207) 0px 0px 40px, rgb(255 253 207) 0px 0px 55px, rgb(255 253 207) 0px 0px 75px;
}

.cl-tube-12-text {
    background-color: transparent !important;
    text-shadow: rgb(255 255 255) 0px 0px 5px, rgb(255 255 255) 0px 0px 10px, rgb(255 253 207) 0px 0px 20px, rgb(255 253 207) 0px 0px 30px, rgb(255 253 207) 0px 0px 40px, rgb(255 253 207) 0px 0px 55px, rgb(255 253 207) 0px 0px 75px;
}


/* / Code Color tube 10 end / / Code Color tube 11 start /  */

.cl-tube-13 {
    background-color: #fffef5 !important;
    transition: 0.5;
}

.cl-tube-13-on {
    background-color: #fff !important;
    box-shadow: rgb(255 255 255) 0px 0px 5px, rgb(255 255 255) 0px 0px 10px, rgb(225 227 230) 0px 0px 20px, rgb(225 227 230) 0px 0px 30px, rgb(225 227 230) 0px 0px 40px, rgb(225 227 230) 0px 0px 55px, rgb(225 227 230) 0px 0px 75px;
}

.cl-tube-13:hover {
    box-shadow: rgb(255 255 255) 0px 0px 5px, rgb(255 255 255) 0px 0px 10px, rgb(225 227 230) 0px 0px 20px, rgb(225 227 230) 0px 0px 30px, rgb(225 227 230) 0px 0px 40px, rgb(225 227 230) 0px 0px 55px, rgb(225 227 230) 0px 0px 75px;
}

.cl-tube-13-text {
    background-color: transparent !important;
    text-shadow: rgb(255 255 255) 0px 0px 5px, rgb(255 255 255) 0px 0px 10px, rgb(225 227 230) 0px 0px 20px, rgb(225 227 230) 0px 0px 30px, rgb(225 227 230) 0px 0px 40px, rgb(225 227 230) 0px 0px 55px, rgb(225 227 230) 0px 0px 75px;
}


/* / Code Color tube 11 end / / Code White tube 1 start /  */
.cl-tube-14 {
    background-color: rgb(128, 255, 217);
    transition: 0.5s;
}

.cl-tube-14-on {
    transition: 0.5s;
    color: white;
box-shadow: rgb(255 255 255) 0px 0px 2px, rgb(255 255 255) 0px 0px 4px, rgb(128 255 217) 0px 0px 8px, rgb(128 255 217) 0px 0px 12px, rgb(128 255 217) 0px 0px 16px, rgb(128 255 217) 0px 0px 22px, rgb(128 255 217) 0px 0px 30px;
}

.cl-tube-14:hover {
    transition: 0.5s;
box-shadow: rgb(255 255 255) 0px 0px 5px, rgb(255 255 255) 0px 0px 10px, rgb(128 255 217) 0px 0px 20px, rgb(128 255 217) 0px 0px 30px, rgb(128 255 217) 0px 0px 40px, rgb(128 255 217) 0px 0px 55px, rgb(128 255 217) 0px 0px 75px;

}

.cl-tube-14-text {
    color: #fff!important;
text-shadow: rgb(255 255 255) 0px 0px 5px, rgb(255 255 255) 0px 0px 10px, rgb(128 255 217) 0px 0px 20px, rgb(128 255 217) 0px 0px 30px, rgb(128 255 217) 0px 0px 40px, rgb(128 255 217) 0px 0px 55px, rgb(128 255 217) 0px 0px 75px;
}



.wh-tube-1-on {
    background-color: #fff !important;
    box-shadow: 0 0 1px #000, 0 0 10px #fffef5, 0 0 15px #fffef5, 0 0 20px #fffef5, 0 0 35px #fffef5, 0 0 40px #fffef5, 0 0 50px #fffef5, 0 0 75px #fffef5;
}

.wh-tube-1:hover {
    box-shadow: 0 0 1px #000, 0 0 10px #fffef5, 0 0 15px #fffef5, 0 0 20px #fffef5, 0 0 35px #fffef5, 0 0 40px #fffef5, 0 0 50px #fffef5, 0 0 75px #fffef5;
}

.wh-tube-1-text {
    background-color: transparent !important;
    text-shadow: 0 0 1px #000, 0 0 10px #fffef5, 0 0 15px #fffef5, 0 0 20px #fffef5, 0 0 35px #fffef5, 0 0 40px #fffef5, 0 0 50px #fffef5, 0 0 75px #fffef5;
}


/* / Code White tube 1 end / / Code White tube 2 start /  */

.wh-tube-2-on {
    background-color: #fff !important;
    box-shadow: 0 0 2px #666, 0 0 10px #fff2b9, 0 0 15px #fff2b9, 0 0 20px #fff2b9, 0 0 35px #fff2b9, 0 0 40px #fff2b9, 0 0 50px #fff2b9, 0 0 75px #fff2b9;
}

.wh-tube-2:hover {
    box-shadow: 0 0 2px #666, 0 0 10px #fff2b9, 0 0 15px #fff2b9, 0 0 20px #fff2b9, 0 0 35px #fff2b9, 0 0 40px #fff2b9, 0 0 50px #fff2b9, 0 0 75px #fff2b9;
}

.wh-tube-2-text {
    background-color: transparent !important;
    text-shadow: 0 0 2px #666, 0 0 10px #fff2b9, 0 0 15px #fff2b9, 0 0 20px #fff2b9, 0 0 35px #fff2b9, 0 0 40px #fff2b9, 0 0 50px #fff2b9, 0 0 75px #fff2b9;
}


/* / Code White tube 2 end / / Code White tube 3 start /  */

.wh-tube-3-on {
    background-color: #fff !important;
    box-shadow: 0 0 2px #fbe303, 0 0 10px #fbe303, 0 0 15px #fbe303, 0 0 20px #fbe303, 0 0 35px #fbe303, 0 0 40px #fbe303, 0 0 50px #fbe303, 0 0 75px #fbe303;
}

.wh-tube-3:hover {
    box-shadow: 0 0 2px #fbe303, 0 0 10px #fbe303, 0 0 15px #fbe303, 0 0 20px #fbe303, 0 0 35px #fbe303, 0 0 40px #fbe303, 0 0 50px #fbe303, 0 0 75px #fbe303;
}

.wh-tube-3-text {
    background-color: transparent !important;
    text-shadow: 0 0 2px #fbe303, 0 0 10px #fbe303, 0 0 15px #fbe303, 0 0 20px #fbe303, 0 0 35px #fbe303, 0 0 40px #fbe303, 0 0 50px #fbe303, 0 0 75px #fbe303;
}


/* / Code White tube 3 end / / Code White tube 4 start /  */

.wh-tube-4-on {
    background-color: #fff !important;
    box-shadow: 0 0 2px #ffa101, 0 0 10px #ffa101, 0 0 15px #ffa101, 0 0 20px #ffa101, 0 0 35px #ffa101, 0 0 40px #ffa101, 0 0 50px #ffa101, 0 0 75px #ffa101;
}

.wh-tube-4:hover {
    box-shadow: 0 0 2px #ffa101, 0 0 10px #ffa101, 0 0 15px #ffa101, 0 0 20px #ffa101, 0 0 35px #ffa101, 0 0 40px #ffa101, 0 0 50px #ffa101, 0 0 75px #ffa101;
}

.wh-tube-4-text {
    background-color: transparent !important;
    text-shadow: 0 0 2px #ffa101, 0 0 10px #ffa101, 0 0 15px #ffa101, 0 0 20px #ffa101, 0 0 35px #ffa101, 0 0 40px #ffa101, 0 0 50px #ffa101, 0 0 75px #ffa101;
}


/* / Code White tube 4 end / / Code White tube 5 start /  */

.wh-tube-5-on {
    background-color: #fff !important;
    box-shadow: 0 0 2px #296df6, 0 0 10px #296df6, 0 0 15px #296df6, 0 0 20px #296df6, 0 0 35px #296df6, 0 0 40px #296df6, 0 0 50px #296df6, 0 0 75px #296df6;
}

.wh-tube-5:hover {
    box-shadow: 0 0 2px #296df6, 0 0 10px #296df6, 0 0 15px #296df6, 0 0 20px #296df6, 0 0 35px #296df6, 0 0 40px #296df6, 0 0 50px #296df6, 0 0 75px #296df6;
}

.wh-tube-5-text {
    background-color: transparent !important;
    text-shadow: 0 0 2px #296df6, 0 0 10px #296df6, 0 0 15px #296df6, 0 0 20px #296df6, 0 0 35px #296df6, 0 0 40px #296df6, 0 0 50px #296df6, 0 0 75px #296df6;
}


/* / Code White tube 5 end / / Code White tube 6 start /  */

.wh-tube-6-on {
    background-color: #fff !important;
    box-shadow: 0 0 2px #22fbf2, 0 0 10px #22fbf2, 0 0 15px #22fbf2, 0 0 20px #22fbf2, 0 0 35px #22fbf2, 0 0 40px #22fbf2, 0 0 50px #22fbf2, 0 0 75px #22fbf2;
}

.wh-tube-6:hover {
    box-shadow: 0 0 2px #22fbf2, 0 0 10px #22fbf2, 0 0 15px #22fbf2, 0 0 20px #22fbf2, 0 0 35px #22fbf2, 0 0 40px #22fbf2, 0 0 50px #22fbf2, 0 0 75px #22fbf2;
}

.wh-tube-6-text {
    background-color: transparent !important;
    text-shadow: 0 0 2px #22fbf2, 0 0 10px #22fbf2, 0 0 15px #22fbf2, 0 0 20px #22fbf2, 0 0 35px #22fbf2, 0 0 40px #22fbf2, 0 0 50px #22fbf2, 0 0 75px #22fbf2;
}


/* / Code White tube 6 end / / Code White tube 7 start /  */

.wh-tube-7-on {
    background-color: #fff !important;
    box-shadow: 0 0 2px #01e470, 0 0 10px #01e470, 0 0 15px #01e470, 0 0 20px #01e470, 0 0 35px #01e470, 0 0 40px #01e470, 0 0 50px #01e470, 0 0 75px #01e470;
}

.wh-tube-7:hover {
    box-shadow: 0 0 2px #01e470, 0 0 10px #01e470, 0 0 15px #01e470, 0 0 20px #01e470, 0 0 35px #01e470, 0 0 40px #01e470, 0 0 50px #01e470, 0 0 75px #01e470;
}

.wh-tube-7-text {
    background-color: transparent !important;
    text-shadow: 0 0 2px #01e470, 0 0 10px #01e470, 0 0 15px #01e470, 0 0 20px #01e470, 0 0 35px #01e470, 0 0 40px #01e470, 0 0 50px #01e470, 0 0 75px #01e470;
}


/* / Code White tube 7 end / / Code White tube 8 start /  */

.wh-tube-8-on {
    background-color: #fff !important;
    box-shadow: 0 0 2px #e79b9d, 0 0 10px #e79b9d, 0 0 15px #e79b9d, 0 0 20px #e79b9d, 0 0 35px #e79b9d, 0 0 40px #e79b9d, 0 0 50px #e79b9d, 0 0 75px #e79b9d;
}

.wh-tube-8:hover {
    box-shadow: 0 0 2px #e79b9d, 0 0 10px #e79b9d, 0 0 15px #e79b9d, 0 0 20px #e79b9d, 0 0 35px #e79b9d, 0 0 40px #e79b9d, 0 0 50px #e79b9d, 0 0 75px #e79b9d;
}

.wh-tube-8-text {
    background-color: transparent !important;
    text-shadow: 0 0 2px #e79b9d, 0 0 10px #e79b9d, 0 0 15px #e79b9d, 0 0 20px #e79b9d, 0 0 35px #e79b9d, 0 0 40px #e79b9d, 0 0 50px #e79b9d, 0 0 75px #e79b9d;
}


/* / Code White tube 8 end / / Code White tube 9 start /  */

.wh-tube-9-on {
    background-color: #fff !important;
    box-shadow: 0 0 2px #f621dd, 0 0 10px #f621dd, 0 0 15px #f621dd, 0 0 20px #f621dd, 0 0 35px #f621dd, 0 0 40px #f621dd, 0 0 50px #f621dd, 0 0 75px #f621dd;
}

.wh-tube-9:hover {
    box-shadow: 0 0 2px #f621dd, 0 0 10px #f621dd, 0 0 15px #f621dd, 0 0 20px #f621dd, 0 0 35px #f621dd, 0 0 40px #f621dd, 0 0 50px #f621dd, 0 0 75px #f621dd;
}

.wh-tube-9-text {
    background-color: transparent !important;
    text-shadow: 0 0 2px #f621dd, 0 0 10px #f621dd, 0 0 15px #f621dd, 0 0 20px #f621dd, 0 0 35px #f621dd, 0 0 40px #f621dd, 0 0 50px #f621dd, 0 0 75px #f621dd;
}


/* / Code White tube 9 end / / Code White tube 10 start /  */

.wh-tube-10-on {
    background-color: #fff !important;
    box-shadow: 0 0 2px #f91e6e, 0 0 10px #f91e6e, 0 0 15px #f91e6e, 0 0 20px #f91e6e, 0 0 35px #f91e6e, 0 0 40px #f91e6e, 0 0 50px #f91e6e, 0 0 75px #f91e6e;
}

.wh-tube-10:hover {
    box-shadow: 0 0 2px #f91e6e, 0 0 10px #f91e6e, 0 0 15px #f91e6e, 0 0 20px #f91e6e, 0 0 35px #f91e6e, 0 0 40px #f91e6e, 0 0 50px #f91e6e, 0 0 75px #f91e6e;
}

.wh-tube-10-text {
    background-color: transparent !important;
    text-shadow: 0 0 2px #f91e6e, 0 0 10px #f91e6e, 0 0 15px #f91e6e, 0 0 20px #f91e6e, 0 0 35px #f91e6e, 0 0 40px #f91e6e, 0 0 50px #f91e6e, 0 0 75px #f91e6e;
}


/* / Code White tube 10 end / / Code White tube 11 start /  */

.wh-tube-11-on {
    background-color: #fff !important;
    box-shadow: 0 0 2px #b65cfc, 0 0 10px #b65cfc, 0 0 15px #b65cfc, 0 0 20px #b65cfc, 0 0 35px #b65cfc, 0 0 40px #b65cfc, 0 0 50px #b65cfc, 0 0 75px #b65cfc;
}

.wh-tube-11:hover {
    box-shadow: 0 0 2px #b65cfc, 0 0 10px #b65cfc, 0 0 15px #b65cfc, 0 0 20px #b65cfc, 0 0 35px #b65cfc, 0 0 40px #b65cfc, 0 0 50px #b65cfc, 0 0 75px #b65cfc;
}

.wh-tube-11-text {
    background-color: transparent !important;
    text-shadow: 0 0 2px #b65cfc, 0 0 10px #b65cfc, 0 0 15px #b65cfc, 0 0 20px #b65cfc, 0 0 35px #b65cfc, 0 0 40px #b65cfc, 0 0 50px #b65cfc, 0 0 75px #b65cfc;
}


/* / Code White tube 11 end / */

.backing-clear {
    color: #fff !important;
    text-shadow: rgb(238 238 238) 0px 0px 12px, rgb(238 238 238) 0px 0px 12px, rgb(238 238 238) 0px 0px 12px, rgb(238 238 238) 0px 0px 12px, rgb(238 238 238) 0px 0px 12px, rgb(238 238 238) 0px 0px 12px, rgb(238 238 238) 0px 0px 12px, rgb(238 238 238) 0px 0px 12px, rgb(238 238 238) 0px 0px 12px, rgb(238 238 238) 0px 0px 12px, rgb(238 238 238) 0px 0px 12px, rgb(238 238 238) 0px 0px 12px, rgb(238 238 238) 0px 0px 12px, rgb(238 238 238) 0px 0px 12px, rgb(238 238 238) 0px 0px 12px, rgb(238 238 238) 0px 0px 12px, rgb(238 238 238) 0px 0px 12px;
}

.backing-white {
    color: #fff !important;
    text-shadow: rgb(255 255 255) 0px 0px 12px, rgb(255 255 255) 0px 0px 12px, rgb(255 255 255) 0px 0px 12px, rgb(255 255 255) 0px 0px 12px, rgb(255 255 255) 0px 0px 12px, rgb(255 255 255) 0px 0px 12px, rgb(255 255 255) 0px 0px 12px, rgb(255 255 255) 0px 0px 12px, rgb(255 255 255) 0px 0px 12px, rgb(255 255 255) 0px 0px 12px, rgb(255 255 255) 0px 0px 12px, rgb(255 255 255) 0px 0px 12px, rgb(255 255 255) 0px 0px 12px, rgb(255 255 255) 0px 0px 12px, rgb(255 255 255) 0px 0px 12px, rgb(255 255 255) 0px 0px 12px, rgb(255 255 255) 0px 0px 12px;
}

.backing-black {
    color: #fff !important;
    text-shadow: rgb(0 0 0) 0px 0px 12px, rgb(0 0 0) 0px 0px 12px, rgb(0 0 0) 0px 0px 12px, rgb(0 0 0) 0px 0px 12px, rgb(0 0 0) 0px 0px 12px, rgb(0 0 0) 0px 0px 12px, rgb(0 0 0) 0px 0px 12px, rgb(0 0 0) 0px 0px 12px, rgb(0 0 0) 0px 0px 12px, rgb(0 0 0) 0px 0px 12px, rgb(0 0 0) 0px 0px 12px, rgb(0 0 0) 0px 0px 12px, rgb(0 0 0) 0px 0px 12px, rgb(0 0 0) 0px 0px 12px, rgb(0 0 0) 0px 0px 12px, rgb(0 0 0) 0px 0px 12px, rgb(0 0 0) 0px 0px 12px;
}

 .shape-rectangle {
    /* position: absolute; */
    /* width: 141.844px;
    height: 80px;
    left: 492.453px;
    top: 64px; */
    /* border: 1px solid rgb(238, 238, 238); */
    /* border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.15); */
} 
#backingShapes{
    z-index: +1111111111111111 !important;
}
.closetext{
    font-size: 32px !important;
}
.backingShapedPopup{
    width: 25px;
    height: 25px;
    border-radius: 116%;
    color: #fff;
    background: #f34eff;

}
.shape-invisible {
    position: absolute;
    width: 141.844px;
    height: 80px;
    left: 492.453px;
    top: 64px;
    /* border: 1px solid rgb(238, 238, 238); */
    /* border-radius: 5px; */
}