@import url('https://fonts.googleapis.com/css2?family=Fleur+De+Leah&family=Work+Sans:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');


::-webkit-scrollbar {
  width: 7px;
}

body {
  background-color     : #dddddd;
  font-family          : 'inter', sans-serif;
  background-position  : center;
  background-size      : cover;
  background-attachment: fixed;
  overflow-x           : hidden;
}

.modal-bottom .modal-dialog {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 100% !important;
  margin: 0;
}
.modal-bottom .modal-dialog .modal-content {
  border-radius: 1rem 1rem 0 0;
}

.modal-p-bottom .modal-dialog {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 500px !important;
  margin: 0;
  transform: translateY(100%) !important;
}
.modal-p-bottom .modal-dialog .modal-content {
  border-radius: 1rem 1rem 0 0;
  border: none;
}
.modal-p-bottom.show {
  overflow: hidden;
}
.modal-p-bottom.show .modal-dialog {
  transform: translateY(0%) !important;
  min-height: 80px;
}

.modal-right .modal-dialog {
  position: fixed;
  z-index: 1055;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  max-width: 100%;
  width: 320px;
  left: auto !important;
  transform: translate3d(100%, 0, 0) !important;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.modal-right .modal-content {
  height: 100vh;
  border-radius: 0.3rem 0 0 0.3rem;
}
.modal-right.show .modal-dialog {
  transform: translate3d(0, 0, 0) !important;
}

.header-sheet{
    background: #ebeaea;
    border-radius: 1rem 1rem 0 0;
    padding-bottom: 0.5rem;
}

.handle-sheet{
    margin: 5px 0;
    display: flex;
    justify-content: center;
}
.list-handle{
        border-bottom: 5px solid #afadad;
    border-radius: 10px;
    width: 20%;
}
.header-title {
    padding: 0.5rem 1rem;
    font-weight: 600;

}
.header-title i {
    background: #016a6a;
    padding: 0.5rem;
    border-radius: 50%;
    color: #fff;
    font-size: 12px;
}


.hddel{display: none!important}
.modal {
  padding-right: 0px !important;
  left: auto !important;
}

.modal-open {
  padding-right: 0px !important;
}

.iconsz {
  font-size: 1.5em !important;
}
span.waktunya {
    background: #14ad14;
    padding: 1px 5px 0 5px;
    border-radius: 5px;
    color: white;
    width: 90%;
    font-size: 10px;
    text-align: left;
    float: right;
}

#bodyKonten {
  max-width          : 500px;
  padding            : 0px;
  height             : auto;
  background: #EEF0F4;
  /* position        : relative; */
}

.showget {
    color:#686868;
    font-size:12px;
}


.credit-copy{
    display: inline-block;
    position: fixed;
    bottom: 2px;
    left: 50%;
    translate: calc(-50% - 0%);
    font-size: 12px;
    text-transform: uppercase;
}


.event-url-link{
    background:#fff;color:#016a6a;font-size: 13px;
}


.btn-primary:active {
  background-color: #016a6a ;
  border-color    : #016a6a ;
}

.btn-primary:focus {
  background-color: #016a6a ;
  border-color    : #016a6a ;
  box-shadow      : 0 0 0 0.2rem #096d6d59;
}

.header-pop {
  background    : #016a6a;
  text-align    : center;
  color         : white; 
  margin        : -16px auto 20px auto;
  width         : 70%;
  vertical-align: middle;
  padding       : 5px;
  border-radius : 0px 0px 15px 15px;
  font-family   : 'Poppins';
  font-weight   : 600;
}

.header-connect {
  background    : #016a6a;
  text-align    : center;
  color         : white;
  margin        : 0px auto 20px auto;
  width         : 60%;
  vertical-align: middle;
  padding       : 5px;
  border-radius : 0px 0px 15px 15px;
  font-family   : 'Poppins';
  font-weight   : 600;
}

.bg1{
  background:#016a6a;  
}

.tclr{
    color :#016a6a;
}

