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

@import url("https://fonts.googleapis.com/css?family=Lato:400,400i|Montserrat:400,400i&subset=latin-ext");

@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');
.join-room-message {display: flex;align-items: center;border-radius: 12px;padding: 12px 8px;height: 60px;box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);font-size: 8px;color: #fff;margin: 10px 0;width: 531px;max-width: 301px;}
.join-room-avatar {background-size: cover;border-radius: 50%;width: 36px;height: 36px;margin-right: 16px;cursor: pointer;transition: transform 0.3s ease;}
.join-room-text {font-size: 11px;font-weight: 600;color: #4caf50;flex: 1;}
.join-room-username { font-weight: bold; }
.join-room-action { font-weight: 700; }
.join-room-rank { font-weight: 600; }
.join-room-icon { font-size: 22px; margin-left: 12px; }
.popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 600px;
    padding: 20px;
    background: #ffffff;
    color: #222;
    z-index: 1000;
    border-radius: 12px;
    text-align: center;
}

.popup h2 {
    font-size: 22px;
    margin-bottom: 10px;
}

.popup p {
    font-size: 16px;
    margin-bottom: 10px;
}

.popup ul {
    text-align: left;
    padding-left: 20px;
}
.topic_log{background:transparent;color:#fff;margin: 5px auto;width: 98%;max-width: 600px;}
.tptitle{font-weight:700}
.tptext{font-weight:300}
.topic_log>.my_text{background:#adffad6b;border-radius:5px;padding:10px 12px}
.topic_log>.my_text::after{content:'';position:absolute;right:100%;top:20px;border-right:16px solid #9bff1e80;border-bottom:16px solid transparent}
.topic_log>.topic_icon{width:65px}

.popup li {
    font-size: 14px;
    margin: 5px 0;
}

.popup a {
    color: #0088cc;
    text-decoration: none;
}

.popup-buttons {
    margin-top: 15px;
}

.popup-buttons .accept {
    background: #0088cc;
    color: #fff;
    padding: 10px 15px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.popup-buttons .decline {
    background: #e74c3c;
    color: #fff;
    padding: 10px 15px;
    border-radius: 8px;
    text-decoration: none;
    margin-left: 10px;
}

.popup-bg {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

.name-change-log, .kick-log, .ban-log, .mute-log, .block-log { border-radius: 8px; padding: 5px; margin: 5px 0; display: inline-flex; align-items: center; }
.name-change-log { background-color: #e6ffe6; border: 1px solid #00b300; color: #005700; }
.kick-log { background-color: #fff3e6; border: 1px solid #ff9900; color: #cc7a00; }
.ban-log { background-color: #ffe6e6; border: 1px solid #d50000; color: #b30000; }
.mute-log { background-color: #fff9e6; border: 1px solid #d6c300; color: #b3a700; }
.block-log { background-color: #e6ffe6; border: 1px solid #00b300; color: #005700; }
.name-change-log i, .kick-log i, .ban-log i, .mute-log i, .block-log i { margin-right: 5px; }
.clear-room-message { background: #1e1e1e; color: #e1e1e1; padding: 8px 12px; border-radius: 10px; border: 2px solid #00d4ff; font-family: monospace; font-size: 1.1em; text-align: center; box-shadow: 0 4px 8px rgba(0, 212, 255, 0.2); max-width: 80%; margin: 10px auto; }
.anonymous_tag {
background: linear-gradient(45deg, #C19A00, #B8860B);
    color: #fff;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}
@media (max-width: 768px) { .join-room-message { width: 100% !important; padding: 10px 12px; font-size: 12px; } .join-room-message div[onclick^="getProfile"] { width: 40px !important; height: 40px !important; } .join-room-message .content span { font-size: 12px !important; } .join-room-message i { font-size: 18px !important; margin-left: 8px; } }

html {
    margin: 0em;
    padding: 0;
    height: 100%;
    width: 100%;
}
body {
    font-family: 'Lato', "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols", sans-serif !important;
}
body {
    background-color: white;
}
body {
    background: url("../default_images/backsystem.png") 0% 0% / contain repeat rgb(1, 83, 167);
    animation: przeplyw 13000s linear infinite;
}
#chat_head {
    height: auto;
    align-items: center;
    justify-content: space-between;
}

.top_background, .background_header, .chat_head, .chat_footer, .panel_top, .emo_head, .modal_top {
    background: hsl(210.43deg 99.24% 32.87%);
    color: #fff;
}
#main_logo {
    height: 51px;
    width: auto;
}
#global_chat {
    position: relative;
    z-index: ;
    border-radius: 12px;
    border-left: 1px solid #FF6666;
    border-right: 1px solid #FF6666;
    border-bottom: 1px solid #FF6666;
    margin-left: 1%;
    border-top: 1px solid #FF6666;
    width: 98%;
}
::-webkit-scrollbar {
  width: 5px;
  height: 0px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
::-webkit-scrollbar-thumb {
  background: hsl(210.43deg 99.24% 32.87%); 
}

::-webkit-scrollbar-thumb:hover {
  background: #6DA7FF; 
}
.chat_head, .chat_footer {
    background: none;
}
/* .head_option .i_btm , .head_option{
	font-size:28px;
} */
.chat_head_logo {
    width: auto;
    display: flex;
    align-items: center;
    width: 130px;
    justify-content: space-between;
    height: 45px;
    margin-top: 15px;
}

.room_element3 {
    position: relative;
    display: table;
    padding: 5px 10px;
    padding-right: 15px;
    margin-left: 3px;
    table-layout: fixed;
    z-index: 13;
    float: left;
    cursor: pointer;
    margin-top: 2px!important;
    font-size: 14px;
    background-color: hsl(210.43deg 99.24% 32.87%);
    color: white;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.room_element3 {
    border: 1px solid #FF6666;
    top: 1px;
}

@media screen and (max-width: 768px) {
	#main_logo {
	    display:none;
		height: 31px;
		padding: 0px;
		margin: 19px 0;
		margin-right: 10px;
	}
	.chat_head_logo{
	    display:none;
	}
	.head_option .i_btm , .head_option{
		font-size: 6px;
	}
	.custom_header{
	    width:100%!important;
	}
}
.avatar_menu {
    width: 40px;
    height: 40px;
}
.top_status {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 4px;
    left: 26px;
    border: 1px solid #fff;
    background: #fff;
}
#my_menu {
    width: 100%;
    height: 50px;
    display: table;
    table-layout: fixed;
}
.chat_head, .chat_footer {
    background: none;
}
.bfoot {
    background: none;
    color: #fff;
}

input, textarea, .post_input_container {
    background: #f2f2f2;
    color: #666;
}
#content, #message_content {
    width: 100%;
    height: 100%;
    padding: 0;
    padding: 0 5px;
    float: left;
    font-size: 16px;
    border-radius: 10px;
}
textarea, input {
    resize: none;
    font-size: 14px;
    font-family: sans-serif, "trebuchet ms", "lucida grande",
    "lucida sans unicode", arial, helvetica, sans-serif;
}
.td_input {
    height: 100%;
    display: table-cell;
    padding: 0 3px;
}

.default_btn {
    background: hsl(210.43deg 99.24% 32.87%);
    color: #fff;
}
#submit_button {
    width: 67%;
    float: right;
    height: 100% !important;
    box-shadow: none !important;
    padding: 4px;
    border: none !important;
    font-size: 13px;
}
button {
    border: none;
    outline: none !important;
    cursor: pointer;
}
.back_input {
    border-top: 0;
}
#main_input {
    position: relative;
    width: calc(100% + 2px);
    padding-top: 8px;
    height: 45px;
}

#chat_main_menu{
	right: 30px;
	border-radius: 22px 0;
}
.right-toggle {
    position: absolute;
    top: 45%;
    right: 280px;
    width: 30px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    z-index: 10;
    cursor: pointer;
    transform: translateY(-44%);
    color: silver;
    border: 1px solid #ededed;
    border-right: 0;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    box-shadow: rgba(0,0,0,.5) 0 0 0 , rgba(0,0,0,.1) 0 1px 6px;
}
#chat_right[style*="display: none"]+.right-toggle, #chat_right:not([style*=display])+.right-toggle {
    right: 0;
}
.toggler-wrapper {
        margin-top: -4px;
	display: inline-block;
	width: 45px;
	height: 25px;
	cursor: pointer;
	position: absolute;
}

.toggler-wrapper input[type="checkbox"] {
	display: none;
}

.toggler-wrapper input[type="checkbox"]:checked+.toggler-slider {
	background-color: #eb4f37;
}

.toggler-wrapper .toggler-slider {
	background-color: #ccc;
	position: absolute;
	border-radius: 100px;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transition: all 300ms ease;
	transition: all 300ms ease;
}

.toggler-wrapper .toggler-knob {
	position: absolute;
	-webkit-transition: all 300ms ease;
	transition: all 300ms ease;
}

.toggler-wrapper.style-21 input[type="checkbox"]:checked+.toggler-slider .toggler-knob {
	left: calc(100% - 19px - 3px);
}

.toggler-wrapper.style-21 .toggler-slider {
	background-color: #44cc66;
}

.toggler-wrapper.style-21 .toggler-knob {
	width: calc(25px - 6px);
	height: calc(25px - 6px);
	border-radius: 50%;
	left: 3px;
	top: 3px;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: center;
}


.nightDay {
    position: relative;
    left: 10px;
    bottom: -15px;
    color: white;
    font-size: 12px;
    max-width: 40%;
}


/*custom_log*/

.ch_logs {
    padding: 7px;
    word-wrap: break-word;
    display: table;
    width: 100%;
    table-layout: fixed;
    max-width: 100%;
    overflow: hidden;
    cursor: pointer;
}

.cavatar {
    height: 30px;
    width: 30px;
}
.chat_avatar {
    display: table-cell;
    width: 20px;
    vertical-align: middle;
    position: relative;
}
.cdate{
	width: 40px;
}

.tpicon {
    height: 20px;
    width: 20px;
}
 .my_text .chat_message, .usernamefont {
    font-size: 115%;
    margin-right: 4px;
}
.chat_message {
    letter-spacing: 0.1px ;
}
.head_option {
    display: inline-block !important;
    width: 31%;
    vertical-align: middle;
    font-size: 22px;
    text-align: center;
    position: relative;
    cursor: pointer;
}
/* use CSS Grid to keep one neat row and stack name + message */
.my_text.kontener {
    display: grid;
    grid-template-columns: auto 2fr auto auto; /* avatar / content / menu / date */
    grid-auto-rows: min-content;
    gap: 0px;
    align-items: center; /* vertical centering of each grid cell */
    width: 100%;
    column-gap: 7px;
}

/* avatar column */
.chat_avatar {
    grid-column: 1;
    width: 30px;
    height: 30px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* make name+rank sit in the content column (top row of that column) */
.rank_and_name {
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: 0px;
    min-width: 0;            /* allow children to shrink for ellipsis */
    margin-left: -5px;
}

/* username styling: allow ellipsis within available space */
.cname .username,
.username.usernamefont {
    display: inline-block;
    max-width: 100%;         /* constrained by parent grid column */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
    min-width: 0;
    font-size: 13px;        /* reduce slightly if it was taking too much space */
    line-height: 1;
}

/* chat message sits under the name, but in the same content column */
.chat_message {
    grid-column: 2;
    margin: 0;               /* remove the small top margin that misaligns */
    display: block;
    word-break: break-word;
    font-size: 13px;
    color: inherit;
    padding: 0;
}

/* menu (caret/down) and date columns */
.cclear.logs_menu {
    grid-column: 3;
    justify-self: center;
    align-self: center;
}

.cdate.cdate2 {
    grid-column: 4;
    justify-self: end;
    font-size: 12px;
    opacity: 0.85;
}

/* Level badge: keep bottom centered relative to avatar */
.user_level_badge {
    position: absolute;
    left: 75%;
    bottom: -15px;            /* adjust for larger avatar */
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 14px;
    max-width: 48px;
    height: 14px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    box-shadow: 0 1px 0 rgba(0,0,0,0.08);
    border: 1px solid rgba(0,0,0,0.06);
    z-index: 10;
}

/* ensure long names/player ranks don't push layout: */
.rank_icon, .usernamefont {
    flex-shrink: 0;
}

/* defensive: allow the grid content column to shrink properly */
.my_text.kontener * {
    box-sizing: border-box;
}


@media screen and (max-width: 600px) {
	.my_text .username,
	.my_text .chat_message,
	.usernamefont {
	  font-size: 15px;
	  margin-right: 4px;
	}
	.emo_chat {
	  height: 19px;
	}
}
.panel_bar {
    border-radius: 12px;
    border-bottom: 2px solid hsl(210.43deg 99.24% 32.87%)!important;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.back_theme {
    background: hsl(210.43deg 99.24% 32.87%);
    color: #fff;
}
.custom_header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 80%;
	margin-top: 20px;
	margin-right: -20px;
}
@media screen and (min-width: 900px) {
    .custom_header {
        width: 30%;
    }
	#chat_main_menu, #status_menu, #report_menu, #notification_menu, #bank_menu, #friends_menu, #private_menu {
		top: 60px;
	}
	.head_option {
		font-size: 30px;
	}
	.head_notify {
		top: 0;
		left: 22px;
	}
}
.cmain_item{
	width: 62px;
}
#submit_button {
    width: 64%;
    float: none;
    height: 99% !important;
    box-shadow: none !important;
    ne !important;
    font-size: 18px;
}
.send_btn {
    border-radius: 5px;
}
@media only screen and (max-width: 4000px) and (min-width: 1701px) {


	 .avstaty {
	width: 50%!important;
	margin-left: 8%!important;

    }}

    @media only screen and (max-width: 1700px) and (min-width: 1000px) {

      .zajawka {
	display: none;
	}

	 .avstaty {
	width: 60%!important;
	margin-left: 8%!important;
       margin-top: 50px!important;
      -webkit-transform: scale(0.60);
      -webkit-transform-origin: 0 0;

    }}

    @media only screen and (max-width: 999px) and (min-width: 1px) {

      .zajawka {
	display: none;
	}

	 .avstaty {
        display:none;
	width: 60%!important;
	margin-left: 0%!important;
       margin-top: 110px!important;
      -webkit-transform: scale(0.50);
      -webkit-transform-origin: 0 0;

    }}

  @media screen and (max-width: 700px) {
    .avnick {
      font-size: 9px;
      display: none;
    }
                                       
}
.bselected {
	padding: 1px 6px;
    display: table-cell;
    vertical-align: middle;
    width: auto;
    text-align: center;
    font-size: 15px;
    cursor: pointer;
    border-radius: 4px;
}
.emo_head .bselected{
	width: 40px;
	padding:0;
}
.customusername {
    font-size: 115%;
    margin-right: 4px;
}
.ch_logs, .other_logs {
    animation: fadeIn 1s ease forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(0);
    }
    to {
        opacity: 1;
        transform: translateY(-4px);
    }
}
/* .ch_logs{
    display: flex;
    justify-content: center;
}
 */
.emo_chat{height: 20px;}

.cname {
    display: -webkit-box;
    vertical-align: middle;
    /* align-content: center; */
    align-items: center;
}
.username{
	margin-right: 5px;
}
.back_ptop {
    background: hsl(210.43deg 99.24% 32.87%);
    color: #fff;
}
#private_send {
    width: 100%;
    height: 100% !important;
    cursor: pointer;
}
.pboxed, .pfull{
	bottom: 0;
}
.background_stream {
    background-color: hsl(210.43deg 99.24% 32.87%);
}
/* .iccam{
    color: #7a7979;
    border: 1px solid #d6d6d6;
    border-radius: 8px;
    background: #f5f5f5;
    width: 39px;
} */
.iccam{
	width: 45px;
}
/* .cname {
    display: flex;
    vertical-align: middle;
} */

#left_panel_bar{
    justify-content: space-between;
    align-items: center;
}
.head_notify {
    position: absolute;
    top: 0;
    right: 5px;
    width: 13px;
    height: 13px;
    border-radius: 50px;
    display: none;
}

.image-container {
    position: absolute;
    right: 20px;
    margin: 0px;
    z-index: 998;
    text-align: right;
    top: 14px;
}
.custom_rooms > span:only-child .close {
    display: none;
}
.active_room{
	background-color: rgb(255, 102, 102); display: block;
}
.room_element3 {
    flex-shrink: 0;
}
.room_list_custom {
    display: flex;
    overflow-x: auto;
    padding-bottom: 10px;
    gap: 10px;
}
.room_list_custom::-webkit-scrollbar {
    height: 8px;
}
.room_list_custom::-webkit-scrollbar-thumb {
    background-color: darkgrey;
    border-radius: 10px;
}

.room_list_custom::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}
#chat_right[style*="display: none"]+.right-toggle,#chat_right:not([style*=display])+.right-toggle {
    right: 0
}

