/* 
 *  Proshoppers 
 *  Copyright Jacod Oy 2019
 *  
 *  Last modified 26.12.2019
 */
body {
    position: static;  
    /*background-color: lightred;*/
}

/*Possible background styles for later use*/
body.th0 {
     background-color: white;
}
body.th1 {
     background-color: #f3f4f7;
background-image: linear-gradient(315deg, #f3f4f7 0%, #caccd1 74%);
}
body.th2 {
     background-color: #570f0a;
background-image: linear-gradient(315deg, #570f0a 0%, #953b20 74%);
}
body.th3 {   /* liian tumma? */
     background-color: #20bf55;
background-image: linear-gradient(315deg, #20bf55 0%, #01baef 74%);
}
body.th4 {  
     background-color: #7ee8fa;
background-image: linear-gradient(315deg, #7ee8fa 0%, #80ff72 74%);
}
body.th5 {  /*red*/
     background-color: #6b0f1a;
background-image: linear-gradient(315deg, #6b0f1a 0%, #b91372 74%);
}
body.th6 {   /*light green*/
    background-color: #00b712;
background-image: linear-gradient(315deg, #00b712 0%, #5aff15 74%);
}
body.th7 {   /*white to grey*/
    background-color: #ffffff;
background-image: linear-gradient(315deg, #ffffff 0%, #d7e1ec 74%);
}
#tit.th0 {
    color: black;
}
#tit.th1 {
    color: black;
}
#tit.th2 {
    color: white;
}
#tit.th3 {
    color: black;
}
#tit.th4 {
    color: black;
}
#tit.th5 {
    color: white;
}
#tit.th6 {
    color: black;
}
#tit.th7 {
    color: black;
}







h1 {
    font-family: Verdana, Calibri, Serif;
    text-align:center;
    -webkit-touch-callout: none;
    /*-webkit-user-select: none;*/
    -webkit-user-select: auto;
    /* -khtml-user-select: none;*/
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-top:40px;

}

.fr_title {
    margin-top:45%;
    font-family: Calibri, Verdana, Serif;
    text-align:center;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-user-select: auto;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 3.5em;
    color: white;
    letter-spacing: 1.5px;
}

.fr_text {
    margin-top:5%;
    font-family: Calibri, Verdana, Serif;
    text-align:center;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-user-select: auto;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 1.5em;
    color: white;
}

.arrow {
    display: none;  
    font-family: Calibri, Verdana, Serif;
    float:right;
    margin-top:-85px;
    font-size:3em;
    color:darkgrey;
    padding:10px;
}

#right {
    float:right;
}

#left {
    float:left;
}

.bold {
    font-weight: bold;
}


.logo_st {   
    color: #FF4500; 
}

.logo_end {   
    color: #2B292E;
}

.my {   
    background-color: linen;
}

.title {  /*remove?*/
    font-family: Calibri, Verdana, Serif;
    font-size:2em;
    text-align:center;
    user-select:none;
    display:block;
    -webkit-margin-before: 0.67em;
    -webkit-margin-after: 0.67em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;

}

div.hbar { 
    padding-top:0px; 
    margin-left:8%;
    margin-bottom:5%;
    font-family: Calibri, Verdana, Serif;
    font-size:1.2em;
    letter-spacing: 1px;
}

div.item { 
    position: static; 
    display:block; 
    margin-top:10px;
    margin-bottom:10px;
    margin-left:5%;
    margin-right:5%;
    font-family: Calibri, Verdana, Serif;
    overflow: hidden;
    /*box-shadow: 2px 2px 5px #f9f9f9;*/
    -webkit-user-select: none; /*Safari 3.1+ */
    -moz-user-select: none;  /*Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none;  /*Standard syntax */
}

div#log {

}

div.recbin {

}

div.addbut {

}

img.recbin {
    display: block;
    margin-left:auto;
    margin-right:auto;

}

div.recbin2 {
    display:inline-block;
    padding: 0px 3px 0px 3px;
    border-radius: 50px;
    display: block;
    margin-left:auto;
    margin-right:auto;
    background-color: lightgrey  /*#f2f2f2;*/
    /*border: 4px solid grey;*/
}

div.abut {
    display:inline-block;
    padding: 3px 3px 0px 3px;
    border: 4px solid grey;
    border-radius: 10px;
    background-color: #f2f2f2;
    margin-top:30px;
}

