/* overwrite UIKit */
[class*=uk-column-] {
  column-gap: 1vw;
}
.uk-grid {
  margin-left: 0;
}
.uk-grid>* {
  padding-left: 0;
}
*+.uk-grid-margin,
  .uk-grid+.uk-grid,
  .uk-grid>.uk-grid-margin {
  margin-top: 0;
}

/* overwrite main.css */
html {
  background-color: #fff;
  color: #000; 
}

body {
  width: 100%;
  min-height: 100vh;
  background-image: url("/painter/message/img/bg.png");
  background-size: cover;
  background-repeat: repeat;  
  background-position: center top;
  font-family: 'Noto Sans JP', "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Verdana, Arial, sans-serif;
}
.padding-button {
  padding: 2vw 0;
  text-align: center;
}
.padding-button img {
  cursor: pointer;
}
.control {
  border: none;
}
.vw-large {
  font-size: 3vw;
}
.vw-normal {
  font-size: 2.5vw;
}
.vw-small {
  font-size: 2vw;
}
.vw-ss {
  font-size: 1.5vw;
}
.vw-sss {
  font-size: 1vw;
}

.uk-margin.vw-large {
    background: rgb(255 255 255 / 80%);
    border-radius: 30px;
    margin: 0 20px;
}
 /*-----*/
.uk-text-center {
    margin-top: 30px;
    font-weight: bold;
}

.vw-ss.px-2 {
    padding: 20px 20px;
    font-weight: bold;    
}
 
span.vw-small.px-2 {
    font-weight: bold;
    padding-left: 0;
}
	
/*-----*/
#scene-canvas {
  overflow-x: hidden;
}

#canvas-frame-container {
  width: 100%;
  margin: 0;
  padding: 2%;
}

#canvas-frame {
  width: 100%;
  margin: 0;
  padding: 0;
}

#canvas {
  background-color: transparent;
  margin: 0;
  border: 5px solid #000; /*#FF6BBE;*/
}

#canvas-control {
  padding-top: 1vw;
  padding-right: 3vw;
  padding-left: 3vw;
}
#canvas-control > table {
  border-collapse: collapse;
}
#canvas-control > table td {
  padding: 4px;
}

#posted-image-container {
    padding-top: 1%;
    padding-left: 1%;
    padding-right: 5%;
    padding-bottom: 5%;
}
#posted-image {
  width:100%;
  background-color: transparent;
  /*border: none;  5px solid  #000; /*#FF6BBE;*/
}

/* added styles */
.p-0\.5 {
  padding: 0.5vw;
}
.p-1 {
  padding: 1vw;
}
.pt-0 {
  padding-top: 0;
}
.pb-0 {
  padding-bottom: 0;
}
.pb-1 {
  padding-bottom: 1vw;
}
.px-2 {
  padding-left: 1vw;
  padding-right: 1vw;
}

@media screen and (max-width: 768px) {
body {
  background-size: 100% auto;
  background-repeat: no-repeat;  
  background-position: center top;
  font-family: 'Noto Sans JP', "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Verdana, Arial, sans-serif;
}
  canvas {
    margin: 0;
  }
  .vw-large {
    font-size: 6.5vw;
  }
  .vw-normal {
    font-size: 6vw;
  }
  .vw-small {
    font-size: 5vw;
  }
  .vw-ss {
    font-size: 4vw !important;
  }
  .vw-sss {
    font-size: 3vw;
  }
  #canvas-control {
    padding-top: 2vw;
    padding-right: 5vw;
    padding-left: 5vw;
  }
  .p-0\.5 {
    padding: 1vw;
  }
  .p-1 {
    padding: 2vw;
  }
  .pb-1 {
    padding-bottom: 2vw;
  }
  .px-2 {
    padding-left: 4vw;
    padding-right: 4vw;
  }
  #canvas-control .vm-small {
    font-size: 3.5vw;
  }
  #canvas-bottom .vm-small {
    font-size: 3.5vw;
  }
  .uk-margin.vw-large{
    padding:5px;
    border-radius:20px
  }
  .vw-ss.px-2{
    padding:10px;
    font-size:16px;
  }
  .uk-margin.vw-large.uk-grid-margin.uk-first-column{
    margin-bottom: 20px;
  }
  .uk-position-center-left-out,
  .uk-position-center-right-out {
    color: #000 !important;
  }

}