/* LAYOUT

1 big, 2 small rows



*/



.album-grid{

  gap: 5px;

  max-width: 600px;



  .album-box {

    justify-content: center;

    display: grid;

    transition: all 0.5s ease;

    position: relative;



    img {

      width: 120px;

      height: 120px;

      max-width: 100%;

      object-fit: cover;

      cursor: pointer;

      -webkit-filter: brightness(70%);

      transition: all 0.5s ease;

    }

    img:hover {

      -webkit-filter: brightness(100%);

    }



    .album-box-add {

      border: solid 2px #ccc;

      width: 120px;

      height: 120px;

      display: grid;

      justify-content: center;

      align-content: center;

      font-size: 3rem;

      color: #999;

    }

    .album-box-add:hover {

      cursor: pointer;

      color: #666;

      background-color: #fdfeff;

    }



    input[type="file"] {

      display: none;

    }

    .album-box-i-del:hover {

      color: #dd3838;

    }

    .album-box-i-del {

      position: absolute;

      top: 0px;

      right: 4px;

      z-index: 1;

      font-size: 1.3rem;

      cursor: pointer;

      color: #8f9595;

    }

  }

}

.album-grid-21-9{

  gap: 5px;

  display: grid;

  grid-template-columns: repeat(var(--album-grid-fr), 1fr);



  .album-box {

    justify-content: center;

    display: grid;

    transition: all 0.5s ease;

    position: relative;

    background-color: #f9f9f9;

    align-items: center;

    border: solid 1px #d7d4d4;



    img {

      max-width: 100%;

      object-fit: cover;

      cursor: pointer;

      -webkit-filter: brightness(70%);

      transition: all 0.5s ease;

      aspect-ratio: 21 / 9;

    }

    img:hover {

      -webkit-filter: brightness(100%);

    }



    .album-box-add {

      border: solid 2px #ece6e6;

      width: 50px;

      height: 50px;

      display: grid;

      justify-content: center;

      align-content: center;

      font-size: 2rem;

      color: #9f9f9f;

    }

    .album-box-add:hover {

      cursor: pointer;

      color: #666;

      background-color: #fdfeff;

    }



    input[type="file"] {

      display: none;

    }

    .album-box-i-del:hover {

      color: #dd3838;

    }

    .album-box-i-del {

      position: absolute;

      top: 0px;

      right: 4px;

      z-index: 1;

      font-size: 1.3rem;

      cursor: pointer;

      color: #8f9595;

    }

  }

}



.xgrid-box-image-text-stdcard-rounded{

  display: grid;

  grid-template-columns: 100px 1fr;

  margin: 10px 0;

  background: rgba( 255, 255, 255, 0.6 );

  box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );

  backdrop-filter: blur( 4px );

  -webkit-backdrop-filter: blur( 4px );

  border-radius: 10px;

  border: 1px solid rgba( 255, 255, 255, 0.18 );

  padding: 10px;

  gap: 10px;

  position: relative;



  .xbox-img img{

    max-width: 100%;

    border-radius: 10px;

  }

  .xclose{

    position: absolute;

    right: 10px;

    top: 10px;

    width: 20px;

    background-color: #ffe2e2;

    height: 20px;

    display: grid;

    justify-content: center;

    align-content: center;

    border-radius: 3px;

  }

  .xclose i{

    color: #fd9595;

    font-size: 1rem;

  }

  .xedit{

    position: absolute;

    right: 33px;

    top: 9px;

  }

  .xedit i{

    font-size: 1.2rem;

  }

  .xbox-txt a:hover{

    text-decoration: none;

  }

}



.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%;

}

.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%);

  }

  .tr-footer{

    background-color: #e8ebee;

    font-size: 0.8rem;

  }

}

.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%);

  }

  .tr-th th{

    border: solid 1px #51b7ee;

  }

  .tr-td:nth-child(odd){

    background-color: #fafeff;

  }

  .tr-td:nth-child(even){

    background-color: #fff;

  }

  .tr-disabled{

    background-color: #f3f6f7;

  }

  .tr-disabled td{

    color: grey;

  }

  .tr-td-warning{

    background-color: #fff4f4;

  }

  .tr-td-warning td{

    border: solid 1px #ffe2e2;

  }

  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{





  input:disabled,

  select:disabled{

    background-color: #fbfbfb;

    color: #757070;

  }

  input[type="button"]:disabled{

    background: #fbfbfb;

    cursor: default;

  }

}