#chat_right[style*="display: none"]+.right-toggle .fa::before,#chat_right:not([style*=display])+.right-toggle .fa::before {
    content: "\f060"
}
.my_text .username, .my_text .chat_message, .usernamefont {
    font-size: 15px;
    margin-right: 4px;
}
/* .chat_message {
    letter-spacing: 0.1px;
    display: inline!important;
} */
.chat_message {
    display: inline!important;
    word-break: break-word;
}
.chat_avatar {
    margin-right: 10px;
    width: 20px;
    height: 20px;
    display: inline-block;
}
.my_text{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}
.username {
    text-wrap: nowrap;
}
.cname {
    display: flex;
    align-items: center;
	margin-left:1px;
}
.chat_message {
    display: inline-table;
    word-break: break-word;
}
.my_text .btable {
    display: flex !important;
    width: inherit;
}
.cdate {
    margin-left: auto;
}
.cclear, .spclear {
    display: table-cell;
    min-width: 24px;
    font-size: 12px;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
}
.chat_message {
    width: 100%;
    height: 100%;
}
.cdate {
    color: #ccc!important;
    display: table-cell;
    min-width: 50px;
    vertical-align: middle;
    text-align: center;
    font-size: 10px;
}
.emo_chat {
    height: 20px;
    max-width: 100%;
    vertical-align: middle;
}
.cclear, .spclear {
    display: table-cell;
    min-width: 24px;
    font-size: 12px;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
}
#room_list_custom {
    margin-left: 10px;
    margin-right: 10px;
    display: flex;
    overflow-x: auto;
    padding-bottom: 0;
    width: 100%;
}
#my_menu{
	margin-left: 12px;
}
@media screen and (min-width: 769px) {
  #chat_right {
    width: 415px !important
  }
	.right-toggle {
		right: 415px;
	}
	#room_list_custom {
		margin-left: 26px;
	}
}
.panel_selected {
    border-radius: 4px;
}
.panel_bar_item, .panel_option, .side_bar_item {
    padding: 1px 6px;
    display: table-cell;
    vertical-align: middle;
    width: auto;
    text-align: center;
    font-size: 15px;
    cursor: pointer;
}
        #custom-player {
            border-top: 2px solid hsl(210.43, 99.24%, 32.87%);
            border-bottom: 0.1px solid #c3d2ff;
            width: 100%;
            height: 50px;
            color: hsl(210.43, 99.24%, 32.87%);
            padding: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-sizing: border-box;
        }

        #play-pause {
            font-size: 18px;
            color: hsl(210.43, 99.24%, 32.87%);
            border: none;
            background: none;
            cursor: pointer;
        }

        #volume {
            width: 40%;
            height: 5px;
            background: hsl(210.43, 99.24%, 32.87%);
            border-radius: 5px;
            outline: none;
        }

        #volume::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: hsl(210.43, 99.24%, 42.87%);
            cursor: pointer;
        }

        #channel-select {
            width: 100%;
            height: 30px;
            color: hsl(210.43, 99.24%, 32.87%);
            background: white;
            border: 1px solid #c3d2ff;
            border-radius: 5px;
            padding: 5px;
            box-sizing: border-box;
        }