.text-1{font-size:10px;}
.text-2{font-size:11px;}
.text-3{font-size:12px;}
.text-4{font-size:13px;}
.text-5{font-size:14px;}
.text-6{font-size:15px;}
.text-7{font-size:16px;}
.text-8{font-size:17px;}
.text-9{font-size:18px;}
.text-10{font-size:19px;}
.text-11{font-size:20px;}
.head-list {
    text-align: center;
    background-color: #016a6a;
    padding: 4px;
    border-radius: 15px 15px 0px 0px;
    position: relative;
}
.jthadir{
    font-size: 0.5em;
    margin: 0 5px;
    padding: 1px 5px;
    background: lightgrey;
    width: 43%;
    border-radius: 2px;
}

.avatar {
  margin-top   : 20px !important;
  margin-left: 27%;
  border-radius: 50%;
  text-align   : center;
}

.avatar-icon {
  background   : #cccccc;
  padding      : 10px;
  border-radius: 50%;
  font-size    : 3rem;
}

.avatar-name {
  text-align : center;
  font-family: 'Poppins';
  font-size  : 15px;
  font-weight: 600;
  padding-top: 10px;
  color      : #016a6a;
}

.navbread {
  list-style               : none;
  background-color         : #016a6a;
  color                    : white;
  padding                  : 7px 20px;
  border-bottom-left-radius: 0.7em;
  border-top-left-radius   : 0.7em;
  display                  : block;
  font-size                : 13px;
  font-family              : 'Poppins', sans-serif;
  font-weight              : 600;
}

.navbread:hover {
  text-decoration          : none;
  background-color         : teal;
  color                    : white;
  padding                  : 7px 20px;
  border-bottom-left-radius: 0.7em;
  border-top-left-radius   : 0.7em;

}

.navbr {
  display     : flex;
  margin-right: -10px;
}


.box-setwel {
  text-align      : center;
  padding         : 10px;
  background-color: #e6efef;
  margin-bottom   : 5px;
  border-radius   : 0px 0px 15px 15px;
  min-height      : auto;
  position        : relative;
}

.cardcover {
  border             : 0px;
  background-color   : #ffffff;
  /* position        : absolute;
  top                : 50px;
  bottom             : 0px; */
  min-height         : 100vh;
}

.cardcover .card-body.boxConten {
  padding-top   : 0px;
  padding-bottom: 0px;
  padding-left  : 0px;
  padding-right : 0px;
}

.cardcover .kepala {
  position        : sticky;
  left            : -5px;
  right           : -5px;
  top             : 0px;
  color           : #1d1d1d;
  background-color: #ffffff95;
  z-index         : 700;
  backdrop-filter: blur(10px);
}

.cardcover .kaki {
  position: absolute;
  left    : 0px;
  right   : 0px;
  bottom  : 0px;
}

.icon-header {
  text-decoration : none;
  color           : #016a6a;
  background-color: none;
  padding         : 0.2rem;
  display         : block;
  text-align      : center;
}


ul.menuNav {
  padding: 0px;
}

ul.menuNav li {
  list-style      : none;
  display         : inline-table;
  background-color: #016a6a;
  color           : #ffffff;
  padding         : 10px;
  border-radius   : 0.2em;
  font-size       : 13px;
  margin-top      : 5px;
  /* margin-bottom: 5px; */
}

ul.menuNav li:hover {
  background-color: #ffffff;
  color           : #016a6a;
}

ul.menuNav li a {
  text-decoration: none;
  text-transform : uppercase;
  color          : #ffffff;
}

ul.menuNav li:hover a {
  text-decoration: none;
  color          : #016a6a;
}


.menu-head {
  text-decoration : none;
  color           : white;
  background-color: teal;
  padding         : 8px;
  display         : block;
  border-radius   : 0.2rem;
  text-align      : center;
}

.menu-head:hover {
  color           : teal;
  background-color: white;
  text-decoration : none;
}

.menu-head i {
  font-size: 2em;
}

.menu-head span {
  font-size     : 10px;
  text-transform: uppercase;
  display       : block;
}

.glass{
    border-radius: 1.2rem;

backdrop-filter: blur(4px) saturate(180%);
-webkit-backdrop-filter: blur(4px) saturate(180%);
border: 0.0625rem solid rgba(255, 255, 255, 0.8);
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2), inset 0 4px 20px rgba(255, 255, 255, 0.3);
}
.glass::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 1.2rem;
  backdrop-filter: blur(1px);
  box-shadow: inset -10px -8px 0px -11px rgba(255, 255, 255, 1),
    inset 0px -9px 0px -8px rgba(255, 255, 255, 1);
  opacity: 0.6;
  z-index: -1;
  filter: blur(1px) drop-shadow(10px 4px 6px black) brightness(115%);
  pointer-events: none;
}
.nav-link {
  color           : white;
  border-radius   : none !important;
  border          : none !important;
  background-color: teal;
  font-size       : 12px;
  font-weight     : 600;
  text-align      : center;

}

