body {
    font-family: arial, helvetica;
    font-size: 16px;
    margin: 0;
    background-color: #ffffff;
}

#avatar {
       display: inline-block;
    width: 100%;
    height: 331px;
    width: 331px;
    border-radius: 5px;
    /* border: 7px solid white; */
    /* box-shadow: 0 3px 6px rgb(0 0 0 / 16%), 0 3px 6px rgb(0 0 0 / 23%); */
    float: left;
	position:relative;
   
}

#avatar-container {
position: relative;
    margin: auto;
    width: 100%;
    display: inline-block;
    padding: 20px;
}

#avatar-container #footer {
      width: calc(100% - 428px);
    height: 100%;
    display: inline-block;
    border: 0px;
    margin-left: 28px;
    float: left;
}
#menu {
    width: 100% !important;
    height: auto !important;     border: 0px !important;
}


#menu {
     width: 100% !important;
    height: auto !important;
}

#menu_lines div {
    position: absolute;
    left: 10px;
    width: 40px;
    height: 7px;
    background-color: #707070;
    -webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
    transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
}

#menu.active #menu1 {
    top: 22px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);
    transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);
}

#menu.active #menu2 {
    opacity: 0;
    -webkit-transition: opacity 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);
    transition: opacity 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);
}

#menu.active #menu3 {
    top: 22px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);
    transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);
}

#options {
       width: 100%;
    height: auto;
}

#options_title {
    font-size: 17px;
    font-weight: 500;
    text-align: center;
    padding-top: 0px;
    margin-bottom: 15px;
    text-align: left;
}

#options_div {
    display: inline-block;
    height: auto;
    width: 100%; 
}
div#menu_lines {
    display: none;
}
.skins,
.eyes,
.eyebrows,
.mouths,
.hairstyles,
.haircolors,
.facialhairs,
.clothes,
.fabriccolors,
.backgroundcolors,
.glasses,
.glassopacity,
.tattoos,
.accesories {
    flex: 0 0 auto;
    top: 0;
    width: 53px;
    height: 53px;
    margin: 5px;
    cursor: pointer;
    border-radius: 0px;
    background-color: #ffdbb4;    display: inline-block; border: 2px solid white;
}

.eyes,
.eyebrows,
.mouths,
.hairstyles,
.facialhairs,
.clothes,
.glasses,
.tattoos,
.accesories {
    background-image: url(/Themes/Release/images/avatar-elements.png);
}

.glassopacity {
   text-align: center;
    font-size: 18px;
    height: 53px;
    padding-top: 14px;
    color: #707070;
}

#menu_list {
     height: auto;
    text-align: center;
display: inline-block;margin-bottom: -7px;}


div#random-avatar {
    display: inline-block;
    left: unset !important;
    bottom: unset !important;
    border-radius: 5px;
    padding: 9px 20px;
    font-weight: 500;
    background: purple;
    color: white;
    width: auto !important;
    background-image: none !important;
    height: auto !important;
    position: inherit !important;
}
#menu_list .btn.active {
    background: #e3d3d3;
    outline: 0 !important;
}
div#random-avatar:before {
    content: 'Generate A New Avatar';
    text-transform: uppercase;
    font-weight: 400;
    font-size: 14px;
}
button.btn.confirm-avatar {
    background: #3d3f44;
    color: white;
    padding: 9px 20px;
    margin-bottom: 20px;
    display: inline-block;
    margin: 0px;
    font-weight: 400;
    font-size: 14px;
    margin-top: -1px;
    height: 40px;
}

.avtar-footer-action {
    display: inline-block;
    text-align: left;
    width: 100%;
    padding-right: 19px;
    margin-top: 15px;
}
#menu_list div {
    width: 100%;
    cursor: pointer;
    padding: 7px 0 7px 0;
    font-size: 19px;
    font-weight: bold;
    color: #707070;
}

#center-popup-1 .modal-body {
    height: 520px;
}

