#canvas-container
{
    position:         relative;
    display:          inline-block;;
    box-sizing:       content-box;
    width:            200px;
    height:           200px;
    margin:           10px auto;
    border:           5px solid #a9a9a9;
    background-color: white;
    box-shadow:       0 0 5px 1px black;
}

#canvas-container.over
{
    border: 5px dashed cyan;
}

#images img.img_dragging
{
    opacity: 0.4;
}

#imagesToolbar #images{
	display:flex;
}

select
{
    max-width: 100%;
}

#upload
{
    overflow: hidden;
}

/*
Styles below based on  http://www.html5rocks.com/en/tutorials/dnd/basics/
*/

/* Prevent the text contents of draggable elements from being selectable. */
[draggable]
{
    cursor:              move;
    -khtml-user-select:  none;
    -moz-user-select:    none;
    -webkit-user-select: none;
    /* Required to make elements draggable in old WebKit */
    user-select:         none;
    -khtml-user-drag:    element;
    -webkit-user-drag:   element;
}

.editor-container
{
    display:        flex;
    align-content:  space-between;
    flex-direction: row;
    flex-wrap:      wrap;
    width:          100%;
}

#imagesToolbar
{
    overflow:                   hidden;
    width:                      200px;
    height:                     100%;
    border-top-right-radius:    20px;
    border-bottom-right-radius: 20px;
    background:                 linear-gradient(to left, #FFAB86, 40%, #FF6F62) no-repeat;
	order:3;
}

#imagesToolbar h3{
	color:white;
	margin-right:5px;
}


#editor h3
{
    text-align: center;
}

#editor h3:first-child
{
    font-weight: bolder !important;
    text-align:  center !important;
}

#images
{
    overflow: auto;
    width:    100%;
    height:   20vh;
    padding:  20px;

}

#images img
{
    max-width: 100%;

}

/*body {*/
/*    margin: 0;*/
/*    background: radial-gradient(circle, rgba(3, 188, 252, 1) 38%, rgba(4, 128, 171, 1) 100%)*/
/*}*/

