/** New CSS Added by UT on 18 Dec 2023 **/

.overlay_classes ul li {
    width: 60px;
}

.advanced_main_sec .overlay_classes ul li {
    width: 50px;
}

.wiggle_outer_div .overlay_color_box ul {
    position: relative;
}

/** Advanced Ish CSS **/

.advanced_main_sec .tool_bar .overlay_classes ul li img {
    width: 100%;
}


/** CSS on 20 Dec, 2023 (UT) **/

.adv_rightSide_play ul {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.adv_rightSide_play ul li {
    position: relative;
    margin-right: 15px;
    margin-bottom: 20px;
}

.adv_rightSide_play ul li:last-child {
    width: 100%;
    margin-right: 0;
    margin-top: 20px;
}

.advanced_main_sec.wiggle_outer_div .overlay_color_box ul {
    width: calc(100% + -8px);
}

.advanced_main_sec.wiggle_outer_div .overlay_color_box ul.more_colrs {
    width: 158px;
}

.projectvault_overlay .bault_small_box .art_list ul {
    justify-content: flex-start;
}

.projectvault_overlay .bault_small_box .art_inner_col .actions {
    margin-left: auto;
}

.bault_small_box .art_inner_col .actions i.fa-pencil-square-o {
    color: #00a5ff;
}

.bault_small_box .art_inner_col .actions i.fa-trash {
    color: #f00f00;
}

.bault_small_box .art_inner_col span {
    font-family: 'Raleway';
    text-transform: capitalize;
}

.shapesModal {
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    background-color: rgba(0,0,0,0.2);
}

.shapes_wrap {
    width: 450px !important;
}

.shape_content .close {
    font-size: 28px !important;
}
.shape_content h2{
    display: flex;
    justify-content: center;
    font-size: 25px;
}
.shape_content {
    height: 140px;
    padding: 10px;
}
.shape_content .buttonList ul{
    display: flex;
    justify-content: space-around;
    padding-top: 15px;
}
.shape_content .buttonList ul li img{
    width: 48px;
    cursor: pointer;
}

/** CSS Added for Tablet Portrait Mode on 27 Dec 2023 **/

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
    .tabLandscapeLayout {
        width: 100%;
        overflow-x: auto;
        color: 'red';
    }

    .tabLandscapeLayout .wiggle_doddle_main_mid_sec.row {
        width: 1200px;
    }

    .tabLandscapeLayout .wiggle_doddle_main_mid_sec.row .overlay_classes ul {
        width: 30%;
    }

    .tabLandscapeLayout .wiggle_doddle_main_mid_sec.row .wiggle_doddle_main_mid_right, .tabLandscapeLayout .wiggle_doddle_main_mid_sec.row .wiggle_doddle_main_mid_left {
        width: 20%;
    }

    .tabLandscapeLayout .wiggle_doddle_main_mid_sec:not(.flipbook_mian_sec):not(.advanced_main_sec) .doddle_board_and_text {
        transform: translate(0, 0);
    }
}

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

    .fontsModal .modal-dialog {
        width: 600px;
        margin: 30px auto;
    }

    .fontsModal .modal-header {
        position: static;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 10px;
    }

    .fontsModal .modal-header:before, .fontsModal .modal-header:after {
        content: none;
    }
    
}






















/** Media queries **/

@media (min-width: 1200px) {

    .advanced_outer_box .bg_img {
        /* height: 450px !important; */
    }

    .flipbook_mian_sec.advanced_main_sec .wiggle_doddle_main_inner {
        transform: translate(0px, 0rem);
    }

    .wiggle_outer_div .wiggle_doddle_main_mid_right, .wiggle_outer_div .wiggle_doddle_main_mid_left {
        width: 18.6% !important;
    }

    .advanced_outer_box .wiggle_doddle_main_mid_center {
        width: 72% !important;
    }
}

@media (min-width: 1201px) {
    .advanced_outer_box .bottom-scale {
        margin-top: 50px;
    }
}

@media (min-width: 1400px) {
    .advanced_main_sec.wiggle_outer_div .overlay_color_box ul.more_colrs {
        width: 160px;
    }
}

@media (min-width: 1440px) {
    .wiggle_doddle_main_mid_sec.flipbook_mian_sec .tool_bar>img {
        height: 540px !important

    }
}

@media (min-width: 1500px) {
    .animation_ish_box.advanced_outer_box{
        height: 860px !important;
    }
}