div.rp_hlp {
    display:none;
}

div.unsort { 

}

div.itemtext {
    display: block;
    margin-left: 5px;
    margin-top: 3px;

}




div.blinking {
    border: 5px solid grey;
    -webkit-animation: 1s blink step-end infinite;
    -moz-animation: 1s blink step-end infinite;
}



.popr {
    font-family: Calibri, Verdana, Serif;
}

div.done {  
    text-decoration: line-through;
    color: gray;
}

div.smenu {  
    margin-right:8%;
    display:inline-block;
    float: right; 
    margin-bottom:-20px;  /* take care that h1 is not disturbed */
}

.snc > img {  
    width:30px;
    height:40px;
}

.smenu > img {
    width:30px;
    height:40px;  
}

.cbstyle {
    margin: 10px;
}

/* Front page (background) */
.front {
    position: fixed; /* Stay in place */
    z-index: 2; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: #2B292E; 
    display:none;
}

/* Image background */
.imgbgr {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 15; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 150%; /* Full height */
    background-color: rgb(0,0,0); /* Fallback color */
    overflow: hidden;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 15; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
    overflow-y:scroll;
    -webkit-overflow-scrolling:touch;
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    z-index: 17; /* Sit on top */
    margin: 3% auto; /* 15% from the top and centered */
    padding: 15px 15px 25px 15px;
    border: 6px solid #424242;
    width: 80%; /* Could be more or less, depending on screen size */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* The Timed (background) */
.timed {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
}

/* Modal Content/Box */
.timed-content {
    background-color: white;
    margin: 15% 15% 15% 15%; /* 15% from the top and centered */
    padding: 40px 30px 30px 40px;
    border: 2px solid #888;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* The Close Button */
.close {
    color: black;
    float: right;
    font-size: 32px;
    font-weight: bold;
    font-family: Calibri, Verdana, Serif;
    padding:5px;
    margin-top: -15px;
}


/* The Close Button for enlarged image */
.close2 {
    color: white;
    position: fixed;
    display:none;
    font-size: 40px;
    font-weight: bold;
    font-family: Calibri, Verdana, Serif;
    padding:5px;
    margin-right: 10px;
    background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
    z-index: 30;
}

div#add {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    width:120px;
    text-align:center;
    font-family: Calibri, Verdana, Serif;
    color: white;
    border-radius: 25px;
    background: #515a5a;
    padding:5px;
    z-index: 2; /* Sit on top */
}

div#add2 {
    color: green;
}

div#tou {
    color: darkgrey;
    margin-left:8%;
    margin-bottom:5%;
    text-decoration: underline;
    font-family: Calibri, Verdana, Serif;
    font-size:1em;
}


.dlg-text {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    text-align:center;
    font-family: Calibri, Verdana, Serif;
    font-size:1.2em;
}

input.dlg-text {
    width:95%;
}

.thick {
    font-weight: bold;
}

.greytxt {
    color: grey;
    font-size:0.8em;
    border: 1px solid grey;

}

.selectable {
    -webkit-touch-callout: all;
    -webkit-user-select: all;
    -khtml-user-select: all;
    -moz-user-select: all;
    -ms-user-select: all;
    user-select: all;
}

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


button.dlg-text {
    border-radius: 25px;
}

input.dlg-text {
    font-size: 1.2em;
}

.dlgbut  {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    text-align:center;
    font-family: Calibri, Verdana, Serif;
    color: white;
    border-radius: 25px;
    background: #515a5a;
    padding:2px;
    z-index: 2; /* Sit on top */
}

.zoombut  {
    display: inline-block;
    width:30px;
    margin-left: 5px;
    margin-right: 5px;
    text-align:center;
    font-family: Calibri, Verdana, Serif;
    border: 1px solid grey;
    padding:0px;
    z-index: 2; /* Sit on top */
}

input[type='number']::-webkit-inner-spin-button, 
input[type='number']::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    margin: 0;

}

input[type='number'] {
    width:30px; 
    text-align: center;
    border: none;
    -moz-appearance: textfield;

}

.colbut  {
    display: inline-block;
    margin-left: 3px;
    margin-right: 3px;
    margin-top: 20px;
    height:40px;
    width:40px;
    text-align:center;
    border: 1px solid #888;
    padding:2px;
    z-index: 2; /* Sit on top */
}