.un_1 {
  animation: tracking-in-expand-fwd 3.5s cubic-bezier(0.215, 0.61, 0.355, 1)
    infinite alternate;
}
.un_2 {
  animation: focus-in-expand 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite
    alternate both;
}
.un_3 {
  animation: tracking-in-expand-fwd 1s infinite alternate both;
}
.un_4 {
  animation: heartbeat 3s infinite alternate both;
}
.un_5 {
  animation: shake-right 1s infinite alternate forwards;
}
.un_6 {
  animation: focus-in-expand 1s infinite alternate both;
}
.un_7 {
  animation: shake-lr 1s infinite alternate forwards;
}
.un_8 {
  animation: jello-horizontal 1s cubic-bezier(0.215, 0.61, 0.355, 1) infinite
    alternate;
}
.un_9 {
  animation: heartbeat 1.5s ease-in-out infinite both;
}
.un_10 {
  animation: shake-horizontal 3s cubic-bezier(0.455, 0.03, 0.515, 0.955)
    infinite alternate-reverse both;
}
.un_11 {
  animation: shake-lr 3s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite
    reverse both;
}
.un_12 {
  animation: jello-horizontal 3s infinite alternate both;
}
.un_13 {
  animation: pulsate-bck 1s ease-in-out infinite both;
}
.un_14 {
  animation: shake-right 4s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite
    alternate both;
}
.un_15 {
  animation: shake-right 1s cubic-bezier(0.215, 0.61, 0.355, 1) infinite
    alternate;
}
.check_animation:before {
  content: "\f00c";
  font-family: FontAwesome;
  font-size: 15px;
  vertical-align: middle;
  color: #ffffff !important;
  font-weight: 900;
  position: absolute;
  right: 1px;
  bottom: 21px;
}
.container_animation {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-start;
  gap: 10px;
  padding: 5px;
}
.box_animation {
  width: 100px;
  height: 33px;
  border: 1px solid #e1e1e1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  border-radius: 8px;
  position: relative;
}
@keyframes shake-left {
  0%,
  100% {
    transform: rotate(0deg);
    transform-origin: 0 50%;
  }
  10% {
    transform: rotate(2deg);
  }
  20%,
  40%,
  60% {
    transform: rotate(-4deg);
  }
  30%,
  50%,
  70% {
    transform: rotate(4deg);
  }
  80% {
    transform: rotate(-2deg);
  }
  90% {
    transform: rotate(2deg);
  }
}
@keyframes shake-right {
  0%,
  100% {
    transform: rotate(0deg);
    transform-origin: 100% 50%;
  }
  10% {
    transform: rotate(2deg);
  }
  20%,
  40%,
  60% {
    transform: rotate(-4deg);
  }
  30%,
  50%,
  70% {
    transform: rotate(4deg);
  }
  80% {
    transform: rotate(-2deg);
  }
  90% {
    transform: rotate(2deg);
  }
}
@keyframes pulsate-bck {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes jello-horizontal {
  0% {
    transform: scale3d(1, 1, 1);
  }
  30% {
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}
@keyframes shake-lr {
  0%,
  100% {
    transform: rotate(0deg);
    transform-origin: 50% 50%;
  }
  10% {
    transform: rotate(8deg);
  }
  20%,
  40%,
  60% {
    transform: rotate(-10deg);
  }
  30%,
  50%,
  70% {
    transform: rotate(10deg);
  }
  80% {
    transform: rotate(-8deg);
  }
  90% {
    transform: rotate(8deg);
  }
}
@keyframes shake-horizontal {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70% {
    transform: translateX(-10px);
  }
  20%,
  40%,
  60% {
    transform: translateX(10px);
  }
  80% {
    transform: translateX(8px);
  }
  90% {
    transform: translateX(-8px);
  }
}
@keyframes heartbeat {
  from {
    transform: scale(1);
    transform-origin: center center;
    animation-timing-function: ease-out;
  }
  10% {
    transform: scale(0.91);
    animation-timing-function: ease-in;
  }
  17% {
    transform: scale(0.98);
    animation-timing-function: ease-out;
  }
  33% {
    transform: scale(0.87);
    animation-timing-function: ease-in;
  }
  45% {
    transform: scale(1);
    animation-timing-function: ease-out;
  }
}
@keyframes bounce-left {
  0% {
    transform: translateX(-48px);
    animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    transform: translateX(-26px);
    animation-timing-function: ease-in;
  }
  65% {
    transform: translateX(-13px);
    animation-timing-function: ease-in;
  }
  82% {
    transform: translateX(-6.5px);
    animation-timing-function: ease-in;
  }
  93% {
    transform: translateX(-4px);
    animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87%,
  98% {
    transform: translateX(0);
    animation-timing-function: ease-out;
  }
  100% {
    transform: translateX(0);
    animation-timing-function: ease-out;
    opacity: 1;
  }
}
@keyframes jello-horizontal {
  0% {
    transform: scale3d(1, 1, 1);
  }
  30% {
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}
@keyframes vibrate-1 {
  0% {
    transform: translate(0);
  }
  20% {
    transform: translate(-2px, 2px);
  }
  40% {
    transform: translate(-2px, -2px);
  }
  60% {
    transform: translate(2px, 2px);
  }
  80% {
    transform: translate(2px, -2px);
  }
  100% {
    transform: translate(0);
  }
}
@keyframes text-pop-up-tr {
  0% {
    transform: translateY(0) translateX(0);
    transform-origin: 50% 50%;
    text-shadow: none;
  }
  100% {
    transform: translateY(-50px) translateX(50px);
    transform-origin: 50% 50%;
    text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc,
      0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc,
      0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
  }
}
@keyframes text-shadow-pop-top {
  0% {
    text-shadow: 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555,
      0 0 #555555, 0 0 #555555, 0 0 #555;
    transform: translateY(0);
  }
  100% {
    text-shadow: 0 -1px #555555, 0 -2px #555555, 0 -3px #555555, 0 -4px #555555,
      0 -5px #555555, 0 -6px #555555, 0 -7px #555555, 0 -8px #555;
    transform: translateY(8px);
  }
}
@keyframes text-shadow-drop-center {
  0% {
    text-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  100% {
    text-shadow: 0 0 18px rgba(0, 0, 0, 0.35);
  }
}
@keyframes text-shadow-drop-tr {
  0% {
    text-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  100% {
    text-shadow: 6px -6px 18px rgba(0, 0, 0, 0.35);
  }
}
@keyframes tracking-in-expand-fwd {
  0% {
    letter-spacing: -0.5em;
    transform: translateZ(-700px);
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    transform: translateZ(0);
    opacity: 1;
  }
}
@keyframes focus-in-expand {
  0% {
    letter-spacing: -0.5em;
    filter: blur(12px);
    opacity: 0;
  }
  100% {
    filter: blur(0);
    opacity: 1;
  }
}
.audio_prof {
  height: 39px !important;
  width: 300px !important;
  margin-left: 18px !important;
  margin-bottom: 5px !important;
}
@media (max-width: 700px) {
  .audio_prof {
    width: 300px !important;
  }
}
@media (max-width: 600px) {
  .audio_prof {
    width: 200px !important;
  }
}
@media (max-width: 500px) {
  .audio_prof {
    width: 145px !important;
  }
}
@media (max-width: 390px) {
  .audio_prof {
    width: 130px !important;
  }
}

.cd-icon {
  width: 50px;
  height: 50px;
  margin-right: 18px;
}

.profile-music-container {
  display: flex;
  align-items: center;
  padding: 15px;
  border-radius: 10px;
  margin-top: 15px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.profile-music-content {
  display: flex;
  align-items: center;
  margin-left: 25px;
}

.music-info {
  font-size: 1em;
  font-weight: 500;
}

.style-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 10px;
}

.style-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-radius: 12px;
  cursor: pointer;
}

.style-item.check_style {
  outline: 2px solid;
}
.ajax-file-upload-statusbar {
  margin: 10px 0;
  width: 100% !important;
  max-width: 420px;
  border-radius: 6px;
  padding: 8px 15px;
  background-color: #f0f7f8;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.ajax-file-upload-filename,
.ajax-file-upload-filesize,
.ajax-file-upload-progress {
  margin: 5px 10px 5px 0;
  display: inline-block;
  vertical-align: middle;
}

.ajax-file-upload-filename {
  width: calc(100% - 60px);
}

.ajax-file-upload-filesize {
  width: 50px;
  text-align: right;
}

.ajax-file-upload-progress {
  width: 100%;
  max-width: 300px;
  height: 20px;
  border: 1px solid #ddd;
  border-radius: 3px;
  overflow: hidden;
  background-color: #e1f0f4;
}

.ajax-file-upload-bar {
  background-color: #01ff15;
  height: 100%;
  width: 0;
  border-radius: 3px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  transition: width 0.4s ease;
}

.ajax-file-upload-red,
.ajax-file-upload-green {
  border-radius: 5px;
  color: #fff;
  font-size: 13px;
  padding: 6px 15px;
  cursor: pointer;
  margin: 8px 10px 8px 0;
}

.ajax-file-upload-red {
  background-color: #e4685d;
  box-shadow: inset 0 39px 0 -24px #e67a73;
}

.ajax-file-upload-green {
  background-color: #77b55a;
  box-shadow: inset 0 39px 0 -24px #5b8a3c;
}

.ajax-upload-dragdrop {
  border: 2px dotted #a5a5c7;
  width: 100%;
  max-width: 420px;
  color: #444;
  padding: 20px;
  text-align: center;
  background-color: #f7f9fb;
  border-radius: 6px;
}

.ajax-file-upload-container {
  margin: 20px 0;
}

.form_full {
  border-radius: 8px;
  padding: 15px;
  max-width: 500px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  margin: auto;
}

.pf_1 {
  background-image: linear-gradient(
      45deg,
      rgba(203, 78, 191, 0.5) 0%,
      rgba(203, 78, 191, 0.5) 12%,
      transparent 12%,
      transparent 20%,
      rgba(225, 118, 209, 0.5) 20%,
      rgba(225, 118, 209, 0.5) 24%,
      rgba(236, 138, 217, 0.5) 24%,
      rgba(236, 138, 217, 0.5) 35%,
      rgba(192, 58, 183, 0.5) 35%,
      rgba(192, 58, 183, 0.5) 36%,
      rgba(214, 98, 200, 0.5) 36%,
      rgba(214, 98, 200, 0.5) 100%
    ),
    linear-gradient(
      135deg,
      rgb(203, 78, 191) 0%,
      rgb(203, 78, 191) 11%,
      transparent 11%,
      transparent 23%,
      transparent 23%,
      transparent 33%,
      rgb(236, 138, 217) 33%,
      rgb(236, 138, 217) 64%,
      rgb(192, 58, 183) 64%,
      rgb(192, 58, 183) 83%,
      rgb(214, 98, 200) 83%,
      rgb(214, 98, 200) 100%
    ),
    linear-gradient(90deg, rgb(255, 255, 255), rgb(255, 255, 255));
  color: black;
}
.pf_2 {
  background-image: linear-gradient(
      135deg,
      rgba(139, 53, 123, 0.5) 0%,
      rgba(139, 53, 123, 0.5) 10%,
      transparent 10%,
      transparent 19%,
      rgba(84, 33, 86, 0.5) 19%,
      rgba(84, 33, 86, 0.5) 27%,
      rgba(157, 60, 135, 0.5) 27%,
      rgba(157, 60, 135, 0.5) 53%,
      transparent 53%,
      transparent 56%,
      rgba(176, 66, 147, 0.5) 56%,
      rgba(176, 66, 147, 0.5) 61%,
      rgba(102, 40, 98, 0.5) 61%,
      rgba(102, 40, 98, 0.5) 100%
    ),
    linear-gradient(
      45deg,
      rgb(139, 53, 123) 0%,
      rgb(139, 53, 123) 8%,
      transparent 8%,
      transparent 9%,
      transparent 9%,
      transparent 10%,
      rgb(157, 60, 135) 10%,
      rgb(157, 60, 135) 14%,
      rgb(121, 46, 110) 14%,
      rgb(121, 46, 110) 50%,
      rgb(176, 66, 147) 50%,
      rgb(176, 66, 147) 97%,
      rgb(102, 40, 98) 97%,
      rgb(102, 40, 98) 100%
    ),
    linear-gradient(90deg, rgb(255, 255, 255), rgb(255, 255, 255));
  color: white;
}

.pf_3 {
  background-image: linear-gradient(
      45deg,
      rgba(11, 95, 67, 0.5) 0%,
      rgba(11, 95, 67, 0.5) 5%,
      transparent 5%,
      transparent 38%,
      transparent 38%,
      transparent 60%,
      rgba(7, 115, 73, 0.5) 60%,
      rgba(7, 115, 73, 0.5) 100%
    ),
    linear-gradient(
      135deg,
      rgb(4, 136, 80) 0%,
      rgb(4, 136, 80) 14%,
      rgb(0, 156, 86) 14%,
      rgb(0, 156, 86) 75%,
      rgb(7, 115, 73) 75%,
      rgb(7, 115, 73) 100%
    ),
    linear-gradient(90deg, rgb(255, 255, 255), rgb(255, 255, 255));
  color: white;
}

.pf_4 {
  background-image: linear-gradient(
    45deg,
    rgb(133, 28, 39) 0%,
    rgb(133, 28, 39) 1%,
    rgb(191, 40, 36) 1%,
    rgb(191, 40, 36) 15%,
    rgb(76, 15, 42) 15%,
    rgb(76, 15, 42) 38%,
    rgb(162, 34, 38) 38%,
    rgb(162, 34, 38) 55%,
    rgb(220, 46, 35) 55%,
    rgb(220, 46, 35) 62%,
    rgb(105, 21, 41) 62%,
    rgb(105, 21, 41) 63%,
    rgb(47, 9, 44) 63%,
    rgb(47, 9, 44) 69%,
    rgb(18, 3, 45) 69%,
    rgb(18, 3, 45) 100%
  );
  color: white;
}

.pf_5 {
  background-image: linear-gradient(
    135deg,
    rgb(203, 70, 215) 0%,
    rgb(203, 70, 215) 28%,
    rgb(138, 55, 153) 28%,
    rgb(138, 55, 153) 39%,
    rgb(94, 44, 112) 39%,
    rgb(94, 44, 112) 41%,
    rgb(160, 60, 174) 41%,
    rgb(160, 60, 174) 42%,
    rgb(181, 65, 194) 42%,
    rgb(181, 65, 194) 44%,
    rgb(73, 39, 92) 44%,
    rgb(73, 39, 92) 59%,
    rgb(116, 49, 133) 59%,
    rgb(116, 49, 133) 95%,
    rgb(51, 34, 71) 95%,
    rgb(51, 34, 71) 100%
  );
  color: black;
}

.pf_6 {
  background-image: linear-gradient(
      45deg,
      rgba(13, 0, 61, 0.2) 0%,
      rgba(13, 0, 61, 0.2) 16.667%,
      rgba(14, 79, 102, 0.2) 16.667%,
      rgba(14, 79, 102, 0.2) 33.334%,
      rgba(15, 158, 143, 0.2) 33.334%,
      rgba(15, 158, 143, 0.2) 50.001%,
      rgba(16, 198, 163, 0.2) 50.001%,
      rgba(16, 198, 163, 0.2) 66.668%,
      rgba(15, 119, 122, 0.2) 66.668%,
      rgba(15, 119, 122, 0.2) 83.335%,
      rgba(14, 40, 81, 0.2) 83.335%,
      rgba(14, 40, 81, 0.2) 100.002%
    ),
    linear-gradient(
      22.5deg,
      rgba(13, 0, 61, 0.2) 0%,
      rgba(13, 0, 61, 0.2) 16.667%,
      rgba(14, 79, 102, 0.2) 16.667%,
      rgba(14, 79, 102, 0.2) 33.334%,
      rgba(15, 158, 143, 0.2) 33.334%,
      rgba(15, 158, 143, 0.2) 50.001%,
      rgba(16, 198, 163, 0.2) 50.001%,
      rgba(16, 198, 163, 0.2) 66.668%,
      rgba(15, 119, 122, 0.2) 66.668%,
      rgba(15, 119, 122, 0.2) 83.335%,
      rgba(14, 40, 81, 0.2) 83.335%,
      rgba(14, 40, 81, 0.2) 100.002%
    ),
    linear-gradient(
      0deg,
      rgba(13, 0, 61, 0.2) 0%,
      rgba(13, 0, 61, 0.2) 16.667%,
      rgba(14, 79, 102, 0.2) 16.667%,
      rgba(14, 79, 102, 0.2) 33.334%,
      rgba(15, 158, 143, 0.2) 33.334%,
      rgba(15, 158, 143, 0.2) 50.001%,
      rgba(16, 198, 163, 0.2) 50.001%,
      rgba(16, 198, 163, 0.2) 66.668%,
      rgba(15, 119, 122, 0.2) 66.668%,
      rgba(15, 119, 122, 0.2) 83.335%,
      rgba(14, 40, 81, 0.2) 83.335%,
      rgba(14, 40, 81, 0.2) 100.002%
    ),
    linear-gradient(90deg, rgb(73, 73, 73), rgb(94, 94, 94));
  color: white;
}

.pf_7 {
  background-image: linear-gradient(
      135deg,
      rgba(98, 147, 221, 0.2) 0%,
      rgba(98, 147, 221, 0.2) 16.667%,
      rgba(121, 207, 220, 0.2) 16.667%,
      rgba(121, 207, 220, 0.2) 33.334%,
      rgba(75, 86, 222, 0.2) 33.334%,
      rgba(75, 86, 222, 0.2) 50.001%,
      rgba(87, 116, 221, 0.2) 50.001%,
      rgba(87, 116, 221, 0.2) 66.668%,
      rgba(64, 56, 222, 0.2) 66.668%,
      rgba(64, 56, 222, 0.2) 83.335%,
      rgba(110, 177, 220, 0.2) 83.335%,
      rgba(110, 177, 220, 0.2) 100.002%
    ),
    linear-gradient(
      90deg,
      rgba(98, 147, 221, 0.2) 0%,
      rgba(98, 147, 221, 0.2) 16.667%,
      rgba(121, 207, 220, 0.2) 16.667%,
      rgba(121, 207, 220, 0.2) 33.334%,
      rgba(75, 86, 222, 0.2) 33.334%,
      rgba(75, 86, 222, 0.2) 50.001%,
      rgba(87, 116, 221, 0.2) 50.001%,
      rgba(87, 116, 221, 0.2) 66.668%,
      rgba(64, 56, 222, 0.2) 66.668%,
      rgba(64, 56, 222, 0.2) 83.335%,
      rgba(110, 177, 220, 0.2) 83.335%,
      rgba(110, 177, 220, 0.2) 100.002%
    ),
    linear-gradient(
      0deg,
      rgba(98, 147, 221, 0.2) 0%,
      rgba(98, 147, 221, 0.2) 16.667%,
      rgba(121, 207, 220, 0.2) 16.667%,
      rgba(121, 207, 220, 0.2) 33.334%,
      rgba(75, 86, 222, 0.2) 33.334%,
      rgba(75, 86, 222, 0.2) 50.001%,
      rgba(87, 116, 221, 0.2) 50.001%,
      rgba(87, 116, 221, 0.2) 66.668%,
      rgba(64, 56, 222, 0.2) 66.668%,
      rgba(64, 56, 222, 0.2) 83.335%,
      rgba(110, 177, 220, 0.2) 83.335%,
      rgba(110, 177, 220, 0.2) 100.002%
    ),
    linear-gradient(90deg, rgb(125, 161, 246), rgb(27, 147, 241));
  color: black;
}

.pf_8 {
  background-image: linear-gradient(
      216deg,
      rgba(77, 77, 77, 0.05) 0%,
      rgba(77, 77, 77, 0.05) 25%,
      rgba(42, 42, 42, 0.05) 25%,
      rgba(42, 42, 42, 0.05) 38%,
      rgba(223, 223, 223, 0.05) 38%,
      rgba(223, 223, 223, 0.05) 75%,
      rgba(36, 36, 36, 0.05) 75%,
      rgba(36, 36, 36, 0.05) 100%
    ),
    linear-gradient(
      44deg,
      rgba(128, 128, 128, 0.05) 0%,
      rgba(128, 128, 128, 0.05) 34%,
      rgba(212, 212, 212, 0.05) 34%,
      rgba(212, 212, 212, 0.05) 57%,
      rgba(25, 25, 25, 0.05) 57%,
      rgba(25, 25, 25, 0.05) 89%,
      rgba(135, 135, 135, 0.05) 89%,
      rgba(135, 135, 135, 0.05) 100%
    ),
    linear-gradient(
      241deg,
      rgba(55, 55, 55, 0.05) 0%,
      rgba(55, 55, 55, 0.05) 14%,
      rgba(209, 209, 209, 0.05) 14%,
      rgba(209, 209, 209, 0.05) 60%,
      rgba(245, 245, 245, 0.05) 60%,
      rgba(245, 245, 245, 0.05) 69%,
      rgba(164, 164, 164, 0.05) 69%,
      rgba(164, 164, 164, 0.05) 100%
    ),
    linear-gradient(
      249deg,
      rgba(248, 248, 248, 0.05) 0%,
      rgba(248, 248, 248, 0.05) 32%,
      rgba(148, 148, 148, 0.05) 32%,
      rgba(148, 148, 148, 0.05) 35%,
      rgba(202, 202, 202, 0.05) 35%,
      rgba(202, 202, 202, 0.05) 51%,
      rgba(181, 181, 181, 0.05) 51%,
      rgba(181, 181, 181, 0.05) 100%
    ),
    linear-gradient(92deg, hsl(214, 0%, 11%), hsl(214, 0%, 11%));
  color: white;
}

.pf_9 {
  background-image: radial-gradient(
    circle at center center,
    rgb(143, 39, 176) 0%,
    rgb(143, 39, 176) 11%,
    rgb(128, 38, 169) 11%,
    rgb(128, 38, 169) 13%,
    rgb(113, 38, 163) 13%,
    rgb(113, 38, 163) 17%,
    rgb(98, 37, 156) 17%,
    rgb(98, 37, 156) 28%,
    rgb(83, 37, 150) 28%,
    rgb(83, 37, 150) 40%,
    rgb(68, 36, 143) 40%,
    rgb(68, 36, 143) 72%,
    rgb(53, 36, 137) 72%,
    rgb(53, 36, 137) 81%,
    rgb(38, 35, 130) 81%,
    rgb(38, 35, 130) 100%
  );
  color: white;
}

.pf_10 {
  background-image: linear-gradient(
      34deg,
      transparent 0%,
      transparent 20%,
      rgba(6, 6, 6, 0.02) 20%,
      rgba(6, 6, 6, 0.02) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      300deg,
      transparent 0%,
      transparent 20%,
      rgba(254, 254, 254, 0.01) 20%,
      rgba(254, 254, 254, 0.01) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      275deg,
      transparent 0%,
      transparent 20%,
      rgba(4, 4, 4, 0.01) 20%,
      rgba(4, 4, 4, 0.01) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      95deg,
      transparent 0%,
      transparent 20%,
      rgba(207, 207, 207, 0.01) 20%,
      rgba(207, 207, 207, 0.01) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      330deg,
      transparent 0%,
      transparent 20%,
      rgba(177, 177, 177, 0.01) 20%,
      rgba(177, 177, 177, 0.01) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      264deg,
      transparent 0%,
      transparent 20%,
      rgba(171, 171, 171, 0.01) 20%,
      rgba(171, 171, 171, 0.01) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      359deg,
      transparent 0%,
      transparent 20%,
      rgba(229, 229, 229, 0.02) 20%,
      rgba(229, 229, 229, 0.02) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      238deg,
      transparent 0%,
      transparent 20%,
      rgba(150, 150, 150, 0.02) 20%,
      rgba(150, 150, 150, 0.02) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      295deg,
      transparent 0%,
      transparent 20%,
      rgba(52, 52, 52, 0.03) 20%,
      rgba(52, 52, 52, 0.03) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      215deg,
      transparent 0%,
      transparent 20%,
      rgba(165, 165, 165, 0.02) 20%,
      rgba(165, 165, 165, 0.02) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      69deg,
      transparent 0%,
      transparent 20%,
      rgba(41, 41, 41, 0.03) 20%,
      rgba(41, 41, 41, 0.03) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      357deg,
      transparent 0%,
      transparent 20%,
      rgba(181, 181, 181, 0.01) 20%,
      rgba(181, 181, 181, 0.01) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      272deg,
      transparent 0%,
      transparent 20%,
      rgba(93, 93, 93, 0.01) 20%,
      rgba(93, 93, 93, 0.01) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      329deg,
      transparent 0%,
      transparent 20%,
      rgba(109, 109, 109, 0.03) 20%,
      rgba(109, 109, 109, 0.03) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      57deg,
      transparent 0%,
      transparent 20%,
      rgba(153, 153, 153, 0.02) 20%,
      rgba(153, 153, 153, 0.02) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      269deg,
      transparent 0%,
      transparent 20%,
      rgba(159, 159, 159, 0.02) 20%,
      rgba(159, 159, 159, 0.02) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      144deg,
      transparent 0%,
      transparent 20%,
      rgba(9, 9, 9, 0.03) 20%,
      rgba(9, 9, 9, 0.03) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      217deg,
      transparent 0%,
      transparent 20%,
      rgba(157, 157, 157, 0.03) 20%,
      rgba(157, 157, 157, 0.03) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      31deg,
      transparent 0%,
      transparent 20%,
      rgba(91, 91, 91, 0.01) 20%,
      rgba(91, 91, 91, 0.01) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      277deg,
      transparent 0%,
      transparent 20%,
      rgba(132, 132, 132, 0.02) 20%,
      rgba(132, 132, 132, 0.02) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      164deg,
      transparent 0%,
      transparent 20%,
      rgba(67, 67, 67, 0.03) 20%,
      rgba(67, 67, 67, 0.03) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      24deg,
      transparent 0%,
      transparent 20%,
      rgba(174, 174, 174, 0.01) 20%,
      rgba(174, 174, 174, 0.01) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      342deg,
      transparent 0%,
      transparent 20%,
      rgba(168, 168, 168, 0.02) 20%,
      rgba(168, 168, 168, 0.02) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      61deg,
      transparent 0%,
      transparent 20%,
      rgba(58, 58, 58, 0.03) 20%,
      rgba(58, 58, 58, 0.03) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      305deg,
      transparent 0%,
      transparent 20%,
      rgba(127, 127, 127, 0.03) 20%,
      rgba(127, 127, 127, 0.03) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      291deg,
      transparent 0%,
      transparent 20%,
      rgba(213, 213, 213, 0.01) 20%,
      rgba(213, 213, 213, 0.01) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      114deg,
      transparent 0%,
      transparent 20%,
      rgba(241, 241, 241, 0.01) 20%,
      rgba(241, 241, 241, 0.01) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      35deg,
      transparent 0%,
      transparent 20%,
      rgba(140, 140, 140, 0.03) 20%,
      rgba(140, 140, 140, 0.03) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      344deg,
      transparent 0%,
      transparent 20%,
      rgba(10, 10, 10, 0.01) 20%,
      rgba(10, 10, 10, 0.01) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      259deg,
      transparent 0%,
      transparent 20%,
      rgba(215, 215, 215, 0.02) 20%,
      rgba(215, 215, 215, 0.02) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      333deg,
      transparent 0%,
      transparent 20%,
      rgba(73, 73, 73, 0.03) 20%,
      rgba(73, 73, 73, 0.03) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      290deg,
      transparent 0%,
      transparent 20%,
      rgba(28, 28, 28, 0.03) 20%,
      rgba(28, 28, 28, 0.03) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      42deg,
      transparent 0%,
      transparent 20%,
      rgba(65, 65, 65, 0.01) 20%,
      rgba(65, 65, 65, 0.01) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      308deg,
      transparent 0%,
      transparent 20%,
      rgba(80, 80, 80, 0.01) 20%,
      rgba(80, 80, 80, 0.01) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      107deg,
      transparent 0%,
      transparent 20%,
      rgba(96, 96, 96, 0.01) 20%,
      rgba(96, 96, 96, 0.01) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      352deg,
      transparent 0%,
      transparent 20%,
      rgba(94, 94, 94, 0.02) 20%,
      rgba(94, 94, 94, 0.02) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      167deg,
      transparent 0%,
      transparent 20%,
      rgba(82, 82, 82, 0.02) 20%,
      rgba(82, 82, 82, 0.02) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      200deg,
      transparent 0%,
      transparent 20%,
      rgba(12, 12, 12, 0.03) 20%,
      rgba(12, 12, 12, 0.03) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      206deg,
      transparent 0%,
      transparent 20%,
      rgba(64, 64, 64, 0.03) 20%,
      rgba(64, 64, 64, 0.03) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(
      29deg,
      transparent 0%,
      transparent 20%,
      rgba(107, 107, 107, 0.01) 20%,
      rgba(107, 107, 107, 0.01) 48%,
      transparent 48%,
      transparent 100%
    ),
    linear-gradient(90deg, rgb(255, 255, 255), rgb(255, 255, 255));
  color: black;
}

.pf_11 {
  background-image: radial-gradient(
      circle 8px at 80% 68%,
      rgb(35, 35, 35) 0%,
      rgb(35, 35, 35) 50%,
      transparent 50%,
      transparent 100%
    ),
    radial-gradient(
      circle 8px at 24% 41%,
      rgb(35, 35, 35) 0%,
      rgb(35, 35, 35) 50%,
      transparent 50%,
      transparent 100%
    ),
    radial-gradient(
      circle 6px at 34% 66%,
      rgb(45, 45, 45) 0%,
      rgb(45, 45, 45) 50%,
      transparent 50%,
      transparent 100%
    ),
    radial-gradient(
      circle 6px at 56% 55%,
      rgb(45, 45, 45) 0%,
      rgb(45, 45, 45) 50%,
      transparent 50%,
      transparent 100%
    ),
    radial-gradient(
      circle 6px at 11% 60%,
      rgb(45, 45, 45) 0%,
      rgb(45, 45, 45) 50%,
      transparent 50%,
      transparent 100%
    ),
    radial-gradient(
      circle 6px at 6% 89%,
      rgb(45, 45, 45) 0%,
      rgb(45, 45, 45) 50%,
      transparent 50%,
      transparent 100%
    ),
    radial-gradient(
      circle 6px at 0% 36%,
      rgb(45, 45, 45) 0%,
      rgb(45, 45, 45) 50%,
      transparent 50%,
      transparent 100%
    ),
    radial-gradient(
      circle 12px at 20% 56%,
      rgb(35, 35, 35) 0%,
      rgb(35, 35, 35) 50%,
      transparent 50%,
      transparent 100%
    ),
    radial-gradient(
      circle 12px at 44% 56%,
      rgb(35, 35, 35) 0%,
      rgb(35, 35, 35) 50%,
      transparent 50%,
      transparent 100%
    ),
    radial-gradient(
      circle 12px at 0% 43%,
      rgb(35, 35, 35) 0%,
      rgb(35, 35, 35) 50%,
      transparent 50%,
      transparent 100%
    ),
    radial-gradient(
      circle 12px at 19% 33%,
      rgb(35, 35, 35) 0%,
      rgb(35, 35, 35) 50%,
      transparent 50%,
      transparent 100%
    ),
    radial-gradient(
      circle at center left,
      rgb(35, 35, 35) 0%,
      rgb(35, 35, 35) 10%,
      transparent 10%,
      transparent 90%
    ),
    linear-gradient(135deg, rgb(231, 16, 102), rgb(231, 158, 27));
  color: white;
}

.pf_12 {
  background-image: repeating-radial-gradient(
    circle at center center,
    rgb(241, 43, 239),
    rgb(239, 246, 244) 5px
  );
  color: black;
}

.pf_13 {
  background-image: repeating-radial-gradient(
    circle at center center,
    rgb(81, 9, 72),
    rgb(72, 90, 223),
    rgb(162, 119, 27),
    rgb(34, 134, 255),
    rgb(65, 217, 176),
    rgb(214, 56, 162),
    rgb(118, 213, 206) 1px
  );
  color: white;
}

.pf_14 {
  background-image: repeating-radial-gradient(
    circle at 17% 32%,
    rgb(235, 243, 60),
    rgb(149, 112, 197),
    rgb(115, 252, 224),
    rgb(116, 71, 5),
    rgb(223, 46, 169),
    rgb(73, 80, 75),
    rgb(231, 248, 17) 2px
  );
  color: white;
}

.pf_15 {
  background-image: radial-gradient(
      circle at 24% 76%,
      hsl(112, 49%, 26%) 0%,
      hsl(112, 49%, 26%) 14%,
      transparent 14%,
      transparent 100%
    ),
    radial-gradient(
      circle at 76% 76%,
      hsl(112, 49%, 26%) 0%,
      hsl(112, 49%, 26%) 14%,
      transparent 14%,
      transparent 100%
    ),
    radial-gradient(
      circle at 76% 24%,
      hsl(112, 49%, 26%) 0%,
      hsl(112, 49%, 26%) 14%,
      transparent 14%,
      transparent 100%
    ),
    radial-gradient(
      circle at 24% 24%,
      hsl(112, 49%, 26%) 0%,
      hsl(112, 49%, 26%) 14%,
      transparent 14%,
      transparent 100%
    ),
    radial-gradient(
      circle at center center,
      rgb(1, 61, 23) 0%,
      rgb(1, 61, 23) 71%,
      transparent 71%,
      transparent 100%
    ),
    linear-gradient(90deg, hsl(112, 49%, 26%), hsl(112, 49%, 26%));
  background-size: 59px 59px;
  color: white;
}

.pf_16 {
  background-image: radial-gradient(
      circle at 24% 76%,
      rgb(114, 6, 53) 0%,
      rgb(114, 6, 53) 14%,
      transparent 14%,
      transparent 100%
    ),
    radial-gradient(
      circle at 76% 76%,
      rgb(114, 6, 53) 0%,
      rgb(114, 6, 53) 14%,
      transparent 14%,
      transparent 100%
    ),
    radial-gradient(
      circle at 76% 24%,
      rgb(114, 6, 53) 0%,
      rgb(114, 6, 53) 14%,
      transparent 14%,
      transparent 100%
    ),
    radial-gradient(
      circle at 24% 24%,
      rgb(114, 6, 53) 0%,
      rgb(114, 6, 53) 14%,
      transparent 14%,
      transparent 100%
    ),
    radial-gradient(
      circle at center center,
      rgb(196, 15, 87) 0%,
      rgb(196, 15, 87) 71%,
      transparent 71%,
      transparent 100%
    ),
    linear-gradient(90deg, rgb(114, 6, 53), rgb(114, 6, 53));
  background-size: 28px 28px;
  color: white;
}

.pf_17 {
  background-image: radial-gradient(
      circle at 24% 76%,
      rgb(33, 5, 66) 0%,
      rgb(33, 5, 66) 20%,
      transparent 20%,
      transparent 100%
    ),
    radial-gradient(
      circle at 76% 76%,
      rgb(33, 5, 66) 0%,
      rgb(33, 5, 66) 20%,
      transparent 20%,
      transparent 100%
    ),
    radial-gradient(
      circle at 76% 24%,
      rgb(33, 5, 66) 0%,
      rgb(33, 5, 66) 20%,
      transparent 20%,
      transparent 100%
    ),
    radial-gradient(
      circle at 24% 24%,
      rgb(33, 5, 66) 0%,
      rgb(33, 5, 66) 20%,
      transparent 20%,
      transparent 100%
    ),
    radial-gradient(
      circle at center center,
      rgb(54, 3, 88) 0%,
      rgb(54, 3, 88) 71%,
      transparent 71%,
      transparent 100%
    ),
    linear-gradient(90deg, rgb(33, 5, 66), rgb(33, 5, 66));
  background-size: 19px 19px;
  color: white;
}

.pf_18 {
  background-image: radial-gradient(
    circle at center center,
    rgb(59, 135, 192) 0%,
    rgb(59, 135, 192) 15%,
    rgb(61, 152, 201) 15%,
    rgb(61, 152, 201) 70%,
    rgb(63, 169, 209) 70%,
    rgb(63, 169, 209) 84%,
    rgb(65, 186, 218) 84%,
    rgb(65, 186, 218) 100%
  );
  background-size: 41px 41px;
  color: white;
}

.pf_19 {
  background-image: repeating-radial-gradient(
      circle at center center,
      rgba(249, 92, 47, 0.4) 0px,
      rgba(249, 92, 47, 0.4) 3px,
      transparent 3px,
      transparent 7px,
      rgba(220, 87, 48, 0.4) 7px,
      rgba(220, 87, 48, 0.4) 19px,
      transparent 19px,
      transparent 23px,
      rgba(132, 72, 51, 0.4) 23px,
      rgba(132, 72, 51, 0.4) 33px
    ),
    repeating-linear-gradient(
      0deg,
      rgb(0, 0, 0) 0px,
      rgb(0, 0, 0) 2px,
      rgb(0, 0, 0) 2px,
      rgb(0, 0, 0) 9px,
      rgb(0, 0, 0) 9px,
      rgb(0, 0, 0) 15px,
      rgb(0, 0, 0) 15px,
      rgb(0, 0, 0) 26px
    );
  background-size: 60px 60px;
  color: white;
}

.pf_20 {
  background-image: radial-gradient(
      circle at 25% 75%,
      rgb(255, 163, 44) 0%,
      rgb(255, 163, 44) 20%,
      transparent 20%,
      transparent 100%
    ),
    radial-gradient(
      circle at 75% 75%,
      rgb(255, 163, 44) 0%,
      rgb(255, 163, 44) 20%,
      transparent 20%,
      transparent 100%
    ),
    radial-gradient(
      circle at 75% 25%,
      rgb(255, 163, 44) 0%,
      rgb(255, 163, 44) 20%,
      transparent 20%,
      transparent 100%
    ),
    radial-gradient(
      circle at 25% 25%,
      rgb(255, 163, 44) 0%,
      rgb(255, 163, 44) 20%,
      transparent 20%,
      transparent 100%
    ),
    radial-gradient(
      circle at center center,
      rgb(235, 127, 52) 0%,
      rgb(235, 127, 52) 71%,
      transparent 71%,
      transparent 100%
    ),
    linear-gradient(90deg, rgb(255, 163, 44), rgb(255, 163, 44));
  background-size: 100px 100px;
  color: black;
}

.upload_modal {
  max-width: 500px;
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.upload_modal .modal_header {
  padding: 1rem;
  border-bottom: 1px solid;
}

.upload_modal .modal_header h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}

.upload_modal .modal_content {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#fileuploader_bg {
  width: 100%;
  min-height: 120px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload_label {
  font-size: 0.9rem;
  text-align: center;
}

.button-group {
  display: flex;
  gap: 10px;
  margin-top: 1rem;
}


.prograd1,
.pgrad1 {
  background: linear-gradient(to top, #f33, #800000) !important;
}

.prograd2,
.pgrad2 {
  background: linear-gradient(to top, #f63, #4d1300) !important;
}

.prograd3,
.pgrad3 {
  background: linear-gradient(to top, #f93, #4d2600) !important;
}

.prograd4,
.pgrad4 {
  background: linear-gradient(to top, #fc3, #806000) !important;
}

.prograd5,
.pgrad5 {
  background: linear-gradient(to top, #cc0, #4d4d00) !important;
}

.prograd6,
.pgrad6 {
  background: linear-gradient(to top, #9c0, #394d00) !important;
}

.prograd7,
.pgrad7 {
  background: linear-gradient(to top, #59b300, #264d00) !important;
}

.prograd8,
.pgrad8 {
  background: linear-gradient(to top, #829356, #2b301c) !important;
}

.prograd9,
.pgrad9 {
  background: linear-gradient(to top, #008000, #001a00) !important;
}

.prograd10,
.pgrad10 {
  background: linear-gradient(to top, #00e639, #00330d) !important;
}

.prograd11,
.pgrad11 {
  background: linear-gradient(to top, #00e673, #063) !important;
}

.prograd12,
.pgrad12 {
  background: linear-gradient(to top, #00e6ac, #004d39) !important;
}

.prograd13,
.pgrad13 {
  background: linear-gradient(to top, #0cc, #004d4d) !important;
}

.prograd14,
.pgrad14 {
  background: linear-gradient(to top, #03add8, #013d4b) !important;
}

.prograd15,
.pgrad15 {
  background: linear-gradient(to top, #36f, #002080) !important;
}

.prograd16,
.pgrad16 {
  background: linear-gradient(to top, #107896, #073845) !important;
}

.prograd17,
.pgrad17 {
  background: linear-gradient(to top, #004d99, #66b3ff) !important;
}

.prograd18,
.pgrad18 {
  background: linear-gradient(to top, #63f, #c6b3ff) !important;
}

.prograd19,
.pgrad19 {
  background: linear-gradient(to top, #93f, #d9b3ff) !important;
}

.prograd20,
.pgrad20 {
  background: linear-gradient(to top, #c3f, #ecb3ff) !important;
}

.prograd21,
.pgrad21 {
  background: linear-gradient(to top, #f3f, #ffb3ff) !important;
}

.prograd22,
.pgrad22 {
  background: linear-gradient(to top, #f3c, #ff99e6) !important;
}

.prograd23,
.pgrad23 {
  background: linear-gradient(to top, #f39, #ffb3d9) !important;
}

.prograd24,
.pgrad24 {
  background: linear-gradient(to top, #f36, #ffb3c6) !important;
}

.prograd25,
.pgrad25 {
  background: linear-gradient(to top, #40e0d0, #ff8c00, #ff0080) !important;
}

.prograd26,
.pgrad26 {
  background: linear-gradient(to top, #11998e, #38ef7d) !important;
}

.prograd27,
.pgrad27 {
  background: linear-gradient(to top, #108dc7, #ef8e38) !important;
}

.prograd28,
.pgrad28 {
  background: linear-gradient(to top, #fc5c7d, #6a82fb) !important;
}

.prograd29,
.pgrad29 {
  background: linear-gradient(to top, #fc466b, #3f5efb) !important;
}

.prograd30,
.pgrad30 {
  background: linear-gradient(to top, #c94b4b, #4b134f) !important;
}

.prograd31,
.pgrad31 {
  background: linear-gradient(to top, #00f260, #0575e6) !important;
}

.prograd32,
.pgrad32 {
  background: linear-gradient(to top, #fc4a1a, #f7b733) !important;
}

.prograd33,
.pgrad33 {
  background: linear-gradient(to top, #22c1c3, #fdbb2d) !important;
}

.prograd34,
.pgrad34 {
  background: linear-gradient(to top, #7f00ff, #e100ff) !important;
}

.prograd35,
.pgrad35 {
  background: linear-gradient(to top, #67b26f, #4ca2cd) !important;
}

.prograd36,
.pgrad36 {
  background: linear-gradient(to top, #ee0979, #ff6a00) !important;
}

.prograd37,
.pgrad37 {
  background: linear-gradient(to top, #00c3ff, #ffff1c) !important;
}

.prograd38,
.pgrad38 {
  background: linear-gradient(to top, #fc00ff, #00dbde) !important;
}

.prograd39,
.pgrad39 {
  background: linear-gradient(to top, #833ab4, #fd1d1d, #fcb045) !important;
}

.prograd40,
.pgrad40 {
  background: linear-gradient(to top, #43cea2, #185a9d) !important;
}

.prograd41,
.pgrad41 {
  background: linear-gradient(to top, #bdc3c7, #2c3e50) !important;
}

.prograd42,
.pgrad42 {
  background: linear-gradient(to top, #373b44, #4286f4) !important;
}

.prograd43,
.pgrad43 {
  background: linear-gradient(to top, #2980b9, #6dd5fa, #fff) !important;
}

.prograd44,
.pgrad44 {
  background: linear-gradient(to top, #f09, #493240) !important;
}

.prograd45,
.pgrad45 {
  background: linear-gradient(to top, #f953c6, #b91d73) !important;
}

.prograd46,
.pgrad46 {
  background: linear-gradient(to left, #c31432, #240b36) !important;
}

.prograd47,
.pgrad47 {
  background: linear-gradient(to top, #dd3e54, #6be585) !important;
}

.prograd48,
.pgrad48 {
  background: linear-gradient(to top, #8360c3, #2ebf91) !important;
}

.prograd49,
.pgrad49 {
  background: linear-gradient(to top, #544a7d, #ffd452) !important;
}

.prograd50,
.pgrad50 {
  background: linear-gradient(to top, #009fff, #ec2f4b) !important;
}

.prograd51,
.pgrad51 {
  background: linear-gradient(to top, #59c173, #a17fe0, #5d26c1) !important;
}

.prograd52,
.pgrad52 {
  background: linear-gradient(to top, #005aa7, #fffde4) !important;
}

.prograd53,
.pgrad53 {
  background: linear-gradient(to top, #da4453, #89216b) !important;
}

.prograd54,
.pgrad54 {
  background: linear-gradient(to top, #ad5389, #3c1053) !important;
}

.prograd55,
.pgrad55 {
  background: linear-gradient(to top, #a8c0ff, #3f2b96) !important;
}

.prograd56,
.pgrad56 {
  background: linear-gradient(to top, #333, #dd1818) !important;
}

.prograd57,
.pgrad57 {
  background: linear-gradient(to top, #108dc7, #ef8e38) !important;
}

.prograd58,
.pgrad58 {
  background: linear-gradient(to top, #23074d, #cc5333) !important;
}

.prograd59,
.pgrad59 {
  background: linear-gradient(to top, #fffbd5, #b20a2c) !important;
}

.prograd60,
.pgrad60 {
  background: linear-gradient(to top, #0f0c29, #302b63, #24243e) !important;
}

.prograd61,
.pgrad61 {
  background: linear-gradient(to top, #800080, #ffc0cb) !important;
}

.prograd62,
.pgrad62 {
  background: linear-gradient(to top, #00f260, #0575e6) !important;
}

.prograd63,
.pgrad63 {
  background: linear-gradient(
    to top,
    #667db6,
    #0082c8,
    #ec38bc,
    #fdeff9
  ) !important;
}

.prograd64,
.pgrad64 {
  background: linear-gradient(to top, #e1eec3, #f05053) !important;
}

.prograd65,
.pgrad65 {
  background: linear-gradient(
    to top,
    #03001e,
    #7303c0,
    #ec38bc,
    #fdeff9
  ) !important;
}

.prograd66,
.pgrad66 {
  background: linear-gradient(to top, #1a2a6c, #b21f1f, #fdbb2d) !important;
}

.prograd67,
.pgrad67 {
  background: linear-gradient(to top, #000, #0f9b0f) !important;
}

.prograd68,
.pgrad68 {
  background: linear-gradient(to top, #36d1dc, #5b86e5) !important;
}

.prograd69,
.pgrad69 {
  background: linear-gradient(to top, #3a1c71, #d76d77, #ffaf7b) !important;
}

.prograd70,
.pgrad70 {
  background: linear-gradient(to top, #283c86, #45a247) !important;
}

.prograd71,
.pgrad71 {
  background: linear-gradient(to top, #ef3b36, #fff) !important;
}

.prograd72,
.pgrad72 {
  background: linear-gradient(to top, #159957, #155799) !important;
}

.prograd73,
.pgrad73 {
  background: linear-gradient(to top, #000046, #1cb5e0) !important;
}

.prograd74,
.pgrad74 {
  background: linear-gradient(to top, #56ccf2, #2f80ed) !important;
}

.prograd75,
.pgrad75 {
  background: linear-gradient(to top, #eb5757, #000) !important;
}

.prograd76,
.pgrad76 {
  background: linear-gradient(to top, #20002c, #cbb4d4) !important;
}

.prograd77,
.pgrad77 {
  background: linear-gradient(to top, #34e89e, #0f3443) !important;
}

.prograd78,
.pgrad78 {
  background: linear-gradient(to top, #bdc3c7, #2c3e50) !important;
}

.prograd79,
.pgrad79 {
  background: linear-gradient(to top, #a80077, #6f0) !important;
}

.prograd80,
.pgrad80 {
  background: linear-gradient(to top, #000, #656565) !important;
}
.prograd81,
.pgrad81 {
  background: radial-gradient(
    circle,
    #1a001a,
    #330033,
    #4d004d,
    #660066,
    #3a003a,
    #1a001a
  ) !important;
}

.prograd82,
.pgrad82 {
  background: linear-gradient(
    135deg,
    #000000,
    #1a1a1a,
    #333333,
    #4d4d4d,
    #1a1a1a,
    #000000
  ) !important;
}
.prograd83, .pgrad83 { background: linear-gradient(135deg, #ff0080, #7928ca) !important; }
.prograd84, .pgrad84 { background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d) !important; }
.prograd85, .pgrad85 { background: linear-gradient(135deg, #2c3e50, #4ca1af) !important; }
.prograd86, .pgrad86 { background: linear-gradient(135deg, #8e0e00, #1f1c18) !important; }
.prograd87, .pgrad87 { background: linear-gradient(135deg, #fc466b, #3f5efb) !important; }
.prograd88, .pgrad88 { background: linear-gradient(135deg, #7b4397, #dc2430) !important; }
.prograd89, .pgrad89 { background: linear-gradient(135deg, #ff6a00, #ee0979) !important; }
.prograd90, .pgrad90 { background: linear-gradient(135deg, #4ca1af, #c4e0e5) !important; }
.prograd91, .pgrad91 { background: linear-gradient(135deg, #141e30, #243b55) !important; }
.prograd92, .pgrad92 { background: linear-gradient(135deg, #0f2027, #203a43, #2c5364) !important; }
.prograd93, .pgrad93 { background: linear-gradient(135deg, #000000, #434343) !important; }
.prograd94, .pgrad94 { background: linear-gradient(135deg, #3a1c71, #d76d77, #ffaf7b) !important; }
.prograd95, .pgrad95 { background: linear-gradient(135deg, #360033, #0b8793) !important; }
.prograd96, .pgrad96 { background: linear-gradient(135deg, #ff512f, #dd2476) !important; }
.prograd97, .pgrad97 { background: linear-gradient(135deg, #1e130c, #9a8478) !important; }
.prograd98, .pgrad98 { background: linear-gradient(135deg, #ff0099, #493240) !important; }
.prograd99, .pgrad99 { background: linear-gradient(135deg, #0f0c29, #302b63, #24243e) !important; }
.prograd100, .pgrad100 { background: linear-gradient(135deg, #f12711, #f5af19) !important; }
.prograd101, .pgrad101 { background: linear-gradient(135deg, #00c9ff, #92fe9d) !important; }
.prograd102, .pgrad102 { background: linear-gradient(135deg, #f7ff00, #db36a4) !important; }
.prograd103, .pgrad103 { background: linear-gradient(135deg, #43cea2, #185a9d) !important; }
.prograd104, .pgrad104 { background: linear-gradient(135deg, #ff4e50, #f9d423) !important; }
.prograd105, .pgrad105 { background: linear-gradient(135deg, #1f4037, #99f2c8) !important; }
.prograd106, .pgrad106 { background: linear-gradient(135deg, #3ca55c, #b5ac49) !important; }
.prograd107, .pgrad107 { background: linear-gradient(135deg, #41295a, #2f0743) !important; }
.prograd108, .pgrad108 { background: linear-gradient(135deg, #ff9966, #ff5e62) !important; }
.prograd109, .pgrad109 { background: linear-gradient(135deg, #2c3e50, #fd746c) !important; }
.prograd110, .pgrad110 { background: linear-gradient(135deg, #614385, #516395) !important; }
.prograd111, .pgrad111 { background: linear-gradient(135deg, #de6262, #ffb88c) !important; }
.prograd112, .pgrad112 { background: linear-gradient(135deg, #b24592, #f15f79) !important; }
.prograd113, .pgrad113 { background: linear-gradient(135deg, #457fca, #5691c8) !important; }
.prograd114, .pgrad114 { background: linear-gradient(135deg, #f00000, #dc281e) !important; }
.prograd115, .pgrad115 { background: linear-gradient(135deg, #e96443, #904e95) !important; }
.prograd116, .pgrad116 { background: linear-gradient(135deg, #ff7e5f, #feb47b) !important; }
.prograd117, .pgrad117 { background: linear-gradient(135deg, #2193b0, #6dd5ed) !important; }
.prograd118, .pgrad118 { background: linear-gradient(135deg, #c33764, #1d2671) !important; }
.prograd119, .pgrad119 { background: linear-gradient(135deg, #ff6e7f, #bfe9ff) !important; }
.prograd120, .pgrad120 { background: linear-gradient(135deg, #e65c00, #f9d423) !important; }


.color-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.color-picker {
  margin-right: 10px;
}
.color-text-input {
  width: 92%;
  padding: 13px;
  margin-left: 11px;
  border-radius: 10px;
}
.custom-input {
  width: 100%;
  height: 100%;
  padding: 0;
  padding: 8px 12px;
  font-size: 16px;
  border-radius: 100px;
  margin-bottom: -2px;
}

.form-group {
  margin-bottom: 20px; /* Adds spacing between form groups */
}

label {
  margin-bottom: 5px; /* Space between label and input */
}

label i {
  margin-right: 10px; /* Adds space between icon and text */
}

.list_frame {
  width: 45px;
  position: absolute;
  top: -9px;
  left: -5px;
  visibility: visible;
}
.chat_frame {
  position: absolute;
  width: 50px;
  top: -10px;
  left: -6px;
}

.chat_frame.memo10\.gif {
  position: absolute;
  width: 50px;
  top: -12px;
  left: -5px;
}
.chat_frame.memo11\.gif {
  position: absolute;
  width: 48px;
  top: -10px;
  left: -4px;
}
.chat_frame.memo12\.gif {
  position: absolute;
  width: 48px;
  top: -10px;
  left: -4px;
}
.chat_frame.memo13\.gif {
  position: absolute;
  width: 48px;
  top: -10px;
  left: -4px;
}
.chat_frame.memo15\.gif {
  position: absolute;
  width: 48px;
  top: -11px;
  left: -5px;
}
.chat_frame.memo16\.gif {
  position: absolute;
  width: 56px;
  top: -8px;
  left: -9px;
}
.chat_frame.memo18\.gif {
  position: absolute;
  width: 55px;
  top: -7px;
  left: -8px;
}
.chat_frame.memo19\.gif {
  position: absolute;
  width: 53px;
  top: -10px;
  left: -8px;
}
.chat_frame.memo21\.gif {
  position: absolute;
  width: 51px;
  top: -8px;
  left: -6px;
}
.chat_frame.memo22\.gif {
  position: absolute;
  width: 51px;
  top: -8px;
  left: -6px;
}
.chat_frame.memo23\.gif {
  position: absolute;
  width: 51px;
  top: -8px;
  left: -6px;
}
.chat_frame.memo24\.gif {
  position: absolute;
  width: 50px;
  top: -8px;
  left: -5px;
}
.chat_frame.memo2\.gif {
  position: absolute;
  width: 50px;
  top: -10px;
  left: -5px;
}
.chat_frame.memo5\.gif {
  position: absolute;
  width: 49px;
  top: -10px;
  left: -5px;
}
.chat_frame.memo4\.gif {
  position: absolute;
  width: 50px;
  top: -10px;
  left: -5px;
}
.chat_frame.memo6\.gif {
  position: absolute;
  width: 47px;
  top: -9px;
  left: -4px;
}
.chat_frame.memo7\.gif {
  position: absolute;
  width: 47px;
  top: -9px;
  left: -4px;
}
.chat_frame.memo8\.gif {
  position: absolute;
  width: 47px;
  top: -9px;
  left: -4px;
}
.chat_frame.memo9\.gif {
  position: absolute;
  width: 47px;
  top: -9px;
  left: -4px;
}
.chat_frame.memo30\.gif {
  width: 50px;
  top: -6px;
  left: -7px;
}
.list_frame.memo15\.gif {
  width: 44px !important;
  top: -9px;
  left: -4px !important;
}
.list_frame.memo16\.gif {
  width: 51px !important;
  top: -8px !important;
  left: -8px !important;
}
.list_frame.memo17\.gif {
  width: 51px !important;
  top: -10px !important;
  left: -8px !important;
}
.list_frame.memo18\.gif {
  width: 50px !important;
  top: -6px !important;
  left: -9px !important;
}
.list_frame.memo19\.gif {
  width: 50px !important;
  top: -10px !important;
  left: -8px !important;
}
.list_frame.memo21\.gif {
  width: 50px !important;
  top: -8px !important;
  left: -8px !important;
}
.list_frame.memo22\.gif {
  width: 49px !important;
  top: -10px !important;
  left: -7px !important;
}
.list_frame.memo23\.gif {
  width: 49px !important;
  top: -9px !important;
  left: -7px !important;
}
.list_frame.memo24\.gif {
  width: 50px !important;
  top: -10px !important;
  left: -7px !important;
}
.list_frame.memo25\.gif {
  width: 49px !important;
  top: -6px !important;
  left: -7px !important;
}
.list_frame.memo26\.gif {
  width: 50px !important;
  top: -9px !important;
  left: -7px !important;
}
.list_frame.memo27\.gif {
  width: 50px !important;
  top: -9px !important;
  left: -7px !important;
}
.list_frame.memo28\.gif {
  width: 50px !important;
  top: -9px !important;
  left: -7px !important;
}
.list_frame.memo29\.gif {
  width: 50px !important;
  top: -9px !important;
  left: -7px !important;
}
.list_frame.memo5\.gif {
  width: 45px !important;
  top: -9px !important;
  left: -5px !important;
}
.list_frame.memo8\.gif {
  width: 44px !important;
  top: -9px !important;
  left: -4px !important;
}
.list_frame.memo9\.gif {
  width: 44px !important;
  top: -9px !important;
  left: -4px !important;
}
.list_frame.memo30\.gif {
  width: 49px;
  position: absolute;
  top: -7px;
  left: -7px;
}
.usergrad1,
.ugrad1 {
  background: linear-gradient(to top, #ff0000, #990000) !important;
  color: white !important;
}
.usergrad2,
.ugrad2 {
  background: linear-gradient(to top, #ff4500, #993300) !important;
  color: white !important;
}
.usergrad3,
.ugrad3 {
  background: linear-gradient(to top, #ff8c00, #996600) !important;
  color: white !important;
}
.usergrad4,
.ugrad4 {
  background: linear-gradient(to top, #ffd700, #997a00) !important;
  color: white !important;
}
.usergrad5,
.ugrad5 {
  background: linear-gradient(to top, #9acd32, #5a7000) !important;
  color: white !important;
}
.usergrad6,
.ugrad6 {
  background: linear-gradient(to top, #32cd32, #008000) !important;
  color: white !important;
}
.usergrad7,
.ugrad7 {
  background: linear-gradient(to top, #20b2aa, #006666) !important;
  color: white !important;
}
.usergrad8,
.ugrad8 {
  background: linear-gradient(to top, #00bfff, #0066cc) !important;
  color: white !important;
}
.usergrad9,
.ugrad9 {
  background: linear-gradient(to top, #1e90ff, #004488) !important;
  color: white !important;
}
.usergrad10,
.ugrad10 {
  background: linear-gradient(to top, #0000ff, #000099) !important;
  color: white !important;
}
.usergrad11,
.ugrad11 {
  background: linear-gradient(to top, #8a2be2, #4b0082) !important;
  color: white !important;
}
.usergrad12,
.ugrad12 {
  background: linear-gradient(to top, #9932cc, #660066) !important;
  color: white !important;
}
.usergrad13,
.ugrad13 {
  background: linear-gradient(to top, #ba55d3, #800080) !important;
  color: white !important;
}
.usergrad14,
.ugrad14 {
  background: linear-gradient(to top, #ff69b4, #cc3366) !important;
  color: white !important;
}
.usergrad15,
.ugrad15 {
  background: linear-gradient(to top, #ff1493, #b03060) !important;
  color: white !important;
}
.usergrad16,
.ugrad16 {
  background: linear-gradient(to top, #dc143c, #8b0000) !important;
  color: white !important;
}
.usergrad17,
.ugrad17 {
  background: linear-gradient(to top, #b22222, #660000) !important;
  color: white !important;
}
.usergrad18,
.ugrad18 {
  background: linear-gradient(to top, #ff4500, #cc3300) !important;
  color: white !important;
}
.usergrad19,
.ugrad19 {
  background: linear-gradient(to top, #ff6347, #cc4444) !important;
  color: white !important;
}
.usergrad20,
.ugrad20 {
  background: linear-gradient(to top, #ff7f50, #cc5c33) !important;
  color: white !important;
}
.usergrad21,
.ugrad21 {
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.15),
    rgba(0, 0, 0, 0.7)
  ) !important;
  backdrop-filter: blur(8px);
  color: white !important;
} /* Frosted Glassy */
.usergrad22,
.ugrad22 {
  background: linear-gradient(to top, #1b1b1b, #090909) !important;
  color: #e6e6e6 !important;
} /* Shadowed Gothic */
.usergrad23,
.ugrad23 {
  background: linear-gradient(to top, #800080, #da70d6) !important;
  color: white !important;
} /* Purple Dream */
.usergrad24,
.ugrad24 {
  background: linear-gradient(
    to right,
    #ff4500,
    #ff1493,
    #9400d3,
    #20b2aa
  ) !important;
  color: white !important;
} /* Sunset Dream */
.usergrad25,
.ugrad25 {
  background: linear-gradient(
    to top,
    rgba(255, 182, 193, 0.25),
    rgba(255, 105, 180, 0.75)
  ) !important;
  backdrop-filter: blur(10px);
  color: white !important;
} /* Soft Blush */
.usergrad26,
.ugrad26 {
  background: linear-gradient(to top, #292929, #505050) !important;
  color: #b0b0b0 !important;
} /* Metallic Noir */
.usergrad27,
.ugrad27 {
  background: linear-gradient(to top, #3b0a45, #000000) !important;
  color: white !important;
} /* Dark Elegance */
.usergrad28,
.ugrad28 {
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.05),
    rgba(0, 0, 0, 0.5)
  ) !important;
  backdrop-filter: blur(12px);
  color: black !important;
} /* Sleek Glass */
.usergrad29,
.ugrad29 {
  background: linear-gradient(to top, #ff1493, #ff69b4) !important;
  color: white !important;
} /* Sweet Pink */
.usergrad30,
.ugrad30 {
  background: linear-gradient(to top, #006400, #8fbc8f) !important;
  color: white !important;
} /* Serene Forest */
.usergrad31,
.ugrad31 {
  background: linear-gradient(to top, #232c36, #45525b) !important;
  color: white !important;
} /* Steely Blue */
.usergrad32,
.ugrad32 {
  background: linear-gradient(to top, #9b59b6, #f5a623) !important;
  color: white !important;
} /* Lavender Haze */
.usergrad33,
.ugrad33 {
  background: linear-gradient(to top, #003366, #000080) !important;
  color: white !important;
} /* Midnight Blues */
.usergrad34,
.ugrad34 {
  background: linear-gradient(to top, #ff6347, #ff4500) !important;
  color: white !important;
} /* Summer Sunset */
.usergrad35,
.ugrad35 {
  background: linear-gradient(to top, #2c3e50, #2980b9) !important;
  color: white !important;
} /* Evening Sky */
.usergrad36,
.ugrad36 {
  background: linear-gradient(to top, #d500f9, #8e24aa) !important;
  color: white !important;
} /* Electric Purple */
.usergrad37,
.ugrad37 {
  background: linear-gradient(to top, #76d7c4, #1abc9c) !important;
  color: white !important;
} /* Aqua Marine */
.usergrad38,
.ugrad38 {
  background: linear-gradient(to top, #ffcc00, #ff6600) !important;
  color: white !important;
} /* Golden Amber */
.usergrad39,
.ugrad39 {
  background: linear-gradient(to top, #6c4f3d, #8e7c49) !important;
  color: white !important;
} /* Rustic Brown */
.usergrad40,
.ugrad40 {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.2),
    rgba(255, 255, 255, 0.2)
  ) !important;
  backdrop-filter: blur(12px);
  color: white !important;
} /* Frosted Night */
.usergrad41,
.ugrad41 {
  background: linear-gradient(to top, #ff8c00, #ee0979) !important;
  color: white !important;
} /* Warm Fiery Sunset */
.usergrad42,
.ugrad42 {
  background: linear-gradient(to top, #001f3d, #4c5c68) !important;
  color: white !important;
} /* Deep Sea */
.usergrad43,
.ugrad43 {
  background: linear-gradient(to top, #c0392b, #8e44ad) !important;
  color: white !important;
} /* Crimson Romance */
.usergrad44,
.ugrad44 {
  background: linear-gradient(to top, #ff6347, #1e90ff) !important;
  color: white !important;
} /* Fire & Ice */
.usergrad45,
.ugrad45 {
  background: linear-gradient(to top, #2f4f4f, #20b2aa) !important;
  color: white !important;
} /* Sea Breeze */
.usergrad46,
.ugrad46 {
  background: linear-gradient(to top, #fad0c4, #ffd1ff) !important;
  color: black !important;
} /* Soft Rose */
.usergrad47,
.ugrad47 {
  background: linear-gradient(to top, #383838, #5f6366) !important;
  color: white !important;
} /* Minimal Dark */
.usergrad48,
.ugrad48 {
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.1),
    rgba(0, 0, 0, 0.4)
  ) !important;
  backdrop-filter: blur(10px);
  color: white !important;
} /* Ice Frost */
.usergrad49,
.ugrad49 {
  background: linear-gradient(to top, #a64d79, #9b59b6) !important;
  color: white !important;
} /* Violet Dream */
.usergrad50,
.ugrad50 {
  background: linear-gradient(to top, #ff9a8b, #ffb3b3) !important;
  color: white !important;
} /* Pastel Delight */
.usergrad51,
.ugrad51 {
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.05),
    rgba(0, 128, 128, 0.4)
  ) !important;
  backdrop-filter: blur(10px);
  color: white !important;
} /* Ocean Breeze */
.usergrad52,
.ugrad52 {
  background: linear-gradient(to top, #b2f2bb, #49be6e) !important;
  color: white !important;
} /* Minty Green */
.usergrad53,
.ugrad53 {
  background: linear-gradient(to top, #f7b7a3, #f1c4b3) !important;
  color: white !important;
} /* Peach Glow */
.usergrad54,
.ugrad54 {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.05),
    rgba(204, 0, 255, 0.3)
  ) !important;
  backdrop-filter: blur(8px);
  color: white !important;
} /* Purple Mist */
.usergrad55,
.ugrad55 {
  background: linear-gradient(to top, #2d3436, #dfe6e9) !important;
  color: white !important;
} /* Industrial Elegance */
.usergrad56,
.ugrad56 {
  background: linear-gradient(to top, #ab83a1, #d9a7c7) !important;
  color: white !important;
} /* Mauve Sunset */
.usergrad57,
.ugrad57 {
  background: linear-gradient(to top, #f06d06, #ff5722) !important;
  color: white !important;
} /* Fiery Orange */
.usergrad58,
.ugrad58 {
  background: linear-gradient(to top, #30cfd0, #330867) !important;
  color: white !important;
} /* Deep Turquoise */
.usergrad59,
.ugrad59 {
  background: linear-gradient(to top, #8e44ad, #e91e63) !important;
  color: white !important;
} /* Magenta Radiance */
.usergrad60,
.ugrad60 {
  background: linear-gradient(to top, #003366, #3366cc) !important;
  color: white !important;
} /* Royal Ocean */
.usergrad61,
.ugrad61 {
  background: linear-gradient(to top, #a8e063, #56ab2f) !important;
  color: white !important;
} /* Green Glow */
.usergrad62,
.ugrad62 {
  background: linear-gradient(to top, #0a3d62, #1c4f73) !important;
  color: white !important;
} /* Stormy Seas */
.usergrad63,
.ugrad63 {
  background: linear-gradient(to top, #ff477e, #f44336) !important;
  color: white !important;
} /* Bold Red */
.usergrad64,
.ugrad64 {
  background: linear-gradient(to top, #1a535c, #4ecdc4) !important;
  color: white !important;
} /* Tropical Oasis */
.usergrad65,
.ugrad65 {
  background: linear-gradient(
    to top,
    rgba(255, 20, 147, 0.3),
    rgba(255, 20, 147, 0.7)
  ) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}
.usergrad66,
.ugrad66 {
  background: linear-gradient(
    to top,
    rgba(255, 69, 0, 0.3),
    rgba(255, 69, 0, 0.7)
  ) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}
.usergrad67,
.ugrad67 {
  background: linear-gradient(
    to top,
    rgba(255, 0, 0, 0.3),
    rgba(255, 0, 0, 0.7)
  ) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}
.usergrad68,
.ugrad68 {
  background: linear-gradient(
    to top,
    rgba(255, 99, 71, 0.3),
    rgba(255, 99, 71, 0.7)
  ) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}
.usergrad69,
.ugrad69 {
  background: linear-gradient(
    to top,
    rgba(255, 165, 0, 0.3),
    rgba(255, 165, 0, 0.7)
  ) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}
.usergrad70,
.ugrad70 {
  background: linear-gradient(
    to top,
    rgba(0, 128, 0, 0.3),
    rgba(0, 128, 0, 0.7)
  ) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}
.usergrad71,
.ugrad71 {
  background: linear-gradient(
    to top,
    rgba(0, 0, 255, 0.3),
    rgba(0, 0, 255, 0.7)
  ) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}
.usergrad72,
.ugrad72 {
  background: linear-gradient(
    to top,
    rgba(0, 255, 255, 0.3),
    rgba(0, 255, 255, 0.7)
  ) !important;
  backdrop-filter: blur(8px);
  color: black !important;
}
.usergrad73,
.ugrad73 {
  background: linear-gradient(
    to top,
    rgba(138, 43, 226, 0.3),
    rgba(138, 43, 226, 0.7)
  ) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}
.usergrad74,
.ugrad74 {
  background: linear-gradient(
    to top,
    rgba(255, 105, 180, 0.3),
    rgba(255, 105, 180, 0.7)
  ) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}
.usergrad75,
.ugrad75 {
  background: linear-gradient(
    to top,
    rgba(0, 255, 127, 0.3),
    rgba(0, 255, 127, 0.7)
  ) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}
.usergrad76,
.ugrad76 {
  background: linear-gradient(
    to top,
    rgba(240, 128, 128, 0.3),
    rgba(240, 128, 128, 0.7)
  ) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}
.usergrad77,
.ugrad77 {
  background: linear-gradient(
    to top,
    rgba(255, 69, 0, 0.3),
    rgba(255, 69, 0, 0.6)
  ) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}
.usergrad78,
.ugrad78 {
  background: linear-gradient(
    to top,
    rgba(32, 178, 170, 0.3),
    rgba(32, 178, 170, 0.7)
  ) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}
.usergrad79,
.ugrad79 {
  background: linear-gradient(
    to top,
    rgba(105, 105, 105, 0.3),
    rgba(105, 105, 105, 0.7)
  ) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}
.usergrad80,
.ugrad80 {
  background: linear-gradient(
    to top,
    rgba(70, 130, 180, 0.3),
    rgba(70, 130, 180, 0.7)
  ) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}
.usergrad81,
.ugrad81 {
  background: linear-gradient(
    to top,
    rgba(255, 140, 0, 0.3),
    rgba(255, 140, 0, 0.7)
  ) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}
.usergrad82,
.ugrad82 {
  background: linear-gradient(
    to top,
    rgba(128, 0, 128, 0.3),
    rgba(128, 0, 128, 0.7)
  ) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}
.usergrad83,
.ugrad83 {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.3),
    rgba(0, 0, 0, 0.6)
  ) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}
.usergrad84,
.ugrad84 {
  background: linear-gradient(
    to top,
    rgba(255, 0, 255, 0.3),
    rgba(255, 0, 255, 0.6)
  ) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}
.usergrad85,
.ugrad85 {
background-image: radial-gradient(circle at 24% 76%, hsl(112,49%,26%) 0%, hsl(112,49%,26%) 14%,transparent 14%, transparent 100%),radial-gradient(circle at 76% 76%, hsl(112,49%,26%) 0%, hsl(112,49%,26%) 14%,transparent 14%, transparent 100%),radial-gradient(circle at 76% 24%, hsl(112,49%,26%) 0%, hsl(112,49%,26%) 14%,transparent 14%, transparent 100%),radial-gradient(circle at 24% 24%, hsl(112,49%,26%) 0%, hsl(112,49%,26%) 14%,transparent 14%, transparent 100%),radial-gradient(circle at center center, rgb(1, 61, 23) 0%, rgb(1, 61, 23) 71%,transparent 71%, transparent 100%),linear-gradient(90deg, hsl(112,49%,26%),hsl(112,49%,26%)); background-size: 59px 59px;  backdrop-filter: blur(8px);
  color: white !important;
}

.usergrad86,
.ugrad86 {
background-image: radial-gradient(circle at center center, rgb(59, 135, 192) 0%, rgb(59, 135, 192) 15%,rgb(61, 152, 201) 15%, rgb(61, 152, 201) 70%,rgb(63, 169, 209) 70%, rgb(63, 169, 209) 84%,rgb(65, 186, 218) 84%, rgb(65, 186, 218) 100%); background-size: 41px 41px;  backdrop-filter: blur(8px);
  color: white !important;
}

.usergrad87,
.ugrad87 {
background-image: radial-gradient(circle at center center, rgba(233, 162, 49,0.3) 0%, rgba(233, 162, 49,0.3) 78%,transparent 78%, transparent 100%),radial-gradient(circle at center center, rgba(251, 44, 123,0.3) 0%, rgba(251, 44, 123,0.3) 87%,transparent 87%, transparent 100%),radial-gradient(circle at center center, rgba(195, 90, 242,0.3) 0%, rgba(195, 90, 242,0.3) 80%,transparent 80%, transparent 100%),radial-gradient(circle at center center, rgba(21, 21, 61,0.3) 0%, rgba(21, 21, 61,0.3) 70%,transparent 70%, transparent 100%),linear-gradient(90deg, rgb(255,255,255),rgb(255,255,255)); background-size: 38px 38px;  backdrop-filter: blur(8px);
  color: white !important;
}

.usergrad88,
.ugrad88 {
background-image: radial-gradient(circle 29px at center center, hsla(270,86%,89%,0.15) 0%, hsla(270,86%,89%,0.15) 79%,transparent 79%, transparent 80%,transparent 80%, transparent 100%),linear-gradient(270deg, hsla(270,86%,89%,0.15) 0%, hsla(270,86%,89%,0.15) 8%,transparent 8%, transparent 100%),linear-gradient(0deg, hsla(270,86%,89%,0.15) 0%, hsla(270,86%,89%,0.15) 10%,transparent 10%, transparent 100%),linear-gradient(180deg, hsla(270,86%,89%,0.15) 0%, hsla(270,86%,89%,0.15) 10%,transparent 10%, transparent 100%),linear-gradient(90deg, hsla(270,86%,89%,0.15) 0%, hsla(270,86%,89%,0.15) 8%,transparent 8%, transparent 100%),linear-gradient(90deg, rgb(20,20,20),rgb(20,20,20)); background-size: 49px 49px;  backdrop-filter: blur(8px);
  color: white !important;
}

.usergrad89,
.ugrad89 {
background-image: radial-gradient(circle 90px at center center, hsla(94,85%,43%,0.15) 0%, hsla(94,85%,43%,0.15) 23%,transparent 23%, transparent 66%,transparent 66%, transparent 100%),linear-gradient(270deg, hsla(94,85%,43%,0.15) 0%, hsla(94,85%,43%,0.15) 8%,transparent 8%, transparent 100%),linear-gradient(0deg, hsla(94,85%,43%,0.15) 0%, hsla(94,85%,43%,0.15) 10%,transparent 10%, transparent 100%),linear-gradient(180deg, hsla(94,85%,43%,0.15) 0%, hsla(94,85%,43%,0.15) 10%,transparent 10%, transparent 100%),linear-gradient(90deg, hsla(94,85%,43%,0.15) 0%, hsla(94,85%,43%,0.15) 8%,transparent 8%, transparent 100%),linear-gradient(90deg, rgb(20,20,20),rgb(20,20,20)); background-size: 41px 41px;  backdrop-filter: blur(8px);
  color: white !important;
}

.usergrad90,
.ugrad90 {
background-image: repeating-radial-gradient(circle at center center, rgba(171,78,218, 0.3) 0px, rgba(171,78,218, 0.3) 7px,transparent 7px, transparent 10px),linear-gradient(67.5deg, hsl(274,72%,18%) 0%,hsl(274,72%,18%) 55%); background-size: 18px 18px;  backdrop-filter: blur(8px);
  color: white !important;
}
.usergrad91, .ugrad91 {
  background: linear-gradient(135deg, #4b0010, #8b1e3f) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}

.usergrad92, .ugrad92 {
  background: linear-gradient(120deg, #1f0033, #5c2d91) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}

.usergrad93, .ugrad93 {
  background: radial-gradient(circle, #003d3d, #001a1a) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}

.usergrad94, .ugrad94 {
  background: conic-gradient(from 180deg, #1a1a00, #666600, #1a1a00) !important;
  backdrop-filter: blur(9px);
  color: white !important;
}

.usergrad95, .ugrad95 {
  background: linear-gradient(to bottom right, #0f1b0f, #274d27) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}

.usergrad96, .ugrad96 {
  background: conic-gradient(from 45deg, #1b0033, #330033, #1b0033) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}

.usergrad97, .ugrad97 {
  background: linear-gradient(135deg, #001a2e, #004466) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}

.usergrad98, .ugrad98 {
  background: radial-gradient(circle, #202020, #000000) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}

.usergrad99, .ugrad99 {
  background: linear-gradient(145deg, #30001e, #60003d) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}

.usergrad100, .ugrad100 {
  background: linear-gradient(to top, #0c0c0c, #1f1f1f, #000000) !important;
  backdrop-filter: blur(10px);
  color: white !important;
}

.usergrad101, .ugrad101 {
  background: conic-gradient(from 90deg, #003300, #004d00, #003300) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}

.usergrad102, .ugrad102 {
  background: linear-gradient(to right, #1a0033, #330066, #1a0033) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}

.usergrad103, .ugrad103 {
  background: radial-gradient(circle at center, #2a1a00, #4d3300) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}

.usergrad104, .ugrad104 {
  background: conic-gradient(from 0deg, #002222, #005555, #002222) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}

.usergrad105, .ugrad105 {
  background: linear-gradient(to bottom, #110011, #330033, #110011) !important;
  backdrop-filter: blur(9px);
  color: white !important;
}

.usergrad106, .ugrad106 {
  background: linear-gradient(to top right, #2e0f00, #5e1a00) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}

.usergrad107, .ugrad107 {
  background: radial-gradient(circle, #1a0033, #00001a) !important;
  backdrop-filter: blur(9px);
  color: white !important;
}

.usergrad108, .ugrad108 {
  background: conic-gradient(from 30deg, #004040, #002020, #004040) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}

.usergrad109, .ugrad109 {
  background: linear-gradient(to top left, #333300, #666600) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}

.usergrad110, .ugrad110 {
  background: linear-gradient(to bottom right, #1a0000, #660000, #1a0000) !important;
  backdrop-filter: blur(9px);
  color: white !important;
}

.usergrad111, .ugrad111 {
  background: radial-gradient(circle at 30% 30%, #111144, #000022) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}

.usergrad112, .ugrad112 {
  background: conic-gradient(from 45deg, #112211, #445544, #112211) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}

.usergrad113, .ugrad113 {
  background: linear-gradient(to right, #221100, #443300, #221100) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}

.usergrad114, .ugrad114 {
  background: linear-gradient(to top, #100033, #3a0066) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}

.usergrad115, .ugrad115 {
  background: radial-gradient(circle, #001a0d, #00331a, #001a0d) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}

.usergrad116, .ugrad116 {
  background: conic-gradient(from 180deg, #002222, #004444, #002222) !important;
  backdrop-filter: blur(9px);
  color: white !important;
}

.usergrad117, .ugrad117 {
  background: linear-gradient(135deg, #29002a, #52004f) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}

.usergrad118, .ugrad118 {
  background: radial-gradient(circle at center, #0a0a0a, #1a1a1a, #000000) !important;
  backdrop-filter: blur(9px);
  color: white !important;
}

.usergrad119, .ugrad119 {
  background: conic-gradient(from 300deg, #4d1a00, #993300, #4d1a00) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}

.usergrad120, .ugrad120 {
  background: linear-gradient(to bottom right, #003333, #005555, #003333) !important;
  backdrop-filter: blur(8px);
  color: white !important;
}


img.frame_class {
  height: 45px;
  left: -4px;
  width: 43px;
  position: absolute;
  top: -5px;
}

.frame-container {
  border: 1px solid #ccc;
  text-align: center;
}

div.frame-container img {
  height: 50px;
  width: 50px;
}

.frame-responsive {
  padding: 6px;
  float: left;
  width: 25%;
}

@media only screen and (max-width: 700px) {
  .frame-responsive {
    width: 33%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .frame-responsive {
    width: 33%;
  }
}
img.mySmile {
  height: 23px;
  position: absolute;
  margin-left: 5px;
  margin-top: -7px;
}
.over2 {
  position: absolute;
  display: inline-block;
  left: -27px;
  top: -41px;
  z-index: 9999;
  width: 190px;
}

.framelist1 {
  background: url(../frames/memo1.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}
.framelist2 {
  background: url(../frames/memo2.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}
.framelist3 {
  background: url(../frames/memo3.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}
.framelist4 {
  background: url(../frames/memo4.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}
.framelist5 {
  background: url(../frames/memo5.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}
.framelist6 {
  background: url(../frames/memo6.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}
.framelist6 {
  background: url(../frames/memo6.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}
.framelist7 {
  background: url(../frames/memo7.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}
.framelist8 {
  background: url(../frames/memo8.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}

.framelist9 {
  background: url(../frames/memo9.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}
.framelist10 {
  background: url(../frames/memo10.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}
.framelist11 {
  background: url(../frames/memo11.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}
.framelist12 {
  background: url(../frames/memo12.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}
.framelist13 {
  background: url(../frames/memo13.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}
.framelist14 {
  background: url(../frames/memo14.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}
.framelist15 {
  background: url(../frames/memo15.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}
.framelist16 {
  background: url(../frames/memo16.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}
.framelist17 {
  background: url(../frames/memo17.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}
.framelist18 {
  background: url(../frames/memo18.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}
.framelist19 {
  background: url(../frames/memo19.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}
.framelist20 {
  background: url(../frames/memo20.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}
.framelist21 {
  background: url(../frames/memo21.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}
.framelist22 {
  background: url(../frames/memo22.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}
.framelist23 {
  background: url(../frames/memo23.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}
.framelist24 {
  background: url(../frames/memo24.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}
.framelist25 {
  background: url(../frames/memo25.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}
.framelist26 {
  background: url(../frames/memo26.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}

.framelist27 {
  background: url(../frames/memo27.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}
.framelist28 {
  background: url(../frames/memo28.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}
.framelist29 {
  background: url(../frames/memo29.gif);
  background-size: 100%;
  width: 50px;
  height: 50px;
}

.frame1 {
  background: url(../frames/memo1.gif);
  height: 63px;
  left: -5px;
  width: 56px;
  position: absolute;
  top: -11px;
  background-size: 46px;
  background-repeat: no-repeat;
}

.chat_avatar .frame1 {
  height: 60px;
  left: -5px;
  width: 60px;
  top: -11px;
  background-size: 47px;
}

.frame2 {
  background: url(../frames/memo2.gif);
  height: 63px;
  left: -4px;
  width: 56px;
  position: absolute;
  top: -9px;
  background-size: 44px;
  background-repeat: no-repeat;
}

.chat_avatar .frame2 {
  height: 60px;
  left: -3px;
  width: 60px;
  top: -8px;
  background-size: 43px;
}

.frame3 {
  background: url(../frames/memo3.gif);
  height: 63px;
  left: -5px;
  width: 56px;
  position: absolute;
  top: -11px;
  background-size: 46px;
  background-repeat: no-repeat;
}

.chat_avatar .frame3 {
  height: 60px;
  left: -5px;
  width: 60px;
  top: -10px;
  background-size: 46px;
}

.frame4 {
  background: url(../frames/memo4.gif);
  height: 53px;
  left: -4px;
  width: 47px;
  position: absolute;
  top: -9px;
  background-size: 43px;
  background-repeat: no-repeat;
}

.chat_avatar .frame4 {
  height: 60px;
  left: -3px;
  width: 60px;
  top: -8px;
  background-size: 42px;
}

.frame5 {
  background: url(../frames/memo5.gif);
  height: 63px;
  left: -4px;
  width: 46px;
  position: absolute;
  top: -8px;
  background-size: 43px;
  background-repeat: no-repeat;
}

.chat_avatar .frame5 {
  height: 60px;
  left: -3px;
  width: 60px;
  top: -10px;
  background-size: 55px;
}

.frame6 {
  background: url(../frames/memo6.gif);
  height: 51px;
  left: -3px;
  width: 45px;
  position: absolute;
  top: -8px;
  background-size: 43px;
  background-repeat: no-repeat;
}

.chat_avatar .frame6 {
  height: 60px;
  left: -3px;
  width: 60px;
  top: -10px;
  background-size: 54px;
  background-repeat: no-repeat;
}

.frame7 {
  background: url(../frames/memo7.gif);
  height: 63px;
  left: -3px;
  width: 56px;
  position: absolute;
  top: -8px;
  background-size: 43px;
  background-repeat: no-repeat;
}

.chat_avatar .frame7 {
  height: 60px;
  left: -4px;
  width: 60px;
  top: -7px;
  background-size: 43px;
}

.frame8 {
  background: url(../frames/memo8.gif);
  height: 52px;
  left: -3px;
  width: 56px;
  position: absolute;
  top: -9px;
  background-size: 43px;
  background-repeat: no-repeat;
}

.chat_avatar .frame8 {
  height: 60px;
  left: -3px;
  width: 60px;
  top: -9px;
  background-size: 43px;
}

.frame9 {
  background: url(../frames/memo9.gif);
  height: 63px;
  left: -2px;
  width: 56px;
  position: absolute;
  top: -8px;
  background-size: 41px;
  background-repeat: no-repeat;
}

.chat_avatar .frame9 {
  height: 60px;
  left: -2px;
  width: 60px;
  top: -8px;
  background-size: 41px;
}

.frame10 {
  background: url(../frames/memo10.gif);
  height: 53px;
  left: -2px;
  width: 56px;
  position: absolute;
  top: -8px;
  background-size: 41px;
  background-repeat: no-repeat;
}

.chat_avatar .frame10 {
  height: 60px;
  left: -2px;
  width: 60px;
  top: -7px;
  background-size: 40px;
}

.frame11 {
  background: url(../frames/memo11.gif);
  height: 52px;
  left: -5px;
  width: 48px;
  position: absolute;
  top: -11px;
  background-size: 46px;
  background-repeat: no-repeat;
}

.chat_avatar .frame11 {
  height: 60px;
  left: -2px;
  width: 60px;
  top: -7px;
  background-size: 41px;
}

.frame12 {
  background: url(../frames/memo12.gif);
  height: 51px;
  left: -3px;
  width: 49px;
  position: absolute;
  top: -10px;
  background-size: 42px;
  background-repeat: no-repeat;
}

.chat_avatar .frame12 {
  height: 60px;
  left: -4px;
  width: 60px;
  top: -11px;
  background-size: 44px;
}

.frame13 {
  background: url(../frames/memo13.gif);
  height: 63px;
  left: -3px;
  width: 56px;
  position: absolute;
  top: -9px;
  background-size: 42px;
  background-repeat: no-repeat;
}

.chat_avatar .frame13 {
  height: 60px;
  left: -3px;
  width: 60px;
  top: -10px;
  background-size: 44px;
}

.frame14 {
  background: url(../frames/memo14.gif);
  height: 63px;
  left: -5px;
  width: 56px;
  position: absolute;
  top: -10px;
  background-size: 46px;
  background-repeat: no-repeat;
}

.chat_avatar .frame14 {
  height: 60px;
  left: -6px;
  width: 60px;
  top: -12px;
  background-size: 47px;
}

.frame15 {
  background: url(../frames/memo15.gif);
  height: 63px;
  left: -3px;
  width: 56px;
  position: absolute;
  top: -9px;
  background-size: 43px;
  background-repeat: no-repeat;
}

.chat_avatar .frame15 {
  height: 60px;
  left: -3px;
  width: 60px;
  top: -9px;
  background-size: 43px;
}

.frame16 {
  background: url(../frames/memo16.gif);
  height: 63px;
  left: -11px;
  width: 61px;
  position: absolute;
  top: -9px;
  background-size: 54px;
  background-repeat: no-repeat;
}

.chat_avatar .frame16 {
  height: 60px;
  left: -8px;
  width: 60px;
  top: -8px;
  background-size: 51px;
}

.frame17 {
  background: url(../frames/memo17.gif);
  height: 63px;
  left: -7px;
  width: 56px;
  position: absolute;
  top: -10px;
  background-size: 49px;
  background-repeat: no-repeat;
}

.chat_avatar .frame17 {
  height: 60px;
  left: -7px;
  width: 60px;
  top: -10px;
  background-size: 50px;
}

.frame18 {
  background: url(../frames/memo18.gif);
  height: 50px;
  left: -7px;
  width: 50px;
  position: absolute;
  top: -5px;
  background-size: 46px;
  background-repeat: no-repeat;
}

.chat_avatar .frame18 {
  height: 60px;
  left: -7px;
  width: 60px;
  top: -7px;
  background-size: 49px;
}

.frame19 {
  background: url(../frames/memo19.gif);
  height: 63px;
  left: -7px;
  width: 56px;
  position: absolute;
  top: -8px;
  background-size: 46px;
  background-repeat: no-repeat;
}

.chat_avatar .frame19 {
  height: 60px;
  left: -6px;
  width: 60px;
  top: -11px;
  background-size: 49px;
}

.frame20 {
  background: url(../frames/memo20.gif);
  height: 63px;
  left: -5px;
  width: 56px;
  position: absolute;
  top: -11px;
  background-size: 46px;
  background-repeat: no-repeat;
}

.chat_avatar .frame20 {
  height: 60px;
  left: -6px;
  width: 60px;
  top: -12px;
  background-size: 47px;
}

.frame21 {
  background: url(../frames/memo21.gif);
  height: 63px;
  left: -5px;
  width: 56px;
  position: absolute;
  top: -8px;
  background-size: 46px;
  background-repeat: no-repeat;
}

.chat_avatar .frame21 {
  height: 60px;
  left: -6px;
  width: 60px;
  top: -7px;
  background-size: 48px;
}

.frame22 {
  background: url(../frames/memo22.gif);
  height: 63px;
  left: -5px;
  width: 56px;
  position: absolute;
  top: -8px;
  background-size: 46px;
  background-repeat: no-repeat;
}

.chat_avatar .frame22 {
  height: 60px;
  left: -7px;
  width: 60px;
  top: -10px;
  background-size: 50px;
}

.frame23 {
  background: url(../frames/memo23.gif);
  height: 63px;
  left: -7px;
  width: 61px;
  position: absolute;
  top: -7px;
  background-size: 46px;
  background-repeat: no-repeat;
}

.chat_avatar .frame23 {
  height: 60px;
  left: -6px;
  width: 60px;
  top: -8px;
  background-size: 48px;
}

.frame24 {
  background: url(../frames/memo24.gif);
  height: 63px;
  left: -5px;
  width: 56px;
  position: absolute;
  top: -9px;
  background-size: 46px;
  background-repeat: no-repeat;
}

.chat_avatar .frame24 {
  height: 60px;
  left: -5px;
  width: 60px;
  top: -9px;
  background-size: 47px;
}

.frame25 {
  background: url(../frames/memo25.gif);
  height: 63px;
  left: -5px;
  width: 56px;
  position: absolute;
  top: -7px;
  background-size: 46px;
  background-repeat: no-repeat;
}

.chat_avatar .frame25 {
  height: 60px;
  left: -6px;
  width: 60px;
  top: -8px;
  background-size: 47px;
}

.frame26 {
  background: url(../frames/memo26.gif);
  height: 63px;
  left: -5px;
  width: 56px;
  position: absolute;
  top: -9px;
  background-size: 46px;
  background-repeat: no-repeat;
}

.chat_avatar .frame26 {
  height: 60px;
  left: -6px;
  width: 60px;
  top: -9px;
  background-size: 48px;
}

.frame27 {
  background: url(../frames/memo27.gif);
  height: 63px;
  left: -5px;
  width: 56px;
  position: absolute;
  top: -6px;
  background-size: 46px;
  background-repeat: no-repeat;
}

.chat_avatar .frame27 {
  height: 60px;
  left: -6px;
  width: 60px;
  top: -8px;
  background-size: 48px;
}

.frame28 {
  background: url(../frames/memo28.gif);
  height: 63px;
  left: -5px;
  width: 56px;
  position: absolute;
  top: -7px;
  background-size: 46px;
  background-repeat: no-repeat;
}

.chat_avatar .frame28 {
  height: 60px;
  left: -6px;
  width: 60px;
  top: -8px;
  background-size: 48px;
  background-repeat: no-repeat;
}

.frame29 {
  background: url(../frames/memo29.gif);
  height: 63px;
  left: -5px;
  width: 56px;
  position: absolute;
  top: -7px;
  background-size: 46px;
  background-repeat: no-repeat;
}

.chat_avatar .frame29 {
  height: 60px;
  left: -6px;
  width: 60px;
  top: -7px;
  background-size: 48px;
}
.gift-container {
    text-align: center;
    float: left;
    margin-bottom: 8px;
    margin-right: 8px;
}
	div.gift-container img {
    height: 70px;
    width: 70px;
}
	div.gift-container img {
    padding: 10px 5px 0px;
    height: auto;
    width: 50px;
    height: 50px;
	border-radius: 10px;
    background: #393939a6;
}
.info_icon {
	font-size: 15px; 
	margin: 5px;
}
#add_info {
    max-width: 400px;
    margin: auto;
    padding: 15px;
}

.input-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}

.main_aitem {
    width: 40px;
    height: 100%;
    text-align: center;
    font-size: 20px;
    display: inline-grid;
    z-index: 1;
    vertical-align: middle;
    position: relative;
}
  .glow-content { 
    padding: 1rem; 
  }
  #spectrum-container { 
    display: flex; 
    justify-content: flex-start; 
    margin-bottom: 1rem; 
  }
  .glow-buttons { 
    display: flex; 
    gap: 0.5rem; 
    margin-top: 1rem; 
  }
  .glow-buttons .reg_button { 
    min-width: 120px; 
  }


.chat_smile.mySmile {
    height: 15px;
    position: absolute;
    margin-left: 0px;
    margin-top: -10px;
}