@media (min-width: 1600px) and (max-width: 1650px) {
    .wiggle_outer_div:not(.advanced_main_sec) .overlay_color_box > ul {
        width: calc(100% + 15px) !important;
        left: -5px;
    }
}

@media (min-width: 1700px) {
    .animation_ish_box.advanced_outer_box{
        height: 890px !important;
    }
    .wiggle_outer_div .overlay_color_box {
        top: 30px !important;
    }
    
    .left_text_part ul {
        height: 77% !important;

    }
}


@media (min-width: 1600px) and (max-width: 1680px) {
    .wiggle_outer_div.advanced_main_sec .overlay_color_box > ul {
        width: 98%;
    }
}

@media (min-width: 1680px) and (max-width: 1800px) {
    .wiggle_outer_div.advanced_main_sec .overlay_color_box > ul {
        width: 90%;
    }
}

@media only screen and (min-width: 1500px) {
    .wiggle_outer_div .tool_bar>img{
        height: 410px !important;
    }
  }


@media (min-width: 1800px) and (max-width: 1920px) {
    .wiggle_outer_div.advanced_main_sec .overlay_color_box > ul {
        width: 82%;
    }
}

@media (min-width: 1920px) {
    .wiggle_outer_div .wiggle_doddle_main_mid_right, .wiggle_outer_div .wiggle_doddle_main_mid_left {
        width: 16.6% !important;
    }

    .wiggle_outer_div .overlay_classes ul {
        width: 25% !important;
    }

    .advanced_main_sec.wiggle_outer_div .overlay_color_box ul {
        width: 78%;
    }
}