.avatar_creation { 
   position: fixed;
    z-index: 111;
    background: url(https://img.b2bstatic.com/files/retail_files/avtaar-bg_1652444880.jpg);
    width: 100%;
    height: 100vh;
    top: 63px;
    background-size: cover;}
	
	.avatar-panel div#center-popup-1-body {
    background: url(https://img.b2bstatic.com/files/retail_files/avtaar-bg_1652444880.jpg);
    width: 100%;
    background-size: cover;
}

div#avatar_body { width: 100vw;
    height: 100vh;
    padding: 0px;
    margin-left: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -20px;
}

div#options {    background: #d2c9f4;
    min-height: 273px;
    border-radius: 0px;
    padding: 20px;}
.tabs_btn.actives::after { background: #d2c9f4 !important;}

.tabs_btn {    width: 63px;
    height: 62px;
    /* color: transparent !important; */
    background: white url(/Themes/Release/images/avatar-elements.png) !important;
    display: flex;
    justify-content: center;
    align-items: end;
    float: left;
    font-size: 11px;
    color: #0b558c;
    font-weight: 500;
    margin-right: 4px;
    border-radius: 0px;
    position: relative;
    border: 0px !important;
    padding: 1px 1px !important;}
button#mouths:after {
    content: '';
    width: 100%;
    position: absolute;
    background: white;
    z-index: 1;
    bottom: 0px;
    height: 6px;
    display: inline-block;
}
button#glasses:after {
    content: '';
    width: 100%;
    position: absolute;
    background: white;
    z-index: 1;
    bottom: 0px;
    height: 6px;
    display: inline-block;
}
button#eyebrows {     background-position: -152px 1px !important;}
button#glassopacity {
    background-position: -207px -319px !important;
}
button#mouths {background-position: -364px -108px !important;}
button#glasses { background-position: -45px -319px !important;}
button#clothes {background-position: -99px -269px !important;}
button#hairstyles {    background-position: -576px -148px !important;}
button#accesories {background-position: -204px -372px !important;}
button#facialhairs {    background-position: -152px -215px !important;}
button#glasses {    background-position: -45px -319px !important;;}
button#haircolors {background-position: -629px -156px !important;}
button#eyes {  background-position: 6px 0px !important;}
button#backgroundcolors { background-position: -419px -155px !important }
.btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {
    outline: none;
    outline-offset: 0px;
}

.tabs_btn.actives {
    background-color: #d2c9f4 !important;
}
.avatar_creation .close_btn {
     position: absolute;
    right: 2%;
    color: black;
    top: -3px;
    font-size: 47px;
    cursor: pointer;
}

#options_div div.activess {
    border: 2px solid #7a15af;
}

button#upload-avatar {
    background: #3d3f44 !important;
    border-radius: 5px;
    padding: 9px 20px;
    font-weight: 500;
    background: purple;
    color: white;
}

button#download-avatar {
    background: #3d3f44 !important;
    border-radius: 5px;
    padding: 9px 20px;
    font-weight: 500;
    background: purple;
    color: white;
}

div#avatar:before {
content: '';
    border: 7px solid white;
    height: 344px;
    width: 343px;
    display: inline-block;
    position: absolute;
    left: -6px;
    top: -7px;
    border-radius: 3px;
    box-shadow: 0 3px 6px rgb(195 184 184 / 16%), 0 3px 6px rgb(129 121 121 / 23%);
}

#my-avatar img {border: 5px solid white; box-shadow: 0 3px 6px rgb(195 184 184 / 16%), 0 3px 6px rgb(129 121 121 / 23%);     max-width: 331px;}

#my-avatar + #avatar + div#footer {width: 100% !important;text-align: center;margin: 0 auto;}

#my-avatar + #avatar + div#footer .avtar-footer-action {text-align: center;}

div#my-avatar {
    text-align: center;
    margin-bottom: 15px;
}

body #my-avatar.hidden + #avatar + div#footer {
      width: calc(100% - 361px) !important;
    margin: 0px 0px 0px 30px !important;
    text-align: left !important;
}

body #my-avatar.hidden + #avatar + div#footer .avtar-footer-action {
    text-align: left;
}

.avatar-panel {
    max-width: 1170px !important;
}

button#skincolor {
    background-position: -47px -160px !important;
}