/* LAYOUT
1 big, 2 small rows

*/

.xgrid-theme-1{
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 20px;
  font-size: 1rem;
}
  .xgrid-theme-1 div{display: grid;}
  .xgrid-theme-1 .xgrid-left-content .xgrid-title{font-size: 1.4rem;}
  .xgrid-theme-1 .xgrid-right-content{gap: 20px;}
  .xgrid-theme-1 .xgrid-right-content .xgrid-title{font-size: 1.1rem;}
  .xgrid-theme-1 .xgrid-right-list{grid-template-columns: 200px 1fr;}
  .xgrid-theme-1 .xgrid-title{font-weight: 600;}
  .xgrid-theme-1 .xgrid-right-item-txt{padding: 0 0 0 20px;}
  .xgrid-theme-1 .xgrid-right-item-txt .xgrid-text-preview{text-align: justify;}
  .xgrid-theme-1 .xgrid-date{font-size: 0.8rem;}

/* GALLERY */
.xgrid-gallery{

}
.xgrid-gallery img{
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 10px;
}

.xgrid-videolist-1{

}
  .xgrid-videolist-1 div{display: grid}
  .xgrid-videolist-1 .xgrid-content{}
  .xgrid-videolist-1 .xgrid-video-main iframe{
    width: 100%;
    aspect-ratio: 16/9;
  }
  .xgrid-videolist-1 .xgrid-video-list{
    margin-top: 20px;
    gap: 10px;
  }
  .xgrid-videolist-1 .xgrid-video-list .xgrid-video-thumbnail{
    position: relative;
    cursor: pointer;
  }
  .xgrid-videolist-1 .xgrid-video-list .xgrid-video-thumbnail .xgrid-video-thumbnail-text{
    position: absolute;
    bottom: 0;
    font-size: 1rem;
    color: #fff;
    padding: 10px;
    background-color: rgba(0,0,0,.6);
    font-weight: 400;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    width: 100%;
  }

.xgrid-list-std-m2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
  .xgrid-list-std-m2 .xgrid-content{
    display: grid;
    grid-template-columns: 150px 1fr;
  }
  .xgrid-list-std-m2 .xgrid-content .xgrid-img img{
    object-fit: cover;
    width: 150px;
    height: 150px;
    border-radius: 100%;
  }
  .xgrid-list-std-m2 .xgrid-content .xgrid-txt{
    display: grid;
    align-content: center;
    padding-left: 20px;
    color: #515151;
  }
  .xgrid-list-std-m2 .xgrid-content .xgrid-txt strong{
    font-size: 1.4rem;
    font-weight: 500;
    font-family: Work_Sans;
    color: #222;
  }

.xgrid-cols-std-m1{

}
  .xgrid-cols-std-m1 .xgrid-box{
    flex-grow: 1;
    border-radius: 0px 0px 20px 20px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  }
  .xgrid-cols-std-m1 .xgrid-txt{
    padding: 20px;
    text-align: center;
    font-size: 1.3rem;
    color: #515151;
    display: grid;
    grid-template-rows: 50px 1fr;
  }
  .xgrid-cols-std-m1 .xgrid-more{
    margin-top: 20px;
  }
  .xgrid-cols-std-m1 .xgrid-txt a,
  .xgrid-cols-std-m1 .xgrid-txt a:visited{
    color: #515151;
  }
  .xgrid-cols-std-m1 .xgrid-txt a:hover{
    color: #000;
  }
  .xgrid-cols-std-m1 .xgrid-more a{
    color: #222;
    font-size: 1.1rem;
  }
  .xgrid-cols-std-m1 .xgrid-more a:hover{
    text-decoration: underline;
  }

.xgrid-users-socmed{

}
.xgrid-users-socmed .xgrid-box{
  border-radius: 30px 20px 20px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  padding: 20px;
}
.xgrid-users-socmed .xgrid-box .xgrid-img,
.xgrid-users-socmed .xgrid-txt{
  padding-top: 10px;
  text-align: center;
  font-size: 1.3rem;
}
.xgrid-users-socmed .xgrid-box .xgrid-img img{
  width: 150px;
  height: 150px;
  border-radius: 100%;
  object-fit: cover;
}
.xgrid-users-socmed .xgrid-label{
  color: #787e82;
  font-size: 1.1rem;
}
.xgrid-users-socmed .xgrid-socmed a{
  padding: 10px 4px;
  color: #222;
}