@media (min-width: 2300px) {
    .wiggle_doddle_main_mid_left .tool_bar>img {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .wiggle_outer_div .tool_bar>img {
        height: 330px !important;
    }

    .wiggle_outer_div .overlay_classes {
        top: 15px !important;
    }

    .overlay_classes ul li {
        width: 40px !important;
    }
}














.animation_ish_box.advanced_outer_box {
    /* height: 755px; */
    height: 820px;
    width: 100%;
}
.wiggle_outer_div.animation_ish_box.advanced_outer_box{
    height: 100%;
}
.advanced_outer_box .wiggle_doddle_main_mid_sec.flipbook_mian_sec {
    margin-top: 0;
}
.advanced_outer_box .bg_img{
    width: 100%;
    background-size: 100% 98%;
    height: 540px;
}
.advanced_outer_box .wiggle_doddle_main_mid_center {
    width: 75%;
    padding: 0;
}
.advanced_outer_box .make_drawing_board {
    width: 97%;
    height: 95%;
}
.wiggle_outer_div .wiggle_doddle_main_mid_sec.row {
    margin-right: 0;
    margin-left: 0;
}
.wiggle_outer_div .wiggle_doddle_main_mid_right , .wiggle_outer_div .wiggle_doddle_main_mid_left{width: 16.6%;}
.wiggle_outer_div  .wiggle_doddle_main_mid_sec {
    margin-top: 2rem;
}
.modal-header {
    right: -15px;
    top: -15px;
    z-index: 9;
}
.wiggle_outer_div .tool_bar>img {
    height: 350px;
    object-fit: contain;
    width: 100%;
}
.wiggle_outer_div .overlay_classes {
    top: 50px;
    left: 0;
    right: 0;
    margin: auto;
}
.wiggle_outer_div  .overlay_classes ul {
    display: block;
    width: 35%;
    margin: auto;
}
.wiggle_outer_div .wiggle_doddle_main_mid_left .tool_bar{width:100%;}
.wiggle_outer_div .overlay_color_box ul {
    width: 100%;
}
.wiggle_outer_div .overlay_color_box {
    position: absolute;
    left: 0;
    top: 35px;
    width: 77%;
    right: 0;
    margin: auto;
}
.advance_color_box .overlay_color_box{
    position: absolute;
    left: 13px;
    top: 30px;
    width: 77%;
    right: 0;
    margin: auto;
}

.w-100{width:100%;}
.wiggle_outer_div .overlay_color_box .more-color ul {
    position: relative;
    left: 33px;
}
.advanced_outer_box .make_drawing_board {
    width: 100%;
    height: 99%;
    left: -3px;
    bottom: 0;
    top: -4px;
    right: 0;
    display: block;
}
.advanced_left_tool .tool_bar>img {
    height: 418px;
}
.flipbook_left_tool .tool_bar>img {
    height: 580px !important;
}
.wiggle_outer_div .advanced_right_sec  .overlay_color_box {
    width: 88% !important;
}
.wiggle_doddle_main_mid_sec.wiggle_outer_div.flipbook_mian_sec.advanced_main_sec.row {
    margin-left: 0;
    margin-right: 0;
}
.body_wrap {
    height: 100%;
    overflow-y: auto;
}

@media (min-width: 1440px) {

    .advanced_outer_box .bg_img {
        /* height: 420px !important; */
    }

    .advanced_left_tool .tool_bar>img {
        height: 480px;
    }
}

@media (min-width: 1600px){
    .wiggle_outer_div .overlay_color_box {
        top: 11px;
        width: 60%;
    }
    .flipbook_outer_box .overlay_color_box .more-color ul {
        left: 47px;
    }
    .wiggle_outer_div .advanced_right_sec .overlay_classes {
        top: 30px;
    }
    /* .advanced_left_tool .tool_bar>img {
        height: 455px;
    } */
    .top_bar_logo img {
        width: 100%;
        max-width: 140px;
    }
    .make_doddle_text img {
        width: 100%;
        max-width: 230px;
    }
    .make_doddle_text {
        margin: 20px 0;
        height: auto;
    }
}

@media (min-width: 1800px) {
    .more-color img {
        width: 160px;
    }
}

@media (min-width: 1900px){
    .wiggle_outer_div .overlay_color_box {
        top: 11px;
        width: 55%;
    }
}

@media (min-width: 2000px){
    .wiggle_outer_div .overlay_color_box {
        top: 11px;
        width: 56%;
    }
}


@media (max-width: 1600px) {
    .more-color {
        width: 125px;
    }
}

@media (max-width: 1599.98px) {
    .wiggle_outer_div .overlay_color_box {
        width: 70%;
    }
}

@media (max-width: 1400px){
    .advanced_main_sec .color_box:not(.brush_size_box) .color_main_box > img {
        width: -webkit-fill-available;
        height: 70px;
    }


    .wiggle_doddle_main_mid_sec:not(.advanced_main_sec) .color_main_box {
        width: 155px;
    }

    .wiggle_doddle_main_mid_right , .wiggle_doddle_main_mid_righ{
        margin-top: 15px;
    }
    .modal-dialog {
        width: auto;
        margin: 8rem 15px;
    }
    .modal-header {
        right: -10px;
        top: -13px;
    }
    .wiggle_outer_div .wiggle_doddle_main_mid_left .tool_bar {
        width: 100%;
    }
    .wiggle_outer_div  .wiggle_doddle_main_mid_sec {
        margin-top: 1rem;
    }
    .wiggle_outer_div .overlay_color_box {
        width: 83%;
    }
    .wiggle_outer_div:not(.advanced_main_sec) .overlay_classes ul {
        width: 40%;
    }
    .play_button_pause_sec img {
        width: 54%;
    }
    .top_bar_logo img {
        width: 100%;
        max-width: 140px;
    }
    .make_doddle_text img {
        width: 100%;
        max-width: 200px;
    }
    .make_doddle_text {
        margin-bottom: 10px;
        height: auto;
    }
}

@media (max-width: 1200px){
    
    .more-color {
        position: relative;
        left: -16px;
    }
    .conta_iner {
        width: 90%;
    }
    .wiggle_outer_div .wiggle_doddle_main_mid_right, .wiggle_outer_div .wiggle_doddle_main_mid_left {
        width: 23%;
    }
    .wiggle_outer_div .overlay_color_box {
        width: 81%;
    }
    .wiggle_outer_div .overlay_classes ul {
        width: 32%;
    }
    .col-sm-2 {
        /* width: auto; */
    }
    .wiggle_outer_div .overlay_classes {
        top: 40px;
    }
    /* .advanced_main_sec .advanced_left_tool .tool_bar ul li img {
        width: 65%;
    } */

    .typing_input_name {
        top: 16px;
       
    }

    .bottom_button {
        margin-top: 25px;
    }  
}

@media (max-width: 992px){

    .wiggle_outer_div .wiggle_doddle_main_mid_sec {
        margin-top: 1rem;
    }
    .wiggle_outer_div .wiggle_doddle_main_mid_right, .wiggle_outer_div .wiggle_doddle_main_mid_left {
        width: 27%;
    }
    .wiggle_outer_div .make_doddle_text img {
        width: 100%;
        max-width: 40%;
    }
    .wiggle_outer_div .make_doddle_text {
        height: auto;
    }
    .advanced_outer_box .make_drawing_board {
        width: 100%;
        height: 450px;
    }
    .advanced_outer_box .bg_img {
        width: 100%;
        background-size: 100% 100%;
        height: 450px;
    }
    .make_drawing_board .drawing_board {
        left: 15px;
        right: 15px;
        top: 15px;
        bottom: 15px;
    }
}

@media (max-width: 991.98px) {

    #flip_Shapes img {
        width: 100%;
        height: auto;
    }

    .wiggle_outer_div:not(.advanced_main_sec) .overlay_classes ul {
        margin-top: 20px;
    }

    .wiggle_outer_div.advanced_main_sec .overlay_classes ul {
        margin-top: 15px;
    }

    .overlay_classes ul li {
        width: 50px;
    }

    .overlay_classes ul li > img {
        width: 100%;
    }

    .advanced_main_sec .overlay_classes ul li {
        width: 44px;
    }
}

