@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=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');::-webkit-scrollbar {width: 0px;}body {background-color : #f2f2f2;font-family : 'Roboto', sans-serif;background-position : center;background-size : cover;background-attachment: fixed;overflow-x : hidden;}.hddel{display: none!important}.modal {padding-right: 0px !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 : 100vh;background-color : #bababa;}.showget {vertical-align: top;}.badge{border-radius:5px;}.btn-primary {background-color: #016a6a !important;border-color : #016a6a !important;}.btn-primary:hover {background-color: #007676;border-color : #007676;}.btn-primary:active {background-color: #016a6a !important;border-color : #016a6a !important;}.btn-primary:focus {background-color: #016a6a !important;border-color : #016a6a !important;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 : 'Inter';font-weight : 600;}.header-connect {background : #016a6a;text-align : center;color : white;margin : 0px auto 20px auto;width : 50%;vertical-align: middle;padding : 5px;border-radius : 0px 0px 15px 15px;font-family : 'Inter';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;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: 'Inter';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 : 'Inter', 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;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: #fff;z-index : 700;}.cardcover .kaki {position: absolute;left : 0px;right : 0px;bottom : 0px;}.icon-header {text-decoration : none;color : #016a6a !important;background-color: #cbdcdc;padding : 0.2rem;display : block;text-align : center;}.icon-header:hover {color : white;background-color: #b1c4c4;text-decoration : none;}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;}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;}.nav-link {color : white !important;border-radius : none !important;border : none !important;background-color: #016a6a;font-size : 12px;font-weight : 600;text-align : center;}.nav-link.active {color : #212529 !important;border-radius : none !important;border : none !important;background-color: #e6efef !important;}.nav-link:focus {color : #212529 !important;border-radius : none !important;background-color: #e6efef !important;}.navtabs {flex : 0 0 50%;border-radius: none !important;}.menunya {text-decoration : none;color : white;background-color: teal;padding : 8px;display : block;border-radius : 0.6rem;text-align : center;}.menunya:hover {color : white;background-color: #0c4c4c;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 : 9px;text-transform: uppercase;display : block;font-family : 'Inter', sans-serif;font-weight : 600;}.menu-mid {margin-left : 10px;margin-right : 10px;padding-left : 2px;padding-right: 2px;}.hero img {border-radius: 15px 15px 15px 15px;}.garis {border-bottom: 1px solid #888888;}.bg-overlay{background:#ffffff8c;}.title-wedding {text-align : center;border-radius : 15px 15px 15px 15px;background-size: cover;}.title-wedding #title {text-transform: uppercase;font-weight : 600;font-size : 16px;font-family : 'Inter', sans-serif;}.title-wedding #name {font-size: 30px;color: teal;font-family: 'Inter', sans-serif;text-transform: uppercase;font-weight: bold;}.title-wedding #datee {font-size : 12px;font-weight: 600;font-family: 'Inter', sans-serif;}.box-menu {text-align : center;background-color: #016a6a;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: 'Inter', sans-serif;text-align : right;}.down-app-top {font-weight: 500;font-size : 11px;font-family: 'Inter', sans-serif;text-align : right;}.down-pass-top {font-weight: 500;font-size : 13px;font-family: 'Inter', 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:#d1dcdc;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;background-color: #e6efef;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;}.acordion-box .card {background-color: transparent;border : 0px;}.acordion-box .card .card-header {padding-left : 0px;padding-right : 0px;padding-top : 5px;padding-bottom : 5px;border : 0px;}.acordion-box .card .card-body {background-color: transparent;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 {text-decoration: none;color : #242424;}.acordion-box a:hover {text-decoration: none;}.acordion-box a span i {font-size: 14px;}.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 : 'Inter', sans-serif;}@media (max-width: 767.98px) {.acordion-box .waktu {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: 'Inter', sans-serif;}.infoHadir, .infoHadirc {background-color: #cbdcdc;display : block;border-radius : 0.3em;text-align : center;padding : 0.3rem;height : 100%;}.infoHadir .nomor, .infoHadirc .nomor {font-size : 19px;display : block;font-weight: 600;font-family: 'Inter', sans-serif;}.infoHadir .info, .infoHadirc .info {font-size : 10px;font-weight: 600;display : block;margin-top : -7px;font-family: 'Inter', 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 {background-color: #496464;border-radius : 0.4em;width : 30px;width : auto;padding : 0px 5px;text-transform : uppercase;color : #ffffff;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;}.pagin span.next, .pagin span.prev, .paginc span.next, .paginc span.prev {cursor : pointer;font-size: 17px;min-width: 25px;}span.next.disabled, span.prev.disabled {background-color: #496464!important;color : #828181!important;}.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 : 0.8rem 0;position: relative;}.listComment .img {position: absolute;left : 0px;top : 10px;}.listComment .img img {width : 25px;display : inline-block;border-radius: 5px;}.listComment .detail {background-color:#f6f6f6;text-align:left;padding:5px;padding-bottom :10px;display:inline-block;margin-left :30px;border-radius:0.5rem;border:solid 1px #f2f2f2}.listComment .detail .nm {color : #131313;font-size : 15px;font-weight : 700;display : inline-block;padding: 0 5px;}.listComment .detail .msg, .listComment .detail .msg p{color: #131313; font-size: .9rem; font-weight: 400; display: block; padding: 5px 10px; background: #fff; border-radius: .5rem; border: dashed 1px #a9a3a3; margin: 0 .5rem;}.listComment .detail .stat {font-size: 8px;vertical-align: middle;}.listComment .detail .dt {font-size:10px;position : absolute;bottom:.1rem;right:1rem;color:#000;}.listComment .tblDelet {font-size: 10px;position : absolute;top : 10px;right : 10px;}.listEvents {margin : 5px;position : relative;min-height: 70px;}.listEvents .img {background-color: #ebebeb4a;padding-top : 5px;padding : 3px;}.listEvents .detail {background-color: #bababa7e;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 {position: absolute;right : 5px;top : 20px;}.listEvents .tbl a {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 : #fff;height : 100vh;width : 200px;transition : 0.6s;-webkit-transition: 0.6s;z-index : 500;visibility : visible;}.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-bottom-left-radius: 0.7em;border-top-left-radius : 0.7em;display : block;font-size : 13px;font-family : 'Inter', sans-serif;font-weight : 600;}.siteMenuLeft ul li:hover {background-color: #ffffff;}.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: 'Inter', sans-serif;font-weight: 600;}.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;background : #EEF0F4;border-radius : 20px;box-shadow : 9.91px 9.91px 15px #D9DADE, -9.91px -9.91px 15px #FFFFFF;}.brand_logo_container {position : absolute;height : 170px;width : 170px;top : -75px;padding : 10px;text-align : center;background : #EEF0F4;border-radius: 100%;box-shadow : inset 7px 7px 14px #d4d6d9, inset -7px -7px 14px #ffffff;}.brand_logo {height : 150px;width : 150px;border-radius: 50%;border : 2px solid white;}.form_container {margin-top: 100px;}.login_btn {width : 100%;color : #016a6a !important;font-family : 'Inter', sans-serif;font-weight : 600;background : #EEF0F4;border-radius: 10px;box-shadow : 9.91px 9.91px 15px #D9DADE, -9.91px -9.91px 15px #FFFFFF;}.login_btn:focus {box-shadow: none !important;outline : 0px !important;}.login_container {padding: 0 0rem;}.input-group-text {background : #fff !important;color : #016a6a !important;border : none !important;border-radius: 0.25rem 0 0 0.25rem !important;}.input_user, .input_pass {box-shadow : none !important;outline : 0px !important;border : none;font-family: 'Inter', sans-serif;font-weight: 500;}.checkbox:checked:before{background-color:green;}.btn-switch {position: absolute;bottom: 10px;border-radius: 4px;left: 0;right: 0;margin: 0 auto;width: fit-content;border:none;}.qrcode-stream-wrapper[data-v-35411cc1] {width: 100%;height: 100%;position: absolute!important;z-index: 0;}.scanner-wrapper{width: 100%;padding-bottom: 100%;position: relative;overflow: hidden;border-radius:10px;}.scan-confirmation{position: absolute;top: 0;right: 0;bottom: 0;left: 0;display: flex;justify-content: center;align-items: center;}.anim-box:after, .anim-box:before, .anim-box>:first-child:after, .anim-box>:first-child:before {position: absolute;width: 10%;height: 10%;border-color: #fff;border-style: solid;content: " ";}.anim-box:before{top: 60px;left: 60px;border-width: 2px 0 0 2px;border-radius: .5rem 0 0 0;}.anim-box>:first-child:before{bottom: 60px;right: 60px;border-width: 0 2px 2px 0;border-radius: 0 0 .5rem 0;}.anim-box>:first-child:after {bottom: 60px;left: 60px;border-width: 0 0 2px 2px;border-radius: 0 0 0 .5rem;}.anim-box:after {top: 60px;right: 60px;border-width: 2px 2px 0 0;border-radius: 0 .5rem 0 0;}.scanner{width: 100%;height: 3px;background-color: red;opacity: .7;position: absolute;box-shadow: 0 0 8px 10px rgb(170 11 23 / 49%);top: 50%;-webkit-animation-name: scannerX;animation-name: scannerX;-webkit-animation-duration: 4s;animation-duration: 4s;-webkit-animation-timing-function: linear;animation-timing-function: linear;-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;}@-webkit-keyframes scannerX{0%{box-shadow:0 0 8px 10px rgba(170,11,23,.49);top:50%}25%{box-shadow:0 6px 8px 10px rgba(170,11,23,.49);top:0}75%{box-shadow:0 -6px 8px 10px rgba(170,11,23,.49);top:100%}}@keyframes scannerX{0%{box-shadow:0 0 8px 10px rgba(170,11,23,.49);top:50%}25%{box-shadow:0 6px 8px 10px rgba(170,11,23,.49);top:0}75%{box-shadow:0 -6px 8px 10px rgba(170,11,23,.49);top:100%}}.badge-whatsapp{background:#43cd66;color:#103928;font-size:15px!important;font-weight:500!important;padding: .25rem .5rem;}.guest-name{white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: calc(100% - 1.5rem) !important;}svg{margin-bottom:.15rem} .swal2-popup{ font-size:.8rem!important; border-radius: 1rem !important; } 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: #016a6a; border: 2px solid #016a6a; 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; } #loader{ height: 20vh; display: flex; justify-content: center; align-items: center; overflow: hidden; text-align: center; flex-direction: column; } .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:#016a6a; 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); } } .load:empty { margin: auto; width: 100%; height: 265px; background-image: radial-gradient( circle 25px at 25px 25px, lightgray 99%, transparent 0 ), linear-gradient( 100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80% ), linear-gradient( lightgray 10px, transparent 0 ), linear-gradient( lightgray 10px, transparent 0 ), linear-gradient( lightgray 10px, transparent 0 ), linear-gradient( lightgray 0px, transparent 0 ); background-repeat: repeat-y; background-size: 50px 100px, 50px 50px, 150px 100px, 350px 100px, 300px 100px, 250px 100px; background-position: 0 0, 0 0, 70px 0, 70px 20px, 70px 40px, 70px 80px; animation: shines 1s infinite; } @keyframes shines { to { background-position: 0 0, 100% 0, /* move highlight to right */ 70px 0, 70px 20px, 70px 40px, 70px 80px; } } .load-list:empty { margin: auto; width: 100%; height: 265px; background-image: radial-gradient( circle 25px at 25px 25px, lightgray 99%, transparent 0 ), linear-gradient( 100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80% ), linear-gradient( lightgray 10px, transparent 0 ), linear-gradient( lightgray 10px, transparent 0 ), linear-gradient( lightgray 10px, transparent 0 ), linear-gradient( lightgray 0px, transparent 0 ); background-repeat: repeat-y; background-size: 50px 100px, 50px 50px, 150px 100px, 350px 100px, 300px 100px, 250px 100px; background-position: 0 0, 0 0, 70px 0, 70px 20px, 70px 40px, 70px 80px; animation: shines 1s infinite; } @keyframes shines { to { background-position: 0 0, 100% 0, /* move highlight to right */ 70px 0, 70px 20px, 70px 40px, 70px 80px; } }