body{margin:0;padding:0;background-color:#c3ddff;font-family:Noto Sans Thai,sans-serif;min-height:100vh}#root{display:flex;flex-direction:column;min-height:100vh}*{box-sizing:border-box}.test{border:1px solid red}.row{display:flex;flex-wrap:wrap}.col{flex:1 0 0}.col-1{flex:0 0 auto;width:8.33333333%}.col-2{flex:0 0 auto;width:16.66666667%}.col-3{flex:0 0 auto;width:25%}.col-4{flex:0 0 auto;width:33.33333333%}.col-5{flex:0 0 auto;width:41.66666667%}.col-6{flex:0 0 auto;width:50%}.col-7{flex:0 0 auto;width:58.33333333%}.col-8{flex:0 0 auto;width:66.66666667%}.col-9{flex:0 0 auto;width:75%}.col-10{flex:0 0 auto;width:83.33333333%}.col-11{flex:0 0 auto;width:91.66666667%}.col-12{flex:0 0 auto;width:100%}.col-auto{flex:0 0 auto;width:auto}.col-hidden{display:none}@media screen and (min-width: 0px){.col-sm{flex:1 0 0}.col-sm-1{flex:0 0 auto;width:8.33333333%}.col-sm-2{flex:0 0 auto;width:16.66666667%}.col-sm-3{flex:0 0 auto;width:25%}.col-sm-4{flex:0 0 auto;width:33.33333333%}.col-sm-5{flex:0 0 auto;width:41.66666667%}.col-sm-6{flex:0 0 auto;width:50%}.col-sm-7{flex:0 0 auto;width:58.33333333%}.col-sm-8{flex:0 0 auto;width:66.66666667%}.col-sm-9{flex:0 0 auto;width:75%}.col-sm-10{flex:0 0 auto;width:83.33333333%}.col-sm-11{flex:0 0 auto;width:91.66666667%}.col-sm-12{flex:0 0 auto;width:100%}.col-sm-auto{flex:0 0 auto;width:auto}.col-sm-hidden{display:none}}@media screen and (min-width: 900px){.col-lg{flex:1 0 0}.col-lg-1{flex:0 0 auto;width:8.33333333%}.col-lg-2{flex:0 0 auto;width:16.66666667%}.col-lg-3{flex:0 0 auto;width:25%}.col-lg-4{flex:0 0 auto;width:33.33333333%}.col-lg-5{flex:0 0 auto;width:41.66666667%}.col-lg-6{flex:0 0 auto;width:50%}.col-lg-7{flex:0 0 auto;width:58.33333333%}.col-lg-8{flex:0 0 auto;width:66.66666667%}.col-lg-9{flex:0 0 auto;width:75%}.col-lg-10{flex:0 0 auto;width:83.33333333%}.col-lg-11{flex:0 0 auto;width:91.66666667%}.col-lg-12{flex:0 0 auto;width:100%}.col-lg-auto{flex:0 0 auto;width:auto}.col-lg-hidden{display:none}}.navbar{background-color:#34addd;color:#fff;width:100%;height:70px;align-items:center;padding:0 15px;margin-bottom:20px;position:sticky;top:0;font-weight:700;z-index:100}.navbar button,a{all:unset}.content{flex:1}.footer{background-color:#000;color:#fff;height:30px;width:100%;text-align:center;justify-content:center}img{float:left;width:100px;height:100px;margin:20px;object-fit:contain}.dashboard-container{justify-items:center;text-align:center}.add{all:unset;background-color:#72b4ff;width:100px;height:50px;color:#fff;font-weight:700;cursor:pointer}.add:hover{background-color:#588bc5}.dashboard-container input{height:50px;border:1px solid black;font-size:16px}@media screen and (min-width: 0px){.card-container{width:100%}}@media screen and (min-width: 900px){.card-container{width:60%}}.edit{all:unset;background-color:#e4d127;width:80px;height:50px;color:#fff;font-weight:700;cursor:pointer}.edit:hover{background-color:#b3a41f}.delete{all:unset;background-color:#ff7272;width:80px;height:50px;color:#fff;font-weight:700;cursor:pointer}.delete:hover{background-color:#ca5b5b}.card{align-items:center;margin:10px;height:50px}.card .title{background-color:#fff;height:100%;margin:0;align-content:center;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.modal-overlay{z-index:1000;position:absolute;display:flex;justify-content:center;align-items:center;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background-color:#00000080}.modal{position:relative;background-color:#fff;padding:20px;border-radius:5px;max-width:500px;width:100%;min-height:60px}.close-button{width:50px;height:50px;position:absolute;top:5px;right:5px;font-size:34px;background:transparent;color:#000;border:transparent;cursor:pointer;border-radius:100%;transition:linear .2s}.close-button:hover{background-color:#00000080}.modal form{width:100%;justify-items:center}.modal input{margin:10px;padding-left:15px;height:50px;width:200px;border:2px solid rgba(0,0,0,.3);border-radius:25px}.modal h2{margin:0}.modal button.submit{margin-top:10px;width:150px;height:50px;color:#fff;font-weight:700;font-size:20px;background-color:#8dc8ff;border:0;border-radius:12px;cursor:pointer;transition:linear .2s}.modal button.submit:hover{background-color:#6d9bc7}.modal .form-container{margin:20px;text-align:center}