.xform-text{

  margin: 20px auto;



  .xform-row label{

    display: inline-block;

    width: 100%;

    font-size: 0.8rem;

    font-weight: 500;

    font-family: Lexend;

    margin: 10px 0 5px;

    color: #00aeca;

  }

  .xform-row .value{

    display: inline-block;

    font-size: 0.9rem;

  }

}



.xform-formone{

  margin: 40px 0;

  background: #fbfbfb;

  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);

  backdrop-filter: blur(4px);

  -webkit-backdrop-filter: blur(4px);

  border-radius: 10px;

  border: 1px solid rgba(255, 255, 255, 0.18);

  padding: 30px;



  .xform-row label {

    font-size: 0.75rem;

    color: #6b7788;

    display: inline-block;

    margin-top: 15px;

    margin-bottom: 5px;

    font-weight: 300;

  }



   .xselect,

   input,

   textarea {

      background-color: #fff;

      border: solid 2px #eee;

      padding: 10px 10px 13px;

      border-radius: 3px;

      width: 100%;

      outline: none;

   }

   input[type="button"]{

      width: auto;

      border-radius: 5px;

      font-weight: 300;

      padding: 8px 20px;

   }

   input:disabled,

   select:disabled{

     background-color: #fbfbfb;

     color: #757070;

   }



   option {

      background-color: #fff;

   }



   .xdatalist-selected {

      background-color: #d08d2d;

   }



   .btn {

      color: #fff;

      background: #d08d2d;

      border: solid 1px #cc9e5c;

   }



   .btn-second {

      background-color: #fbf8f4;

      color: #d08d2d;

      border: solid 1px #dfcaac;

   }

   .xform-row-title {

      padding: 30px 0 10px;

      font-size: 0.9rem;

      border: none;

      margin-bottom: 5px;

      color: #514b4b;

   }

   .xform-row-title label {

      display: inline-block;

   }

   .xinput-label-i span {

      position: absolute;

      font-size: 1.2rem;

      font-weight: 500;

      padding: 10px;

      color: #aa844e;

   }

   .xinput-label-i input {

      padding-left: 40px;

      padding-top: 10px;

   }

}





.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-row label{

    color: #95bbdd;

  }

  .xselect,input,textarea{

    background-color: #52b7ef05;

    border: none;

    padding: 10px 10px 13px;

    border-radius: 0;

    border-bottom: solid 2px aliceblue;

  }

  textarea{

    border: solid 1px aliceblue;

  }

  option{

    background-color: #fff;

  }

  .xdatalist-selected{

    background-color: #4fb8ef;

  }

  .btn{

    color: #fff;

    background: radial-gradient(ellipse at bottom, #5ba7ff 0%, #5bcdff 100%);

  }

  .btn-second{

    border: solid 1px #d6e6f9;

    background-color: #eff8ff;

    color: #429ffd;

  }

  .xinput-label-i input {

    padding-left: 36px;

    padding-top: 12px;

  }

}



.btn-nav{

  display: none;

}

@media only screen and (max-width : 480px) {



  /* NAV ANIMATION */

  .nav-slide-right-on{

    width: 80%;

    height: 100dvh;

    position: fixed;

    top: 0;

    left: 0;

    transition: width 600ms ease, height 400ms ease;

    z-index: 1;

    .menu-scroll{

      display: block;

    }

  }

  .nav-slide-right-off{

    width: 0;

    height: 0;

    transition: width 800ms ease, height 400ms ease;



    .menu-scroll{

      display: none;

    }

  }

  .btn-nav{

    display: grid;

    width: 70px;

    height: 70px;

    justify-content: center;

    align-content: center;

    font-size: 1.7rem;

    position: fixed;

    border-radius: 100%;

    padding-bottom: 6px;

    bottom: 30px;

    left: 30px;

    z-index: 2;

  }

  .btn-nav:active {

    cursor: grabbing;

    transform: scale(0.95);

  }

  .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%;

  }

}