@media only screen and (max-width: 1440px) {
    
    .wiggle_outer_div .tool_bar>img {
        /* height: 470px; */
        height: 550px;
    }

    .more-color img {
        width: 147px;
    }

    .more-color {
        width: 140px;
    }

    .wiggle_outer_div .overlay_color_box .more-color ul {
       
        width: 94px;
    }

    .animation_ish_box .modal-dialog {
        width: 60%;
        margin: 0 auto;
    }

    .animation_ish_box .mid_button_share ul li img {
        width: 66px;
    }

    div#share_modal {
        top: 24%;
        bottom: auto;
        overflow: visible;
    }

    #share_modal .modal-header {
        right: -17px;
        top: -19px;
    }

    #save_modal .modal-dialog {
        margin: 0 auto;
        width: 67%;
    }

    #save_modal {
        top: 22%;
        overflow: visible;
    }

    .typing_input_name {
        top: 17px;
        /* height: 29px; */
    }

    #save_modal .modal-header {
     
        right: -17px;
        top: -14px;
    }

    #havnot_saved .modal-header {
        right: -15px;
        top: -15px; 
    }

    .wiggle_outer_div:not(.advanced_main_sec) .overlay_classes ul {
        width: 41%;
    }

    /* .advanced_main_sec .tool_bar ul li:nth-child(1) img, .advanced_main_sec .tool_bar ul li:nth-child(2) img, 
    .advanced_main_sec .tool_bar ul li:nth-child(3) img, .advanced_main_sec .tool_bar ul li:nth-child(4) img,
    .advanced_main_sec .tool_bar ul li:nth-child(5) img, .advanced_main_sec .tool_bar ul li:nth-child(6) img,
    .advanced_main_sec .tool_bar ul li:nth-child(7) img {
        width: 70%;
    } */
  }

@media only screen and (max-width: 1600px) {


}

@media only screen and (max-width: 1680px) {


}

@media only screen and (max-width: 1920px) {
    .make_doddle_text img {
        max-height: 40px;
    }

    .make_doddle_text {
        margin-bottom: 7px;
        height: 44px;
        margin-top: 3px;
    }

    .top_bar_logo img {
        height: 95px;
    }

    .play_button_pause_sec img {
        width: 86px;
    }

    .doddle_board_and_text {
        transform: translate(0px, -4rem);
    }

    .mid_button_share {
        margin-bottom: 40px;
    }


}

@media (max-width: 1920px) and (min-width: 1200px) {
    .top_bar_logo {
        width: 90px;
    }
}

@media (max-width: 1440px) and (min-width: 1200px) {
    .wiggle_outer_div .overlay_classes {
        top: 40px;
    }

    .overlay_classes ul li {
        width: 55px;
    }

    .advanced_main_sec .overlay_classes ul li {
        width: 48px;
    }
}

@media (max-width: 1081px) and (min-width:1025px) {
    .wiggle_outer_div .wiggle_doddle_main_mid_right, .wiggle_outer_div .wiggle_doddle_main_mid_left {
        width: 20%;
    }
    
  }

  @media (max-width: 1024px) and (min-width:992px) {
    .wiggle_outer_div:not(.advanced_main_sec) .overlay_classes ul {
        width: 42%;
    }
  }