/* TABLE */
/* TABLE DEFAULT */
.xgrid-table{
  width: 100%;
  border-collapse: collapse;
  border-spacing: inherit;
}
.xgrid-table td{
  padding: 10px;
}
.xgrid-table td img{
  max-width: 100%;
}
.xgrid-table .img-40{
  max-width: 40px;
}
.xgrid-table .img-50{
  max-width: 50px;
}
.xgrid-table .th-no{
  width: 3ch;
}
.xgrid-table img.xsquare{
  width: 30px;
  height: 30px;
  object-fit: cover;
}
.xgrid-table img.xcircle{
  width: 30px;
  height: 30px;
  border-radius: 100%;
  object-fit: cover;
}
.td-rp{
  text-align:right;
}
.td-rp span{
  font-size: 0.7rem;
  float:left;
  color: gray;
}

/* SIMILAR */
.xgrid-table-bluesky th,
.xgrid-table-birumud th,
.xgrid-table-birutwo th,
.xgrid-table-greeny th,
.xgrid-table-greendarky th,
.xgrid-table-bluedarky th,
.xgrid-table-yelloy th,
.xgrid-table-fotocopy th{
  text-align: center;
  padding: 10px;
  font-weight: 500;
  color: #fff;
}
.xgrid-table .tr-td:nth-child(even){
  background-color: #fff;
}
/* THEME BLUESKY */
.xgrid-table-bluesky .tr-th{
  background-color: #3db8e8;
}
.xgrid-table-bluesky .tr-th th{
  border: solid 1px #64caf2;
}
.xgrid-table-bluesky .th-sub{
  background-color: #64caf2;
}
.xgrid-table-bluesky .th-sub th{
  border: solid 1px #3db8e8;
}
.xgrid-table-bluesky .tr-td:nth-child(odd){
  background-color: #eef7ff;
}
.xgrid-table-bluesky .tr-td:nth-child(even){
  background-color: #fff;
}
.xgrid-table-bluesky td{
  border: solid 1px #d7f2fb;
}

