:root{
    --bg-color : #FFF;
    --txt-color : #000;
    --lnk-color : #777;
    --lnk-color-hover : #555;
    
    --color-primary :  #2CD35F;
    --primary: #2CD35F;
    --color-primary-text : #FEFEFE;

    --pyctolist-width : 80vw;
    
    --darkmode-image-url : url("/static/img/moon_full.svg");
    
    --upload-icon-url : url("/static/img/cloud-upload-light.svg");
}

[data-theme="dark"]{
    --bg-color : #272727;
    --txt-color : #CCC;
    --lnk-color : #AAA;
    --lnk-color-hover : #999;

    --darkmode-image-url : url("/static/img/moon.svg");
    --upload-icon-url : url("/static/img/cloud-upload-dark.svg");
}

h1, h2, h3, p, span, body{
    font-family: 'Open Sans', sans-serif;
    color : var(--txt-color);
}

body, .modal-content{
    background-color: var(--bg-color);
}

a{
    color:var(--lnk-color);
}

a:hover{
    color:var(--lnk-color-hover);
}

.pyctolist{
    display:flex;
    position:relative;
    flex-direction:row;
    flex-wrap:nowrap;
    align-items:center;
    width: 100%;
    margin-bottom: 5vmin;
    overflow-x: hidden;
    overflow-y: hidden;
    padding:0;
}
.more{
    flex-direction:row;
    flex-wrap:wrap;
    justify-content: center;
    height: auto;
}
.pyctolist:last-child{
    margin-right:0;
}
.show-more{
    position:absolute;
    background: linear-gradient(to left, var(--color-primary), transparent);
    top:0;
    right:0;
    margin-top:0.8em;
    height:100%;
    width:20%;
    text-align:right;
    padding-top:calc(80vmin/8 - 0.8em);
    padding-right:0.6em;
    z-index:1000;
    color:var(--color-primary-text);
    cursor:pointer;
    font-size:1.2em;
}

.load-more{
    display:inline-block;
    cursor:pointer;
}

.pycto{
    display:inline-block;
    /*width:calc(80vmin/5);*/
    height:calc(80vmin/4);
    margin-right:0.8em;/*calc(80vmin/50);*/
    margin-top:0.8em;
    margin-left:0;
}

.pycto:hover{
    filter:brightness(120%);
}

.pycto img{
    height: 100%;
    object-fit:cover;
}

.admin-pycto img{
    height: 80%;
    object-fit:cover;
}

.admin-pyctooftheday{
    height:15vmin;
}

.center-block{
    max-width:92vw;
    max-height:92vh;
    width:auto;
    height:auto;
    margin: auto;
    margin-top: 1vh;
}

.size-picker{
    display:inline-block;
    width:3em;
    -webkit-appearance: none;
}

#send-image{
    display:none;
}

#solve-image{
    display:none;
    margin-bottom:20px;
}

#solve-this-image{
    float:right;
}

#message-block{
}

#send-message-block{
    text-align:center;
}

#decrypt{
    float:right;
    margin-right:0px;
}
#upload-new{
    /*margin-top:1vh;
    margin-bottom:2vh;*/
}

#solve-image > .action{
    background-color:var(--color-primary);
    color:var(--color-primary-text);
    padding:5px 10px;
    margin-bottom: 10px;
    cursor:pointer;
    float:left;
    margin-right:1vw;
}

#solve-image > .ssk-group{
    float:left;
    margin-right:1vw;
    display:inline-block;
}

.action:hover{
    color:inherit;
    filter:brighten(120%);
}

.drop{
    display:inline-block;
}

.img_part{
    width:100%;
    height:100%;
}

.ui-draggable-dragging{
    z-index:10000;
}
.ui-droppable-hover img{
    opacity:.5;
    //transition: opacity .55s ease-in-out;
    //-moz-transition: opacity .55s ease-in-out;
    //-webkit-transition: opacity .55s ease-in-out;
}

.ui-draggable-dragging img{
    opacity:1.0 !important;
}

.file-upload-received{
    display:inline-block;
    margin-top:1vh;
}

.file-upload-send{
    display:inline-block;
    margin-top:1vh;
}

#decrypted-message{
    display:none;
    padding-left:1em;
    font-size:1.2em;
}

#alerts{
    position:absolute;
    top:0px;
    left:10vw;
    margin-top:10px;
    width:80vw;
    text-align:center;
    z-index:1000000;
}

.file-upload{
    width:70vmin;
    height:25vmin;
    text-align:center;
    margin:auto;
}

#message-block{
}

#message-block h2, h3{
    font-size:4vmin;
    text-align:center;
}

#extra-information{
    display:none;
    width:70vmin;
    height:70vmin;
    margin:auto;
}
#extra-information > input,select{
    width:100%;
    margin-top:5vh;
    height:3em;
    font-size: 1.2em;
    padding:1em;
}
#extra-information > .btn{
    display:inline-block;
    font-size: 1.5em;
    padding:.70em 2em;
}
#extra-information > .buttons{
    margin-top: 5vh;
    width:100%;
}

#extra-information  #cancel-encrypt-button{
    color:var(--color-primary-text);
    margin:0;
    width:30%;
}
#extra-information #encrypt-button{
    background-color:var(--color-primary);
    border-color:var(--color-primary);
    cursor:pointer;
    color:var(--color-primary-text);
    margin:0;
    width:65%;
}
#extra-information #encrypt-button:hover{
    filter:brightness(85%);
}

#extra-information > img{
    height:30vmin;
    margin:auto;
    display:block;
}

.image{
    margin-bottom: 1vh;
}

.link-field{
    width:20vw;
    float:left;
}

.navbar{
    background-color: inherit;
    border:none;
}

.icon{
    width:32px;
}

.create-pycto{
    background-image:url("/static/img/icon_rounded_128.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    padding:20px;
    width:15vmin;
    height:15vmin;
    cursor:pointer;
}
.create-pycto:hover{
    filter:brightness(120%);
}

.upload-image{
    background-image:var(--upload-icon-url);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    padding:20px;
    width:20vmin;
    height:20vmin;
    cursor:pointer;
}

.blueprint{
    display:none;
}

#preview-container{
    display:inline-block;
    position:relative;
    height:40vmin;
    width:100%;
}
#preview-image{
    position:absolute;
    top:0;
    left:0;
    right:0;

    margin-left: auto;
    margin-right: auto;

    max-width:100%;
    max-height:100%;

    z-index:1;
}
#preview-canvas{
    position:absolute;

    top:0;
    left:0;
    right:0;

    margin-left: auto;
    margin-right: auto;
    z-index: 10;
}

.dark-mode-toggle{
    height:20px;
    width: 24px;
    display: inline-block;
    background-image: var(--darkmode-image-url);
    background-repeat: no-repeat;
    margin:10px 10px;
}

.help{
    height:20px;
    width:20px;
    display: inline-block;
    background-image: url("/static/img/help.svg");
    background-repeat: no-repeat;
    vertical-align: middle;
    margin: 8px 10px;
    float: right;
}

#solved-by{
    margin:8px 10px;
    float:right;
}

.btn-success{
    background-color: var(--color-primary);
    color: var(--color-primary-text);
    border-color:var(--color-primary);
}

.search-container{
    position:relative;
    display: inline-block;
}

.search-results{
    position:absolute;
    width:100%;
    top:100%;
    left:0;
}

.search-result{

}