/*small Phone*/
body{
    position: relative;
    text-align: center;
}

#topimageholder{
    /*border: medium solid orange;*/
}

#shareDivGrandParent{
    height: 30px;
}

.modeSelection{
    margin-top: 5px;
    margin-bottom: 10px;
    width: 97.5%;
}

#dailychallengeplaybutton{
    margin-bottom: 5px;
}

#category{
    /*border: medium solid green;*/
    height: 20px;
    margin-top: 5px;
    font-size: .8em;
}

#cateogries{
    margin-right: 20px;
    font-size: .8em;
}

#subcategory{
    font-size: .8em;
}

#popup{
    /*border: medium solid brown;*/
    flex-flow: row wrap;
    overflow: auto;
    display: none;
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    transform: translate(calc(50vw - 50%), calc(50vh - 50%));
    background-color: white;
}

#loadingbar{
    display: none;
    z-index: 1;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

#imagepopup {
    /*border: medium solid pink;*/
    margin: auto;
    display: none;
    position: fixed;
    z-index: 12;
    top: 0;
    left: 0;
    transform: translate(calc(50vw - 50%), calc(50vh - 50%));
    background-color: white;
}

#previewDiv {
    /*border: medium solid pink;*/
    margin: auto;
    display: none;
    position: fixed;
    z-index: 20;
    top: 0;
    left: 0;
    transform: translate(calc(50vw - 50%), calc(50vh - 50%));
    background-color: white;
    height: 90%;
    overflow: auto;
}

#previewImage {
    width: 98%;
}

#canvases{
    /*border: medium solid red;*/
    /*height: 600px;*/
    height: fit-content;
    /*margin-top: 5px;*/
}

#drawingPad{
    /*border: medium dashed red;*/
    /*height: 100%;*/
    height: fit-content;
    width: 100%;
    overflow-x: auto;
}

#drawingcanvas{
    background-color: #ddd4c7;
    /*background-color: white;*/
    /*width: 420px;*/
    /*height: 100%;*/
}

#controls{
    /*border: medium solid blue;*/
    height: fit-content;
    margin-top: 5px;
    font-size: .8em;
}

#linesize{
    width: 60px;
}

#outro{
    /*border: medium solid purple;*/
    height: 70px;
    margin-top: 5px;
}

#canvassaveorclear{
    margin-top: 10px;
}

@media all and (max-width: 360px) {
    #topimageholder{
        width: 340px;
        height: auto;
    }

    #shareDivParent{
        width: 340px;
    }

    .modeSelection{
        width: 360px;
    }

    #category{
        height: 20px;
        width: 340px;
    }

    #popup{
        height: 420px;
        width: 300px;
        margin: auto;
    }

    .imageholder{
        height: 60px;
        width: 60px;
    }

    #imagepopup{
        width: 340px;
    }

    .enlargenimageclass{
        width: 340px;
    }

    #previewDiv {
        width: 340px;
    }

    #canvases{
        width: 340px;
        height: fit-content;
    }

    #drawingPad{
        /*border: medium dashed red;*/
        /*height:600px;*/
        height: fit-content;
        width: 340px;
        overflow-x: auto;
    }

    /*#drawingcanvas{*/
    /*    background-color: #ddd;*/
    /*    !*width: 490px;*!*/
    /*    !*height: 100%;*!*/
    /*}*/

    #controls{
        width: 340px;
    }

    #outro{
        height: 70px;
        width: 340px;
    }


}




/*Phone*/
@media all and (min-width: 361px) and (max-width: 767px) {

    #popup{
        height: 420px;
        width: 98%;
        margin: auto;
    }

    #shareDivParent{
        width: 97.5%;
    }

    #imagepopup{
        width: 362px;
    }

    #previewDiv{
        width: 90%;
    }

    .enlargenimageclass{
        width: 98%;
    }

    .imageholder{
        height: 80px;
        width: 80px;
    }

    #canvases{
        height: fit-content;
    }



    #drawingPad{
        width: 98%;
        /*height: 600px;*/
        height: fit-content;
    }

    #drawingcanvas{
        /*width: 420px;*/
    }


}




/*Tablet*/
@media all and (min-width: 768px) and (max-width: 1023px){
    #topImage{
        width: 748px;
        height: auto;
    }

    #topimageholder{
        height: fit-content;
    }


    #shareDivParent{
        width: 748px;
        margin: 0 auto;
    }

    #category{
        height: 20px;

    }

    #popup{
        height: 420px;
        width: 767px;
        margin: auto;
    }

    #imagepopup{
        width: 480px;
    }

    #previewDiv{
        width: 480px;
    }

    .enlargenimageclass{
        width: 98%;
    }

    .imageholder{
        height: 100px;
        width: 100px;
    }

    #canvases{
        /*height: 605px;*/
        height: fit-content;

    }

    #drawingPad{
        /*border: medium dashed red;*/
        /*height: 99%;*/
        /*height: 99%;*/
        height: fit-content;
        /*width: 48%;*/
        width: 48%;
        float: left;

    }

    #comparedImage{
        /*border: medium dashed red;*/
        /*height: 99%;*/
        height: fit-content;
        width: 48%;
        float: left;
        margin-left: 1%;
        margin-right: 1%;
    }

    #controls{


    }

    #outro{
        height: 70px;

    }




}


/*PC*/
@media all and (min-width: 1024px){

    #topImage{
        width: 748px;
        height: auto;
    }

    #shareDivParent{
        width: 748px;
        margin: 0 auto;
    }

    #topimageholder{

        height: fit-content;
    }

    #popup{
        height: 420px;
        width: 767px;
        margin: auto;
    }

    #imagepopup{
        width: 480px;
    }

    #previewDiv{
        width: 480px;
    }

    .enlargenimageclass{
        width: 98%;
    }


    .imageholder{
        height: 100px;
        width: 100px;
    }

    #drawingPad{
        /*border: medium dashed red;*/
        /*height: 99%;*/
        height: fit-content;
        width: 490px;
        display: inline-block;
        vertical-align: top;
    }

    #comparedImage{
        /*border: medium dashed red;*/
        /*height: 99%;*/
        height: fit-content;
        width: 490px;
        display: inline-block;
        vertical-align: top;
    }



}