:root {--main-color:white;--main-bgcolor:#39373A;--main-bsize:7px; }
body {font-family:'Charm',cursive; background-color:var(--main-bgcolor);}
button {text-align:right;}
hr {width:70%; text-align:left; margin:auto; }

div.borderimg2 {border: 30px outset transparent;border-image:url(https://c.youyod.com/border-1.jpg) 68 68 round; 
    background-color:white ; color: black;}
div.divtoprightb {border:0px; position:fixed; top:0; right:0;text-align:center;border: 30px outset transparent; 
    border-image:url(https://c.youyod.com/border-1.jpg) 68 68 round;background-color:white ; color: black;}
div.divcenter {text-align:center;} 
div.divtopright {position:fixed;top:0;right:0;}
div.divbottright {border:0px; position:fixed; bottom:0; right:0;} 
div.textRight {text-align:right;}
div.warn {color:red;background-color:yellow; font-size:15px;}

.prev,.next {cursor:pointer; width:auto; font-weight: bold;font-size:18px; transition:0.6s ease;
    border-radius:0 3px 3px 0; user-select:none;  position:relative;} 
.next {float:right;}  


img.right {float:right; border-radius:50%;}
img.rightborder {border:7px outset transparent; border-image:url(https://c.youyod.com/border-1.png) 68 68 round; float:right;border-radius:50%;}
p.r {background-color:yellow; color:red;}

table.add {border:1px solid yellow; margin-left:auto; margin-right:auto}
td.tdtopleft {text-align: left; vertical-align: top; }
td.w0 {vertical-align: top;border: 0px double white; }
td.w2 {vertical-align: top;border: 2px double white; }
td.n {text-align:right;}

input{background-color:white; color:black;}

.mySlides {display:none; margin: auto; height: 250px; width: auto;border: 3px dotted gold; padding: 10px; }
.sampleborH {background-color: white;}
.samplebor {height:250px; width:200px ;background-color: white;color: black; padding: 5px 10px 15px 5px; margin-left: 100px;
	border:20px outset transparent;border-image:url(https://c.youyod.com/border1.png) 68 68 round; }
.sampleimg {height:200px; width: 150px; border:20px outset transparent;border-image:url(https://c.youyod.com/border-1.jpg) 68 68 round;
    border-radius:50%; padding-left: 5px; padding-right:5px; } 
.sampleH2 {height:335px; width:220px; padding: auto; border: 5px double gray; margin-top: 80px; margin-left: 60px;}
.samplebor2 {height:325px; width:210px ;background-color: white;color: black; ; 
    padding: 0px 10px 15px 0px;border:20px outset transparent;border-image:url(https://c.youyod.com/border1.png) 68 68 round; }  
.sampleimg2 {height:200px; width: 150px; border:20px outset transparent;border-image:url(https://c.youyod.com/border-1.jpg) 68 68 round;
    border-radius:50%; padding-left: 15px; padding-right:5px; margin-left: 10px;} 
.sampletext2 {height:90px; width:150px; border:20px outset transparent;border-image:url(https://c.youyod.com/border-1.jpg) 68 68 round;
    margin-left: 10px; }  
.sampleH3 {height:325px; width:275px; padding: auto; border: 5px double gray; margin-top: 50px; margin-left: 40px; }
.sampleimg3 {height:200px; width: 180px; border:20px outset transparent;border-image:url(https://c.youyod.com/border-1.jpg) 68 68 round;
    border-radius: 50px 10px; margin: auto; display: block; margin-top: 1px;  
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);  } 
.sampletext3 {height:100px; width:180px; border:20px outset transparent;border-image:url(https://c.youyod.com/border-1.jpg) 68 68 round;
    margin: auto; display: block; color:black;  
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); }  
.overline {text-decoration-line:overline; text-decoration-color:black;} /* เส้นบน */
.through {text-decoration-line:line-through; text-decoration-color:black;} /* เส้นกลาง */
.under {text-decoration-line:underline; text-decoration-color:black;} /* เส้นล่าง */
.overunder {text-decoration-line:overline underline; text-decoration-color:black;} /* เส้นบน+เส้นล่าง */
.bsd {box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    } /* กรอบเงาด้านขวา */
.bsdf {box-shadow: -7px -6px 5px 0px rgba(0,0,0,0.75);
    -webkit-box-shadow: -7px -6px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: -7px -6px 5px 0px rgba(0,0,0,0.75);
    } /* กรอบเงาด้านซ้าย */
.bsdt1 {border:20px outset transparent;border-image:url(https://buddysoftware.net/img/my/border_01.jpg) 68 68 round} /* กรอบลายไทย */
.bsdt2 {border:30px outset transparent;border-image:url(https://buddysoftware.net/img/my/border_02.png) 68 68 round} /* กรอบลายไทย */
.bsdt3 {border:30px outset transparent;border-image:url(https://buddysoftware.net/img/my/border_03.jfif) 68 68 round} /* กรอบลายไทย */
.bsdt4 {border:30px outset transparent;border-image:url(https://buddysoftware.net/img/my/border_04.jfif) 68 68 round} /* กรอบลายไทย */
/* ใช้ใน add.php  */
.red {color:white;font-size:15px;}
.fb {font-weight:bold;color:blue}
.yellow {color:yellow;} 
.ib {background-color:white;color:red;border:4px inset blue;}
.web77 {top:5px; left:15px; position:fixed;}
.sayweb77 {position:fixed; top:5px; left:80px; background-color:white;color:black;}
.listname {background-color:white; color:black; display:none;
  margin-left:5px; margin-top:5px; line-height:1.8;}
.takemoney {position:fixed; top:50px; left:25px; background-color:yellow; color:black; 
  line-height:1.8; display:none; width:250px;padding-left:30px; padding-top:10px;padding-bottom:10px;}

.forSpace {width:100%; margin:0 auto; position:fixed; z-index:101;}
.forInBOX {clear:both; color:#555555; font-family:sans-serif; font-size:15px;}
.forInBOX a {text-decoration:none;}
.forInBOX p {color:blue;}
.forInBOX p a {color:#d91900; font-weight:bold;}

/* For Mobile */
@media screen and (max-width: 600px) {
    div.borderimg {border: var(--main-bsize) outset transparent;border-image:url(https://c.youyod.com/border-1.png) 68 68 round; 
    background-color:var(--main-bgcolor); color:var(--main-color);}
    fwH {font-size:15px; }
    fwD {font-size:15px; }
    div.letter {height: 200px;}
    div.divleft {margin-left:5%;}
    div.divleft2 {margin-left:10%;}
    div.divleft3 {margin-left:35%;} 
    input[type='number']{width: 80px;} 
    img.center {margin: auto;border-radius:50%;border: 3px solid green;height: 275px;}
    /* ใช้ใน add.php  */
    .listname,.takemoney {font-size:17px; width:275px;}
    .web77 {line-height:150%;}
    .forSpace {padding-top:35px;}
    .forInBOX {width:85%; margin:auto; background:#f3f3f3; position:relative;
    padding-top:10px; padding-left:15px; padding-bottom:15px;
    border-radius:5px; box-shadow:0 2px 5px #000;}
}

/* For PC */
@media screen and (min-width:601px) {
    div.borderimg {border: 30px outset transparent;border-image:url(https://c.youyod.com/border-1.png) 68 68 round; 
    background-color:var(--main-bgcolor); color:var(--main-color);}
    fwH {font-size:35px;}
    fwD {font-size:25px;}
    div.letter {height: 300px;}
    div.divleft {margin-left:20%;}
    div.divleft2 {margin-left:25%;}
    div.divleft3 {margin-left:35%;} 
    input[type='number']{width:125px;} 
    img.center {margin: auto;border-radius:50%;border: 3px solid red;height: 318px;}
    /* ใช้ใน add.php  */
    .listname,.takemoney {font-size:25px; width:350px;}
    .forInBOX {min-width:600px; width:600px; min-height:150px;
        margin:100px auto; background:#f3f3f3;position:relative; z-index:103;
        padding:15px 35px; border-radius:5px; box-shadow:0 2px 5px #000;}
}