.nav-link.active {
  color           : teal;
  border-radius   : none ;
  border          : none ;
  background-color: #fff;

}

.nav-link:focus {
  color           : teal ;
  border-radius   : none;
  background-color: #fff;
}

.navtabs {
  flex         : 0 0 50%;
  border-radius: none !important;
}

.menunya {
  text-decoration : none;
  padding         : 8px;
  display         : block;

  text-align      : center;
}

.menunya:hover {
  text-decoration : none;
}

.menunya-admin {
  text-decoration : none;
  color           : white;
  background-color: #cb616b;
  padding         : 8px;
  display         : block;
  border-radius   : 0.6rem;
  text-align      : center;
}

.menunya-admin:hover {
  color           : white;
  background-color: #cb616b;
  text-decoration : none;
}

.menunya i {
  font-size: 1.5em;
}

.menunya span {
  font-size     : 13px;
  display       : block;
}

.menu-mid {
  margin-left  : 10px;
  margin-right : 10px;
  padding-left : 2px;
  padding-right: 2px;
}

#konten {
  padding-left : 10px;
  padding-right: 10px;
  padding-top  : 10px;
}

.hero img {
  border-radius: 15px 15px 15px 15px;
}

.garis {
  border-bottom: 1px solid #888888;

}

.bg-overlay{
    background:linear-gradient(rgb(255 255 255 / 0%),rgb(0 0 0 / 70%)), url();
    border-radius:15px;
    height:35vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 10px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.title-wedding {
  text-align      : center;
  border-radius   : 15px 15px 15px 15px;
  background-size: cover;
  height:35vh;
}

.title-wedding #title {
  text-transform: uppercase;
  font-weight   : 600;
  font-size     : 16px;
  font-family   : 'Poppins', sans-serif;
}

.title-wedding #name {
    font-size: 22px;
    color: #fff;
    font-family: 'poppins', sans-serif;
    text-transform: uppercase;
    font-weight: bold;
    line-height:1em;

}

.title-wedding p {
    margin-bottom:0 !important;
  font-size  : 14px;
  font-weight: 600;
  color: #fff;
  font-family: 'Poppins', sans-serif;
}

.box-menu {
  text-align      : center;
  background-color: rgb(238 245 245);
  margin          : 10px 0px 0px 0px;
  padding         : 15px;
  border-radius   : 15px 15px 0px 0px;
  position        : relative;
}

.box-app {
  background-color: #acbebe;
  padding         : 15px;
  position        : relative;
}

.down-app-btm {
  font-weight: 600;
  font-size  : 14px;
  font-family: 'Poppins', sans-serif;
  text-align : right;
}

.down-app-top {
  font-weight: 500;
  font-size  : 11px;
  font-family: 'Poppins', sans-serif;
  text-align : right;
}

.down-pass-top {
  font-weight: 500;
  font-size  : 13px;
  font-family: 'Poppins', sans-serif;
  text-align : left;
}

.box-list {
  text-align      : center;
  padding         : 10px;
  background-color: #e6efef;
  margin-bottom   : 5px;
  border-radius   : 0px 0px 15px 15px;
  min-height      : calc(100vh - 250px);
  position        : relative;
}

@media only screen and (max-width: 720px) {
  .box-list {
    text-align      : center;
    padding         : 10px;
    background-color: #e6efef;
    margin-bottom   : 5px;
    border-radius   : 0px 0px 15px 15px;
    min-height      : calc(100vh - 140px);
    position        : relative;
  }
}




.box-head-page {
  text-align      : center;
  background-color: rgb(238, 245, 245);
  position: sticky;

}



.box-list .table-ul {
  padding   : 2px;
  text-align: left;
  width     : 100%;
}

.box-list .table-ul li {
  display: inline-block;
}





.box-list-home {
  text-align      : center;
  padding         : 10px;
  margin-bottom   : 5px;
  border-radius   : 0px 0px 15px 15px;
  position        : relative;
}