/* THEME BLUE DARKY */
.xgrid-table-bluedarky .tr-th{
  background: radial-gradient(ellipse at bottom, #1a3657 0%, #1e1f24 100%);
}
.xgrid-table-greeny .tr-th th{
  border: solid 1px #1a3657;
}
.xgrid-table-bluesky td{
  padding: 10px;
  border: solid 1px #d7f2fb;
}

/* THEME BLUE TWO */
.xgrid-table-birutwo .tr-th{
  background: radial-gradient(ellipse at bottom, #2d45e3 0%, #0f1eb9 100%);
}
.xgrid-table-birutwo .tr-td:nth-child(odd){
  background-color: #f7f7ff;
}
.xgrid-table-birutwo .tr-th th{
  border: solid 1px #0355b7;
}
.xgrid-table-birutwo td{
  padding: 10px;
  border: solid 1px #e9ebff;
}

/* THEME BIRUMUD */
.xgrid-table-birumud .tr-th{
  background: radial-gradient(ellipse at bottom, #5ba7ff 0%, #5bcdff 100%);
}
.xgrid-table-birumud .tr-th th{
  border: solid 1px #51b7ee;
}
.xgrid-table-birumud .tr-td:nth-child(odd){
  background-color: #fafeff;
}
.xgrid-table-birumud .tr-td:nth-child(even){
  background-color: #fff;
}
.xgrid-table-birumud td{
  border: solid 1px #e2f5ff;
}
.button-birumud{
  color: #fff;
  background: radial-gradient(ellipse at bottom, #5ba7ff 0%, #5bcdff 100%);
  padding: 5px 10px;
  outline: none;
  width: auto;
  border-radius: 3px;
  border: none;
  cursor: pointer;
}

/* THEME GREENY */
.xgrid-table-greeny .tr-th{
  background-color: #00bf63;
}
.xgrid-table-greeny .tr-th th{
  border: solid 1px #06ae5d;
}
.xgrid-table-greeny .tr-td:nth-child(odd){
  background-color: #f5fff8;
}
.xgrid-table-greeny .tr-td:nth-child(even){
  background-color: #fff;
}
.xgrid-table-greeny td{
  border: solid 1px #d1f9e6;
  font-size: 0.8rem;
}

/* THEME GREEN DARKY */
.xgrid-table-greendarky .tr-th{
  background: radial-gradient(ellipse at bottom, #1d675d 0%, #1f977b 100%);
}
.xgrid-table-greendarky .tr-th-sub,
.xgrid-table-greendarky .tr-td th{
  background: radial-gradient(ellipse at bottom, #14a894 0%, #14886d 100%);
}
.xgrid-table-greendarky .tr-th th,
.xgrid-table-greendarky .tr-th-sub th,
.xgrid-table-greendarky .tr-td th{
  border: solid 1px #1e7163;
}
.xgrid-table-greendarky .tr-td th{
  text-align: left;
}
.xgrid-table-greendarky td{
  padding: 10px;
  border: solid 1px #d7f2fb;
}


/* THEME YELLOY */
.xgrid-table-yelloy .tr-th{
  background: radial-gradient(ellipse at bottom, #fdd700 0%, #e8e3ca 100%);
}
.xgrid-table-yelloy .tr-th th{
  border: solid 1px #e6db86;
}
.xgrid-table-yelloy .tr-td:nth-child(odd){
  background-color: #fffffb;
}
.xgrid-table-yelloy .tr-td:hover{
  background-color: #fff9da;
}
.xgrid-table-yelloy td{
  padding: 10px;
  border: solid 1px #fafbd7;
}

.xgrid-table-fotocopy{
  font-size: 0.6rem;
}
.xgrid-table-fotocopy th{
  color: #333;
  border: solid 1px #eee;
}
.xgrid-table-fotocopy .tr-th{

}
.xgrid-table-fotocopy .tr-td:nth-child(odd){
  background-color: #fefefe;
}
.xgrid-table-fotocopy td{
  padding: 10px;
  border: solid 1px #f7f7f7;
}

/* FORM THEME */
.xform-flat input,
.xform-flat textarea,
.xform-flat select{
  border: none;
  padding: 10px 5px;
  border-radius: 0;
  font-size: 0.9rem;
  font-weight: 500;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.xform-flat input[type="button"],
.xform-flat input[type="checkbox"]{
  width: auto;
  border-radius: 3px;
  padding: 9px 13px;
}
.xform-flat .xform-row{
  width: 100%;
  margin-bottom: 1.4rem;
}

/* BIRUMUD */

.xform-birumud{

}
.xform-birumud .xform-row label{
  color: #95bbdd;
}
.xform-birumud .xselect,
.xform-birumud input,
.xform-birumud textarea{
  background-color: #52b7ef05;
  border: none;
  padding: 10px 10px 13px;
  border-radius: 0;
  border-bottom: solid 2px aliceblue;
}
.xform-birumud textarea{
  border: solid 1px aliceblue;
}
.xform-birumud option{
  background-color: #fff;
}
.xform-birumud .xdatalist-selected{
  background-color: #4fb8ef;
}
.xform-birumud .btn{
  color: #fff;
  background: radial-gradient(ellipse at bottom, #5ba7ff 0%, #5bcdff 100%);
}
.xform-birumud .btn-second{
  border: solid 1px #d6e6f9;
  background-color: #eff8ff;
  color: #429ffd;
}

@media only screen and (max-width : 480px) {
  .xgrid-theme-1,
  .xgrid-theme-1 .xgrid-right-list,
  .xgrid-list-std-m2{
    grid-template-columns: 1fr;
  }
  .xgrid-theme-1 .xgrid-right-item-txt{
    padding: 0;
  }
  .xgrid-cols-std-m1 .xgrid-box{
    min-width: 100%;
  }
}