.cancol {
    display: inline-block;
    margin-left: 3px;
    margin-right: 3px;
    margin-top: 20px;
    height:20px;
    width:20px;
    text-align:center;
    border: 1px solid #888;
    padding:2px;
    z-index: 2; 
}

.canimg {
    float: right;
    margin-left: 3px;
    margin-right: 25px;
    margin-top: 0px;
    text-align:center;
    padding:0px;
    z-index: 2; 
}

ul {
    list-style-type: none;
    margin-left: 0;
    padding: 0;
}
li{
    margin: 10px 0;
}

.select {
    font-size: 18px;

}

.spinner {
    top:0; 
    left:0;
    display:none;
    position:absolute;
}

.spinner > img {
    width:20px;
    height:20px;
}

.shareclass {
    display:none;
    margin-left:20px;
}

.shareclass > img {
    width:20px;
    height:20px;
}

.ghost {
    opacity: .5;
    background: #C8EBFB;
}

.chosen {
    color: #fff;
    background-color: #c00;
}

.stop-scrolling {  /* no need */
    height: 100%;
    overflow: hidden;
}


.my-handle {
    position: relative;
    cursor: move;
    cursor: -webkit-grabbing;
    border: 0px lightgrey;
    border-radius: 5px;
    margin: 0px 0px 4px 0px;  
    padding: 0px 7px 2px 7px;
    float:right;
    display:inline;
    z-index: 10;
    font-size: 28px;
}

.my-ok {
    position: relative;
    cursor: move;
    cursor: -webkit-grabbing;
    border: 2px solid green;
    border-radius: 12px;
    margin-left: 2px; 
    margin-right: 2px;
    margin-bottom: 2px;
    margin-top: 2px;
    padding: 2px 4px 4px 4px;  
    float:right;
    font-size: 20px;
    background-color: #00b32d; 
    color: white;
    z-index: 10;
}

.my-close {
    position: relative;
    cursor: move;
    cursor: -webkit-grabbing;
    border: 0px lightgrey;
    border-radius: 5px;
    margin: 4px 5px 4px 0px;
    padding: 0px 7px 2px 7px;   
    float:right;
    display:inline;
    background-color: rgba(0,0,0,0.15);
    z-index: 10;
}


#myslider {
    color:black;
}

.ui-widget-content .sliderTestClass { background: #000000; }

.plus {
    position: relative;
    border: 2px solid green;
    border-radius: 5px;
    margin-left: -10px; 
    margin-top: 0px;
    padding: 0px 7px 2px 7px;
    background-color: #00b32d;
    color: white;
    z-index: 10;
}

div.curs {
    position: absolute;
    display:none;
    z-index:20;
}


.canvas {
    padding: 6px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    z-index:20;
}

.rcanvas {
    padding: 6px;
    margin: auto;
    display: none;
}

.ecanvas {
    position:fixed;  
    display: none;
    top:0; 
    left:0;
    z-index:25;
}

.excanvas {
    position:fixed;  
    display: none;
    top:0; 
    left:0;
    z-index:25;
}

.disp_fs {
    display: block;
}

/*ei käytössä */
.removed {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M1 0 L0 1 L99 100 L100 99' fill='black' /><path d='M0 99 L99 0 L100 1 L1 100' fill='black' /></svg>");
    background-repeat:no-repeat;
    background-position:center center;
    background-size: 100% 100%, auto;
    opacity: 0.5;
}

.cwrapper {
    position: static;
}

.loader {
    position: absolute;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 50px;
    height: 50px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
    z-index:25;
    display:none;

}

.slidecontainer {
    width: 40%;
    display: inline;
    float:left;
}

.slider {

    -webkit-appearance: none;
    width: 100%;
    height: 25px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background: darkgrey; 
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: #4CAF50;
    cursor: pointer;
}

div.pen {
    display: inline;
    float:left;
    width: 40px;
    margin-left: 20px;
    margin-top: 25px;
    height: 3px;
    background-color:black;
}



/* Safari */
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

*[contenteditable] {
    -webkit-user-select: auto !important;
}

@-webkit-keyframes blink {from , to { border-color:transparent}
                          50%{border-color:grey}
}

@-moz-keyframes blink {from , to { border-color:transparent}
                       50%{border-color:grey}}


                       [contentEditable=true]:empty:not(:focus):before{
                           content:attr(data-placeholder) }