.comments-box-home {
  max-height: 50vh;
  overflow-y: auto;
}
.comments-box-home::-webkit-scrollbar {
  display: none;
}

.badge{
    border-radius:4px!important;
}
.acordion-box .card {
  background-color: transparent;
  border          : 0px;
}

.acordion-box .card .card-header {
  background-color: transparent;
  padding-left    : 0px;
  padding-right   : 0px;
  padding-top     : 5px;
  padding-bottom  : 5px;
  border          : 0px;
}
.openedbox {
   background-color: #dbdbdb !important;
}
.acordion-box .card .card-body {
  background-color: #f8f8f8;
  padding-left    : 28px;
  padding-right : 5px;
  padding-top     : 5px;
  padding-bottom  : 6px;
  border-top      : 0px;
  border-bottom   : 1px solid #bfbfbf;
  font-size       : 12px;
  color           : #242424;
  display           : flex;
  justify-content: space-between;
  align-items: center;
}

.acordion-box a span {
  font-size  : 16px;
  font-weight: 500;

}

.acordion-box a {
  text-decoration: none;
  color          : #242424;
}

.acordion-box a:hover {
  text-decoration: none;
}

.acordion-box a span i {
  font-size: 13px;
}

.acordion-box .waktu {
  font-size  : 12px;
  font-weight: 500;
  float      : right;
  padding : 3px 6px;
}



.box-list .list-judul h6 {
  font-size     : 14px;
  font-weight   : 700;
  text-transform: uppercase;
  font-family   : 'Poppins', sans-serif;
}



@media (max-width: 767.98px) {
  .acordion-box .waktu {
    font-size: 12px;
  }

  .acordion-box a span {
    font-size  : 16px;
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
  }

  .acordion-box a span i {
    font-size: 12px;
  }

  .acordion-box .card .card-body {
    font-size: 12px;
  }

  .box-list .list-judul h6 {
    font-size: 14px;
  }

}

.b-l-title {
  font-size  : 15px;
  margin-top : 15px;
  font-weight: bold;
  font-family: 'Poppins', sans-serif;
}

.infoHadir,
.infoHadirc {
  display         : block;
  text-align      : center;
  padding         : 0.3rem;
  height          : 100%;
}

.infoHadir .nomor,
.infoHadirc .nomor {
  font-size  : 19px;
  display    : block;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
}

.infoHadir .info,
.infoHadirc .info {
  font-size  : 10px;
  font-weight: 600;
  display    : block;
  margin-top : -7px;
  font-family: 'Poppins', sans-serif;
}

.info-list-data {
  text-align   : center;
  margin-bottom: 15px;
}

.pagin,
.paginc {
    position    : fixed;
  left           : 0;
  right          : 0;
  bottom         : 5px;
  display        : flex;
  justify-content: center;
}

.pagin #pagin,
.paginc #pagin {
  background-color: #e6efef;
  padding         : 3px 0px 3px 0px;
  display         : inline-flex;
  justify-content : center;
  border-radius   : 10px;
}

.pagin span,
.paginc span {
  border-radius   : 0.4em;
  width           : 30px;
  width           : auto;
  padding         : 0px 5px;
  text-transform  : uppercase;
  color           : teal;
  font-size       : 12px;
  margin-right    : 3px;
  margin-left     : 3px;
  text-align      : center;
}

.pagin span.pag,
.paginc span.pag {
  background-color: teal;
  font-size       : 17px;
  min-width       : 25px;
  color:#fff !important;
}

.pagin span.next,
.pagin span.prev,
.paginc span.next,
.paginc span.prev {
  cursor   : pointer;
  font-size: 17px;
  min-width: 25px;
}

/*.pagin span.next.disabled,
.paginc span.next.disabled {
  background-color: #496464;
  color           : #828181;
}*/

/*.pagin span.next:hover,
.pagin span.prev:hover,
.paginc span.next:hover,
.paginc span.prev:hover {
  cursor          : pointer;
  background-color: #ffffff;
  color           : teal;
}*/

.listComment {
  margin  : 5px 0;
  position: relative;
  border-bottom:1px solid #f2f2f2;
}

.listComment .img {
  position: absolute;
  left    : 0px;
  top     : 10px;
}