::-webkit-scrollbar
{
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track
{
    background: #F1F1F1;
}

/* Handle */
::-webkit-scrollbar-thumb
{
    background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover
{
    background: #555;
}

#result
{
    width: 500px;
}


#center-interface
{
    flex:       1 0 50%;
    width:      500px;
    text-align: center;
	display:flex;
	align-items:center;
}

#right-tools
{
    display:                   inline-block;
    width:                     200px;
    height:                    50vh;
    margin-left:               10px;
    padding:                   20px;
    border-top-left-radius:    20px;
    border-bottom-left-radius: 20px;
    background:                linear-gradient(to right, #FFAB86, 40%, #FF6F62) no-repeat;
	overflow:auto;
	background:transparent;
}

#soundSelection{
	color:#757575;
}

#source, #copy
{
    position: fixed;
    left:     -1000px;
}

#resultCanvas
{
    box-sizing:       content-box;
    width:            400px;
    margin:           auto;
    margin-bottom:    5px;
    border:           3px solid black;
    background-color: white;
}

#result{
display:none;	
}

#generateDuck
{
    font-size:     20px;
    margin-top:    40px;
    padding:       10px;
    color:         white;
    border:        2px solid white;
    border-radius: 10px;
    background:    #FF6F62;
    /*background:    gray;*/
}

.btn.btn-info
{
    font-weight:      bold;
    width:            100%;
    margin:           10px auto;
    padding:          10px;
    color:            white;
    border:           2px solid white;
    border-radius:    10px;
    background-color: #FF6F62;
    /*background-color: rgb(3, 188, 252);*/
}

#downloadLink
{
    font-size:        20px;
    display:          none;
    margin-top:       40px;
    padding:          10px;
    color:            white;
    border:           2px solid white;
    border-radius:    10px;
    background-color: #FF6F62;
    /*background-color: green;*/
}

#menuMobile
{
    display: none;
}

/*
#radiosUpload{
	    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

#radiosUpload > div{
	display:flex;
}

#radiosUpload > div > input{
	   width: auto;
    margin: 0;
    position: relative;
    top: 0.7rem;
    margin-right: 1rem;
}*/

#cropped
{
    display: none;
}

#prevButtons
{
    display: none;
}

#prevButtons div
{
    font-size:        20px;
    padding:          20px;
    cursor:           pointer;
    color:            white;
    background-color: #518DB9;
	flex:1 1 50%;
}

#prevButtons div:focus
{
    background-color: yellow;
}

#previewSection
{
    display:        none;
    margin:         auto;
    vertical-align: middle;
    border:         2px solid #518DB9;
    border-radius:  5px;
    background:     #FFFEF0;
}

#imagesToolbar
    {
        position:           initial;
        z-index:            1000;
        right:              0;
        bottom:             0;
        left:               0;
        width:              100%;
        height:             24vh;
        -webkit-box-shadow: -5px 0px 8px 2px rgba(0, 0, 0, 0.58);
        box-shadow:         -5px 0px 8px 2px rgba(0, 0, 0, 0.58);
		margin-top:20px;
    }


@media (max-width: 900px)
{

    #previewSection .justify-content-end canvas
    {
        display:       none;
        margin:        auto;
        margin-bottom: 20px;
        text-align:    center;

    }

    #previewSection .justify-content-end
    {
        text-align: center;
    }

    #previewSection .justify-content-end canvas:nth-child(1)
    {
        display: block;
    }


    #imagesToolbar {
		position: initial;
		z-index: 1000;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100px;
		height: 20vh;
		-webkit-box-shadow: -5px 0px 8px 2px rgba(0, 0, 0, 0.58);
		box-shadow: -5px 0px 8px 2px rgba(0, 0, 0, 0.58);
		flex: 1 1 100%;
		order: 3;
		margin-bottom: 30px;
		border-radius: 20px;
		box-shadow: none;
	}

    #imagesToolbar img
    {
        width:      auto;
        max-width:  20vh;
        height:     100%;
        object-fit: contain;
    }

    #imagesToolbar h3
    {
        display: none !important;
    }

    #imagesToolbar #images
    {
        display: flex;
    }

    #imagesToolbar.active
    {
        left: 0;
    }

    #right-tools
    {
        position:           initial !important;
        top:                0;
        width:              90% !important;
        margin:             auto;
        transition:         .5s;
		background:transparent;
		order:-1;
		height:auto;
		border:none !important;
		padding:10px !important;
    }
	
	#generateDuck{
		margin-top:10px;
	}
	
	#drawingStuff{
		display:flex;
		flex-wrap:wrap;
	}
	#drawingStuff button{
		flex:1 1 50%;
	}
	#drawingStuff h3{
		display:none !important;
	}

    #drawingStuff + div
    {
        display:         flex;
        justify-content: center;
        width:           100%;
        text-align:      center;
    }

    #right-tools.active
    {
        right: 0;
    }

    #radiosUpload
    {
        justify-content: initial;
    }

    #center-interface, #result
    {
        width:      100%;
        margin:     auto;
        text-align: center !important;
    }

    #canvas-container
    {
        position:         initial;
        display:          inline-block;
        box-sizing:       content-box;
        width:            200px;
        height:           200px;
        margin:           10px auto;
        margin:           auto;
        text-align:       center;
        text-align:       center;
        border:           5px solid #a9a9a9;
        background-color: #FFF;
        box-shadow:       0 0 5px 1px #000;
    }

    #menuMobile
    {
        position: fixed;
        z-index:  900;
        top:      20px;
        right:    20px;
        display:  block;
        width:    30px;
        height:   30px;
        cursor:   pointer;
    }

    #prevButtons
    {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		/* flex: 1 1 100%; */
    }


    body
    {
        /*padding-bottom: 26vh;*/
    }

    #drawing-mode-options
    {
        position:         initial;
        z-index:          1000;
        bottom:           0;
        left:             0;
        display:          flex;
        flex-wrap:        wrap;
        width:            100%;
        padding:          10px;
    }

    #drawing-color ~ *
    {
        display: none !important;
    }

    #drawing-mode-options label, #drawing-mode-options input, #drawing-mode-options textarea
    {
        font-family: "Noto Sans JP", sans-serif;
        font-size:   12pt;
        line-height: 24pt;
        display:     inline-block;
        flex:        1 1 50px;
        width:       20%;
		flex:1 1 50%;
    }

    #drawing-mode-selector
    {
        flex:          1 1 80%;
        margin-bottom: 20px;
    }

    #drawing-color
    {
        flex:       0 1 40px !important;
        width:      20px;
        margin-top: 5px;
    }

    #drawing-line-width
    {
        flex:         0 1 80px;
        margin-right: 20px;
    }
	
}