.simple-paint-wrapper {
    border:3px solid rgb(45, 151, 250);
    border-radius: 2px;
}

.simple-paint-top-tools {
    background-color:rgb(166, 211, 253);
    height:10%;
    width: 100%;
    display: flex;
    align-items: center;
}
.simple-paint-buttons{
    border-radius: 5px;
    cursor: pointer;
    margin-left:3px; 
    padding:2px;
    opacity: 0.7;
}
.simple-paint-buttons img{
    border-radius: 5px;
    cursor: pointer;
    padding:3px;
    opacity: 0.7;
}
.simple-paint-buttons:hover{
    border: 1px solid rgb(0, 0, 0);
    opacity: 1;
}
.simple-paint-buttons-selected{
    border: 1px solid rgb(0, 0, 0);
}
.simple-paint-buttons-gray{
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}

.simple-paint-canvas-wrapper{
    overflow:hidden; 
    width:100%;
    height:90%; 
}

.simple-paint-canvas {
    position: absolute;
    border: 1px solid rgb(45, 151, 250);
    border-radius: 3px;
    overflow:hidden; 
}
#temp-canvas{
    position: absolute;
    background: transparent;
    overflow:hidden;
}
.simple-paint-side-tools {
    background:rgb(166, 211, 253);
    float:left; 
    width:10%;
    height:100%;
    overflow:hidden;
}

.simple-paint-color-table{
    width:231px; 
    height:132px; 
    position:absolute; 
    z-index:999999;
    background-color: #00000000; 
    display:none; 
    cursor:pointer; 
    box-shadow: 5px 10px 18px #888888;
}
.simple-paint-width-table{
    width:100px; 
    height:200px; 
    position:absolute;
    z-index:999999; 
    background-color: #ffffff; 
    border:1px solid #000000;
    cursor:pointer;
    display: none;
    box-shadow: 5px 10px 18px #888888;
}
.simple-paint-width{
    position:relative; 
    clear:both;
    height:31px; 
    border:1px solid #ffffff;
}
.simple-paint-width:hover{
    background-color: rgb(166, 211, 253);; 
}
.simple-paint-width hr{
    width: 50%;
    background-color: #000000;
}
.simple-paint-width-1 hr{
   height:0px;
}
.simple-paint-width-2 hr{
    height:1px;
}
.simple-paint-width-3 hr{
    height:3px;
}
.simple-paint-width-4 hr{
    height:7px;
}
.simple-paint-width-5 hr{
    height:10px;
}
.simple-paint-width-6 hr{
    height:15px;
}
.simple-paint-color{
   position:relative; 
   height:7px; 
   width:7px; 
   float:left; 
   padding:1px; 
   margin:1px; 
}
.simple-paint-color:hover{
    border:solid 1px #FFF;
    margin:0px;
}
.class-temp-input-text{
    position:relative; 
    z-index:999999;
    border:1px dashed #ff0000;
    background-color:transparent; 
}
.simple-paint-colors{
    border:1px solid #000000;
    border-radius: 3px;
    padding:2px;
    height:120px;
    margin-left: 3px;
    width:85%;
    padding: 0px;
}
.simple-paint-pen-color{
    border:1px solid #000000;
    border-radius: 3px;
    background-color: #000000;
    margin-left: 3px;
    height:15px;
    width:80%;
    cursor:pointer;
}
.simple-paint-labels{
    margin-left: 3px;
    font-size: 9px;
}
.simple-paint-fill-color{
    border:1px solid #FFF;
    border-radius: 3px;
    background-color:transparent;
    margin-left: 3px;
    height:15px;
    width:80%;
    cursor:pointer;
}
.simple-paint-pen-width{
    border:1px solid rgb(0, 0, 0);
    border-radius: 3px;
    margin-left: 3px;
    height:15px;
    width:80%;
    cursor:pointer;
    padding-top: 7px;
}
.simple-paint-pen-width div{
    height:0px;
    width:50%;
    border:1px solid #000000;
    background-color: #000000;
    margin:auto;
}
.simple-paint-font-stayle{
    border:1px solid #000000;
    border-radius: 3px;
    padding:2px;
    height:120px; 
    margin-top: calc(10% + 1px);
    margin-left: 3px;
    width:80%;
    display: none;
}
.simple-paint-font-selects{
    border:1px solid #FFF;
    border-radius: 3px;
    background-color: #FFF;
    margin-left: 1px;
    height:15px;
    width:99%;
    font-size:8px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.simple-paint-font-selects::-ms-expand {
    display: none; 
} 
.simple-paint-font-italic-checkbox,
.simple-paint-font-bold-checkbox{
    margin-top:3px;
}
.simple-paint-font-italic,
.simple-paint-font-bold{
    font-size:10px;
    width:99%;
    margin-top: 1px;

}
.simple-paint-font-italic{
    font-style: italic;
}
.simple-paint-font-bold{
    font-weight: bold;
}
.simple-paint-file-input-warrper{
    width:200px; 
    height:60px; 
    position:absolute; 
    z-index:999999; 
    background-color: #ffffff; 
    border:1px solid #000000;
    cursor:pointer;
    padding: 2px;
    box-shadow: 5px 10px 18px #888888;
    display: none;
}
.simple-paint-file-input-warrper span{
     font-size:10px;
     margin-left: 3px;
}
.simple-paint-file-input {
    padding: 5px;
    border:1px solid #000000;
    border-radius: 3px;
    width:94%;
    font-size:10px;
}
.sp-tooltip {
	border: 1px solid rgb(96, 178, 255);
	color: #444;
	background: rgb(201, 227, 252);
	box-shadow: 0 2px 3px #999;
    position: absolute;
    z-index:999999; 
	padding: 5px;
	text-align: left;
	border-radius: 5px;
	 -moz-border-radius: 5px;
	 -webkit-border-radius: 5px;
}
.sp-tooltip-hide { 
    display: none; 
}