.listComment .img img {
  width     : 25px;
  /* height : 50px; */
  display   : inline-block;
  border-radius: 5px;
}

.listComment .detail {
  text-align         : left;
  padding            : 5px;
  padding-bottom     : 10px;
  display            : inline-block;
  margin-left        : 30px;
}

.listComment .detail .nm {
  color         : #131313;
  font-size     : 14px;
  font-weight   : 700;
  display       : inline-block;
  padding: 0 5px;
}

.listComment .detail .msg {
  color      : #131313;
  font-size  : 14px;
  font-weight: 400;
  display    : block;
  padding: 0 5px;
}

.listComment .detail .stat {
  font-size: 10px;
  vertical-align: middle;
}

.listComment .detail .dt {
  font-size: 10px;
  padding: 0 5px;
  display : block;
  color    : #007676;
}

.listComment .tblDelet {
  font-size: 10px;
  position : absolute;
  top      : 10px;
  right    : 10px;
}






.listEvents {
  margin    : 5px;
  position  : relative;
  min-height: 70px;
  background : #016a6a;
  display   :flex;
  justify-content: space-between;
}


.listEvents .detail {
  background-color: #ffffffc7;
  text-align      : left;
  padding         : 3px;
  padding-left    : 5px;
}

.listEvents .detail .tt {
  color      : #131313;
  font-size  : 15px;
  font-weight: 700;
  display    : inline-block;
}

.listEvents .detail .dt {
  color      : teal;
  font-size  : 13px;
  font-weight: 400;
  display    : block;
}

.listEvents .detail .url {
  color      : rgb(128, 0, 128);
  font-size  : 14px;
  font-weight: 500;
  display    : block;
}

.listEvents .detail .url a {
  color: rgb(128, 0, 128);
}

.listEvents .img img {
  width        : auto;
  height       : 50px;
  border-radius: 0.5em;
  cursor       : pointer;
}

.listEvents .img img:hover {
  opacity: 0.5;
}

.listEvents .tbl {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.listEvents .tbl a {
  /* display  : block; */
  font-size: 12px;
  margin   : 1px;
}


.siteMenuLeft.umpet {
  height    : 0px;
  opacity   : 0;
  visibility: hidden;
}

.siteMenuLeft.umpet ul {
  visibility: hidden;
}



.siteMenuLeft {
  position          : absolute;
  right             : 0px;
  background-color  : #ffffff;
  height            : 100vh;
  width             : 200px;
  transition        : 0.6s;
  -webkit-transition: 0.6s;
  z-index           : 500;
  visibility        : visible;
  backdrop-filter: blur(10px);
}

.siteMenuLeft ul {
  padding           : 5px;
  padding-right     : 0px;
  transition        : 0.6s;
  -webkit-transition: 0.6s;
}

.siteMenuLeft ul li {
  list-style               : none;
  background-color         : teal;
  padding                  : 7px;
  margin-top               : 5px;
  border-radius: 5rem 0 0 5rem;
  display                  : block;
  font-size                : 13px;
  font-family              : 'Poppins', sans-serif;
  font-weight              : 600;
  backdrop-filter: blur(4px) saturate(180%);
-webkit-backdrop-filter: blur(4px) saturate(180%);
border: 0.0625rem solid rgba(255, 255, 255, 0.8);
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2), inset 0 4px 20px rgba(255, 255, 255, 0.3);
}


.siteMenuLeft ul li:hover {
  background-color: #ffffff !important;
}

.siteMenuLeft ul li:hover a {
  color: teal;
}

.siteMenuLeft ul li a {
  color         : #ffffff;
  display       : block;
  text-transform: uppercase;
  margin-left   : 10px;
}

.siteMenuLeft ul li a i {
  margin-right: 10px;
}

.siteMenuLeft ul li a:hover {
  text-decoration: none;
}

.tblMenu {
  font-size    : 1rem;
  line-height  : 1;
  border       : 1px solid transparent;
  border-radius: 0.5rem;
}

label {
  font-size: 13px;
}



.form-control-sm {
  font-size: 13px !important;
  font-weight: 600;
}

.btn {
  font-size  : 13px !important;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}


/* creat a large green rounded box */



.user_card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 1.3rem;
  backdrop-filter: blur(1px);
  box-shadow: inset -10px -8px 0px -11px rgba(255, 255, 255, 1),
    inset 0px -9px 0px -8px rgba(255, 255, 255, 1);
  opacity: 0.6;
  z-index: -1;
  filter: blur(1px) drop-shadow(10px 4px 6px black) brightness(115%);
  pointer-events: none;
}

/* Login Form */
.user_card {
    height: 400px;
    width: 350px;
    margin-top: auto;
    margin-bottom: auto;
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 0 2rem;
    -webkit-backdrop-filter:blur(4px);
    backdrop-filter:blur(4px);
    border-radius: 1.3rem;
    background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(4px) saturate(180%);
-webkit-backdrop-filter: blur(4px) saturate(180%);
border: 0.0625rem solid rgba(255, 255, 255, 0.8);
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2), inset 0 4px 20px rgba(255, 255, 255, 0.3);
}
.brand_logo_container {
  position     : absolute;
  height       : 170px;
  width        : 170px;
  top          : -75px;
  padding      : 10px;
  text-align   : center;
    border-radius: 10rem;
    background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(4px) saturate(180%);
-webkit-backdrop-filter: blur(4px) saturate(180%);
border: 0.0625rem solid rgba(255, 255, 255, 0.8);
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2), inset 0 4px 20px rgba(255, 255, 255, 0.3);
}

.brand_logo {
  height       : 150px;
  width        : 150px;
  border-radius: 50%;

}

.form_container {
  margin-top: 100px;
}

.login_btn {
  width        : 100%;
  color        : #fff;
  font-family  : 'Poppins', sans-serif;
  font-weight  : 600;
  background   : teal;
  border-radius: 5rem;
  padding: 10px;
}
.login_btn:hover{
    color:teal;
    background:#e5e5e5;
}

.login_btn:focus {
  box-shadow: none !important;
  outline   : 0px !important;
}

.login_container {
  padding: 0 0rem;
}

.input-group-text {
  background   : teal ;
  color        : #fff ;
  border       : none ;
  border-radius: 5rem 0 0 5rem !important;
  min-width: 40px;

}

.input_user,
.input_pass {
  box-shadow : none !important;
  outline    : 0px !important;
  border     : none;
  font-family: inherit;
  
}
.input-group .input_user,
.input-group .input_pass {
  border-radius: 0 5rem 5rem 0!important;
}

.checkbox:checked:before{
background-color:green;
}


#loader{
    height: 55vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    text-align:center;
}

.loader{
	position:relative;
	margin:auto;
	width:40px;
	aspect-ratio:1;
	border-radius:100vmin;
	overflow:hidden;
	padding:20px;
}
.loader::before{
	content:'';
	display:block;
	padding-top:100%;
}
.circular{
	width:100%;
	height:100%;
	position:absolute;
	inset:0;
	margin:auto;
	transform-origin:center center;
	animation:2s linear 0s infinite rotate;
}
.path{
 stroke:#00b1a9;
	stroke-dasharray:1,200;
	stroke-dashoffset:0;
	stroke-linecap:round; 
	animation:1.5s ease-in-out 0s infinite dash;
}
@keyframes dash{
	0%{
		stroke-dasharray:1,200;
		stroke-dashoffset:0;
		
	}
	50%{
		stroke-dasharray:89,200;
		stroke-dashoffset:-35px;
		stroke:#e0e1e1;
	}
	100%{
		stroke-dasharray:89,200;
		stroke-dashoffset:-124px;
	}
}
@keyframes rotate{
	to{
		transform:rotate(1turn);
	}
}

input[type=checkbox] {
  position: relative;
	border-radius: 5px;
	background: #e6e2e2;
	cursor: pointer;
	line-height: 0;
	margin: 0 .6em 0 0;
	outline: 0;
	padding: 0 !important;
	vertical-align: text-top;
	height: 18px;
	width: 18px;
	-webkit-appearance: none;
}


input[type=checkbox]:checked {
  background-color: #00b1a9;
  border: 2px solid #00b1a9;
  opacity: 1;
}

input[type=checkbox]:before {
  content: '';
  position: absolute;
  right: 50%;
  top: 50%;
  width: 5px;
  height: 10px;
  border: solid #FFF;
  border-width: 0 2px 2px 0;
  margin: -1px -1px 0 -1px;
  transform: rotate(45deg) translate(-50%, -50%);
  z-index: 2;
}