body,
html {
background: #fafafa;
width: 100%;
height: 100%;
/* background-color: lightblue; */
}
@media only screen and (max-width: 1300px) {
body {
/* min-width: 1300px; */
}
}
body {
--parisienne: "Parisienne", cursive;
overflow-x: hidden;
}
/* ========================================
Switch VIP
======================================== */
.switch__vip {
display: block;
width: 100%;
max-width: 190px;
cursor: pointer;
}
.switch__vip > input[type="checkbox"] {
display: none;
}
.switch__vip .switch-vip__slider-box {
display: flex;
border-radius: 7px;
border: 1px solid rgba(0, 0, 0, 0.05);
background: #f7f7f7;
position: relative;
overflow: hidden;
}
.switch__vip .switch-vip__slider-box::before {
content: '';
position: absolute;
top: 50%;
left: 0%;
transform: translateY(-50%);
width: 50%;
height: 100%;
border-radius: 7px;
background: #c7c7c7;
transition: left 0.5s, background 0.5s;
}
.switch__vip > input[type="checkbox"]:not(:checked) + .switch-vip__slider-box::before {
left: 0%;
background: #c7c7c7;
}
.switch__vip > input[type="checkbox"]:checked + .switch-vip__slider-box::before {
left: 50%;
background: #d9b680;
}
.switch__vip .switch-vip-slider {
position: relative;
width: 50%;
padding: 8px 4px 6px;
display: flex;
align-items: center;
justify-content: center;
flex-grow: 1;
font-size: 12px;
color: #000;
opacity: 0.25;
transition: opacity 0.4s, color 0.4s;
}
.switch__vip .switch-vip-slider > i {
font-size: 1em;
margin-right: 10px;
}
.switch__vip > input[type="checkbox"]:not(:checked) + .switch-vip__slider-box .switch-vip-slider.slider-off {
opacity: 1;
color: #000;
}
.switch__vip > input[type="checkbox"]:checked + .switch-vip__slider-box .switch-vip-slider.slider-on {
opacity: 1;
color: #fff;
}
/* ========================================
MAIN
======================================== */
.main {
width: 100%;
max-width: 1150px;
/* width: 100%; */
min-height: 100vh;
display: flex;
margin: 20px auto;
padding: 0 1.25em;
flex-direction: column;
/* overflow-x: hidden; */
/* background-color: lightsalmon; */
}
@media only screen and (max-width: 1200px) {
.main {
/* width: 100%; */
/* width: 1150px; */
padding: 0 1em;
/* Edited */
}
}
/* ========================================
MAIN > MAIN HEAD
======================================== */
.main-head {
padding: 10px 15px;
/* background-color: lightgreen; */
}
/* ========================================
MAIN > MAIN BODY
======================================== */
.main-body {
width: 100%;
background: #fff;
box-shadow: -10px 10px 25px 3px var(--secondary-clr);
border-top-left-radius: 22px;
border-top-right-radius: 22px;
display: flex;
flex-direction: column;
margin-bottom: 75px;
/* background-color: lightskyblue; */
}
.main-body .form-submit {
margin-top: auto;
}
/* .main-body form button[type="submit"] {
border-radius: 0;
padding: 15px;
width: 100%;
} */
.main-body .save-outer {
background: inherit;
display: block;
}
.main-body .save-outer>button {
width: 100%;
border-radius: 0;
padding: 15px;
}
@media only screen and (max-width: 768px) {
.main-body {
box-shadow: -4px 4px 12px 0px var(--secondary-clr);
}
}
@media only screen and (max-width: 425px) {
.main-head {
padding: 0.5em 0.25em;
}
.main-body {
box-shadow: -2px 2px 6px 0px var(--secondary-clr);
}
}
/* STATISTIC */
.statistic {
margin-bottom: 24px;
display: flex;
/* align-items: center; */
flex-wrap: wrap;
/* justify-content: space-between; */
/* background-color: lightpink; */
}
@media only screen and (max-width: 425px) {
.statistic {
flex-direction: column;
align-items: center;
}
}
/* HIGHLIGHT TOP */
.statistic .highlight-top {
/* background-color: indianred; */
width: 100%;
margin-bottom: 0.75em;
padding: 0.25em;
justify-content: center;
display: none;
}
.statistic .highlight-top>div {
display: flex;
/* align-items: center; */
flex-direction: column;
width: 100%;
text-align: left;
/* background-color: forestgreen; */
}
.statistic .highlight-top>div:last-of-type {
text-align: right;
}
.statistic .highlight-top>div:nth-child(even) {
/* background-color: firebrick; */
}
.statistic .highlight-top>div .invitation-list-outer {
/* background-color: deeppink; */
margin-right: auto;
}
.statistic .highlight-top>div a.change-invitation {
/* background-color: lightgreen; */
font-size: 15px;
display: inline-block;
margin-bottom: 0.75em;
text-decoration: none;
color: var(--primary-clr);
}
.statistic .highlight-top>div .switch {
margin: 0;
margin-right: auto;
margin-left: 0;
/* background-color: lightsalmon; */
}
.statistic .highlight-top>div h4.pack-name {
/* background-color: lightseagreen; */
display: inline-block;
color: var(--primary-clr);
font-size: 15px;
margin-bottom: 0.25em;
margin-left: auto;
}
.statistic .highlight-top>div small.inv-status {
/* background-color: darkslateblue; */
margin-bottom: 0.35em;
margin-left: auto;
}
.statistic .highlight-top>div a.upgrade {
/* background-color: lightsteelblue; */
display: inline-block;
font-size: 12px;
margin-bottom: 0.25em;
color: var(--sea-clr);
margin-left: auto;
}
@media only screen and (max-width: 1124px) {
.statistic .highlight-top {
display: flex;
}
.statistic .highlight-top .dropdown-content {
right: auto;
left: 0;
}
}
@media only screen and (max-width: 425px) {
.statistic .highlight-top {
display: flex;
/* flex-direction: column; */
}
}
/* STATISTIC PREVIEW */
.statistic .preview {
background: #fff;
width: 42.5%;
display: flex;
flex-direction: column;
border-radius: 16px;
overflow: hidden;
margin-right: auto;
box-shadow: -5px 5px 15px var(--secondary-clr);
/* background-color: lightcoral; */
}
.statistic .preview .preview-head {
display: block;
text-align: center;
color: var(--primary-clr);
}
.statistic .preview .preview-head>p {
font-size: 19px;
font-weight: 600;
margin-bottom: 0.15em;
margin: 10px;
}
.statistic .preview .preview-head>small {
padding: 6px;
display: block;
width: 100%;
text-align: center;
background: var(--wood-clr);
}
.statistic .preview .preview-head>small a {
color: var(--white-clr);
font-size: 13px;
text-decoration: none;
}
.statistic .preview .preview-head>small a:hover {
text-decoration: underline;
}
.preview .preview-thumb-outer {
width: 100%;
flex: 1;
overflow: hidden;
}
.preview-thumb-outer .preview-thumb {
width: 100%;
height: 100%;
min-height: 180px;
background-image: url('https://katsudoto.id/media/kat/cover-first-floor.webp');
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
transition: background-position 2s ease-in-out;
}
.preview-thumb-outer .preview-thumb:hover {
background-position: center;
}
.preview .preview-countdown {
display: flex;
align-items: center;
justify-content: center;
}
.preview-countdown>div {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin: 7px 15px;
padding: 5px;
}
.preview-countdown p {
font-size: 18px;
line-height: 16px;
}
.preview-countdown small {
font-size: 11px;
}
@media only screen and (max-width: 1124px) {
.statistic .preview {
width: 48.5%;
}
}
@media only screen and (max-width: 768px) {
/* STATISTIC PREVIEW */
.statistic .preview {
width: 100%;
margin-bottom: 1em;
}
.statistic .preview .preview-head>p {
font-size: 17px;
margin: 0.5em;
}
}
/* STATISTIC GRAPHIC */
.statistic .graphic {
width: 37.5%;
/* background-color: lightseagreen; */
}
/* GRAPHIC GUEST */
.graphic .graphic-guest {
background: #fff;
box-shadow: -5px 5px 10px var(--secondary-clr);
border-radius: 18px;
overflow: hidden;
padding: 0 20px;
margin-bottom: 20px;
}
.graphic-guest .graphic-guest-head {
padding: 10px 10px;
color: var(--primary-clr);
border-bottom: .5px solid var(--wood-clr);
margin-bottom: 0.75em;
}
.graphic-guest-head p {
font-size: 18px;
vertical-align: middle;
font-weight: 600;
}
.graphic-guest-head i {
margin-right: 5px;
font-size: 18px;
color: var(--white-clr);
background: var(--primary-clr);
padding: 5px;
border-radius: 5px;
}
.graphic-guest .graphic-guest-body {
display: flex;
margin-bottom: .5em;
justify-content: space-between;
}
.graphic-guest-body .graphic-preview {
padding: 0 10px;
}
.graphic-preview>div {
display: flex;
align-items: center;
justify-content: center;
}
.graphic-preview .control-chart {
position: relative;
}
.control-chart #canvas {
z-index: 1;
}
.control-chart #canvas.no-data {
background: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, 0.2) 48%, rgba(0, 0, 0, 0.2) 65%, rgba(0, 0, 0, 0.2) 65%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
}
.graphic-preview .graphic-round {
width: 55px;
height: 55px;
border-radius: 50%;
background: #f0f0f0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.graphic-preview .graphic-round p {
text-align: center;
font-size: 16px;
margin: 0;
line-height: 15px;
}
.graphic-preview .graphic-round p.text {
font-size: 10px;
}
.graphic-preview a {
font-size: 12px;
color: var(--sea-clr);
margin: 10px 0;
text-decoration: underline;
display: block;
text-align: center;
}
.graphic-guest-body .graphic-detail {
margin-bottom: 1em;
padding: 0 10px;
flex: 1;
}
.graphic-detail table {
border-collapse: collapse;
table-layout: fixed;
width: 100%;
font-size: 14px;
}
.graphic-detail table tr {
border-bottom: 0.5px solid var(--wood-clr);
display: flex;
}
.graphic-detail table tr td {
padding: 7px;
position: relative;
display: flex;
align-items: center;
}
.graphic-detail table tr td .square {
width: 6px;
height: 6px;
background: #999;
display: inline-block;
margin-right: 5px;
}
.graphic-detail table tr td .square.wood {
background: var(--wood-clr);
}
.graphic-detail table tr td .square.secondary {
background: var(--secondary-clr);
}
.graphic-detail table tr td .square.tertiary {
background: var(--tertiary-clr);
}
.graphic-detail table tr td:first-child {
justify-content: flex-start;
width: 75%;
}
.graphic-detail table tr td:last-child {
text-align: right;
width: 25%;
justify-content: flex-end;
}
.graphic .graphic-wrapper {
/* background-color: lightskyblue; */
display: flex;
}
.graphic .graphic-wrapper .btn-guest-book {
width: auto;
height: 100%;
background: var(--wood-clr);
border: none;
border-radius: 12px;
padding: 12px 18px;
margin-left: auto;
color: #fff;
cursor: pointer;
display: inline-block;
transition: all 0.25s ease-in-out;
display: none;
}
.graphic .graphic-wrapper .btn-guest-book:focus,
.graphic .graphic-wrapper .btn-guest-book:hover {
outline: none;
border: none;
background: var(--primary-clr);
}
.graphic .graphic-wrapper .btn-guest-book>div {
margin-bottom: 1em;
}
.graphic .graphic-wrapper .btn-guest-book p {
font-size: 18px;
font-weight: 800;
text-transform: uppercase;
}
.graphic .graphic-attendance {
width: 100%;
background: #fff;
padding: 16px 20px;
box-shadow: -5px 5px 10px var(--secondary-clr);
border-radius: 18px;
}
.graphic-attendance>div {
margin-bottom: .5em;
}
.graphic-attendance label {
font-size: 13px;
margin-bottom: .5em;
display: inline-block;
}
.graphic-attendance label sup {
color: var(--wood-clr);
cursor: pointer;
}
.graphic-attendance .graphic-bar-group {
display: grid;
grid-auto-flow: dense;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
grid-gap: 10px;
}
.graphic-attendance .graphic-bar {
height: 22px;
width: 100%;
background: var(--secondary-clr);
border-radius: 7px;
overflow: hidden;
position: relative;
}
.graphic-bar span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 15px;
font-weight: 600;
white-space: nowrap;
}
.graphic-bar .attendance-score {
display: flex;
align-items: center;
}
.graphic-bar .attendance-bar,
.graphic-bar .guest-bar {
width: 0;
height: 100%;
border-radius: 7px;
background: var(--wood-clr);
transition: 0.4s ease-out;
}
@media only screen and (max-width: 1124px) {
.statistic .graphic {
width: 48.5%;
}
.graphic .graphic-attendance {
width: 72.5%;
/*Edited*/
}
.graphic .graphic-wrapper {
/* background-color: lightskyblue; */
display: flex;
}
.graphic .graphic-wrapper .btn-guest-book {
width: 25%;
/*Edited*/
height: auto;
/*Edited*/
/* height: 100%; */
/* height: 200px; */
background: var(--wood-clr);
border: none;
border-radius: 12px;
padding: 12px 4px;
margin-left: auto;
color: #fff;
cursor: pointer;
display: inline-block;
transition: all 0.25s ease-in-out;
display: block;
}
.graphic .graphic-wrapper .btn-guest-book:focus,
.graphic .graphic-wrapper .btn-guest-book:hover {
outline: none;
border: none;
background: var(--primary-clr);
}
.graphic .graphic-wrapper .btn-guest-book>div {
margin-bottom: 0.75em;
/*Edited*/
}
.graphic .graphic-wrapper .btn-guest-book p {
font-size: 16px;
}
}
@media only screen and (max-width: 768px) {
/* STATISTIC GRAPHIC */
.statistic .graphic {
width: 100%;
/* margin-bottom: 1em; */
}
/* GRAPHIC GUEST */
.graphic .graphic-guest {
background: #fff;
box-shadow: -5px 5px 10px var(--secondary-clr);
border-radius: 16px;
/*Edited*/
overflow: hidden;
padding: 0 0.5em;
/*Edited*/
margin-bottom: 1em;
/*Edited*/
/* background-color: lightsalmon; */
}
.graphic-guest .graphic-guest-head {
padding: 10px 10px;
color: var(--primary-clr);
border-bottom: .5px solid var(--wood-clr);
margin-bottom: 0.5em;
/*Edited*/
/* background-color: lightpink; */
}
.graphic-guest-head p {
font-size: 15px;
/*Edited*/
vertical-align: middle;
font-weight: 600;
}
.graphic-guest-head i {
margin-right: 5px;
font-size: 14px;
/*Edited*/
color: var(--white-clr);
background: var(--primary-clr);
padding: 5px;
border-radius: 5px;
}
.graphic-guest .graphic-guest-body {
display: flex;
margin-bottom: .5em;
justify-content: space-between;
/* background-color: lightcoral; */
}
.graphic-guest-body .graphic-preview {
padding: 0 0.25em;
/* background-color: lightskyblue; */
}
.graphic-preview>div {
display: flex;
align-items: center;
justify-content: center;
}
.graphic-preview .control-chart {
position: relative;
}
.control-chart #canvas {
z-index: 1;
}
.control-chart #canvas.no-data {
background: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, 0.2) 48%, rgba(0, 0, 0, 0.2) 65%, rgba(0, 0, 0, 0.2) 65%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
}
.graphic-preview .graphic-round {
width: 55px;
height: 55px;
border-radius: 50%;
background: #f0f0f0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.graphic-preview .graphic-round p {
text-align: center;
font-size: 13px;
/*Edited*/
margin: 0;
line-height: 1.2em;
/*Edited*/
}
.graphic-preview .graphic-round p.text {
font-size: 9px;
/*Edited*/
}
.graphic-preview a {
font-size: 11px;
/*Edited*/
color: var(--sea-clr);
margin: 10px 0;
text-decoration: underline;
display: block;
text-align: center;
}
.graphic-guest-body .graphic-detail {
margin-bottom: 1em;
padding: 0 0.25em;
flex: 1;
/* background-color: lightsteelblue; */
}
.graphic-detail table {
border-collapse: collapse;
table-layout: fixed;
width: 100%;
font-size: 13px;
/*Edited*/
}
.graphic-detail table tr {
border-bottom: 0.5px solid var(--wood-clr);
display: flex;
}
.graphic-detail table tr td {
padding: 7px;
position: relative;
display: flex;
align-items: center;
}
.graphic-detail table tr td .square {
width: 6px;
height: 6px;
background: #999;
display: inline-block;
margin-right: 5px;
}
.graphic-detail table tr td .square.wood {
background: var(--wood-clr);
}
.graphic-detail table tr td .square.secondary {
background: var(--secondary-clr);
}
.graphic-detail table tr td .square.tertiary {
background: var(--tertiary-clr);
}
.graphic-detail table tr td:first-child {
justify-content: flex-start;
width: 65%;
}
.graphic-detail table tr td:last-child {
text-align: right;
width: 35%;
justify-content: flex-end;
}
.graphic .graphic-attendance {
/*Edited*/
/* width: 65%; */
background: #fff;
padding: 0.75em 1em;
/*Edited*/
box-shadow: -5px 5px 10px var(--secondary-clr);
border-radius: 18px;
/* background-color: lightsalmon; */
}
.graphic-attendance>div {
margin-bottom: .5em;
}
.graphic-attendance label {
font-size: 12px;
/*Edited*/
margin-bottom: .5em;
display: inline-block;
}
.graphic-attendance label sup {
color: var(--wood-clr);
cursor: pointer;
}
.graphic-attendance .graphic-bar-group {
grid-template-columns: repeat(1, 1fr);
}
.graphic-bar span {
font-size: 13px;
}
}
/* STATISTIC GUEST */
.statistic .guest {
width: 15%;
display: flex;
flex-direction: column;
margin-left: auto;
/* background-color: lightcoral; */
}
.guest .guest-head {
color: var(--primary-clr);
margin-bottom: 1em;
}
.guest-head>div {
margin-bottom: .5em;
}
.guest-head .switch {
margin: 5px 0!important;
}
.guest-head p {
font-size: 16px;
cursor: pointer;
}
.guest-head .kat__dropdown .kat__dropdown-btn > p,
.highlight-top .kat__dropdown .kat__dropdown-btn > p {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.guest-head p i {
margin: 0 5px;
}
.guest-head a {
font-size: 14px;
color: var(--sea-clr);
text-decoration: underline;
}
.guest .guest-body {
flex: 1;
}
.guest-body>div {
width: 100%;
height: 100%;
}
.guest-body .btn-guest-book {
width: 100%;
height: 100%;
background: var(--wood-clr);
border: none;
border-radius: 12px;
padding: 12px 18px;
color: #fff;
cursor: pointer;
display: inline-block;
transition: all 0.25s ease-in-out;
}
.guest-body .btn-guest-book:focus,
.guest-body .btn-guest-book:hover {
outline: none;
border: none;
background: var(--primary-clr);
}
.guest-body .btn-guest-book>div {
margin-bottom: 1em;
}
.guest-body .btn-guest-book p {
font-size: 20px;
font-weight: 600;
text-transform: uppercase;
}
@media only screen and (max-width: 1124px) {
.statistic .guest {
width: 100%;
display: none;
}
}
/* DIVIDER */
.divider {
height: 1.5px;
width: 100%;
background: var(--secondary-clr);
margin: 10px 0;
}
.guest .divider {
margin: 4px 0 16px 0;
}
.reservation .divider {
margin: 26px 0;
}
/* NAVIGATION */
.navigation {
width: 100%;
display: block;
border-radius: 22px;
background: #fff;
padding: 20px 0 30px 0;
/* background-color: lightskyblue; */
}
.navigation-child {
padding: 0 0.75em;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.navigation-child .navigation-item {
display: inline-block;
box-shadow: -5px 5px 15px var(--secondary-clr);
border-radius: 22px;
overflow: hidden;
margin: 0.5em 0.9em;
}
.navigation-child .navigation-item.not-active {
box-shadow: none;
}
.navigation-child .navigation-break {
flex-basis: 100%;
height: 0;
}
@media (max-width: 1150px) {
.navigation-child .navigation-break {
flex-basis: 0%;
}
}
.navigation .navigation-link {
background: var(--white-clr);
padding: 0px;
margin: 0 auto;
width: 150px;
height: 180px;
border-radius: 22px;
display: flex;
flex-direction: column;
text-decoration: none;
transition: all 0.25s ease-in-out;
color: var(--primary-clr);
overflow: hidden;
}
.navigation .navigation-link.disabled {
box-shadow: none;
}
.navigation .navigation-link:hover {
background: var(--primary-clr);
color: #fff;
}
.navigation .navigation-link:hover.disabled {
background: none;
color: var(--primary-clr);
}
.navigation-link > div {
text-align: center;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.navigation-link > div:first-child {
height: 70%;
align-items: flex-end;
padding: 5px;
/* background-color: forestgreen; */
}
.navigation-link>div:last-child {
align-items: flex-start;
height: 30%;
padding: 2px 5px 5px 5px;
/* background-color: indianred; */
}
.navigation-link div img {
max-width: 85%;
max-height: 90%;
object-fit: contain;
object-position: center;
display: block;
/* background-color: olive; */
}
.navigation-link div p {
font-size: 1.7vh;
font-size: 16px;
padding: 4px;
font-weight: 600;
/* background-color: deeppink; */
}
@media only screen and (max-width: 500px) {
.navigation-child {
padding: 0px;
}
.navigation-child .navigation-item {
box-shadow: -5px 5px 15px var(--secondary-clr);
overflow: hidden;
margin: 0;
/* Edited */
width: 30%;
margin: 0.2em;
margin-bottom: 1em;
}
.navigation .navigation-link {
width: 100%;
height: 170px;
}
.navigation-link div p {
font-size: 13px;
}
}
@media only screen and (max-width: 425px) {
/* NAVIGATION */
.navigation {
width: 100%;
display: block;
border-radius: 22px;
background: #fff;
padding: 1em 0;
margin-bottom: 0.75em;
}
.navigation-child {
width: 100%;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.navigation .navigation-link {
background: var(--white-clr);
padding: 0px;
margin: 0 auto;
width: 100%;
height: 150px;
border-radius: 22px;
display: flex;
flex-direction: column;
text-decoration: none;
transition: all 0.25s ease-in-out;
color: var(--primary-clr);
overflow: hidden;
}
.navigation .navigation-link.disabled {
box-shadow: none;
}
.navigation .navigation-link:hover {
background: var(--primary-clr);
color: #fff;
}
.navigation .navigation-link:hover.disabled {
background: none;
color: var(--primary-clr);
}
.navigation-link>div {
text-align: center;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.navigation-link>div:first-child {
height: 70%;
align-items: flex-end;
padding: 5px;
/* background-color: mediumturquoise; */
}
.navigation-link>div:last-child {
align-items: flex-start;
height: 30%;
padding: 2px 5px 5px 5px;
/* background-color: mediumpurple; */
}
.navigation-link div img {
max-width: 85%;
max-height: 90%;
display: block;
/* Edited */
object-fit: contain;
/* Edited */
object-position: center;
/* Edited */
/* background-color: lightseagreen; */
}
.navigation-link div p {
font-size: 12px;
/* Edited */
/* font-size: 0.75em; */
padding: 2px;
/* Edited */
font-weight: 600;
}
}
@media only screen and (max-width: 375px) {
.navigation .navigation-link {
height: 130px;
/* Edited */
}
.navigation-link div p {
font-size: 11px;
/* Edited */
}
}
@media only screen and (max-width: 320px) {
.navigation .navigation-link {
height: 110px;
/* Edited */
}
.navigation-link div p {
font-size: 9px;
/* Edited */
}
}
/* LOCKED */
.locked {
position: relative;
}
.locked .locked-dashboard {
width: 100%;
height: 100%;
background-color: transparent;
padding: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: absolute;
z-index: 10;
top: 0;
left: 0;
}
.locked .locked-dashboard::before {
content: '';
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.9;
background-color: #fff;
}
.locked .locked-dashboard>img {
width: 25px;
height: 35px;
object-fit: contain;
object-position: center;
margin-bottom: 10px;
}
.locked .locked-dashboard>a {
background: var(--wood-clr);
font-size: 14px;
padding: 6px 8px;
border-radius: 7px;
text-decoration: none;
text-align: center;
color: var(--white-clr);
cursor: pointer;
transition: all 0.25s ease-in-out;
}
.locked .locked-dashboard>a:hover {
background: var(--primary-clr);
}
@media only screen and (max-width: 425px) {
.locked .locked-dashboard>a {
font-size: 12px;
padding: 6px 0.75em;
}
}
/* ========================================
THEME
======================================== */
.theme-content {
/* width: 1150px; */
height: 100%;
width: 100%;
}
/* ========================================
THEME > THEME HEAD
======================================== */
.theme-content .theme-head {
display: block;
text-align: center;
padding: 20px 40px;
color: var(--primary-clr);
/* background-color: orchid; */
}
.theme-content .theme-head h1 {
font-size: 24px;
margin-bottom: .1em;
/* background-color: lightseagreen; */
}
.theme-content .theme-head a {
font-size: 14px;
color: var(--sea-clr);
text-decoration: underline;
/* background-color: lightgreen; */
}
/* ========================================
THEME > THEME BODY
======================================== */
.theme-content .theme-body .choose-theme {
flex: 1;
margin-bottom: 70px;
}
/* ========================================
ADDITIONAL INFORMATION
======================================== */
.additional-body,
.reservation-body {
padding: 20px 40px 60px 40px;
}
.additional-body>.form-group {
margin-bottom: 18px;
}
.additional-body .switch-group {
padding-left: 0;
padding-right: 0;
}
.additional-body .input-group-append {
padding: 0 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
background: var(--secondary-clr);
}
.additional-body .input-group-append>span {
color: var(--primary-clr);
}
@media only screen and (max-width: 425px) {
.additional-body,
.reservation-body {
padding: 1em 0.75em 2em 0.75em;
}
}
/* ========================================
ADDITIONAL INFORMATION > CHOOSE PROTOCOL
======================================== */
.additional-body .protocol-outer {
width: 100%;
display: flex;
align-items: center;
flex-wrap: wrap;
padding: 10px 0;
}
.additional-body .protocol-outer>div {
width: auto;
height: auto;
padding: 0;
margin: 0.5em 0;
margin-right: 1em;
}
.additional-body .protocol-outer>div:last-of-type {
margin-right: 0;
}
.additional-body .protocol-outer .protocol-inner input[type="radio"] {
display: none;
}
.additional-body .protocol-outer .protocol-inner .protocol-choice {
width: 240px;
height: 160px;
border-radius: 12px;
overflow: hidden;
cursor: pointer;
position: relative;
transition: all 0.25s ease-in-out;
box-shadow: -2px 2px 10px var(--wood-clr);
}
.additional-body .protocol-outer .protocol-inner .protocol-choice::before {
content: 'Dipilih';
font-family: "Bebas Neue";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 4px 10px;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
letter-spacing: 1px;
background-color: rgba(0, 0, 0, 0.6);
color: var(--white-clr);
transition: all 0.35s ease-in-out;
opacity: 0;
}
.additional-body .protocol-outer .protocol-inner input[type="radio"]:checked+.protocol-choice::before {
opacity: 1;
}
.additional-body .protocol-outer .protocol-inner .protocol-choice img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transform: scale(1);
transition: transform 1s ease-in-out;
}
.additional-body .protocol-outer .protocol-inner .protocol-choice:hover img {
transform: scale(1.1);
}
/* ========================================
ADDITIONAL INFORMATION > LANGUAGE
======================================== */
.additional-body .lang-outer {
/* background-color: lightsalmon; */
display: flex;
}
.additional-body .lang-outer .lang-text {
/* background-color: var(--secondary-clr); */
/* background: var(--secondary-clr); */
background-image: linear-gradient( to right, var(--secondary-clr), var(--secondary-clr), var(--secondary-clr), rgba(0, 0, 0, 0));
height: auto;
display: flex;
align-items: center;
padding: 0.5em 2.5em 0.45em 1em;
padding-right: 160px;
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
width: 300px;
white-space: nowrap;
}
.additional-body .lang-outer .lang-text p {
font-size: 18px;
color: var(--primary-clr);
line-height: 1;
letter-spacing: 1px;
font-weight: normal;
font-family: "Bebas Neue";
transition: all 0.25s ease-in-out;
/* text-overflow: clip; */
text-overflow: ellipsis;
margin-top: 2px;
}
.additional-body .lang-outer .lang-inner {
/* background-color: lightskyblue; */
display: flex;
align-items: center;
justify-content: center;
margin-left: -150px;
}
.additional-body .lang-outer .lang-inner label {
margin: 0.25em;
margin-left: 0;
margin-right: 0.75em;
}
.additional-body .lang-outer .lang-inner label:last-of-type {
margin-right: 0;
}
.additional-body .lang-outer .lang-inner input[type="radio"] {
display: none;
}
.additional-body .lang-outer .lang-inner input[type="radio"]:checked+.lang-box::before {
border-color: var(--wood-clr);
}
.additional-body .lang-outer .lang-inner .lang-box {
background-color: var(--secondary-clr);
width: 60px;
height: 30px;
cursor: pointer;
border-radius: 4px;
position: relative;
z-index: 1;
transition: all 0.25s ease-in-out;
}
.additional-body .lang-outer .lang-inner .lang-box::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
width: calc(100% + 2px);
height: calc(100% + 2px);
border-radius: 4px;
/* opacity: 0; */
pointer-events: none;
/* background-color: var(--wood-clr); */
border: 2px solid #99999950;
transition: all 0.25s ease-in-out;
}
.additional-body .lang-outer .lang-inner .lang-box img.lang-flag {
width: 100%;
height: 100%;
border-radius: 4px;
display: block;
object-fit: cover;
object-position: center;
}
/* ========================================
ADDITIONAL INFORMATION > SONG OUTER
======================================== */
.additional-body .song-outer {
padding: 0;
margin-bottom: 1em;
}
.additional-body .song-outer>div:not(.locked-dashboard) {
/* padding: 5px 0; */
margin-bottom: 0.75em;
display: none;
}
.additional-body .song-outer>div:first-of-type {
margin-bottom: 0.5em;
display: block;
}
.additional-body .song-outer .upload-song-btn {
outline: none;
border: none;
padding: 10px 12px;
border-radius: 7px;
cursor: pointer;
background-color: var(--wood-clr);
color: var(--white-clr);
transition: all 0.25s ease-in-out;
font-size: 15px;
min-width: 240px;
}
.additional-body .song-outer .upload-song-btn[disabled] {
cursor: not-allowed;
}
.additional-body .song-outer .upload-song-btn:hover {
background-color: var(--primary-clr);
}
.additional-body .song-outer .upload-song-btn>i {
margin-right: 7px;
}
.additional-body .song-outer>div.custom-song {
display: flex;
align-items: center;
justify-content: flex-start;
}
.additional-body .song-outer>div.custom-song p.song-name {
margin-left: 12px;
font-size: 15px;
}
.additional-body .song-outer div.template-song .form-select,
.additional-body div.template-song .form-select {
min-width: 240px;
max-width: 600px;
width: 100%;
}
/* ========================================
ADDITIONAL INFORMATION > STREAMING OUTER
======================================== */
.additional-body .streaming-outer {
/* background-color: lightblue; */
margin: 25px 0 20px 0;
}
.additional-body .streaming-outer>.streaming-inner {
/* background-color: lightgreen; */
/* display: none; */
position: relative;
opacity: 1;
transition: all 0.25s ease-in-out;
}
.additional-body .streaming-outer>.streaming-inner.off {
opacity: 0.3;
cursor: not-allowed;
}
.additional-body .streaming-outer>.streaming-inner.off * {
pointer-events: none;
}
.additional-body .streaming-outer .streaming-picture-outer {
display: none;
}
/* streaming picture box */
.streaming-picture-box {
position: relative;
width: 160px;
height: 160px;
display: flex;
margin-top: 5px;
}
.streaming-picture-box .remove-streaming-picture {
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: #000;
color: #fff;
position: absolute;
z-index: 1;
top: -8px;
right: -8px;
text-decoration: none;
font-size: 22px;
font-weight: normal;
line-height: 1;
border: 2px solid #fff;
transition: background 0.2s;
}
.streaming-picture-box .remove-streaming-picture.hide {
display: none;
}
.streaming-picture-box .remove-streaming-picture:hover {
background: #B22222;
}
.additional-body .streaming-outer .streaming-picture {
background-color: #ffffff;
cursor: pointer;
position: relative;
overflow: hidden;
flex-grow: 1;
}
.additional-body .streaming-outer .streaming-picture:before {
content: '\002B';
position: absolute;
width: calc(100% - 1px);
height: calc(100% - 1px);
top: 50%;
left: 50%;
font-size: 28px;
color: #aaa;
transform: translate(-50%, -50%);
background-color: transparent;
border: 2px dashed rgba(0, 0, 0, 0.4);
display: flex;
align-items: center;
justify-content: center;
opacity: 1;
transition: all 0.35s ease-in-out;
}
.additional-body .streaming-outer .streaming-picture:hover:before {
border-color: var(--primary-clr);
color: var(--primary-clr);
opacity: 1;
}
.additional-body .streaming-outer .streaming-picture:after {
content: 'Unggah Gambar';
position: absolute;
z-index: 2;
width: 100%;
height: 30px;
left: 0;
bottom: -30px;
text-align: center;
background-color: var(--wood-clr);
display: flex;
align-items: center;
justify-content: center;
color: var(--white-clr);
opacity: 0.5;
transition: all 0.35s ease-in-out;
}
.additional-body .streaming-outer .streaming-picture:hover:after {
bottom: 0;
opacity: 1;
background-color: var(--primary-clr);
}
.additional-body .streaming-outer .streaming-picture > img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
position: relative;
z-index: 1;
background-color: #ffffff;
}
.additional-body .streaming-outer .streaming-picture > img.hide {
display: none;
}
.additional-body .streaming-outer .zoom-details {
/* background-color: lightsalmon; */
display: flex;
justify-content: space-between;
margin-bottom: 0.75em;
display: none;
opacity: 0;
height: 0;
transition: all 0.35s ease-in-out;
}
.additional-body .streaming-outer .zoom-details.show {
display: flex;
opacity: 1;
height: auto
}
.additional-body .streaming-outer .zoom-details>div {
/* flex: 1; */
margin-bottom: 0;
width: 49%;
}
/* Streaming Type Outer */
.additional-body .streaming-outer .streaming-type-outer {
/* background-color: lightsalmon; */
display: flex;
align-items: center;
flex-wrap: wrap;
margin-bottom: 0.75em;
padding: 5px 0;
}
.additional-body .streaming-outer .streaming-type-outer input[type="radio"] {
/* background-color: lightpink; */
display: none;
}
.additional-body .streaming-outer .streaming-type-outer input[type="radio"]:checked+.streaming-type-box {
border-color: #452812;
color: #452812;
background-color: #45281220;
}
.additional-body .streaming-outer .streaming-type-outer input[type="radio"]:checked+.streaming-type-box.youtube {
border-color: #cf2121;
color: #cf2121;
background-color: #cf212120;
}
.additional-body .streaming-outer .streaming-type-outer input[type="radio"]:checked+.streaming-type-box.zoom {
border-color: #2c8cfc;
color: #2c8cfc;
background-color: #2c8cfc20;
}
.additional-body .streaming-outer .streaming-type-outer input[type="radio"]:checked+.streaming-type-box.meet {
border-color: #00ac47;
color: #00ac47;
background-color: #00ac4715;
}
.additional-body .streaming-outer .streaming-type-outer>label {
padding: 0.5em 0.15em;
}
.additional-body .streaming-outer .streaming-type-outer .streaming-type-box {
background-color: rgba(0, 0, 0, 0.05);
padding: 10px;
width: 170px;
height: 50px;
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 0.2);
color: #000;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
border-radius: 7px;
transition: all 0.25s ease-in-out;
}
.additional-body .streaming-outer .streaming-type-outer .streaming-type-box>img {
width: 20px;
height: 20px;
display: block;
object-fit: contain;
object-position: center;
margin-right: 7px;
}
.additional-body .streaming-outer .streaming-type-outer .streaming-type-box>p {
font-size: 14px;
}
.additional-body .streaming-outer .streaming-type-outer .streaming-type-box>p i {
margin-right: 7px;
}
@media only screen and (max-width: 600px) {
/* Song */
.additional-body .song-outer>div.custom-song {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: flex-start;
/* background-color: seagreen; */
}
.additional-body .song-outer div.template-song .form-select,
.additional-body div.template-song .form-select {
min-width: 0;
}
.additional-body .song-outer>div.custom-song p.song-name {
margin-top: 0.75em;
}
/* Streaming Type Outer */
.additional-body .streaming-outer .streaming-type-outer {
/* background-color: lightsalmon; */
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 0.75em;
padding: 5px 0;
}
.additional-body .streaming-outer .streaming-type-outer>label {
width: 50%;
padding: 0.25em;
display: flex;
align-items: center;
justify-content: center;
}
.additional-body .streaming-outer .streaming-type-outer .streaming-type-box {
width: 95%;
margin-right: 0px;
margin: 0;
}
}
@media only screen and (max-width: 600px) {
/* Choose Protocol */
.additional-body .protocol-outer>div {
width: 100%;
margin-right: 0;
}
.additional-body .protocol-outer .protocol-inner .protocol-choice {
width: 100%;
height: 140px;
box-shadow: -2px 2px 8px var(--wood-clr);
}
/* Song Outer */
.additional-body .song-outer .upload-song-btn {
font-size: 14px;
min-width: 180px;
}
.additional-body .song-outer>div.custom-song p.song-name {
margin-left: 0;
margin-top: 0.75em;
font-size: 14px;
/* background-color: sienna; */
}
/* Streaming Outer */
.additional-body .streaming-outer .streaming-picture:after {
content: 'Unggah Gambar';
font-size: 14px;
}
}
/* ========================================
RESERVATION
======================================== */
.reservation-body {
color: var(--primary-clr);
/* background-color: lightsalmon; */
}
.reservation-body .form-group {
margin-bottom: 1em;
}
.reservation-body .form-group.guest-question {
opacity: 0.4;
cursor: not-allowed;
}
.reservation-body .input-group-append>button {
height: 100%;
border-radius: 0;
padding: 5px 15px;
font-size: 15px;
}
.reservation-body .input-group-append>button.finish-editing,
.reservation-body .input-group-append>button.cancel-editing {
display: none;
}
.reservation-body .reservation-group-outer {
display: flex;
align-items: center;
margin-bottom: 1em;
}
.reservation-body .reservation-group {
display: inline-block;
padding: 7px 16px;
text-align: center;
border-radius: 6px;
font-weight: 600;
font-size: 15px;
color: #fff;
margin-right: 12px;
}
.reservation-group.special {
background: var(--wood-clr);
}
.reservation-group.public {
background: #878787;
}
.date-group {
width: 100%;
max-width: 420px;
position: relative;
z-index: 3;
background: #fff;
}
.date-group .form-control {
z-index: 1;
position: relative;
background: transparent;
}
.date-group .date-icon {
position: absolute;
top: 50%;
right: 16px;
transform: translateY(-50%);
color: var(--wood-clr);
z-index: 0;
}
.reservation-body .greeting-outer {
background: transparent;
margin-bottom: 24px;
}
.reservation-body .switch-group {
padding-left: 0;
padding-right: 0;
}
.reservation-body textarea.form-control,
.reservation-body .greeting-outer textarea.form-control {
min-height: 60px;
}
.reservation-body .greeting-outer .greeting-body {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
column-gap: 50px;
row-gap: 12px;
}
.reservation-body .greeting-outer .greeting-body .form-group {
margin-bottom: 0;
}
.reservation-body .rsvp-setup>div:last-of-type {
margin-bottom: 0;
}
@media only screen and (max-width: 425px) {
.reservation-body .input-group-append>button {
padding: 3px 0.75em;
/* Edited */
font-size: 14px;
/* Edited */
}
.reservation-body .reservation-group {
font-size: 14px;
/* Edited */
}
.reservation-body .greeting-outer {
margin-bottom: 1em;
/* Edited */
}
.reservation-body .greeting-outer .greeting-body {
grid-template-columns: repeat(1, 1fr);
/* Edited */
column-gap: 0px;
/* Edited */
row-gap: 0.75em;
/* Edited */
}
}
/* ========================================
WEDDING GREETING CONTENT
======================================== */
.wedding-greeting-content {
padding: 20px 40px;
}
.wedding-greeting-content>div:first-of-type {
margin-bottom: 30px;
}
@media only screen and (max-width: 425px) {
.wedding-greeting-content {
padding: 1em 0.75em 2em 0.75em;
}
.wedding-greeting-content>div:first-of-type {
margin-bottom: 1.5em;
}
}
/* ========================================
TABS
======================================== */
.tabs {
background: #fafafa;
position: relative;
padding: 0 30px 40px 30px;
}
.tabs.tabs-guest-book {
background-color: transparent;
}
.tabs .tab-btns,
.tab-btns {
background: inherit;
padding: 0;
display: flex;
/* flex-wrap: wrap; */
position: relative;
overflow-x: auto;
width: 100%;
}
.tabs .tab-btns::before,
.tab-btns::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 1px;
width: 100%;
display: block;
background: var(--wood-clr);
}
.tab-btns .tab-btn,
.tab-btns .tab-btn2 {
border: none;
outline: none;
padding: 12px 20px;
cursor: pointer;
display: inline-block;
background: transparent;
color: var(--wood-clr);
font-size: 15px;
transition: all 0.3s ease-in-out;
text-decoration: none;
white-space: nowrap;
position: relative;
border-bottom: .5px solid var(--wood-clr);
}
.tab-btns .tab-btn:hover,
.tab-btns .tab-btn.active,
.tab-btns .tab-btn2:hover,
.tab-btns .tab-btn2.active {
color: #000;
border-bottom: 1px solid #000;
font-weight: 500;
}
/* Bordered Button */
.tab-btns .tab-btn.bordered {
border-top-left-radius: 12px;
border-top-right-radius: 12px;
border: 1px solid rgba(0, 0, 0, 0.2);
border-bottom: none;
color: var(--primary-clr);
font-weight: 500;
}
.tab-btns .tab-btn.bordered:first-of-type {
margin-left: auto;
}
.tab-btns .tab-btn.bordered > i {
margin: 0;
margin-right: 0.25em;
}
.tab-btns .tab-btn.bordered:hover {
border-bottom: none;
background-color: var(--secondary-clr);
}
/* Tab Button Badge */
.tab-btn .tab-btn-badge,
.tab-btn2 .tab-btn-badge {
font-size: 24px;
color: var(--error-clr);
position: absolute;
top: -12px;
right: 0px;
opacity: 0;
transition: opacity 0.25s ease-in-out;
}
.tab-btn .tab-btn-badge.show,
.tab-btn2 .tab-btn-badge.show {
opacity: 1;
animation: floating-badge 1s ease-in-out infinite;
}
@keyframes floating-badge {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-5px);
}
}
/* Tab Contents */
.tabs .tab-contents {
padding: 0;
}
/* Tab content */
.tab-contents .tab-content {
display: none;
}
@media only screen and (max-width: 768px) {
/* .tab-btns .tab-btn.bordered {
position: relative;
} */
.tab-btns .tab-btn.bordered:first-of-type {
margin-left: 0px;
}
}
@media only screen and (max-width: 425px) {
.tabs {
padding: 0 0 2em 0;
}
.tabs .tab-btns,
.tab-btns {
overflow-x: auto;
}
.tab-btns .tab-btn,
.tab-btns .tab-btn2 {
padding: 0.75em 1em;
font-size: 14px;
}
}
/* ========================================
TAB PUBLISH COMMENT
======================================== */
.tab-publish-comment {
padding: 0;
}
.tab-publish-comment .publish-comment-head {
padding: 15px 10px;
}
.publish-comment-head h2 {
font-size: 20px;
}
.publish-comment-head .empty-comment {
padding: 12px 0;
text-align: left;
font-size: 14px;
}
/* Comment Outer > No Comment */
.comment-outer .no-comment {
padding: 40px 20px;
text-align: center;
min-height: 200px;
}
.comment-outer .no-comment>p {
font-size: 15px;
}
.comment-outer .no-comment>p>i {
font-size: 32px;
margin-bottom: 10px;
}
@media only screen and (max-width: 425px) {
/* TAB PUBLISH COMMENT */
.tab-publish-comment {
padding: 0 0.5em;
/* background-color: olive; */
}
.tab-publish-comment .publish-comment-head {
padding: 0.75em;
/* background-color: orchid; */
}
.publish-comment-head h2 {
font-size: 18px;
}
.publish-comment-head .empty-comment {
padding: 12px 0;
font-size: 14px;
}
/* Comment Outer > No Comment */
.comment-outer .no-comment {
padding: 1.5em 0.75em;
min-height: 120px;
}
.comment-outer .no-comment>p {
font-size: 14px;
}
.comment-outer .no-comment>p>i {
font-size: 28px;
margin-bottom: 0.25em;
}
}
/* ========================================
TAB HOLD COMMENT
======================================== */
.tab-hold-comment {
background: inherit;
}
.tab-hold-comment label {
font-size: 14px;
font-weight: 600;
}
.tab-hold-comment .hold-comment-head {
display: flex;
padding: 15px 0;
}
.hold-comment-head>div {
padding: 10px;
}
.hold-comment-head .empty-comment {
padding: 12px 10px;
text-align: left;
font-size: 14px;
display: block;
width: 100%;
}
.hold-comment-head .hold-comment-acts {
flex: 1;
display: flex;
align-items: center;
}
.hold-comment-acts>button {
border: none;
outline: none;
padding: 4px 10px;
border-radius: 4px;
background: inherit;
cursor: pointer;
font-size: 12px;
color: #fff;
display: inline-block;
margin-left: 12px;
}
.hold-comment-acts .view-comments {
background: green;
}
.hold-comment-acts .delete-comments {
background: var(--error-clr);
}
@media only screen and (max-width: 425px) {
.tab-hold-comment {
background: inherit;
/* background-color: hotpink; */
}
.tab-hold-comment .hold-comment-head {
padding: 0.5em 0;
/* Edited */
}
}
/* ========================================
COMMENT OUTER
======================================== */
.comment-outer {
padding: 0;
}
/* Comment Outer > Inner */
.comment-outer .comment-inner {
display: flex;
}
/* Comment Outer > Inner > Highlight */
.comment-inner .comment-highlight {
padding: 10px;
}
.comment-inner .comment-highlight .comment-picture {
width: 60px;
object-fit: contain;
object-position: center;
display: block;
}
.comment-inner .comment-highlight .comment-picture.rounded {
width: 60px;
height: 60px;
object-fit: cover;
}
/* Comment Outer > Inner > Content */
.comment-inner .comment-content {
padding: 10px;
flex: 1;
}
/* Comment Outer > Inner > Content > Commenter */
.comment-inner .comment-content .commenter {
color: var(--wood-clr);
font-weight: 600;
font-size: 15px;
margin-bottom: 0.2em;
word-wrap: break-word;
}
/* Comment Outer > Inner > Content > Comment */
.comment-inner .comment-content .comment {
font-size: 13px;
color: #000;
margin-bottom: 0.45em;
word-wrap: break-word;
word-break: break-all;
}
/* Comment Outer > Inner > Content > Action */
.comment-inner .comment-content .comment-action {
font-size: 12px;
margin-bottom: 0.25em;
}
.comment-inner .comment-content .comment-action span {
margin-right: 12px;
}
.comment-inner .comment-content .comment-action span i {
font-size: 10px;
}
.comment-inner .comment-content .commentted {
color: #999;
}
.comment-inner .comment-content .comment-view {
color: green;
cursor: pointer;
}
.comment-inner .comment-content .comment-view:hover {
text-decoration: underline;
}
.comment-inner .comment-content .comment-delete {
color: var(--error-clr);
cursor: pointer;
}
.comment-inner .comment-content .comment-delete:hover {
text-decoration: underline;
}
@media only screen and (max-width: 425px) {
/* Comment Outer > Inner > Highlight */
.comment-inner .comment-highlight .comment-picture {
width: 50px;
}
.comment-inner .comment-highlight .comment-picture.rounded {
width: 50px;
height: 50px;
object-fit: cover;
}
}
/* ========================================
TAB MANAGE ENVELOPE
======================================== */
.tab-manage-envelope {
background: inherit;
}
.tab-manage-envelope .manage-envelope-head {
padding: 10px 15px;
}
.tab-manage-envelope .switch-group {
padding: 0;
}
.tab-manage-envelope .saving-book-outer {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.saving-book-outer .saving-book-inner {
background: #fff;
/* width: 40%; */
max-width: 400px;
width: 100%;
margin: 20px;
padding: 10px;
border-radius: 12px;
box-shadow: -3px 3px 15px var(--secondary-clr);
}
.saving-book-inner .saving-book-head {
padding: 10px;
display: block;
text-align: center;
border-bottom: .5px solid var(--wood-clr);
}
.saving-book-head h2 {
font-size: 21px;
}
.saving-book-inner .saving-book-body {
padding: 10px;
/* background-color: lightblue; */
}
.saving-book-inner .saving-book-body .preview-outer {
/* background-color: lightseagreen; */
padding: 0px 0;
}
.saving-book-inner .saving-book-body .preview-outer input[type="file"] {
display: none;
}
.saving-book-inner .saving-book-body .preview-inner {
background-color: #fff;
/* background-color: lightgreen; */
width: 120px;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
cursor: pointer;
color: var(--tertiary-clr);
overflow: hidden;
transition: all 0.35s ease-in-out;
cursor: not-allowed;
}
.saving-book-inner .saving-book-body .preview-inner.active {
cursor: pointer;
}
.saving-book-inner .saving-book-body .preview-inner::before {
content: 'Upload Barcode';
position: absolute;
z-index: 7;
bottom: -32px;
left: 0;
width: 100%;
height: 32px;
background-color: var(--tertiary-clr);
color: var(--dark-clr);
padding: 7px 2px;
text-align: center;
font-size: 14px;
opacity: 0;
transition: all 0.35s ease-in-out;
}
.saving-book-inner .saving-book-body .preview-inner::after {
content: '';
position: absolute;
z-index: 4;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100% - 1px);
height: calc(100% - 1px);
border: 1px dashed var(--tertiary-clr);
}
.saving-book-inner .saving-book-body .preview-inner.active:hover::before {
bottom: 0;
opacity: 1;
}
.saving-book-inner .saving-book-body .preview-inner:hover {
opacity: 0.8;
}
.saving-book-inner .saving-book-body .preview-inner.active:hover {
border-color: var(--primary-clr);
color: var(--primary-clr);
opacity: 1;
}
.saving-book-inner .saving-book-body .preview-inner img.preview {
width: calc(100%);
height: calc(100%);
display: block;
object-fit: cover;
object-position: center;
/* background-color: lightpink; */
position: absolute;
z-index: 5;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* opacity: 0; */
transition: all 0.25s ease-in-out;
}
/* Selectize */
.saving-book-inner .saving-book-body .selectize-control.single .selectize-input {
border: 1px solid rgba(0, 0, 0, 0.2);
}
.saving-book-inner .saving-book-foot {
display: flex;
align-items: center;
justify-content: flex-end;
padding: 5px 12px;
margin-bottom: 15px;
}
.saving-book-inner .saving-book-foot>button {
margin-left: 10px;
}
.saving-book-outer .add-saving-book-outer {
padding: 40px 20px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.add-saving-book-outer .add-saving-book {
background: inherit;
border: none;
outline: none;
padding: 10px 20px;
color: var(--wood-clr);
border: .5px dashed var(--wood-clr);
}
.add-saving-book-outer .add-saving-book:hover {
background: var(--primary-clr);
color: var(--light-clr);
border-color: var(--primary-clr);
border-style: solid;
}
@media only screen and (max-width: 425px) {
.tab-manage-envelope .manage-envelope-head {
padding: 0.75em 1em;
/* Edited */
}
.saving-book-outer .saving-book-inner {
margin: 1em;
/* Edited */
}
.saving-book-head h2 {
font-size: 19px;
/* Edited */
}
}
/* ========================================
TAB ENVELOPE TRANSACTION
======================================== */
.tab-envelope-transaction {
background: inherit;
}
.tab-envelope-transaction .envelope-transaction-head {
padding: 15px;
}
.envelope-transaction-head h2 {
font-size: 20px;
}
.tab-envelope-transaction .transaction-outer {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
grid-gap: 15px;
}
.transaction-outer .no-transaction {
align-self: center;
padding: 0 15px;
font-size: 14px;
}
.transaction-outer .transaction-inner {
background: var(--white-clr);
width: 100%;
height: auto;
margin: 0 auto;
border-radius: 12px;
display: flex;
flex-wrap: wrap;
box-shadow: -2px 2px 5px var(--secondary-clr);
}
.transaction-inner > div {
padding: 10px;
}
.transaction-inner > .details {
flex: 1;
display: flex;
flex-direction: column;
}
.transaction-inner .preview .picture {
width: 80px;
height: 80px;
object-fit: cover;
object-position: center;
display: block;
}
.transaction-inner .details p {
font-size: 14px;
margin-bottom: .2em;
word-wrap: break-word;
word-break: break-all;
}
.transaction-inner .details .transaction-guest {
font-weight: 600;
}
.transaction-inner .details .transaction-detail {
color: var(--wood-clr);
font-weight: 600;
line-height: 18px;
}
.transaction-inner .details .transaction-comment {
font-size: 13px;
margin-bottom: 15px;
}
.transaction-inner .details .transaction-acts {
margin-top: auto;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.transaction-inner .details .transaction-acts span {
margin-right: 10px;
font-size: 12px;
}
.transaction-inner .details .transaction-acts span i {
font-size: 10px;
}
.transaction-inner .details .transaction-date {
color: #999;
}
.transaction-inner .details .delete-gift {
color: var(--error-clr);
cursor: pointer;
}
.transaction-inner .details .delete-gift:hover {
text-decoration: underline;
}
@media only screen and (max-width: 425px) {
/* Edited */
.tab-envelope-transaction .envelope-transaction-head {
padding: 0.75em 1em;
/* Edited */
}
.envelope-transaction-head h2 {
font-size: 18px;
/* Edited */
}
.tab-envelope-transaction .transaction-outer {
padding: 0.5em 1em;
/* Edited */
}
.transaction-outer .no-transaction {
padding: 1em;
/* Edited */
}
.transaction-inner .preview .picture {
width: 70px;
/* Edited */
height: 70px;
/* Edited */
}
}
/* ========================================
DIGITAL ENVELOPE
======================================== */
.digital-envelope-content {
padding: 20px 40px 40px 40px;
display: flex;
align-items: center;
justify-content: center;
}
.digital-envelope-content .envelope-fund {
background: var(--light-clr);
display: flex;
align-items: center;
border-radius: 12px;
overflow: hidden;
box-shadow: -4px 4px 12px var(--wood-clr);
min-width: 360px;
}
.envelope-fund>div:first-child {
padding: 10px 20px;
}
.envelope-fund>div:last-child {
flex: 1;
padding: 5px;
}
.envelope-fund p {
font-size: 15px;
}
.envelope-fund h2 {
font-size: 21px;
}
.envelope-fund img {
width: 50px;
object-fit: contain;
object-position: center;
display: block;
}
@media only screen and (max-width: 425px) {
.digital-envelope-content {
padding: 1.25em 0.75em 2em 0.75em;
}
.digital-envelope-content .envelope-fund {
box-shadow: -2px 2px 8px var(--wood-clr);
min-width: 0;
width: 85%;
}
.envelope-fund>div:first-child {
padding: 0.75em 1.25em;
}
.envelope-fund p {
font-size: 14px;
}
.envelope-fund h2 {
font-size: 18px;
}
.envelope-fund img {
width: 40px;
}
}
/* LOVE STORY CONTENT */
.love-story-content {
background: initial;
padding: 20px 40px 70px 40px;
}
.love-story-content .love-story-head {
padding: 5px 0;
display: flex;
justify-content: flex-end;
}
.love-story-head .switch-group {
/* display: flex; */
padding: 0;
}
.love-story-head .switch-group .switch {
margin: 5px 0;
}
.love-story-content .love-story-body {
padding: 0px;
}
.love-story-body .add-love-story-outer {
display: block;
padding: 10px 0;
margin-bottom: -10px;
margin-top: 20px;
}
.add-love-story-outer .add-love-story-btn {
font-size: 14px;
font-weight: 500;
text-transform: capitalize;
padding: 10px 15px;
margin-left: auto;
}
.love-story-content .love-story-outer {
background: inherit;
}
.love-story-outer .love-story-inner {
display: flex;
margin-bottom: 26px;
background: #fafafa;
border-radius: 22px;
overflow: hidden;
box-shadow: -2px 2px 6px var(--secondary-clr);
position: relative;
border-width: 1px;
}
.modal-add-love-story .modal-body .love-story-inner {
border-radius: 0;
}
/* story dots */
.love-story-inner .story-dots {
position: absolute;
top: 19px;
left: 0;
font-size: 16px;
color: #000;
padding: 8px;
background: transparent;
border: none;
outline: none;
cursor: grab;
}
.love-story-outer .love-story-inner .story-form {
display: flex;
flex-wrap: wrap;
width: 100%;
padding: 5px 15px 5px 20px;
}
.love-story-inner .love-story-detail {
flex: 1;
position: relative;
padding: 22px 12px;
}
.love-story-inner .love-story-detail textarea {
min-height: 122px;
}
.love-story-inner .love-story-acts {
display: flex;
padding: 10px 0 0 0;
margin: 0;
justify-content: flex-end;
}
.love-story-acts > button {
display: inline-block;
margin-left: 10px;
}
/* edit mode */
.love-story-inner.edit-mode .love-story-acts .edit-love-story {
display: none;
}
/* non-edit mode */
.love-story-inner:not(.edit-mode) .love-story-acts .save-love-story,
.love-story-inner:not(.edit-mode) .love-story-acts .delete-love-story,
.love-story-inner:not(.edit-mode) .love-story-acts .cancel-love-story {
display: none;
}
/* picture wrapper */
.love-story-inner .love-story-picture-outer {
padding: 22px 12px;
}
/* picture box */
.love-story-inner .upload-love-story-picture {
width: 340px;
height: 230px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
cursor: pointer;
color: var(--wood-clr);
transition: all 0.25s ease-in-out;
box-shadow: -1px 1px 4px rgba(0, 0, 0, 0.2);
background: #fff;
overflow: hidden;
position: relative;
}
.love-story-inner:not(.edit-mode) .upload-love-story-picture {
cursor: not-allowed;
}
.love-story-inner.edit-mode .upload-love-story-picture:hover {
color: var(--primary-clr);
/* box-shadow: none; */
}
/* picture image */
.love-story-inner .upload-love-story-picture img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: block;
background-color: var(--white-clr);
pointer-events: none;
}
.love-story-inner.no-picture .upload-love-story-picture img {
display: none;
}
/* picture content (default) */
.love-story-inner .upload-love-story-picture i {
font-size: 32px;
margin-bottom: .3em;
}
.love-story-inner .upload-love-story-picture p {
font-size: 16px;
}
/* picture input file */
.love-story-picture-outer input[type="file"] {
display: none;
}
@media only screen and (max-width: 768px) {
.love-story-content {
/* background: inherit; */
padding: 1em 0.75em 2em 0.75em;
/* Edited */
/* background-color: goldenrod; */
}
.love-story-content .love-story-head {
/* padding: 5px 0;
display: flex;
background-color: greenyellow; */
}
.love-story-head .switch-group {
/* display: flex;
justify-content: flex-end;
padding: 0; */
}
.love-story-head .switch-group .switch {
/* margin: 5px 0; */
}
.love-story-content .love-story-body {
/* padding: 5px 0px;
background-color: forestgreen; */
}
/* Tombol Add Love Story */
.love-story-body .add-love-story-outer {
/* display: block;
padding: 10px 0;
margin-bottom: -10px; */
margin-top: 1em;
/* Edited */
/* background-color: darksalmon; */
}
.add-love-story-outer .add-love-story-btn {
/* font-size: 14px;
font-weight: 500;
text-transform: capitalize;
padding: 10px 15px;
margin-left: auto; */
margin-right: auto;
/* Edited */
}
.love-story-content .love-story-outer {
/* background: inherit;
background-color: deepskyblue; */
}
.love-story-outer .love-story-inner {
/* display: flex; */
margin-bottom: 1.5em;
/* Edited */
/* background: #fafafa;
border-radius: 22px;
overflow: hidden; */
box-shadow: -2px 2px 6px var(--secondary-clr);
/* Edited */
/* position: relative;
background-color: darkolivegreen; */
}
.modal-add-love-story .modal-body .love-story-inner {
/* border-radius: 0; */
}
.love-story-inner .story-dots {
top: 6px;
padding: 8px 4px;
}
.love-story-outer .love-story-inner .story-form {
/* display: flex;
flex-wrap: wrap;
width: 100%; */
padding: 0px .25em 0px calc(24px - .25em);
/* padding: 0.5em 0.25em; */
/* Edited */
/* background-color: darkgoldenrod; */
}
/* Detail */
.love-story-inner .love-story-detail {
/* flex: 1;
position: relative; */
padding: 1em 0.5em;
/* Edited */
/* background-color: cornflowerblue; */
}
.love-story-inner .love-story-detail textarea {
/* min-height: 122px; */
}
.love-story-inner .love-story-acts {
/* display: flex;
padding: 10px 0 0 0;
margin: 0;
justify-content: flex-end;
background-color: crimson; */
}
.love-story-acts>button {
/* display: inline-block;
margin-left: 10px; */
}
/* Gambar */
.love-story-inner .love-story-picture-outer {
width: 100%;
/* Edited */
padding: 1em 0.5em;
/* Edited */
/* background-color: palevioletred; */
}
.love-story-picture-outer .upload-love-story-picture {
width: 100%;
/* Edited */
height: 230px;
/* Edited */
/* display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
cursor: pointer;
color: var(--wood-clr);
transition: all 0.25s ease-in-out;
box-shadow: -1px 1px 4px rgba(0, 0, 0, 0.2);
background: #fff;
overflow: hidden;
position: relative; */
}
.love-story-picture-outer .upload-love-story-picture:hover {
/* color: var(--primary-clr);
box-shadow: none; */
}
.upload-love-story-picture img {
/* width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
z-index: 0;
display: none;
background-color: var(--white-clr); */
}
.upload-love-story-picture i {
font-size: 26px;
/* Edited */
/* margin-bottom: .3em; */
}
.upload-love-story-picture p {
font-size: 14px;
/* Edited */
}
}
@media only screen and (max-width: 425px) {
.love-story-picture-outer .upload-love-story-picture {
width: 100%;
/* Edited */
height: 170px;
/* Edited */
}
}
/* ========================================
MODAL ADD LOVE STORY
======================================== */
.modal-add-love-story .love-story-outer {
background: #fff;
padding: 0;
}
.modal-add-love-story .love-story-inner {
box-shadow: none;
background: inherit;
padding: 0;
flex-wrap: wrap;
margin-bottom: 0;
}
@media only screen and (max-width: 425px) {
.modal-add-love-story .modal-body {
padding: 0.75em 0.5em 1em 0.5em;
}
}
/* Modal Whatsapp Test */
.modal-add-guest .caption {
margin-bottom: 10px;
}
.modal-add-guest p {
font-size: 15px;
}
.modal-add-guest button {
font-weight: 500;
}
.modal-add-guest button i {
margin: 0;
margin-left: 5px;
}
/* Modal Consult */
.modal-consult {
width: 100%;
max-width: 600px;
padding: 40px 0px;
}
.modal-consult .modal-body {
padding: 10px 20px;
text-align: center;
}
.modal-consult .modal-body .modal-icon {
display: block;
margin: 0px auto 20px;
width: 40px;
height: auto;
}
.modal-consult .modal-buttons {
width: 100%;
max-width: 500px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
align-items: center;
margin: 20px auto 0px;
padding: 10px 20px;
}
.modal-consult .modal-button {
color: #000;
text-align: center;
display: inline-block;
vertical-align: top;
padding: 15px 5px;
}
.modal-consult .modal-button.btn-wood {
color: #fff;
}
.modal-consult .modal-button:hover {
color: #fff;
}
@media (max-width: 500px) {
.modal-consult .modal-buttons {
grid-template-columns: 1fr;
}
}
/* ========================================
SETTINGAN COVER
======================================== */
.photo-content {
background: inherit;
padding: 20px 40px 70px 40px;
}
.photo-content .divider {
margin: 20px 0;
}
.photo-content .upload-photo-outer {
padding: 0;
margin: 0;
width: 100%;
}
.photo-content .upload-photo-outer .photo-divider {
background: inherit;
margin: 10px 0;
}
.photo-content #add-desktop-photo,
.photo-content #add-mobile-photo {
border-color: var(--wood-clr);
}
.photo-content #add-desktop-photo span,
.photo-content #add-desktop-photo p,
.photo-content #add-mobile-photo span,
.photo-content #add-mobile-photo p {
color: var(--wood-clr);
}
.photo-content #add-desktop-photo:hover,
.photo-content #add-mobile-photo:hover {
border-color: var(--primary-clr);
background: rgba(0, 0, 0, 0.05);
}
.photo-content #add-desktop-photo:hover span,
.photo-content #add-desktop-photo:hover p,
.photo-content #add-mobile-photo:hover span,
.photo-content #add-mobile-photo:hover p {
color: var(--primary-clr);
}
.upload-logo-outer {
display: flex;
align-items: center;
justify-content: center;
width: 120px;
height: 120px;
border: 1px dashed var(--wood-clr);
color: var(--wood-clr);
font-size: 16px;
cursor: pointer;
margin: 20px 0 40px 0;
transition: all 0.25s ease-in-out;
position: relative;
}
.upload-logo-outer .logo {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: none;
background-color: #fff;
}
.upload-logo-outer:hover {
border-color: var(--primary-clr);
color: var(--primary-clr);
background: rgba(0, 0, 0, 0.05);
}
.upload-logo-outer input[type="file"] {
display: none;
}
@media only screen and (max-width: 425px) {
.photo-content {
background: inherit;
padding: 20px 40px 70px 40px;
padding: 1em 0.75em 2em 0.75em;
padding: 0;
padding-bottom: 2em;
/* background-color: darkslateblue; */
}
.photo-content .photo-detail {
padding: 1em 0.75em 0em 0.75em;
/* background-color: greenyellow; */
}
.photo-content .divider {
width: auto;
height: 1px;
margin: 20px 10px;
}
.photo-content .upload-photo-outer {
padding: 0;
margin: 0;
width: 100%;
/* background-color: deeppink; */
}
.photo-content .upload-photo-outer .photo-divider {
background: inherit;
margin: 10px 0;
}
.photo-content #add-desktop-photo,
.photo-content #add-mobile-photo {
border-color: var(--wood-clr);
/* background-color: indianred; */
}
.photo-content #add-desktop-photo span,
.photo-content #add-desktop-photo p,
.photo-content #add-mobile-photo span,
.photo-content #add-mobile-photo p {
color: var(--wood-clr);
}
.photo-content #add-desktop-photo:hover,
.photo-content #add-mobile-photo:hover {
border-color: var(--primary-clr);
background: rgba(0, 0, 0, 0.05);
}
.photo-content #add-desktop-photo:hover span,
.photo-content #add-desktop-photo:hover p,
.photo-content #add-mobile-photo:hover span,
.photo-content #add-mobile-photo:hover p {
color: var(--primary-clr);
}
.upload-logo-outer {
display: flex;
align-items: center;
justify-content: center;
width: 120px;
height: 120px;
border: 1px dashed var(--wood-clr);
color: var(--wood-clr);
font-size: 16px;
cursor: pointer;
margin: 20px 0 40px 0;
transition: all 0.25s ease-in-out;
position: relative;
/* background-color: forestgreen; */
}
.upload-logo-outer .logo {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: none;
background-color: #fff;
/* background-color: goldenrod; */
}
.upload-logo-outer:hover {
border-color: var(--primary-clr);
color: var(--primary-clr);
background: rgba(0, 0, 0, 0.05);
}
.upload-logo-outer input[type="file"] {
display: none;
}
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ========================================
GALLERY
======================================== */
.main-body .gallery-content {
padding: 20px 40px 70px 40px;
}
.gallery-content .switch-group {
margin-bottom: .7em;
}
.gallery-content .divider {
margin: 40px 0;
}
.gallery-content .gallery-photo,
.gallery-content .gallery-video {
background: transparent;
}
.gallery-photo .upload-photo-btn-outer {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 15px;
}
.upload-photo-btn-outer .upload-photo-btn {
text-transform: capitalize;
padding: 10px 15px;
margin-bottom: .4em;
}
.upload-photo-btn-outer small {
font-size: 13px;
display: block;
margin-top: 3px;
}
.upload-photo-btn-outer input[type="file"] {
display: none;
}
.gallery-photo .galleries-outer {
position: relative;
overflow: hidden;
border-radius: 7px;
}
.gallery-photo .galleries {
background: transparent;
border: 2px dashed var(--wood-clr);
border-radius: 7px;
padding: 15px;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
grid-gap: 10px;
transition: 0.3s ease-in-out;
position: relative;
min-height: 120px;
}
@media only screen and (max-width: 860px) {
.gallery-photo .galleries {
grid-template-columns: repeat(3, 1fr);
}
}
@media only screen and (max-width: 660px) {
.gallery-photo .galleries {
grid-template-columns: repeat(2, 1fr);
}
}
@media only screen and (max-width: 460px) {
.gallery-photo .galleries {
grid-template-columns: repeat(1, 1fr);
}
}
.gallery-photo .galleries.over {
background: #eee;
border: 2px dashed var(--primary-clr);
}
.galleries-outer .loading {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
z-index: 99;
cursor: wait;
}
.galleries-outer .loading img {
width: 100px;
height: 100px;
object-fit: cover;
}
.galleries .no-gallery {
grid-column-start: 1;
grid-column-end: end;
text-align: center;
padding: 20px;
color: var(--wood-clr);
transition: 0.3s ease-in-out;
}
.gallery-photo .galleries.over .no-gallery {
color: var(--primary-clr);
}
.galleries .no-gallery h2 {
font-size: 22px;
}
.galleries .gallery {
width: 100%;
height: 80px;
background: #fff;
display: flex;
border-radius: 7px;
margin: 0.25em auto;
border: 1px solid rgba(0, 0, 0, 0.2);
overflow: hidden;
position: relative;
transition: all 0.25s ease-in-out;
}
.galleries:not(.dragging) .gallery:hover {
background: var(--wood-clr);
}
.gallery .gallery-image-outer {
width: 90px;
height: 100%;
object-fit: cover;
background: #fff;
position: relative;
}
.gallery-image-outer .gallery-image {
width: 100%;
height: 100%;
object-fit: cover;
}
/* delete button */
.gallery-image-outer .delete-photo {
outline: none;
border: none;
width: 32px;
height: 32px;
border-radius: 32px;
font-size: 16px;
color: #FFF;
display: none;
background: var(--wood-clr);
transition: .2s ease-in;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
align-items: center;
justify-content: center;
}
.gallery-image-outer .delete-photo:hover {
background: var(--dark-chestnut);
}
.galleries:not(.dragging) .gallery:hover .gallery-image-outer .delete-photo {
display: flex;
}
.gallery .gallery-detail {
display: flex;
justify-content: center;
height: 100%;
flex-direction: column;
padding: 5px 10px;
flex: 1;
white-space: nowrap;
overflow: hidden;
}
.gallery .gallery-detail p {
width: calc(100% + 5px);
font-size: 12px;
margin-bottom: 0.5em;
text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
overflow: hidden;
}
.gallery .gallery-detail small {
font-size: 11px;
}
.galleries:not(.dragging) .gallery:hover .gallery-detail {
color: #fff;
}
/* gallery dots */
.gallery .gallery-detail .gallery-dots {
position: absolute;
top: 0;
right: 0;
font-size: 16px;
color: #000;
padding: 5px 8px;
background: transparent;
border: none;
outline: none;
cursor: grab;
}
.galleries:not(.dragging) .gallery:hover .gallery-detail .gallery-dots {
color: #FFF;
}
/* .gallery .delete-photo {
border: none;
outline: none;
display: none;
font-size: 15px;
position: absolute;
top: 5px;
right: 10px;
cursor: pointer;
background: inherit;
color: var(--error-dark-clr);
}
.galleries:not(.dragging) .gallery:hover .delete-photo {
display: inline-block;
} */
.gallery-video .gallery-videos-outer {
background: transparent;
padding: 20px 0;
}
.gallery-videos-outer .gallery-videos {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
grid-gap: 20px;
margin-bottom: 15px;
}
@media only screen and (max-width: 860px) {
.gallery-videos-outer .gallery-videos {
grid-template-columns: repeat(2, 1fr);
}
}
@media only screen and (max-width: 600px) {
.gallery-videos-outer .gallery-videos {
grid-template-columns: repeat(1, 1fr);
}
}
.gallery-videos .video-inner {
/* max-width: 320px; */
width: 100%;
background: #fff;
border-radius: 12px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border: 2px solid var(--secondary-clr);
color: var(--primary-clr);
margin: 0.25em auto;
}
.video-inner .video-title {
position: relative;
text-align: center;
padding: 15px;
border-bottom: 0.5px solid var(--wood-clr);
font-size: 14px;
}
/* video dots */
.video-inner .video-title .video-dots {
position: absolute;
top: 7px;
left: 0;
font-size: 16px;
color: #000;
padding: 8px;
background: transparent;
border: none;
outline: none;
cursor: grab;
}
.video-inner .video-body {
padding: 10px 20px;
}
.video-inner .video-priview {
display: flex;
align-items: center;
justify-content: center;
}
.video-inner .video-priview img {
width: 100%;
max-height: 160px;
object-fit: cover;
object-position: center;
}
.video-inner .video-acts {
display: flex;
align-items: center;
justify-content: flex-end;
padding: 0 20px;
margin-bottom: 20px;
}
.video-inner .video-acts button {
margin: 0 0 0 10px;
}
/* edit mode */
.video-inner.edit-mode .video-acts .edit-video {
display: none;
}
/* non-edit mode */
.video-inner:not(.edit-mode) .video-acts .save-video,
.video-inner:not(.edit-mode) .video-acts .delete-video,
.video-inner:not(.edit-mode) .video-acts .cancel-video {
display: none;
}
.gallery-content .add-video-outer {
margin: 10px 0;
}
.add-video-outer .add-video {
text-transform: capitalize;
}
@media only screen and (max-width: 425px) {
.main-body .gallery-content {
padding: 1em 0.75em 2em 0.75em;
/* Edited */
/* background-color: mediumslateblue; */
}
.gallery-content .divider {
height: 1px;
margin: 30px 0;
/* Edited */
}
.gallery-photo .galleries {
padding: 0.75em;
/* Edited */
}
/* Videos */
.gallery-videos-outer .gallery-videos {
margin-bottom: 1em;
}
.video-inner .video-title h2 {
font-size: 18px;
}
.gallery-content .add-video-outer {
text-align: center;
/* Edited */
/* background-color: darkgreen; */
}
.add-video-outer .add-video {
display: inline-block;
margin: 0.5em auto;
}
}
/* ========================================
BRIDE AND GROOM CONTENT
======================================== */
.bridegroom-content {
padding: 20px 40px 40px 40px;
/* background-color: lightpink; */
}
.bridegroom-content .divider {
margin: 40px 0;
height: 2px;
}
.bridegroom-content .bridegroom-head {
margin-bottom: 30px;
padding: 0 0 0 0;
border-bottom: none;
/* background-color: lightsalmon; */
}
.bridegroom-content .bridegroom-title {
background: transparent;
/* background-color: lightsteelblue; */
}
.bridegroom-content .bridegroom-head .switch-group {
padding: 0;
margin-bottom: 0;
}
.bridegroom-content .bride-and-groom {
padding: 0 0 20px 0;
margin: 0;
/* background-color: lightseagreen; */
}
.bridegroom-content .bride-and-groom .input-group-prepend {
padding: 5px 12px;
}
.bridegroom-content .bride-and-groom::before {
content: none;
}
.bridegroom-content .bride-first {
padding: 12px 0;
}
@media only screen and (max-width: 425px) {
.bridegroom-content {
padding: 1em 0.75em 2em 0.75em;
flex-direction: column;
}
.bridegroom-content .divider {
margin: 1.5em 0;
height: 1px;
}
.bridegroom-content .bridegroom-head {
margin-bottom: 1em;
border-top: none;
/* padding: 0 0 0 0;
border-bottom: none; */
}
.bridegroom-content .bridegroom-title {
/* background: transparent; */
}
.bridegroom-content .bridegroom-head .switch-group {
/* padding: 0;
margin-bottom: 0; */
}
.bridegroom-content .bride-and-groom {
padding: 0 0 1em 0;
/* margin: 0; */
}
.bridegroom-content .bride-and-groom .input-group-prepend {
/* padding: 5px 12px; */
}
.bridegroom-content .bride-and-groom::before {
/* content: none; */
}
.bridegroom-content .bride-first {
/* padding: 12px 0; */
}
}
/* ========================================
EVENT CONTENT
======================================== */
.event-content {
padding: 20px 40px 70px 40px;
width: 90%;
margin: 0 auto;
/* background-color: mediumaquamarine; */
}
.event-content textarea.form-control {
min-height: 75px;
}
.event-content .event-top {
border-bottom: 2px solid var(--wood-clr);
padding-bottom: 20px;
margin-bottom: 30px;
/* background-color: indianred; */
}
.event-content .event-outer {
margin: 0;
padding: 0;
width: 100%;
/* background-color: goldenrod; */
}
.event-outer .add-event-outer {
margin-top: 20px;
}
.events .event-head {
margin: 0;
padding: 15px 20px;
}
.events .event {
padding: 10px 20px;
}
.events .event-body {
margin: 0;
padding: 10px 20px;
}
.event .event-foot {
padding: 10px 20px;
background: transparent;
}
@media only screen and (max-width: 768px) {
.event-content {
padding: 1em 1em 2em 1em;
width: 100%;
margin: 0 auto;
}
.event-content textarea.form-control {
min-height: 75px;
}
.event-content .event-top {
border-bottom: 2px solid var(--wood-clr);
padding-bottom: 15px;
margin-bottom: 25px;
}
.event-content .event-outer {
margin: 0;
padding: 0;
width: 100%;
}
.event-outer .add-event-outer {
margin-top: 0px;
}
.events .event-head {
margin: 0;
padding: 1em 0.75em;
}
.events .event {
padding: 0;
}
.events .event-body {
margin: 0;
padding: 0.75em;
}
.event .event-foot {
padding: 1.25em 0.75em;
background: transparent;
}
}
/* UPGRADE */
.upgrade-content {
background: transparent;
padding: 20px 40px 80px 40px;
}
.upgrade-content .upgrade-head {
background: inherit;
margin-bottom: 30px;
}
.upgrade-head .upgrade-head-inner {
display: inline-flex;
align-items: center;
border-radius: 7px;
overflow: hidden;
border: 2px solid rgba(0, 0, 0, 0.05);
}
.upgrade-head-inner .upgrade-item {
font-size: 14px;
padding: 12px 16px;
display: inline-block;
border-radius: 4px;
color: var(--primary-clr);
font-weight: 600;
transition: 0.3s ease-in-out;
min-width: 150px;
text-align: center;
}
.radio-box input[type="radio"]:checked+.upgrade-item,
.upgrade-head-inner .upgrade-item:hover {
background: var(--primary-clr);
color: var(--white-clr);
}
.upgrade-content .upgrade-body {
background: inherit;
}
.upgrade-content .upgrade-body .tab-content {
background: inherit;
/* background-color: seagreen; */
width: 100%;
overflow-x: auto;
}
.upgrade-content .upgrade-body table {
width: 100%;
table-layout: inherit;
border-collapse: collapse;
margin-bottom: 2em;
/* background-color: olive; */
}
.upgrade-body table thead tr {
border-top: 2px solid var(--tertiary-clr);
border-bottom: 2px solid var(--tertiary-clr);
}
.upgrade-body table thead tr th {
padding: 12px 10px;
text-transform: uppercase;
font-size: 16px;
font-weight: 600;
min-width: 150px;
max-width: 250px;
color: var(--wood-clr);
}
.upgrade-body table thead tr th:first-of-type {
min-width: 120px;
}
.upgrade-body table thead tr th.selected {
background: #f1f1f1;
color: var(--primary-clr);
}
.upgrade-body table.add-ons-table tbody tr {
height: 55px;
}
.upgrade-body table tbody tr {
border-bottom: .5px solid var(--wood-clr);
}
.upgrade-body table tbody tr td {
padding: 10px;
font-size: 14px;
text-align: center;
color: var(--wood-clr);
}
.upgrade-body table tbody tr td.selected {
background: #f1f1f1;
color: var(--primary-clr);
font-weight: 600;
}
.upgrade-body table tbody tr td:first-child {
text-align: left;
color: var(--primary-clr);
}
.upgrade-body table.add-ons-table thead tr th:last-child,
.upgrade-body table.add-ons-table tbody tr td:last-child {
font-size: 16px;
font-weight: 600;
transition: 0.3s ease-in-out;
color: var(--primary-clr);
}
.upgrade-body table tbody tr.action {
border-width: 0;
}
.upgrade-body table tbody tr.action td small {
color: var(--primary-clr);
margin-bottom: .5em;
font-size: 11px;
}
.upgrade-body table tbody tr.action td p {
font-size: 17px;
font-weight: 600;
margin-bottom: .5em;
color: var(--primary-clr);
}
.upgrade-body table tbody tr.action td button {
padding: 8px 12px;
margin: 0 auto;
}
.upgrade-content .plus-minus-control {
width: 80px;
}
.upgrade-content .upgrade-design {
background: var(--tertiary-clr);
padding: 8px 16px;
font-size: 14px;
display: inline-block;
border-radius: 6px;
width: 150px;
color: #fff;
font-weight: 600;
transition: 0.2s ease-in-out;
}
@media only screen and (max-width: 425px) {
/* Edited */
.upgrade-content {
background: transparent;
padding: 1em 0.75em 2em 0.75em;
/* Edited */
/* background-color: teal; */
}
.upgrade-content .upgrade-head {
background: inherit;
margin-bottom: 1.25em;
/* Edited */
/* background-color: tomato; */
}
.upgrade-head .upgrade-head-inner {
width: 100%;
display: flex;
align-items: stretch;
justify-content: stretch;
border-radius: 7px;
overflow: hidden;
border: 1px solid rgba(0, 0, 0, 0.05);
/* Edited */
/* background-color: violet; */
}
.upgrade-head .upgrade-head-inner label {
width: 100%;
height: auto;
/* background-color: navy; */
}
.upgrade-head-inner .upgrade-item {
font-size: 13px;
/* Edited */
padding: 12px 16px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
border-radius: 4px;
color: var(--primary-clr);
font-weight: 500;
/* Edited */
transition: 0.3s ease-in-out;
min-width: 0;
width: 100%;
height: 100%;
text-align: center;
/* background-color: slateblue; */
}
.radio-box input[type="radio"]:checked+.upgrade-item,
.upgrade-head-inner .upgrade-item:hover {
background: var(--primary-clr);
color: var(--white-clr);
}
.upgrade-content .upgrade-body {
background: inherit;
/* background-color: sienna; */
}
.upgrade-content .upgrade-body .tab-content {
background: inherit;
/* background-color: seagreen; */
width: 100%;
overflow-x: auto;
}
.upgrade-content .upgrade-body table {
width: 100%;
table-layout: inherit;
border-collapse: collapse;
margin-bottom: 2em;
/* background-color: olive; */
}
.upgrade-body table thead tr {
border-top: 1px solid var(--tertiary-clr);
/* Edited */
border-bottom: 1px solid var(--tertiary-clr);
/* Edited */
}
.upgrade-body table thead tr th {
padding: 0.75em 0.5em;
/* Edited */
text-transform: uppercase;
font-size: 15px;
/* Edited */
font-weight: 600;
color: var(--wood-clr);
width: 100%;
/* Edited */
word-wrap: break-word;
/* Edited */
}
.upgrade-body table thead tr th.selected {
background: #f1f1f1;
color: var(--primary-clr);
}
.upgrade-body table tbody tr {
border-bottom: .5px solid var(--wood-clr);
}
.upgrade-body table tbody tr td {
padding: 0.75em;
/* Edited */
font-size: 13px;
/* Edited */
text-align: center;
color: var(--wood-clr);
}
.upgrade-body table tbody tr td.selected {
background: #f1f1f1;
color: var(--primary-clr);
font-weight: 600;
}
.upgrade-body table tbody tr td:first-child {
text-align: left;
color: var(--primary-clr);
}
.upgrade-body table.add-ons-table thead tr th:last-child,
.upgrade-body table.add-ons-table tbody tr td:last-child {
font-size: 16px;
font-weight: 600;
transition: 0.3s ease-in-out;
color: var(--primary-clr);
}
.upgrade-body table tbody tr.action {
border-width: 0;
}
.upgrade-body table tbody tr.action td small {
color: var(--primary-clr);
margin-bottom: .5em;
font-size: 11px;
}
.upgrade-body table tbody tr.action td p {
font-size: 15px;
/* Edited */
font-weight: 600;
margin-bottom: .5em;
color: var(--primary-clr);
}
.upgrade-body table tbody tr.action td button {
padding: 8px 12px;
margin: 0 auto;
font-weight: normal;
/* Edited */
font-size: 13px;
/* Edited */
}
.upgrade-content .plus-minus-control {
width: 80px;
}
.upgrade-content .upgrade-design {
background: var(--tertiary-clr);
padding: 8px 16px;
font-size: 14px;
display: inline-block;
border-radius: 6px;
width: 150px;
color: #fff;
font-weight: 600;
transition: 0.2s ease-in-out;
}
}
/* Checkbox BOX */
.checkbox-box {
display: inline-block;
cursor: pointer;
}
.checkbox-box input[type="checkbox"] {
display: none;
}
.checkbox-box input[type="checkbox"]:checked+.upgrade-design {
background: var(--primary-clr);
}
/* Expired Invitation */
.expired-invitation {
background-color: transparent;
margin-bottom: 20px;
/* background-color: mediumorchid; */
}
.expired-invitation .expired-invitation-inner {
display: flex;
justify-content: center;
/* background-color: mediumspringgreen; */
}
/* Cation */
.expired-invitation .caution {
background-color: var(--error-dark-clr);
border-radius: 22px;
box-shadow: -2px 2px 8px var(--error-clr);
/* background-color: olive; */
}
.expired-invitation .caution .caution-inner {
padding: 10px 20px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
min-height: 120px;
/* background: orangered; */
}
.expired-invitation .caution .caution-inner .stiker {
height: auto;
width: 70px;
position: absolute;
bottom: -9px;
left: 50px;
/* background-color: palegreen; */
}
.expired-invitation .caution .caution-inner .stiker img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
display: block;
}
.expired-invitation .caution .caution-inner .caption {
margin-left: 100px;
padding: 20px;
/* background-color: peru; */
}
.expired-invitation .caution .caution-inner .caption h1 {
font-size: 28px;
font-family: "Bebas Neue";
letter-spacing: 1px;
font-weight: 500;
color: var(--white-clr);
}
@media only screen and (max-width: 425px) {
/* Cation */
.expired-invitation .caution .caution-inner {
padding: 0.75em;
/* Edited */
}
.expired-invitation .caution .caution-inner .stiker {
width: 50px;
/* Edited */
bottom: auto;
/* Edited */
top: 0.75em;
/* Edited */
left: 1.5em;
/* Edited */
}
.expired-invitation .caution .caution-inner .caption {
margin-left: 0px;
/* Edited */
padding: 0 0.75em;
/* Edited */
margin-top: 80px;
/* Edited */
}
.expired-invitation .caution .caution-inner .caption h1 {
font-size: 22px;
/* Edited */
}
}
/* Invitation Publish */
.invitation-publish {
background-color: var(--wood-clr);
font-size: 13px;
padding: 3px 12px;
border-radius: 4px;
color: var(--white-clr);
display: flex;
align-items: flex-start;
justify-content: center;
}
@media only screen and (max-width: 425px) {
.invitation-publish {
font-size: 11px;
}
}
/* ========================================
GUEST BOOK
======================================== */
.guest-book-content {
padding: 20px 40px;
/* background-color: olive; */
}
.guest-book-content .statistic {
justify-content: center;
margin-bottom: 20px;
/* background-color: palevioletred; */
}
.guest-book-content .statistic .graphic {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
/* flex-wrap: wrap; */
/* background-color: peru; */
}
.guest-book-content .statistic .graphic>div {
width: 100%;
max-width: 420px;
height: 100%;
box-shadow: -3px 3px 15px var(--secondary-clr);
margin: 0 0.75em;
/* background-color: plum; */
}
.guest-book-content .statistic .graphic .graphic-attendance>div:nth-child(1),
.guest-book-content .statistic .graphic .graphic-attendance>div:nth-child(1) label {
margin-bottom: 0.2em;
}
.guest-book-content .statistic .graphic .graphic-attendance>div:nth-child(2) {
margin-bottom: 1em;
}
.guest-book-content .statistic .graphic .graphic-attendance a {
font-size: 12px;
color: var(--sea-clr);
/* background-color: powderblue; */
}
.guest-book-content .statistic .graphic .graphic-attendance label sup {
color: var(--wood-clr);
cursor: pointer;
}
@media only screen and (max-width: 768px) {
.guest-book-content .statistic .graphic {
flex-direction: column;
}
.guest-book-content .statistic .graphic>div {
margin-bottom: 1.25em;
width: 100%;
max-width: none;
}
.guest-book-content .statistic .graphic>div:last-of-type {
margin-bottom: 0;
}
}
@media only screen and (max-width: 425px) {
/* Edited */
.guest-book-content {
padding: 1em 0.75em 1.5em 0.75em;
/* Edited */
}
.guest-book-content .statistic {
margin-bottom: 0;
/* Edited */
}
.guest-book-content .statistic .graphic {
width: 100%;
/* Edited */
grid-template-columns: repeat(1, 1fr);
/* Edited */
column-gap: 1.25em;
/* Edited */
row-gap: 1.25em;
/* Edited */
}
.guest-book-content .statistic .graphic>div {
margin-bottom: 0.25em;
width: 100%;
/* Edited */
box-shadow: -2px 2px 6px var(--secondary-clr);
/* Edited */
}
}
/* TAB SPECIAL GUEST */
.tab-special-guest {
background: inherit;
/* background-color: teal; */
}
.tab-special-guest .special-guest-head {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding: 20px 0;
/* background-color: violet; */
}
.special-guest-head .btn,
.public-guest-head .btn,
.all-guests-head .btn {
text-transform: capitalize;
font-weight: 500;
padding: 12px;
margin-right: 10px;
font-size: 14px;
/* background-color: tomato; */
}
.special-guest-head > div,
.special-guest-head > div > form {
display: flex;
align-items: center;
justify-content: center;
/* flex-wrap: wrap; */
/* background-color: steelblue; */
}
.special-guest-head > div .whatsapp-free-mobile {
display: none;
}
.special-guest-head > div .whatsapp-free-desktop {
display: block;
}
@media only screen and (max-width: 768px) {
.special-guest-head>div {
padding: 0.25em;
}
}
@media only screen and (max-width: 425px) {
.tab-special-guest .special-guest-head {
padding: 0.75em 0;
}
.special-guest-head .btn,
.public-guest-head .btn,
.all-guests-head .btn {
padding: 0.75em;
margin: 0.25em;
font-size: 13px;
}
.special-guest-head>div {
padding: 0.25em;
width: 100%;
justify-content: flex-start;
flex-wrap: wrap;
}
.special-guest-head>div>form {
width: 100%;
}
.special-guest-head>div>form>div {
padding: 0.25em;
width: 100%;
}
.special-guest-head>div .whatsapp-free-mobile {
display: block;
}
.special-guest-head>div .whatsapp-free-desktop {
display: none;
}
}
/* TAB SPECIAL GUEST */
.tab-special-guest .special-guest-body {
background: inherit;
/* background-color: seagreen; */
width: 100%;
overflow-x: auto;
}
/* Guest Table */
.guest-table {
width: 100%;
table-layout: inherit;
border-collapse: collapse;
font-size: 14px;
/* background-color: olive; */
font-weight: 500;
}
.guest-table thead tr {
border: none;
}
.guest-table thead tr th {
padding: 10px 2px;
border-top: 2px solid var(--tertiary-clr);
border-bottom: 2px solid var(--tertiary-clr);
}
.guest-table thead tr th:not(.sorting_disabled) {
padding-right: 20px;
}
.guest-table tr th,
.guest-table tr td {
white-space: nowrap;
}
.guest-table tbody tr {
border-bottom: 1px solid var(--wood-clr);
}
.guest-table tbody tr:hover {
background-color: #eee;
}
.guest-table tbody tr.is-skeleton:hover {
background-color: initial;
}
.guest-table tbody tr td {
padding: 8px;
text-align: left;
border-left: 0.5px solid var(--secondary-clr);
}
.guest-table tbody tr td.dataTables_empty {
padding: 44px 0px;
}
.guest-table tbody tr td:first-of-type {
border-left: none;
}
.guest-table tbody tr td input[type="checkbox"] {
margin: 0 auto;
display: block;
}
/* vip */
.guest-table .guest-item.vip .fa-crown {
font-size: 0.9em;
color: #f9b115;
margin-left: 2px;
margin-top: 0.1em;
display: inline-block;
vertical-align: top;
}
/* vip */
.guest-table .guest-item.vvip .ph-crown-simple {
font-size: 1.4em;
/* color: #EB2F59; */
color: #f9b115;
margin-left: 2px;
display: inline-block;
vertical-align: top;
}
.guest-table .guest-item.vip .ph-star {
font-size: 1.4em;
color: #f9b115;
margin-left: 2px;
display: inline-block;
vertical-align: top;
}
.guest-table .guest-item .ph-user {
font-size: 1.4em;
/* color: #f9b115; */
margin-left: 2px;
display: inline-block;
vertical-align: top;
}
.guest-table .guest-name,
.guest-table .guest-group {
color: var(--sea-clr);
cursor: pointer;
display: inline-block;
vertical-align: top;
text-align: left;
}
.guest-table .guest-name:hover,
.guest-table .guest-group:hover {
text-decoration: underline;
}
.guest-table .guest-code {
color: var(--error-clr);
text-align: center;
display: block;
}
.guest-table .guest-group {
text-transform: capitalize;
}
.guest-table .guest-amount {
display: block;
text-align: center;
}
.guest-table .guest-status {
background: inherit;
padding: 2px 6px;
border-radius: 7px;
font-weight: 500;
font-size: 12px;
display: block;
width: 80px;
margin: 0 auto;
text-transform: capitalize;
text-align: center;
border-width: 1px;
border-style: solid;
background: var(--white-clr);
border-color: #878787;
color: #878787;
}
.guest-table .guest-status.not_going {
background: var(--secondary-clr);
border-color: var(--secondary-clr);
color: var(--primary-clr);
}
.guest-table .guest-status.going {
background: var(--wood-clr);
color: var(--light-clr);
border-color: var(--wood-clr);
}
.guest-table .guest-status.opened {
border-color: var(--primary-clr);
background: var(--white-clr);
color: var(--primary-clr);
}
.guest-table .guest-status.invited {
background: var(--white-clr);
border-color: var(--wood-clr);
color: var(--wood-clr);
}
.guest-table .guest-status.failed {
background-color: var(--white-clr);
border-color: var(--error-dark-clr);
color: var(--error-dark-clr);
}
/* copy & delete button */
.guest-table .copy-guest-template,
.guest-table .delete-guest {
border: none;
outline: none;
background: transparent;
width: 24px;
height: 24px;
font-size: 12px;
border-radius: 4px;
cursor: pointer;
transition: 0.25s ease-in-out;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
/* copy button */
.guest-table .copy-guest-template {
border: .5px solid var(--primary-clr);
color: var(--primary-clr);
}
.guest-table .copy-guest-template:hover {
color: var(--light-clr);
background: var(--primary-clr);
}
/* delete button */
.guest-table .delete-guest {
border: .5px solid var(--error-clr);
color: var(--error-clr);
}
.guest-table .delete-guest:hover {
color: var(--light-clr);
background: var(--error-clr);
}
/* disabled copy and delete button */
.guest-table .copy-guest-template:disabled,
.guest-table .copy-guest-template.disabled,
.guest-table .delete-guest:disabled,
.guest-table .delete-guest.disabled {
color: var(--tertiary-clr);
border-color: var(--tertiary-clr);
pointer-events: none;
}
.guest-table .no-guest {
border-bottom: 0;
}
.guest-table .no-guest .no-guest-inner {
display: flex;
flex-direction: column;
}
.guest-table .no-guest .no-guest-inner span {
font-size: 14px;
margin-top: 12px;
}
.guest-table .no-guest td {
padding: 50px 20px;
text-align: center;
}
@media only screen and (max-width: 425px) {
/* Edited */
.tab-special-guest .special-guest-body {
padding: 0.75em 0;
/* Edited */
}
/* Guest Table */
.guest-table {
font-size: 13px;
/* Edited */
}
.guest-table thead tr {
border-top: 1px solid var(--tertiary-clr);
/* Edited */
border-bottom: 1px solid var(--tertiary-clr);
/* Edited */
}
.guest-table thead tr th {
min-width: 100px;
/* Edited */
max-width: 250px;
/* Edited */
width: 100%;
/* Edited */
word-wrap: break-word;
/* Edited */
}
.guest-table tbody tr {
border-bottom: 0.5px solid var(--wood-clr);
/* Edited */
}
.guest-table tbody tr td {
padding: 4px 8px;
/* Edited */
text-align: left;
border-left: 0.25px solid var(--secondary-clr);
/* Edited */
min-width: 100px;
/* Edited */
max-width: 250px;
/* Edited */
width: 100%;
/* Edited */
word-wrap: break-word;
/* Edited */
}
.guest-table thead tr th:first-of-type,
.guest-table tbody tr td:first-of-type {
min-width: 0;
/* Edited */
}
.guest-table .guest-status {
border-radius: 5px;
/* Edited */
font-size: 10px;
/* Edited */
width: 80px;
/* Edited */
}
.guest-table .no-guest td {
padding: 40px 20px;
/* Edited */
}
}
/* TAB PUBLIC GUEST */
.tab-public-guest {
background: inherit;
}
.tab-public-guest .public-guest-greet {
margin-top: 20px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0;
width: 100%;
}
.tab-public-guest .public-guest-greet .caption {
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
}
.tab-public-guest .public-guest-greet .caption p i {
font-size: 26px;
}
.tab-public-guest .public-guest-greet .caption p {
font-size: 13px;
margin-right: 10px;
}
.tab-public-guest .public-guest-greet .acts {
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.tab-public-guest .public-guest-greet .acts button {
padding: 10px 22px;
text-transform: capitalize;
font-weight: 500;
}
.tab-public-guest .public-guest-greet .acts button i {
margin-left: 0;
}
.tab-public-guest .public-guest-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0 20px 0;
}
.public-guest-head>div {
display: flex;
align-items: center;
}
.public-guest-head>div:first-child {
width: 60%;
}
.public-guest-head>div:last-child {
width: 35%;
}
.public-guest-head>div>.input-group {
margin: 0;
flex: 1;
margin-right: 16px;
}
.public-guest-head .input-group .input-group-append {
padding: 0;
display: flex;
}
.public-guest-head .refresh-public {
height: 100%;
margin-left: auto;
}
.public-guest-head form {
flex: 1;
}
.public-guest-head .copy-public-form {
background: var(--wood-clr);
border: none;
outline: none;
height: 100%;
padding: 4px 14px;
color: var(--light-clr);
font-size: 20px;
cursor: pointer;
border-radius: 0;
transition: 0.3s ease-in-out;
}
.public-guest-head .copy-public-form:hover {
background: var(--primary-clr);
}
.public-guest-acts {
margin-bottom: 20px;
display: flex;
align-items: center;
}
.public-guest-acts button.btn {
text-transform: capitalize;
font-weight: 500;
padding: 12px;
margin-right: 10px;
font-size: 14px;
}
.tab-public-guest .public-guest-body {
background: inherit;
/* background-color: seagreen; */
width: 100%;
overflow-x: auto;
}
@media only screen and (max-width: 600px) {
.tab-public-guest .public-guest-greet {
flex-direction: column;
/* Edited */
margin-top: 0.5em;
/* Edited */
}
.tab-public-guest .public-guest-greet .caption {
padding: 0.25em 0.75em;
/* Edited */
width: 100%;
/* Edited */
}
.tab-public-guest .public-guest-greet .caption p {
margin-right: 0;
/* Edited */
}
.tab-public-guest .public-guest-greet .caption p:first-of-type {
margin-right: 0.75em;
/* Edited */
}
.tab-public-guest .public-guest-greet .acts {
padding: 0.25em 0.75em;
/* Edited */
width: 100%;
/* Edited */
}
.tab-public-guest .public-guest-greet .acts button {
padding: 0.6em 22px;
/* Edited */
margin-left: auto;
/* Edited */
display: block;
/* Edited */
width: 100%;
/* Edited */
}
.tab-public-guest .public-guest-head {
flex-direction: column;
/* Edited */
padding: 0.25em 0;
/* Edited */
}
.public-guest-head>div {
padding: 0.25em 0.75em;
/* Edited */
}
.public-guest-head>div:first-child,
.public-guest-head>div:last-child {
width: 100%;
/* Edited */
}
.public-guest-head>div>.input-group {
margin-right: 0px;
/* Edited */
}
.public-guest-acts {
margin-bottom: 0.75em;
/* Edited */
padding: 0.5em 0.75em;
/* Edited */
}
}
@media only screen and (max-width: 425px) {
/* Edited */
.public-guest-acts {
margin-bottom: 0.25em;
/* Edited */
padding: 0.5em 0.75em;
/* Edited */
flex-wrap: wrap;
/* Edited */
}
.public-guest-acts button.btn {
font-size: 13px;
/* Edited */
padding: 0.75em;
/* Edited */
margin: 0.25em;
/* Edited */
}
.tab-public-guest .public-guest-body {
padding: 0.75em 0;
/* Edited */
}
}
/* TAB ALL GUESTS */
.tab-all-guests {
background: inherit;
/* background-color: lightseagreen; */
}
.tab-all-guests .all-guests-head {
padding: 20px 0;
display: flex;
align-items: center;
justify-content: space-between;
/* background-color: lightskyblue; */
}
.all-guests-head>div {
display: flex;
align-items: center;
/* background-color: olive; */
}
.all-guests-head>div>form {
margin-right: 0px;
/* background-color: orangered; */
}
.all-guests-head>div>form .form-control {
max-width: 400px;
width: 100%;
/* background-color: slateblue; */
}
.tab-all-guests .all-guests-body {
background: inherit;
/* background-color: seagreen; */
width: 100%;
overflow-x: auto;
}
@media only screen and (max-width: 600px) {
/* Edited */
.tab-all-guests .all-guests-head {
padding: 0.75em 0;
/* Edited */
flex-wrap: wrap;
/* Edited */
}
.all-guests-head>div {
flex-wrap: wrap;
/* Edited */
padding: 0.25em 0.75em;
/* Edited */
width: 100%;
/* Edited */
}
.all-guests-head>div>form {
margin-right: 0;
/* Edited */
padding: 0.5em 0.25em;
/* Edited */
width: 100%;
/* Edited */
}
.all-guests-head>div>form .form-control {
min-width: 0;
/* Edited */
}
.tab-all-guests .all-guests-body {
padding: 0.5em 0;
/* Edited */
}
}
/* Tab Content > pages*/
.tab-content .pages {
margin-top: 20px;
display: flex;
align-items: center;
justify-content: center;
padding: 10px 0;
/* background-color: cadetblue; */
}
.tab-content .pages>div {
display: flex;
align-items: center;
justify-content: center;
/* background-color: chocolate; */
}
.tab-content .pages>div:first-of-type {
flex: 1;
}
.tab-content .pages>div .page-outer {
border-radius: 7px;
/* border: .5px solid var(--primary-clr); */
overflow: hidden;
}
.tab-content .pages>div .page-outer .page {
padding: 8px 14px;
display: inline-block;
text-decoration: none;
background-color: #f7f7f7;
transition: all 0.25s ease-in-out;
color: var(--primary-clr);
border: none;
outline: none;
cursor: pointer;
}
.tab-content .pages>div .page-outer .page.active {
background-color: var(--wood-clr);
}
.tab-content .pages>div .page-outer .page:hover {
background-color: var(--primary-clr);
color: var(--white-clr);
}
.tab-content .pages>div .prev,
.tab-content .pages>div .next {
padding: 8px 14px;
border-radius: 7px;
margin: 0 10px;
display: inline-block;
background-color: var(--wood-clr);
color: var(--white-clr);
transition: all 0.25s ease-in-out;
border: none;
outline: none;
cursor: pointer;
}
.tab-content .pages>div .prev:hover,
.tab-content .pages>div .next:hover {
background-color: var(--primary-clr);
color: var(--white-clr);
}
.tab-content .pages>div .prev[data-active="false"],
.tab-content .pages>div .next[data-active="false"] {
background-color: var(--tertiary-clr);
}
.tab-content .pages>div .form-group {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0;
}
.tab-content .pages>div .form-group .form-label,
.tab-content .pages>div .form-group .form-control {
margin-bottom: 0;
}
.tab-content .pages>div .form-group .form-label {
margin-right: 7px;
font-size: 12px;
}
.tab-content .pages>div .form-group .form-control {
width: 50px;
text-align: center;
padding: 6px 12px;
}
@media only screen and (max-width: 425px) {
/* Edited */
.tab-content .pages {
margin-top: 0px;
/* Edited */
flex-wrap: wrap;
/* Edited */
padding: 0.25em 0;
/* Edited */
}
.tab-content .pages>div {
width: 100%;
/* Edited */
margin: 0.25em 0;
/* Edited */
padding: 0.25em 0.5em;
/* Edited */
}
.tab-content .pages>div .prev,
.tab-content .pages>div .next {
padding: 7px 12px;
/* Edited */
}
.tab-content .pages>div .form-group {
flex-direction: column;
/* Edited */
}
.tab-content .pages>div .form-group .form-label {
margin-right: 0;
/* Edited */
margin-bottom: 0.5em;
/* Edited */
}
.tab-content .pages>div .form-group .form-control {
max-width: 50px;
/* Edited */
font-size: 12px!important;
/* Edited */
padding: 8px!important;
/* Edited */
}
}
/* ======================================
GUEST GROUP
====================================== */
.guest-group-main {
/* background-color: lightsalmon; */
}
/* Guest Group Head */
.guest-group-main .guest-group-head {
/* background-color: lightseagreen; */
padding: 1.75em 1em 1.5em 1em;
text-align: center;
}
.guest-group-main .guest-group-head h1 {
font-family: "Bebas Neue";
font-weight: normal;
letter-spacing: 1px;
font-size: 40px;
line-height: 1.2;
color: var(--primary-clr);
/* background-color: deeppink; */
}
.guest-group-main .guest-group-head h1 span {
font-size: 0.8em;
margin-right: 0.2em;
}
@media only screen and (max-width: 425px) {
.guest-group-main .guest-group-head {
/* background-color: lightseagreen; */
padding: 1.25em 1em 1em 1em;
text-align: center;
}
.guest-group-main .guest-group-head h1 {
font-size: 30px;
}
}
/* Guest Group List */
.guest-group-main .guest-group-list {
/* background-color: olive; */
padding: 40px 60px 70px 60px;
border-top: 1px solid var(--secondary-clr);
/* display: flex;
flex-wrap: wrap;
justify-content: center; */
display: grid;
grid-template-columns: repeat(2, auto);
column-gap: 2em;
row-gap: 1.75em;
}
.guest-group-main .guest-group-list .guest-group-item {
/* background-color: orange; */
display: inline-flex;
text-decoration: none;
border-radius: 22px;
width: 100%;
min-height: 220px;
margin: 1em 0.75em;
margin: 0;
color: #222;
box-shadow: -2px 2px 10px var(--secondary-clr);
transition: all 0.25s ease-in-out;
}
.guest-group-main .guest-group-list .guest-group-item:hover {
background-color: #fafafa;
}
.guest-group-main .guest-group-list .guest-group-item:hover>div .foot {
background-color: var(--primary-clr);
}
.guest-group-main .guest-group-list .guest-group-item>div {
/* background-color: orchid; */
width: 100%;
overflow: hidden;
display: flex;
flex-wrap: wrap;
flex-direction: column;
flex: 1;
border-radius: inherit;
}
.guest-group-main .guest-group-list .guest-group-item>div .body {
/* background-color: peru; */
padding: 1em;
flex: 1;
}
.guest-group-main .guest-group-list .guest-group-item>div .body .guest-group-statistic {
/* background-color: burlywood; */
position: relative;
margin: 0;
}
.guest-group-main .guest-group-list .guest-group-item>div .body .guest-group-statistic .chart-outer {
/* background-color: maroon; */
background-color: transparent;
width: 150px;
height: 150px;
border-radius: 50%;
margin: auto;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.guest-group-main .guest-group-list .guest-group-item>div .body .guest-group-statistic .chart-outer .guest-group-canvas {
background: radial-gradient(circle at center, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0) 47%, rgba(0, 0, 0, 0.2) 47%, rgba(0, 0, 0, 0.2) 68%, rgba(0, 0, 0, 0.2) 68%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
}
.guest-group-main .guest-group-list .guest-group-item>div .body .guest-group-statistic p.guest-num {
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 25px;
font-weight: 500;
color: var(--primary-clr);
}
.guest-group-main .guest-group-list .guest-group-item>div .foot {
background-color: var(--wood-clr);
width: 100%;
text-align: center;
padding: 0.75em;
margin-top: auto;
transition: all 0.3s ease-in-out;
/* background-color: mediumturquoise; */
}
.guest-group-main .guest-group-list .guest-group-item>div .foot p {
font-size: 20px;
color: var(--white-clr);
font-weight: 500;
}
/* Insert Guest Group */
.guest-group-main .guest-group-list .guest-group-item.insert-guest-group>div {
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-clr);
}
.guest-group-main .guest-group-list .guest-group-item.insert-guest-group>div span {
font-size: 16px;
}
.guest-group-main .guest-group-list .guest-group-item.insert-guest-group>div p {
font-size: 18px;
margin-top: 0.5em;
font-weight: 700;
}
@media only screen and (max-width: 768px) {
.guest-group-main .guest-group-list {
padding: 1.25em 1.25em 70px 1.25em;
grid-template-columns: 1fr;
row-gap: 2.25em;
}
}
/* Guest Group Details */
.guest-group-main .guest-group-details {
/* background-color: lightskyblue; */
padding: 20px 20px 60px 20px;
border-top: 1px solid var(--wood-clr);
}
/* Group Head */
.guest-group-main .guest-group-details .group-head {
/* background-color: forestgreen; */
padding: 0.25em 0.75em;
}
/* Group Head => Title */
.guest-group-main .guest-group-details .group-head .title {
/* background-color: indianred; */
padding: 0.5em 0;
display: flex;
align-items: flex-start;
}
.guest-group-main .guest-group-details .group-head .title>div:first-of-type {
/* background-color: olive; */
flex: 1;
}
.guest-group-main .guest-group-details .group-head .title>div:last-of-type {
/* background-color: peru; */
display: flex;
margin-left: 0.75em;
}
.guest-group-main .guest-group-details .group-head .title>div h1 {
/* background-color: deeppink; */
font-size: 32.5px;
line-height: 1.2;
margin-bottom: 0.15em;
color: var(--primary-clr);
}
.guest-group-main .guest-group-details .group-head .title>div p.desc {
font-style: italic;
font-size: 15px;
}
.guest-group-main .guest-group-details .group-head .title>div button.btn-edit-group {
margin-right: 0.75em;
}
.guest-group-main .guest-group-details .group-head .title>div button.btn-delete {
padding: 0.25em 0.15em;
font-size: 18px;
margin-right: 0;
}
/* Group Head => Caption */
.guest-group-main .guest-group-details .group-head .caption {
/* background-color: darkolivegreen; */
padding: 0.5em 0;
display: flex;
align-items: flex-start;
font-size: 15px;
}
.guest-group-main .guest-group-details .group-head .caption:nth-child(even) {
/* background-color: darkslategrey; */
}
.guest-group-main .guest-group-details .group-head .caption>div {
display: flex;
align-items: flex-start;
}
.guest-group-main .guest-group-details .group-head .caption>div:first-of-type {
margin-right: 0.75em;
min-width: 25px;
/* background-color: tan; */
}
.guest-group-main .guest-group-details .group-head .caption>div:last-of-type {
/* background-color: cadetblue; */
}
.guest-group-main .guest-group-details .group-head .caption>div>span {
font-size: 22px;
}
.guest-group-main .guest-group-details .group-head .caption>div p.caption-guide {
font-size: 13px;
}
.guest-group-main .guest-group-details .group-head .caption>div table {
/* background-color: brown; */
margin-left: 0.25em;
}
.guest-group-main .guest-group-details .group-head .caption>div table tbody tr td {
padding-bottom: 0.4em;
padding-left: 0.5em;
padding-right: 0.5em;
}
.guest-group-main .guest-group-details .group-head .caption>div table tbody tr td.event-name {
font-weight: 500;
}
/* Group Head => Details */
.guest-group-main .guest-group-details .group-head .details {
/* background-color: darkslateblue; */
padding: 0.5em 0;
display: flex;
}
.guest-group-main .guest-group-details .group-head .details>div {
display: flex;
}
.guest-group-main .guest-group-details .group-head .details>div:first-of-type {
width: 60%;
margin-right: auto;
/* background-color: darkslategrey; */
}
.guest-group-main .guest-group-details .group-head .details>div:last-of-type {
width: 35%;
margin-left: auto;
/* background-color: deepskyblue; */
}
.guest-group-main .guest-group-details .group-head .details>div .input-group {
flex: 1;
margin-bottom: 0;
}
.guest-group-main .guest-group-details .group-head .details>div>button {
margin-right: 0.75em;
}
.guest-group-main .guest-group-details .group-head .details>div>form#searchGuestGroupForm {
flex: 1;
}
/* Group Head => Actions */
.guest-group-main .guest-group-details .group-head .actions {
/* background-color: lightgreen; */
display: flex;
justify-content: space-between;
}
.guest-group-main .guest-group-details .group-head .actions>ul {
/* background-color: lightpink; */
display: block;
padding: 0.5em 0;
}
.guest-group-main .guest-group-details .group-head .actions>ul li {
/* background-color: lightsteelblue; */
display: inline-block;
margin-right: 0.5em;
margin-bottom: 0.5em;
}
/* Group Body */
.guest-group-main .guest-group-details .group-body {
/* background-color: dimgrey; */
background: inherit;
/* background-color: seagreen; */
width: 100%;
overflow-x: auto;
padding: 0.5em 0;
}
@media only screen and (max-width: 768px) {
.guest-group-main .guest-group-details {
/* background-color: lightskyblue; */
padding: 0.5em 0.5em 40px 0.5em;
border-top: 1px solid var(--wood-clr);
}
.guest-group-main .guest-group-details .group-head .details {
padding: 0;
flex-wrap: wrap;
}
.guest-group-main .guest-group-details .group-head .details>div {
display: flex;
}
.guest-group-main .guest-group-details .group-head .details>div:first-of-type {
width: 100%;
margin-right: 0;
margin: 0.25em auto;
}
.guest-group-main .guest-group-details .group-head .details>div:last-of-type {
width: 100%;
margin-left: 0;
margin: 0.25em auto;
}
}
@media only screen and (max-width: 600px) {
/* Group Head => Title */
.guest-group-main .guest-group-details .group-head .title {
flex-wrap: wrap;
}
.guest-group-main .guest-group-details .group-head .title>div {
margin: 0.25em auto;
width: 100%;
}
.guest-group-main .guest-group-details .group-head .title>div:last-of-type {
margin-left: 0;
}
.guest-group-main .guest-group-details .group-head .title>div button.btn-edit-group {
width: 100%;
}
.guest-group-main .guest-group-details .group-head .title>div button.btn-delete {
padding: 0.25em 0.5em;
}
}
@media only screen and (max-width: 375px) {
.guest-group-main .guest-group-details .group-head .actions>ul li {
width: 100%;
margin-right: 0;
}
.guest-group-main .guest-group-details .group-head .actions>ul li button {
width: 100%;
}
}
/* ============================================
Guest List Footer
============================================ */
.guest-list-wrap .empty-guest {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 30px 10px;
}
.guest-list-wrap .empty-guest > span {
margin: 0.2em auto;
}
.guest-list-paginate {
display: flex;
align-items: center;
flex-wrap: wrap;
margin-top: 20px;
}
.guest-list-paginate .paginate-wrap {
margin: 0 auto;
}
/* ============================================
DATA TABLE
============================================ */
/* TABLE */
table.dataTable.no-footer {
border-bottom: none;
}
table.dataTable thead th,
table.dataTable thead td {
border-bottom: none;
}
table.dataTable thead th {
border-top: 2px solid var(--tertiary-clr);
border-bottom: 2px solid var(--tertiary-clr);
}
table.dataTable tbody th,
table.dataTable tbody td {
border-bottom: 1px solid var(--secondary-clr);
}
/* No Rows */
table.dataTable td.dataTables_empty .no-row {
display: flex;
flex-direction: column;
padding: 30px 10px;
}
table.dataTable td.dataTables_empty .no-row span {
margin: 0.2em auto;
}
/* WRAPPER */
.dataTables_wrapper {
width: 100%;
overflow-x: auto;
}
/* BOTTOM */
.dataTables_wrapper .bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 0.5em 0.25em;
margin-top: 0.5em;
}
/* LENGTH */
.dataTables_wrapper .dataTables_length {
padding: 0.25em;
float: none;
margin-left: auto;
}
.dataTables_wrapper .dataTables_length label {
font-size: 13px;
}
.dataTables_wrapper .dataTables_length select {
padding: 0.5em 0.25em;
border-radius: 4px;
cursor: pointer;
margin-left: 0.5em;
font-size: 14px;
}
/* Paginate */
.dataTables_wrapper .dataTables_paginate {
margin-left: auto;
float: none;
text-align: center;
padding: 0.25em;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
background: #fff;
border-radius: 7px;
border: 1px solid var(--tertiary-clr);
transition: all 0.25s ease-in-out;
font-size: 14px;
padding: 0.5em 1em;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:active {
background: #fff;
color: #333!important;
border: 1px solid var(--primary-clr);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next {
background: var(--wood-clr);
border: none;
margin: 0 0.5em;
color: #fff!important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.previous:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.next:hover {
background: var(--primary-clr);
color: #fff!important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
background: #aaa;
opacity: 0.25;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
background: #aaa;
border: none;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
background: var(--wood-clr);
border: 1px solid var(--wood-clr);
color: #fff!important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
color: #fff!important;
background: var(--wood-clr);
border: 1px solid var(--wood-clr);
}
/* Scroll body */
.dataTables_wrapper.no-footer .dataTables_scrollBody {
border-bottom: none;
}
/* Bottom */
.dataTables_bottom {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 16px;
margin-top: 20px;
}
/* Paginate */
.dataTables_wrapper .dataTables_paginate {
margin-right: auto;
}
/* Length */
.dataTables_wrapper .dataTables_length {
margin: initial;
padding: initial;
}
/* Empty */
.dataTables_empty {
padding: 44px 0px;
}
.dataTables_empty > i {
display: block;
margin-bottom: 12px;
}
@media only screen and (max-width: 425px) {
.dataTables_wrapper .dataTables_length {
margin: 0.25em auto;
}
.dataTables_wrapper .dataTables_paginate {
margin: 0.25em auto;
}
}
/* PAYMENT (INVOICE) */
.main.payment {
/* width: 650px;
min-height: 100vh;
display: flex;
margin: 20px auto;
flex-direction: column; */
/* background-color: blueviolet; */
max-width: 650px;
}
/* Content */
.payment-content {
background: transparent;
padding: 20px 0px 0px 0px;
margin: 0;
width: 100%;
/* background-color: brown; */
}
/* Payment Head */
.payment-content .payment-head {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0 1.5em;
/* background-color: coral; */
}
.payment-content .payment-head h1 {
font-size: 26px;
margin-bottom: .25em;
word-wrap: break-word;
}
.payment-content .payment-head p {
font-size: 16px;
margin-bottom: 0.1em;
word-wrap: break-word;
}
.payment-content .payment-head p span {
margin: 0 0.1em;
}
.payment-content .payment-head p small {
font-size: 0.75em;
font-weight: 500;
}
/* Invoice Table */
.payment-content .invoice-table-outer {
/* background-color: mediumvioletred; */
width: 100%;
overflow-x: auto;
}
.payment-content .invoice-table {
width: 100%;
table-layout: inherit;
border-collapse: collapse;
margin: 0 auto;
}
.invoice-table thead tr {
border-top: 1px solid var(--wood-clr);
border-bottom: 1px solid var(--wood-clr);
border-width: 0;
}
.invoice-table tbody tr {
border-top: .5px solid var(--tertiary-clr);
}
.invoice-table th {
padding: 12px;
}
.invoice-table td {
padding: 10px 20px;
font-size: 15px;
}
.invoice-table td.price {
text-align: right;
white-space: nowrap;
}
.invoice-table td small {
font-size: 12px;
font-style: italic;
}
/* Payment Status */
.payment-content .payment-status {
margin: 1em auto;
margin-bottom: -1.25em;
text-align: center;
font-size: 14px;
padding: 8px 12px;
display: none;
width: 100%;
line-height: 20px;
}
.payment-content .payment-status.pending {
background: var(--secondary-clr);
color: var(--primary-clr);
display: block;
}
.payment-content .payment-status.success {
background: var(--success-clr);
color: var(--white-clr);
display: block;
}
.payment-content .payment-status.failed {
background: var(--error-clr);
color: var(--white-clr);
display: block;
}
/* Payment Customer */
.payment-content .payment-customer {
padding: 1em 1.5em;
margin-top: 1em;
font-size: 15px;
line-height: 20px;
/* background-color: darksalmon; */
}
.payment-content .payment-customer span {
word-wrap: break-word;
}
/* Payment Amount */
.payment-content .payment-amount {
text-align: center;
padding: 30px 30px;
margin-top: 30px;
color: var(--primary-clr);
/* background-color: deeppink; */
}
.payment-content .payment-amount.checkout {
background: var(--secondary-clr);
margin-bottom: 20px;
}
.payment-content .payment-amount p {
font-size: 15px;
margin-bottom: 0.5em;
word-wrap: break-word;
}
.payment-content .payment-amount h2 {
font-size: 24px;
word-wrap: break-word;
}
.payment-content .payment-amount .payment-btn {
margin-top: 20px;
display: inline-block;
vertical-align: top;
}
.payment-content .payment-amount .payment-btn > i {
margin: 0px 0px 0px 5px;
}
/* Bank Table */
.payment-content .bank-table-outer {
/* background-color: lightslategrey; */
width: 100%;
overflow-x: auto;
}
.payment-content .bank-table {
width: 96%;
margin: 0 auto;
table-layout: fixed;
margin-bottom: 60px;
border: .5px solid var(--wood-clr);
border-collapse: collapse;
}
.payment-content .bank-table caption {
padding: 8px;
font-size: 14px;
text-align: left;
}
.payment-content .bank-table td:nth-child(1) {
font-weight: 600;
}
.payment-content .bank-table tr,
.payment-content .bank-table td {
border: .5px solid var(--wood-clr);
}
.payment-content .bank-table td {
padding: 10px 12px;
}
/* Voucher Field */
.payment-content .voucher-field {
padding: 15px 20px;
/* background-color: midnightblue; */
}
.payment-content .voucher-field>form {
display: block;
}
.payment-content .voucher-field>form>.input-group {
margin-bottom: 0;
border-width: 1px;
}
.payment-content .voucher-field>form>.input-group .input-group-append {
padding: 0;
}
.payment-content .voucher-field>form>.input-group button {
margin: 0;
height: 100%;
border-radius: 0;
}
/* To Dashboard */
.main.payment .to-dashboard {
text-align: center;
margin-top: -50px;
/* background-color: deepskyblue; */
}
.main.payment .to-dashboard a {
display: inline-block;
text-decoration: none;
font-size: 14px;
padding: 10px 16px;
text-transform: capitalize;
color: var(--primary-clr);
margin: 0 auto;
}
.main.payment .to-dashboard a:hover {
text-decoration: underline;
}
@media only screen and (max-width: 425px) {
.payment-content {
padding: 1em 0px 0px 0px;
}
.payment-content .payment-head h1 {
font-size: 20px;
margin-bottom: 0.15em;
}
.payment-content .payment-head p {
font-size: 15px;
}
.payment-content .payment-customer {
font-size: 14px;
}
.payment-content .payment-amount p {
font-size: 13px;
margin-bottom: 0.25em;
}
.payment-content .payment-amount h2 {
font-size: 22px;
}
}
/* REVIEW GUEST */
.main.review-guest {
/* width: 840px; */
/* min-height: 100vh;
display: flex;
margin: 20px auto;
flex-direction: column; */
/* background-color: olive; */
}
.main.main.review-guest .review-guest-content {
background: transparent;
padding: 20px 0;
/* background: orangered; */
}
.review-guest-content .head {
padding: 10px 20px;
display: flex;
align-items: center;
justify-content: space-between;
/* background-color: orchid; */
}
.review-guest-content .head .title {
/* background-color: royalblue; */
}
.review-guest-content .head .title h3 {
font-size: 19px;
margin-bottom: .35em;
}
.review-guest-content .head .title p {
font-size: 13px;
}
.review-guest-content .head .title p a {
color: var(--sea-clr);
text-decoration: none;
}
.review-guest-content .head .title p a:hover {
text-decoration: underline;
}
.review-guest-content .head .act {
display: flex;
align-items: center;
justify-content: center;
/* background-color: peru; */
}
.review-guest-content .head .act p {
font-size: 14px;
}
.review-guest-content .head .act .insert-guest {
padding: 8px 24px;
text-transform: capitalize;
font-weight: 500;
margin-left: 14px;
}
.review-guest-content .body {
padding: 10px 0;
/* background-color: seagreen; */
}
.review-guest-content .body .table-outer {
background: inherit;
/* background-color: seagreen; */
/* background-color: steelblue; */
width: 100%;
overflow-x: auto;
}
.review-guest-content .body table {
width: 100%;
table-layout: inherit;
border-collapse: collapse;
/* background-color: teal; */
/* font-size: 14px; */
/* background-color: olive; */
/* font-weight: 500; */
}
.review-guest-content .body table thead tr {
border-bottom: 2px solid var(--wood-clr);
border-top: 2px solid var(--wood-clr);
}
.review-guest-content .body table thead tr th {
padding: 10px 5px;
font-size: 15px;
}
.review-guest-content .body table tbody tr {
border-bottom: 1px solid var(--tertiary-clr);
}
.review-guest-content .body table tbody tr:hover {
background: #fafafa;
}
.review-guest-content .body table tbody tr:nth-child(even) {
background: #f7f7f7;
}
.review-guest-content .body table tbody tr td:first-child {
text-align: center;
border-left: none;
}
.review-guest-content .body table tbody tr td {
font-size: 14px;
text-align: left;
padding: 9px;
border-left: .5px solid rgba(0, 0, 0, 0.2);
}
@media only screen and (max-width: 425px) {
/* Edited */
.main.main.review-guest .review-guest-content {
padding: 1em 0;
/* Edited */
}
.review-guest-content .head {
padding: 0.25em 0.25em 0.5em 0.25em;
/* Edited */
flex-direction: column;
/* Edited */
}
.review-guest-content .head>div {
padding: 0.5em;
/* Edited */
}
.review-guest-content .head .title {
width: 100%;
/* Edited */
}
.review-guest-content .head .title h3 {
font-size: 17px;
/* Edited */
}
.review-guest-content .head .title p {
font-size: 11px;
/* Edited */
}
.review-guest-content .head .act {
justify-content: flex-start;
/* Edited */
flex-wrap: wrap;
/* Edited */
width: 100%;
/* Edited */
}
.review-guest-content .head .act p {
font-size: 12px;
/* Edited */
font-weight: bold;
/* Edited */
}
.review-guest-content .head .act .insert-guest {
padding: 8px 16px;
/* Edited */
margin-left: auto;
/* Edited */
}
.review-guest-content .body {
padding: 0.75em 0;
/* Edited */
}
.review-guest-content .body table thead tr {
border-bottom: 1px solid var(--wood-clr);
/* Edited */
border-top: 1px solid var(--wood-clr);
/* Edited */
}
.review-guest-content .body table thead tr th {
padding: 0.5em 0.25em;
/* Edited */
font-size: 13px;
/* Edited */
}
.review-guest-content .body table tbody tr {
border-bottom: 0.5px solid var(--tertiary-clr);
/* Edited */
}
.review-guest-content .body table tbody tr td {
font-size: 12px;
/* Edited */
padding: 6px;
/* Edited */
}
}
/* NOTIFICATION CONTENT */
.notification-content {
background: transparent;
padding: 20px 40px 40px 40px;
min-height: 450px;
/* background-color: mediumpurple; */
}
.notification-content .head {
padding: 0.75em 0;
margin-bottom: 0.75em;
/* background-color: lightseagreen; */
}
.notification-content .head label {
font-size: 16px;
}
.notification-content .body {
padding: 0.75em 0;
position: relative;
/* background-color: lightslategray; */
}
.notification-content .body>div:last-of-type {
margin-bottom: 0;
}
.notification-content .body .switch-group {
padding: 0;
margin-bottom: 1em;
/* background-color: indianred; */
}
.notification-content .body .switch-group .switch {
margin-left: 0;
margin-right: 1.5em;
}
@media only screen and (max-width: 425px) {
/* Edited */
.notification-content {
padding: 1em 0.75em 2em 0.75em;
/* Edited */
min-height: 400px;
/* Edited */
}
.notification-content .head {
margin-bottom: 0.25em;
}
.notification-content .body .switch-group .switch {
margin-right: 0.75em;
/* Edited */
}
}
/* CHANGE PROFILE */
.main {
/* background-color: lightseagreen; */
}
.main>.main-body {
/* background-color: lightblue; */
}
.main>.main-body .submit-outer {
/* background-color: lightsalmon; */
text-align: center;
padding: 0;
}
.main>.main-body .submit-outer>.submit {
background-color: var(--wood-clr);
color: var(--white-clr);
outline: none;
border: none;
width: 100%;
margin: 0;
padding: 14px;
display: block;
font-size: 15px;
cursor: pointer;
transition: all 0.35s ease-in-out;
}
.main>.main-body .submit-outer>.submit:hover {
background-color: var(--primary-clr);
}
/* ========================================
CHANGE PROFILE
======================================== */
.main>.main-body>.change-profile-outer {
/* background-color: lightpink; */
padding-top: 10px;
}
.main>.main-body>.change-profile-outer>.inner {
/* background-color: lightcoral; */
padding: 20px 40px 40px 40px;
position: relative;
}
/* Change BIO */
.main>.main-body>.change-profile-outer>.inner>.change-bio {
/* background-color: lightblue; */
}
.main>.main-body>.change-profile-outer>.inner>.change-bio>form>div:last-of-type {
margin-bottom: 0;
}
.main>.main-body>.change-profile-outer>.inner .picture-outer {
background-color: var(--secondary-clr);
width: 160px;
height: 160px;
border-radius: 50%;
margin: 0 auto 30px auto;
overflow: hidden;
position: relative;
cursor: pointer;
}
.main>.main-body>.change-profile-outer>.inner .picture-outer .picture {
width: 100%;
height: 100%;
border-radius: 50%;
}
.main>.main-body>.change-profile-outer>.inner .picture-outer .picture>img {
width: 100%;
height: 100%;
border-radius: 50%;
display: block;
object-fit: cover;
object-position: center;
}
.main>.main-body>.change-profile-outer>.inner .picture-outer>.picture-text {
background-color: var(--primary-clr);
color: var(--white-clr);
position: absolute;
bottom: -32px;
left: 0;
width: 100%;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
height: 30px;
transition: all 0.25s ease-in-out;
}
.main>.main-body>.change-profile-outer>.inner .picture-outer:hover>.picture-text {
bottom: 0;
}
.main>.main-body>.change-profile-outer>.inner .picture-outer>.picture-text p {
font-size: 14px;
}
/* Change PASSWORD */
.main>.main-body>.change-profile-outer>.inner>.change-password {
/* background-color: lightslategray; */
/* padding: 40px 40px; */
margin-top: 50px;
padding-top: 40px;
border-top: 1px solid rgba(217, 182, 128, 0.5);
}
.main>.main-body>.change-profile-outer>.inner>.change-password>form>.title-01 {
background-color: #878787;
display: inline-block;
padding: 8px 24px;
border-radius: 7px;
margin-bottom: 1.25em;
color: var(--white-clr);
font-size: 15px;
}
.main>.main-body>.change-profile-outer>.inner>.change-password>form>.foot {
/* background-color: lightsalmon; */
text-align: right;
display: flex;
padding: 0;
}
.main>.main-body>.change-profile-outer>.inner>.change-password>form>.foot>.submit-password {
margin-left: auto;
display: none;
min-width: 200px;
transition: all 0.25s ease-in-out;
}
@media only screen and (max-width: 768px) {
.main>.main-body>.change-profile-outer {
/* background-color: lightpink; */
padding-top: 0.5em;
/* Edited */
}
.main>.main-body>.change-profile-outer>.inner {
/* background-color: lightcoral; */
padding: 1em 0.75em 2em 0.75em;
/* Edited */
position: relative;
}
/* Change BIO */
.main>.main-body>.change-profile-outer>.inner>.change-bio {
/* background-color: lightblue; */
padding: 0.5em 0;
}
.main>.main-body>.change-profile-outer>.inner>.change-bio>form>div:last-of-type {
margin-bottom: 0;
}
.main>.main-body>.change-profile-outer>.inner .picture-outer {
background-color: var(--secondary-clr);
width: 110px;
/* Edited */
height: 110px;
/* Edited */
border-radius: 50%;
margin: 0 auto 1.5em auto;
/* Edited */
overflow: hidden;
position: relative;
cursor: pointer;
/* background-color: indianred; */
}
.main>.main-body>.change-profile-outer>.inner .picture-outer .picture {
width: 100%;
height: 100%;
border-radius: 50%;
}
.main>.main-body>.change-profile-outer>.inner .picture-outer .picture>img {
width: 100%;
height: 100%;
border-radius: 50%;
display: block;
object-fit: cover;
object-position: center;
}
.main>.main-body>.change-profile-outer>.inner .picture-outer>.picture-text {
background-color: var(--primary-clr);
color: var(--white-clr);
position: absolute;
bottom: -32px;
left: 0;
width: 100%;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
height: 30px;
transition: all 0.25s ease-in-out;
}
.main>.main-body>.change-profile-outer>.inner .picture-outer:hover>.picture-text {
bottom: 0;
}
.main>.main-body>.change-profile-outer>.inner .picture-outer>.picture-text p {
font-size: 13px;
}
/* Change PASSWORD */
.main>.main-body>.change-profile-outer>.inner>.change-password {
/* background-color: lightslategray; */
/* padding: 40px 40px; */
margin-top: 1.75em;
/* Edited */
padding-top: 1.75em;
/* Edited */
border-top: 1px solid rgba(217, 182, 128, 0.5);
}
.main>.main-body>.change-profile-outer>.inner>.change-password>form>.title-01 {
background-color: #878787;
display: inline-block;
padding: 0.5em 1.5em;
/* Edited */
border-radius: 7px;
margin-bottom: 0.75em;
/* Edited */
color: var(--white-clr);
font-size: 14px;
/* Edited */
/* background-color: lightseagreen; */
}
.main>.main-body>.change-profile-outer>.inner>.change-password>form>.foot {
/* background-color: lightsalmon; */
text-align: right;
display: flex;
padding: 0;
}
.main>.main-body>.change-profile-outer>.inner>.change-password>form>.foot>.submit-password {
margin-left: auto;
display: none;
min-width: 200px;
transition: all 0.25s ease-in-out;
}
}
/* ========================================
PHONE VERIFICATION
======================================== */
.phone-verification {
width: 100%;
max-width: 600px;
text-align: center;
padding: 40px 20px;
margin: 0 auto;
background-color: transparent;
}
.phone-verification h1 {
margin-bottom: 0.75em;
color: #452812;
}
.phone-verification h3 {
margin-bottom: 0.5em;
color: #452812;
}
.phone-verification #verifyOTPForm {
margin-bottom: 1.75em;
}
.phone-verification p {
font-size: 16px;
line-height: 1.25em;
margin-bottom: 1em;
}
.phone-verification a {
font-size: 15px;
margin-bottom: 1em;
display: inline-block;
color: #4455aa;
text-decoration: none;
}
.phone-verification a:hover {
text-decoration: underline;
}
.phone-verification p>a {
margin-bottom: 0;
}
.phone-verification small {
font-size: 14px;
margin-bottom: 0.75em;
display: inline-block;
}
.phone-verification button {
margin: 0.5em auto;
display: block;
}
.phone-verification>div {
padding: 1.25em 0.75em;
}
@media only screen and (max-width: 425px) {
/* PHONE VERIFICATION */
.phone-verification {
padding: 2em 0.5em;
margin: 0 auto;
}
.phone-verification h1 {
font-size: 22px;
margin-bottom: 0.5em;
}
.phone-verification h3 {
font-size: 17px;
margin-bottom: 0.35em;
}
.phone-verification p {
font-size: 14px;
}
.phone-verification small {
font-size: 12px;
margin-bottom: 0.75em;
}
.phone-verification>div {
padding: 1em 0.25em;
}
}
/* ========================================
INPUT DIGITS
======================================== */
.digits {
/* background-color: lightgreen; */
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
width: 100%;
padding: 0.5em 1em;
}
input.digit {
background-color: #fff;
outline: none;
/* border: 1px solid rgba(0, 0, 0, 0.1); */
border: 1px solid #45281240;
width: 50px;
height: 60px;
border-radius: 7px;
text-align: center;
font-size: 25px;
line-height: 60px;
margin: 0.15em 0.25em;
}
@media only screen and (max-width: 425px) {
/* Input Digits */
.digits {
flex-wrap: wrap;
padding: 0.5em 0;
}
input.digit {
width: 35px;
height: 45px;
border-radius: 4px;
font-size: 21px;
line-height: 45px;
margin: 0.15em;
}
}
/* ========================================
ACCOUNT ==> RECEPTIONIST
======================================== */
.receptionist-page {
/* background: lightsalmon; */
padding: 20px 40px;
padding-bottom: 0;
}
/* Receptionist List */
.receptionist-page .rc-list-outer {
position: relative;
}
.receptionist-page .rc-list-outer .rc-list-count {
position: absolute;
right: 25px;
top: 15px;
}
.receptionist-page .rc-list-outer .rc-list-count p {
font-size: 13px;
color: rgba(0, 0, 0, 0.75);
}
.receptionist-page .rc-list {
background: #f9f9f9;
border-radius: 12px;
box-shadow: -1px 1px 6px rgba(0, 0, 0, 0.2);
/* background: lightseagreen; */
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
grid-auto-flow: dense;
grid-gap: 20px;
padding: 20px;
padding-top: 40px;
margin-bottom: 10px;
}
/* Receptionist List > Item */
.receptionist-page .rc-list .item {
background: #fff;
/* background: lightskyblue; */
display: block;
width: 100%;
min-height: 150px;
padding: 5px 10px;
border-radius: 12px;
border: 3px solid transparent;
box-shadow: -2px 2px 6px rgba(var(--rgb-wood-clr), 0.2);
transition: all 0.25s ease-in-out;
}
.receptionist-page .rc-list .item:not(.blank):hover {
box-shadow: none;
border-color: var(--wood-clr);
}
/* Receptionist List > Item > Item Header */
.receptionist-page .rc-list .item .item-header {
/* background: peru; */
display: flex;
margin-bottom: 5px;
padding: 10px;
}
.receptionist-page .rc-list .item .item-header .item-header-detail {
/* background: darkcyan; */
display: block;
flex-grow: 1;
margin-right: 10px;
}
.receptionist-page .rc-list .item .item-header .item-header-detail h2 {
/* background: deeppink; */
display: block;
margin-bottom: 5px;
font-size: 18px;
font-weight: 600;
color: var(--primary-clr);
}
.receptionist-page .rc-list .item .item-header .item-header-detail p {
/* background: deepskyblue; */
display: inline-block;
vertical-align: middle;
font-size: 14px;
margin-right: 5px;
color: var(--wood-clr);
}
.receptionist-page .rc-list .item .item-header .item-header-detail span.status {
background: transparent;
display: inline-block;
vertical-align: middle;
padding: 1px 8px;
font-size: 9px;
border-radius: 12px;
border: 1px solid #000;
color: #000;
cursor: pointer;
transition: all 0.25s ease-in-out;
}
.receptionist-page .rc-list .item .item-header .item-header-detail span.status.in {
color: var(--success-clr);
border-color: var(--success-clr);
}
.receptionist-page .rc-list .item .item-header .item-header-detail span.status.out {
color: var(--error-dark-clr);
border-color: var(--error-dark-clr);
}
.receptionist-page .rc-list .item:not(.blank):hover .item-header .item-header-detail span.status.in {
background: var(--success-clr);
color: var(--white-clr);
}
.receptionist-page .rc-list .item:not(.blank):hover .item-header .item-header-detail span.status.out {
background: var(--error-dark-clr);
color: var(--white-clr);
}
.receptionist-page .rc-list .item .item-header .item-action {
/* background: cornflowerblue; */
display: flex;
align-items: flex-start;
}
.receptionist-page .rc-list .item .item-header .item-action .act {
/* background: turquoise; */
font-size: 13px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
width: 25px;
height: 25px;
text-decoration: none;
border-radius: 4px;
color: var(--primary-clr);
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
transition: all 0.25s ease-in-out;
}
.receptionist-page .rc-list .item .item-header .item-action .act:hover {
color: var(--white-clr);
background: var(--wood-clr);
}
.receptionist-page .rc-list .item .item-header .item-action .act.delete {
color: var(--error-dark-clr);
}
.receptionist-page .rc-list .item .item-header .item-action .act.delete:hover {
color: var(--white-clr);
background: var(--error-dark-clr);
}
.receptionist-page .rc-list .item .item-header .item-action .act:last-of-type {
margin-right: 0;
}
/* Receptionist List > Item > Item Body */
.receptionist-page .rc-list .item .item-body {
/* background: olive; */
padding: 10px;
display: flex;
align-items: flex-start;
}
.receptionist-page .rc-list .item .item-body .item-qr {
width: 55px;
height: 55px;
object-fit: cover;
object-position: center;
display: block;
margin-right: 10px;
border: 1px solid rgba(0, 0, 0, 0.2);
}
.receptionist-page .rc-list .item .item-body p {
font-size: 15px;
margin-bottom: 3px;
}
.receptionist-page .rc-list .item .item-body a {
font-size: 14px;
color: var(--sea-clr);
display: inline-block;
}
/* item blank */
.receptionist-page .rc-list .item.blank {
display: flex;
align-items: center;
justify-content: center;
}
.receptionist-page .rc-list .item.blank .add {
display: flex;
align-items: center;
text-decoration: none;
color: var(--sea-clr);
font-size: 14px;
}
.receptionist-page .rc-list .item.blank .add:hover p {
text-decoration: underline;
}
.receptionist-page .rc-list .item.blank .add i.fas {
margin-right: 7.5px;
font-size: 0.85em;
margin-bottom: 2px;
}
/* Receptionist > Middle */
.receptionist-page .rc-mid {
/* background: lightseagreen; */
display: flex;
align-items: center;
padding: 15px 0;
}
.receptionist-page .rc-mid .switch-group {
margin-bottom: 0;
padding: 0;
}
.receptionist-page .rc-mid .switch-group .form-check-label {
font-weight: 400;
}
.receptionist-page .rc-mid .welcome-screen-btn {
/* background: deeppink; */
display: flex;
align-items: center;
text-decoration: none;
color: var(--sea-clr);
font-size: 15px;
margin-left: auto;
}
.receptionist-page .rc-mid .welcome-screen-btn:hover p {
text-decoration: underline;
}
.receptionist-page .rc-mid .welcome-screen-btn i {
font-size: 1.75em;
margin-right: 10px;
color: var(--wood-clr);
}
/* Receptionist > Statistic */
.receptionist-page .rc-statistic-outer {
/* background: seagreen; */
position: relative;
border-top: 2px solid rgba(var(--rgb-wood-clr), 0.5);
border-bottom: 2px solid rgba(var(--rgb-wood-clr), 0.5);
padding: 20px 0;
margin-bottom: 30px;
}
.receptionist-page .rc-statistic {
/* background: #2c8cfc; */
padding: 10px 0;
margin: 5px 0;
width: 100%;
display: grid;
grid-auto-flow: dense;
grid-template-columns: repeat(3, 200px);
grid-template-rows: auto;
grid-gap: 50px;
justify-content: center;
position: relative;
}
.receptionist-page .rc-statistic .item {
background: #fff;
/* background: seagreen; */
padding: 10px;
border-radius: 12px;
box-shadow: -2px 2px 6px rgba(0, 0, 0, 0.2);
}
.receptionist-page .rc-statistic .item h2 {
font-size: 15px;
font-weight: normal;
text-align: center;
margin-bottom: 5px;
color: var(--primary-clr);
}
.receptionist-page .rc-statistic .item .circle-graph {
/* background-color: #4455aa; */
position: relative;
}
.receptionist-page .rc-statistic .item .circle-graph::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
width: 80px;
height: 80px;
background: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.2) 45%, rgba(0, 0, 0, 0.2) 68%, rgba(0, 0, 0, 0.2) 68%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
}
.receptionist-page .rc-statistic .item .circle-graph canvas {
/* background: lightsalmon; */
margin: 0 auto;
display: block;
position: relative;
}
.receptionist-page .rc-statistic .item .circle-graph p {
font-size: 19px;
color: var(--primary-clr);
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.receptionist-page .rc-statistic-outer .rc-action {
/* background: chocolate; */
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
display: block;
}
.receptionist-page .rc-statistic-outer .rc-action .act {
display: block;
padding: 3px 10px;
background: transparent;
margin-bottom: 25px;
text-decoration: none;
border-radius: 7px;
color: var(--primary-clr);
border: 1px solid var(--primary-clr);
font-size: 12px;
min-width: 90px;
text-align: center;
transition: all 0.25s ease-in-out;
}
.receptionist-page .rc-statistic-outer .rc-action .act:hover {
background: var(--wood-clr);
color: var(--white-clr);
border-color: var(--wood-clr);
}
.receptionist-page .rc-statistic-outer .rc-action .act:last-of-type {
margin-bottom: 0;
}
.receptionist-page .rc-statistic-outer .rc-action .act.reset {
color: var(--error-dark-clr);
border-color: var(--error-dark-clr);
}
.receptionist-page .rc-statistic-outer .rc-action .act.reset:hover {
background: var(--error-dark-clr);
color: var(--white-clr);
}
.receptionist-page .rc-statistic-outer .rc-action .act.export {
color: var(--success-clr);
border-color: var(--success-clr);
}
.receptionist-page .rc-statistic-outer .rc-action .act.export:hover {
background: var(--success-clr);
color: var(--white-clr);
}
@media only screen and (max-width: 1100px) {
.receptionist-page .rc-statistic {
grid-template-columns: repeat(3, 200px);
grid-gap: 25px;
}
}
@media only screen and (max-width: 1024px) {
.receptionist-page .rc-statistic {
margin-bottom: 20px;
}
.receptionist-page .rc-statistic-outer .rc-action {
position: relative;
right: auto;
top: auto;
transform: translateY(0);
}
.receptionist-page .rc-statistic-outer .rc-action .act {
width: 100%;
min-width: 0;
max-width: 200px;
margin: 0 auto;
margin-bottom: 15px;
}
}
@media only screen and (max-width: 800px) {
/* Receptionist List */
.receptionist-page .rc-list {
grid-template-columns: repeat(2, 1fr);
}
/* Receptinoist Middle */
.receptionist-page .rc-mid {
flex-direction: column;
align-items: flex-start;
}
.receptionist-page .rc-mid .welcome-screen-btn {
margin-top: 10px;
margin-left: 0;
flex-direction: row-reverse;
}
.receptionist-page .rc-mid .welcome-screen-btn i {
margin-left: 10px;
margin-right: 0;
}
/* Receptionist Page */
.receptionist-page .rc-statistic {
grid-template-columns: repeat(1 1fr);
grid-gap: 20px;
}
}
@media only screen and (max-width: 600px) {
/* Receptionist List */
.receptionist-page .rc-list {
grid-template-columns: repeat(1, 1fr);
}
.receptionist-page .rc-statistic {
grid-template-columns: repeat(1, 100%);
grid-gap: 30px;
}
.receptionist-page .rc-statistic .item {
padding: 20px 10px;
}
.receptionist-page .rc-statistic-outer .rc-action .act {
max-width: none;
padding: 10px 12px;
font-size: 14px;
}
}
@media only screen and (max-width: 425px) {
.receptionist-page {
padding: 20px 0 0 0;
}
.receptionist-page .rc-list-outer {
padding: 0 15px;
}
.receptionist-page .rc-list-outer .rc-list-count {
right: 35px;
}
.receptionist-page .rc-list {
padding: 40px 15px 10px 15px;
}
.receptionist-page .rc-list .item {
padding: 0;
}
.receptionist-page .rc-mid {
padding: 15px 20px;
}
.receptionist-page .rc-statistic-outer {
padding: 20px 15px;
}
}
/* Receptionist > Guest List */
.receptionist-page .rc-guestlist {
background: #f9f9f9;
/* background: coral; */
padding-top: 10px;
padding-bottom: 50px;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
}
.receptionist-page table.dataTable tbody tr {
background: transparent;
}
.receptionist-page table.dataTable tbody tr:hover {
background: rgba(0, 0, 0, 0.05);
}
.receptionist-page .rc-guestlist .rc-guestlist-header {
padding: 10px 15px;
margin-bottom: 10px;
}
.receptionist-page .rc-guestlist .rc-guestlist-header h2 {
font-size: 22px;
}
.receptionist-page .rc-guestlist .guest-table {}
.receptionist-page .rc-guestlist .guest-table tbody tr td:first-of-type {
text-align: center;
}
.receptionist-page .rc-guestlist .guest-table .rc-status-outer {
text-align: center;
}
.receptionist-page .rc-guestlist .guest-table .rc-status {
background: transparent;
display: inline-block;
vertical-align: middle;
padding: 1px 3px;
font-size: 11px;
border-radius: 4px;
border: 1px solid #000;
color: #000;
cursor: pointer;
min-width: 65px;
}
.receptionist-page .rc-guestlist .guest-table .rc-status.in {
border-color: var(--success-clr);
color: var(--success-clr);
}
.receptionist-page .rc-guestlist .guest-table .rc-status.out {
border-color: var(--error-dark-clr);
color: var(--error-dark-clr);
}
.receptionist-page .rc-guestlist .guest-table .rc-code {
text-align: center;
color: var(--wood-clr);
}
.receptionist-page .rc-guestlist .guest-table tbody tr:hover .rc-status.in {
background: var(--success-clr);
color: var(--white-clr);
}
.receptionist-page .rc-guestlist .guest-table tbody tr:hover .rc-status.out {
background: var(--error-dark-clr);
color: var(--white-clr);
}
/* Modal Receptionist */
.modal-receptionist {
/* background: lightsalmon; */
width: 100%;
max-width: 640px;
}
.modal-receptionist .form-text {
display: block;
margin-bottom: 0.5em;
margin-top: 0;
}
/* Receptionist Mode */
.rc-mode {
/* background: lightseagreen; */
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-template-rows: auto;
grid-auto-flow: dense;
grid-gap: 20px;
}
.rc-mode.mode-2 {
grid-template-columns: repeat(2, 1fr);
}
.rc-mode .rc-mode-item {
/* background: lightslategrey; */
cursor: pointer;
display: flex;
}
.rc-mode .rc-mode-item>input[type="radio"] {
display: none;
}
.rc-mode .rc-mode-item>input[type="radio"]:checked+.rc-mode-container {
border-color: var(--wood-clr);
background: var(--secondary-clr);
}
.rc-mode .rc-mode-item .rc-mode-container {
/* background: olive; */
display: flex;
align-items: center;
justify-content: center;
padding: 14px;
/* min-height: 100px; */
flex-grow: 1;
border: 2px solid rgba(0, 0, 0, 0.2);
border-radius: 8px;
transition: all 0.25s ease-in-out;
}
.rc-mode .rc-mode-item .rc-mode-container:hover {
border-color: var(--wood-clr);
}
.rc-mode .rc-mode-item .rc-mode-container .rc-mode-icon {
/* background: crimson; */
font-size: 38px;
color: var(--primary-clr);
margin-left: auto;
margin-right: 15px;
}
.rc-mode .rc-mode-item.in .rc-mode-container .rc-mode-icon {
color: var(--success-clr);
}
.rc-mode .rc-mode-item.out .rc-mode-container .rc-mode-icon {
color: var(--error-dark-clr);
}
.rc-mode .rc-mode-item .rc-mode-container .rc-mode-detail {
/* background: cornflowerblue; */
width: 75%;
}
.rc-mode .rc-mode-item .rc-mode-container .rc-mode-detail h2 {
font-size: 19px;
color: var(--primary-clr);
/* margin-bottom: 5px; */
}
.rc-mode .rc-mode-item .rc-mode-container .rc-mode-detail p {
font-size: 13px;
}
/* Modal Welcome Screen */
.modal-welcome-screen {
/* background: lightsalmon; */
width: 100%;
max-width: 720px;
}
.modal-welcome-screen .switch-group>.switch+label:not(.switch) {
margin-left: 1.25em;
}
/* Upload Outer */
.upload-outer {
width: 100%;
max-width: 400px;
margin: 10px auto 30px auto;
position: relative;
}
.upload-box {
background: #fff;
/* background: lightseagreen; */
width: 100%;
padding-top: 56.25%;
position: relative;
z-index: 1;
overflow: hidden;
cursor: pointer;
box-shadow: -1px 1px 8px rgba(0, 0, 0, 0.2);
}
.upload-box+input[type="file"] {
display: none;
position: absolute;
}
.upload-box .upload-preview {
background: #fff;
width: 100%;
height: 100%;
object-position: center;
object-fit: cover;
position: absolute;
z-index: 2;
top: 0;
left: 0;
opacity: 0;
visibility: hidden;
transition: all 0.25s ease-in-out;
}
.upload-box .upload-preview.active {
opacity: 1;
visibility: visible;
}
.upload-box .upload-text {
/* background: darkgoldenrod; */
position: absolute;
z-index: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.upload-box .upload-text i {
margin-bottom: 10px;
font-size: 40px;
color: var(--wood-clr);
transition: all 0.25s ease-in-out;
}
.upload-box .upload-text p {
font-size: 18px;
color: var(--wood-clr);
transition: all 0.25s ease-in-out;
}
.upload-box:hover .upload-text i,
.upload-box:hover .upload-text p {
color: #8b8b8b;
}
.upload-outer .remove-picture {
background: #fff;
width: 30px;
height: 30px;
border: none;
outline: none;
border-radius: 4px;
box-shadow: -1px 1px 6px rgba(0, 0, 0, 0.2);
color: var(--error-dark-clr);
position: absolute;
z-index: 2;
bottom: 10px;
right: 0;
opacity: 0;
cursor: pointer;
visibility: hidden;
transition: all 0.25s ease-in-out;
}
.upload-outer.exist .remove-picture {
opacity: 1;
visibility: visible;
right: 10px;
}
.upload-outer .remove-picture:hover {
background: var(--error-dark-clr);
color: var(--white-clr);
}
/* SELECTIZE MULTI INPUT */
.selectize-control.single .selectize-input {
border: 1px solid rgba(0, 0, 0, 0.2);
}
.selectize-control.multi .selectize-input [data-value] {
text-shadow: none;
background: var(--wood-clr);
box-shadow: none;
border-radius: 4px;
transition: all 0.25s ease-in-out;
}
.selectize-control.multi .selectize-input>div {
background: var(--wood-clr);
color: var(--white-clr);
border: none;
transition: all 0.25s ease-in-out;
}
.selectize-control.multi .selectize-input [data-value].active {
background: var(--primary-clr);
}
.selectize-control.multi .selectize-input>div.active {
background: var(--primary-clr);
border: none;
}
/* ========================================
RECEPTIONIST
======================================== */
body.rc-page {
/* background: #f3f4f6; */
background: #fff;
width: 100%;
height: auto;
/* background: lightsalmon; */
}
/* Receptionist Navbar */
body.rc-page .navbar-outer {
background: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
padding: 10px 0;
}
/* Receptionist Main */
.rc-main {
width: 100%;
max-width: 1024px;
min-height: 100vh;
margin: 0 auto;
padding-bottom: 90px;
display: flex;
flex-direction: column;
position: relative;
}
/* Receptionist Auth */
.rc-main.rc-home {
background: #f3f4f6;
max-width: none;
}
.rc-main .rc-auth {
/* background: lightcoral; */
width: 100%;
max-width: 1024px;
margin: 0 auto;
margin-top: 25vh;
text-align: center;
/* display: none; */
}
.rc-main .rc-auth .auth-form {
text-align: center;
padding: 15px;
padding-bottom: 30px;
}
.rc-main .rc-auth .auth-form .form-label.label-2 {
font-weight: 500;
font-size: 19px;
}
.rc-main .rc-auth .auth-form .input-group {
border: none;
}
.rc-main .rc-auth .auth-form .input-group .input-group-icon {
background: var(--wood-clr);
}
.rc-main .rc-auth .auth-form .input-group .input-group-icon span {
color: #fff;
}
.rc-main .rc-auth .rc-info {
padding: 15px;
text-align: center;
}
.rc-main .rc-auth .rc-info .title {
color: var(--primary-clr);
font-size: 27px;
margin: 0.25em;
}
.rc-main .rc-auth .rc-info .start-scanning {
display: inline-block;
margin: 0 auto;
margin-top: 10px;
padding: 0.4em 15px;
min-width: 100px;
border: 1px solid var(--primary-clr);
color: var(--primary-clr);
background: transparent;
text-decoration: none;
outline: none;
border-radius: 7px;
font-size: 15px;
cursor: pointer;
transition: all 0.25s ease-in-out;
}
.rc-main .rc-auth .rc-info .start-scanning:hover {
background: var(--primary-clr);
color: var(--white-clr);
}
.rc-main .rc-auth .what-is-passkey {
margin-top: 15px;
font-size: 15px;
display: inline-block;
color: var(--sea-clr);
}
@media only screen and (max-width: 425px) {
.rc-main .rc-auth .auth-form .form-label.label-2 {
font-size: 17px;
}
}
/* Receptionist History */
.rc-history {
/* background: lightpink; */
padding: 0;
/* display: none; */
}
/* Statistic */
.rc-history .rc-statistic {
/* background: lightseagreen; */
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
grid-auto-flow: dense;
justify-content: center;
grid-gap: 10px;
padding: 10px;
}
.rc-history .rc-statistic .item {
background: #fff;
/* background: lightslategrey; */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px;
text-align: center;
border-radius: 7px;
box-shadow: -1px 1px 8px rgba(0, 0, 0, 0.1);
}
.rc-history .rc-statistic .item p {
font-size: 14px;
}
.rc-history .rc-statistic .item h3 {
font-size: 21px;
font-weight: 600;
margin-top: 2px;
}
/* History Form */
.rc-history .rc-history-form {
/* background: plum; */
padding: 10px;
}
.rc-history .rc-history-form .form-group {
margin: 10px 0;
margin-bottom: 0;
}
.rc-history .rc-category-box {
/* background: peru; */
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
grid-auto-flow: dense;
grid-gap: 10px;
}
.rc-history .rc-category-box>label {
display: flex;
}
.rc-history .rc-category-box input[type="radio"] {
display: none;
}
.rc-history .rc-category-box input[type="radio"]:checked+.rc-category-item {
background: var(--wood-clr);
color: #fff;
}
.rc-history .rc-category-box .rc-category-item {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-grow: 1;
padding: 10px 5px;
border-radius: 4px;
cursor: pointer;
color: #000;
background: #efefef;
text-align: center;
transition: all 0.25s ease-in-out;
}
.rc-history .rc-category-box .rc-category-item p {
font-size: 13px;
}
/* Guest List */
.rc-history .rc-history-list {
/* background: olive; */
padding: 10px 0;
}
.rc-history .rc-history-list .item {
padding: 10px;
position: relative;
display: flex;
/* background: lightsalmon; */
}
.rc-history .rc-history-list .item::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 2px;
background: rgba(0, 0, 0, 0.1);
}
.rc-history .rc-history-list .item:last-of-type:after {
content: none;
}
.rc-history .rc-history-list .item:hover {
background: rgba(0, 0, 0, 0.05);
}
.rc-history .rc-history-list .item .bio {
/* background: lightseagreen; */
flex-grow: 1;
margin-right: 10px;
}
.rc-history .rc-history-list .item .bio h3 {
font-size: 17px;
font-weight: normal;
}
.rc-history .rc-history-list .item .bio p {
font-size: 13px;
color: rgba(0, 0, 0, 0.5);
margin-top: 2px;
}
.rc-history .rc-history-list .item .detail {
/* background: lightsteelblue; */
margin-left: auto;
}
.rc-history .rc-history-list .item .detail>div {
display: flex;
}
.rc-history .rc-history-list .item .detail .status {
font-size: 11px;
padding: 1px 5px;
border: 1px solid #000;
border-radius: 4px;
color: #000;
margin-left: 10px;
transition: all 0.1s ease-in-out;
}
.rc-history .rc-history-list .item .detail .status.in {
border-color: var(--success-clr);
color: var(--success-clr);
}
.rc-history .rc-history-list .item:hover .detail .status.in {
background: var(--success-clr);
color: var(--white-clr);
}
.rc-history .rc-history-list .item .detail .status.out {
border-color: var(--error-dark-clr);
color: var(--error-dark-clr);
}
.rc-history .rc-history-list .item:hover .detail .status.out {
background: var(--error-dark-clr);
color: var(--white-clr);
}
.rc-history .rc-history-list .item .detail .time {
font-size: 12px;
margin-left: auto;
margin-top: auto;
margin-bottom: auto;
}
.rc-history .rc-history-list .item .detail h4 {
font-weight: 600;
font-size: 15px;
margin-top: 4px;
color: var(--wood-clr);
text-align: right;
}
.rc-history .rc-history-list .no-item {
padding: 20px 15px;
text-align: center;
}
.rc-history .rc-history-list .no-item span {
color: var(--primary-clr);
font-size: 50px;
display: inline-block;
}
.rc-history .rc-history-list .no-item h4 {
font-size: 20px;
color: var(--primary-clr);
margin-top: 0.5em;
font-weight: normal;
}
/* RECEPTIONIST SEARCH */
.rc-search {
padding-top: 10px;
/* display: none; */
}
.rc-search .rc-search-form {
/* background: blueviolet; */
padding: 10px;
text-align: center;
}
.rc-search .rc-search-form .form-label.label-2 {
font-size: 19px;
font-weight: 500;
}
.rc-search .rc-search-form .form-group {
margin: 0;
}
.rc-search .rc-search-form .input-group-icon {
background: var(--wood-clr);
}
.rc-search .rc-search-form .input-group-icon span {
color: var(--white-clr);
}
.rc-search .rc-search-list {
/* background: lightpink; */
padding: 10px 0;
}
.rc-search .rc-search-list .summary {
/* background: lightseagreen; */
padding: 20px 10px;
text-align: center;
}
.rc-search .rc-search-list .summary .icon-lg {
font-size: 120px;
color: var(--wood-clr);
}
.rc-search .rc-search-list .summary h3 {
font-weight: normal;
font-size: 20px;
margin: 0.5em auto;
}
.rc-search .rc-search-list .summary .update-btn {
display: block;
margin: 0 auto;
margin-top: 15px;
padding: 0.75em 15px;
min-width: 100px;
border: 1px solid var(--wood-clr);
color: var(--wood-clr);
background: transparent;
outline: none;
border-radius: 7px;
cursor: pointer;
transition: all 0.25s ease-in-out;
}
.rc-search .rc-search-list .summary .update-btn:hover {
background: var(--wood-clr);
color: var(--white-clr);
}
.rc-search .rc-search-list .item {
padding: 10px;
position: relative;
display: flex;
align-items: center;
}
.rc-search .rc-search-list .item::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 2px;
background: rgba(0, 0, 0, 0.1);
}
.rc-search .rc-search-list .item:last-of-type:after {
content: none;
}
.rc-search .rc-search-list .item:hover {
background: rgba(0, 0, 0, 0.05);
}
.rc-search .rc-search-list .item .user-icon {
margin-right: 5px;
}
.rc-search .rc-search-list .item .user-icon * {
stroke: var(--primary-clr);
}
.rc-search .rc-search-list .item .user-info {
padding: 0 5px;
flex-grow: 1;
}
.rc-search .rc-search-list .item .user-info h3 {
font-size: 17px;
font-weight: 600;
color: var(--primary-clr);
cursor: pointer;
display: inline-block;
}
.rc-search .rc-search-list .item .user-info p {
font-size: 13px;
color: rgba(0, 0, 0, 0.5);
margin-top: 2px;
}
.rc-search .rc-search-list .item .user-rsvp {
font-size: 20px;
margin-left: 5px;
color: var(--success-clr);
}
.rc-search .rc-search-list .no-item {
padding: 20px 15px;
text-align: center;
}
.rc-search .rc-search-list .no-item span {
color: var(--primary-clr);
font-size: 50px;
display: inline-block;
}
.rc-search .rc-search-list .no-item h4 {
font-size: 20px;
color: var(--primary-clr);
margin-top: 0.5em;
}
/* RECEPTIONIST SETTINGS */
.rc-main.settings {
background: #f3f4f6;
max-width: none;
}
.rc-main.settings::before {
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 100%;
max-width: 1024px;
height: 100%;
height: calc(100% - 18vh);
border-top-left-radius: 40px;
border-top-right-radius: 40px;
background: #fff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.rc-settings {
/* background: lightsalmon; */
/* background: transparent; */
width: 100%;
max-width: 1024px;
margin: 0 auto;
padding: 10px 0;
padding-top: 4vh;
position: relative;
/* display: none; */
}
.rc-settings .rc-detail {
/* background: cornflowerblue; */
/* background: transparent; */
text-align: center;
margin-bottom: 20px;
display: block;
}
.rc-settings .rc-detail .cover {
width: 250px;
height: 250px;
display: block;
margin: 0 auto;
margin-bottom: -50px;
object-fit: cover;
object-position: center;
border-radius: 60%;
background: #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.rc-settings .rc-detail .title {
position: relative;
z-index: 2;
background: var(--wood-clr);
padding: 6px 15px;
border-radius: 7px;
margin: 0 auto;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
width: 250px;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--white-clr);
font-size: 20px;
}
.rc-settings .rc-detail .subdomain {
position: relative;
z-index: 1;
background: var(--primary-clr);
margin: 0 auto;
width: 175px;
padding: 5px 10px;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--white-clr);
font-size: 12px;
}
.rc-settings .rc-info {
/* background: lightseagreen; */
padding: 10px;
text-align: center;
}
.rc-settings .rc-info h2 {
font-size: 26px;
color: var(--primary-clr);
}
.rc-settings .rc-info p {
color: var(--wood-clr);
margin-top: 5px;
font-size: 15px;
}
.rc-settings .rc-action {
/* background: lightpink; */
padding: 10px;
margin-top: 15px;
}
.rc-settings .rc-action .link {
text-decoration: none;
display: block;
width: 90%;
max-width: 425px;
/* background: olive; */
margin: 0 auto;
margin-bottom: 15px;
}
.rc-settings .rc-action .link:last-of-type {
margin-bottom: 0;
}
.rc-settings .rc-action .link .link-content {
/* background: orchid; */
padding: 12px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
border-radius: 7px;
border: 1px solid var(--primary-clr);
color: var(--primary-clr);
transition: all 0.25s ease-in-out;
}
.rc-settings .rc-action .link.in .link-content {
border-color: var(--success-clr);
color: var(--success-clr);
}
.rc-settings .rc-action .link.out .link-content {
border-color: var(--error-dark-clr);
color: var(--error-dark-clr);
}
.rc-settings .rc-action .link.logout .link-content {
background: var(--error-dark-clr);
border-color: var(--error-dark-clr);
color: var(--white-clr);
}
.rc-settings .rc-action .link.logout:hover .link-content {
background: #b31111;
border-color: #b31111;
}
.rc-settings .rc-action .link .link-content span {
margin-right: 10px;
font-size: 18px;
}
.rc-settings .rc-action .link .link-content p {
font-size: 16px;
}
/* RECEPTIONIST SCAN */
.rc-main.scan {
min-height: 0;
padding: 0;
}
.rc-main .rc-scan {
background: lightsalmon;
padding: 0px;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
/* display: none; */
}
.rc-main .rc-scan .scanner-box {
position: relative;
width: 100%;
height: 100%;
background: #f7f7f7;
overflow: hidden;
}
.rc-main .rc-scan #video-preview {
position: relative;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
background-color: transparent;
}
.rc-main .rc-scan .scanner-box.scanning .scanner-bar {
opacity: 1;
visibility: visible;
animation: scanner-bar 6s ease-in-out infinite normal, scanner-bar-shadow 6s ease-in-out infinite normal;
}
.rc-main .rc-scan .scanner-bar {
position: absolute;
z-index: 3;
top: -3px;
left: 50%;
transform: translateY(calc(-100% + 3px)) translateX(-50%);
height: 3px;
width: 100%;
/* #18c89b */
background: var(--wood-clr);
box-shadow: 0 0 80px 10px var(--wood-clr);
clip-path: inset(0);
animation: none;
pointer-events: none;
opacity: 0;
visibility: hidden;
}
@keyframes scanner-bar {
50% {
transform: translateY(calc(-100% + 3px)) translateX(-50%);
top: calc(100% + 3px);
}
80% {
transform: translateY(0) translateX(-50%);
top: -3px;
}
}
@keyframes scanner-bar-shadow {
28% {
clip-path: inset(-150px 0 0 0);
}
48% {
clip-path: inset(0);
}
58% {
clip-path: inset(0 0 -150px 0);
}
100% {
clip-path: inset(0);
}
}
/* Receptionist Navigation */
.rc-page .rc-navigation {
background: var(--wood-clr);
/* background: lightseagreen; */
padding: 0;
position: fixed;
z-index: 9999;
bottom: 0;
left: 0;
width: 100%;
}
.rc-page .rc-navigation .rc-navigation-nav {
/* background: lightpink; */
display: flex;
width: 100%;
max-width: 600px;
margin: 0 auto;
}
.rc-page .rc-navigation .rc-navigation-nav .rc-nav-item {
/* background: olive; */
/* width: 20%; */
height: 60px;
display: flex;
align-items: center;
justify-content: center;
margin: auto;
}
.rc-page .rc-navigation .rc-navigation-nav .rc-nav-item .rc-nav-link {
/* background: peru; */
display: flex;
align-items: center;
justify-content: center;
/* flex: 1; */
text-decoration: none;
color: rgb(255, 255, 255, 0.6);
transition: all 0.35s ease-in-out;
}
.rc-page .rc-navigation .rc-navigation-nav .rc-nav-item.active .rc-nav-link,
.rc-page .rc-navigation .rc-navigation-nav .rc-nav-item .rc-nav-link:hover {
color: rgb(255, 255, 255, 1);
}
.rc-page .rc-navigation .rc-navigation-nav .rc-nav-item.scan {
transform: translateY(-30px);
/* display: none; */
}
.rc-page .rc-navigation .rc-navigation-nav .rc-nav-item.scan .rc-nav-link {
width: 80px;
height: 80px;
border-radius: 50%;
background: var(--primary-clr);
color: rgb(255, 255, 255, 1);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.rc-page .rc-navigation .rc-navigation-nav .rc-nav-item.scan .rc-nav-link:hover {
color: var(--primary-clr);
background: var(--secondary-clr);
}
.rc-page .rc-navigation .rc-navigation-nav .rc-nav-item .rc-nav-link .rc-nav-content {
/* background: plum; */
text-align: center;
}
.rc-page .rc-navigation .rc-navigation-nav .rc-nav-item .rc-nav-link .rc-nav-content span {
font-size: 20px;
}
.rc-page .rc-navigation .rc-navigation-nav .rc-nav-item .rc-nav-link .rc-nav-content p {
font-size: 12px;
margin-top: 1px;
}
.rc-page .rc-navigation .rc-navigation-nav .rc-nav-item.scan .rc-nav-link .rc-nav-content span {
font-size: 32px;
}
.rc-page .rc-navigation .rc-navigation-nav .rc-nav-item.scan .rc-nav-link .rc-nav-content p {
display: none;
}
/* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
Modal Title
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
.modal-content .modal-title .fas,
.modal-content .modal-title .far {
font-size: 0.8em;
display: inline-block;
vertical-align: middle;
}
.close-modal-head {
z-index: 10;
}
/* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
Modal Description
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
.modal-description {
/* background: lightpink; */
overflow: hidden;
min-width: 0;
width: 100%;
max-width: 600px;
}
.modal-description .modal-body p {
font-size: 16px;
line-height: 1.4;
text-align: justify;
}
.modal-description .status-box {
/* background: lightseagreen; */
display: block;
margin: 0 auto;
margin-bottom: 0.75em;
padding: 15px 20px;
border-radius: 7px;
border: 1px solid var(--primary-clr);
color: var(--primary-clr);
text-align: center;
font-size: 18px;
}
.modal-description .status-box.success {
color: var(--success-clr);
border-color: var(--success-clr);
}
.modal-description .status-box.error {
color: var(--error-clr);
border-color: var(--error-clr);
}
.modal-description .status-box .fas {
margin-right: 5px;
font-size: 0.9em;
display: inline-block;
vertical-align: top;
}
.modal-description .description-item {
margin-bottom: 20px;
}
.modal-description .description-item:last-of-type {
margin-bottom: 0;
}
.modal-description .description-item h4 {
margin-bottom: 0.5em;
}
/* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
Modal Confirm
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
.modal-confirm {
/* background: lightsalmon; */
overflow: hidden;
min-width: 0;
width: 100%;
max-width: 600px;
}
.modal-confirm .modal-body {
/* background: lightblue; */
padding: 10px 0;
}
.modal-confirm .confirm-body {
/* background: lightpink; */
padding: 5px;
border-bottom: 1px solid var(--wood-clr);
display: flex;
margin-bottom: 10px;
}
.modal-confirm .confirm-body>div:first-of-type {
flex: 1;
}
.modal-confirm .confirm-body>div {
/* background: lightseagreen; */
display: flex;
align-items: flex-start;
padding: 5px 10px;
}
.modal-confirm .confirm-body p {
font-size: 16px;
line-height: 1.4;
}
.modal-confirm .confirm-body .btn {
margin: 0 3px;
padding: 10px 15px;
}
@media only screen and (max-width: 375px) {
.modal-confirm .confirm-body {
flex-direction: column;
text-align: center;
}
.modal-confirm .confirm-body>div {
align-items: center;
justify-content: center;
}
}
/* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
Modal User Scan
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
.modal-user-scan {
/* background: lightsalmon; */
overflow: hidden;
min-width: 0;
width: 100%;
max-width: 600px;
}
.modal-user-scan .modal-body {
padding: 0;
}
/* User Scan Body */
.modal-user-scan .user-scan-body {
/* background: lightseagreen; */
padding: 10px 0;
position: relative;
}
.modal-user-scan .user-scan-body .close-modal {
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 40px;
border: none;
outline: none;
padding: 10px;
font-size: 22px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
background: #f3f4f6;
color: var(--error-dark-clr);
/* box-shadow: -1px 1px 6px rgba(0, 0, 0, 0.1); */
/* border: 1px solid rgba(0, 0, 0, 0.1); */
transition: all 0.25s ease-in-out;
}
.modal-user-scan .user-scan-body .close-modal:hover {
background: var(--error-dark-clr);
color: #fff;
}
.modal-user-scan .user-scan-body .user-info {
/* background: olive; */
padding: 10px 20px;
text-align: center;
}
.modal-user-scan .user-scan-body .user-info .title {
font-size: 22px;
color: var(--primary-clr);
margin-bottom: 0.15em;
}
.modal-user-scan .user-scan-body .user-info .text {
font-size: 14px;
color: rgba(0, 0, 0, 0.6);
}
.modal-user-scan .user-scan-body .user-info .icon {
color: var(--primary-clr);
font-size: 120px;
margin: 0 auto;
margin-top: 30px;
}
.modal-user-scan .user-scan-body .scan-history {
/* background: salmon; */
padding: 5px 0;
display: flex;
overflow-x: auto;
}
.modal-user-scan .user-scan-body .scan-history::-webkit-scrollbar {
display: none;
}
.modal-user-scan .user-scan-body .scan-history .item {
/* background: sandybrown; */
display: inline-flex;
align-items: center;
justify-content: center;
padding: 5px 12px;
border: 1px solid var(--primary-clr);
color: var(--primary-clr);
border-radius: 7px;
margin: 5px 0 5px 10px;
}
.modal-user-scan .user-scan-body .scan-history .item:last-of-type {
margin-right: 10px;
}
.modal-user-scan .user-scan-body .scan-history .item.in {
border-color: var(--success-clr);
color: var(--success-clr);
}
.modal-user-scan .user-scan-body .scan-history .item.out {
border-color: var(--error-dark-clr);
color: var(--error-dark-clr);
}
.modal-user-scan .user-scan-body .scan-history .item>span {
font-size: 22px;
margin-right: 5px;
}
.modal-user-scan .user-scan-body .scan-history .item>div {
text-align: left;
}
.modal-user-scan .user-scan-body .scan-history .item>div p {
font-size: 15px;
margin-bottom: -3px;
}
.modal-user-scan .user-scan-body .scan-history .item>div small {
font-size: 11px;
}
/* User Scan Foot */
.modal-user-scan .user-scan-foot {
/* background: lightpink; */
padding: 15px 10px;
text-align: center;
border-top: 1px solid var(--wood-clr);
}
.modal-user-scan .user-scan-foot .confirm-btn {
display: inline-block;
padding: 12px 20px;
border: 1px solid var(--primary-clr);
color: var(--primary-clr);
background: transparent;
border-radius: 7px;
cursor: pointer;
font-size: 16px;
text-decoration: none;
transition: all 0.25s ease-in-out;
}
.modal-user-scan .user-scan-foot .confirm-btn:hover {
background: var(--primary-clr);
border-color: var(--primary-clr);
color: var(--white-clr);
}
.modal-user-scan .user-scan-foot .confirm-btn.in {
border-color: var(--success-clr);
color: var(--success-clr);
}
.modal-user-scan .user-scan-foot .confirm-btn.in:hover {
background: var(--success-clr);
color: var(--white-clr);
}
.modal-user-scan .user-scan-foot .confirm-btn.in.heavy {
background: var(--success-clr);
color: var(--white-clr);
}
.modal-user-scan .user-scan-foot .confirm-btn.in.heavy:hover {
background: transparent;
color: var(--success-clr);
}
.modal-user-scan .user-scan-foot .confirm-btn.in.light:hover {
background: #5cb85c30;
color: var(--success-clr);
}
.modal-user-scan .user-scan-foot .confirm-btn.out {
border-color: var(--error-clr);
color: var(--error-clr);
}
.modal-user-scan .user-scan-foot .confirm-btn.out:hover {
background: var(--error-clr);
color: var(--white-clr);
}
.modal-user-scan .user-scan-foot .confirm-btn.out.heavy {
background: var(--error-clr);
color: var(--white-clr);
}
.modal-user-scan .user-scan-foot .confirm-btn.out.heavy:hover {
background: transparent;
color: var(--error-clr);
}
.modal-user-scan .user-scan-foot .confirm-btn.out.light:hover {
color: var(--error-clr);
background: #d8212130;
}
.modal-user-scan .user-scan-foot .confirm-btn span {
font-size: 1.1em;
margin-right: 5px;
}
/* navbar dark */
body.dark .navbar-inner .nv-logo .logo.logo-svg * {
fill: #030303;
}
body.dark .navbar-inner .nav-invitation .change-invitation {
color: #030303;
}
body.dark .navbar-inner .nv-right .nv-user {
color: #030303;
}
body.dark .form-control:focus,
body.dark .form-control:active {
box-shadow: 0 0 2px #030303;
border-color: #030303;
}
/* Modal dark */
body.dark .modal .modal-head .modal-title {
color: #030303;
}
body.dark .modal .modal-head .close-modal-head {
color: #030303;
}
body.dark .modal .modal-head .close-modal-head:hover {
color: #ffffff;
}
body.dark .modal .form-label {
color: #030303;
}
/* modal select payment */
.modal-select-payment > .modal-body > .step-4 form {
padding: 0;
}
.modal-select-payment > .modal-body > .step-4 form .form-group {
padding: 10px 20px;
margin-bottom: 0;
}
.modal-select-payment > .modal-body > .step-4 .status {
text-align: left;
padding: 20px;
}
.modal-select-payment > .modal-body > .step-4 .status .status-title {
font-size: 20px;
margin-bottom: 5px;
}
.modal-select-payment > .modal-body > .step-4 .status .status-code {
display: inline-block;
margin-left: 15px;
font-size: 16px;
color: #dd7035;
}
.modal-select-payment > .modal-body > .step-4 .status.cancel .status-code {
color: #fff;
}
.modal-select-payment > .modal-body > .step-4 .status .status-text {
font-size: 14px;
font-style: italic;
}
.modal-select-payment > .modal-body > .step-4 .proof {
text-align: left;
padding: 10px 20px;
}
.modal-select-payment > .modal-body > .step-4 .picture-outer img {
margin: 0;
background-color: #fafafa;
}
.modal-select-payment > .modal-body > .step-4 .noted {
text-align: left;
padding: 20px;
margin-top: 10px;
}
.modal-select-payment > .modal-body > .step-4 .submission {
padding: 15px 20px;
margin-top: 0;
}
/* ===============================================
CREATE WEDDING
=============================================== */
/* NEW FORM - CREATE WEDDING */
.create-wedding {
/* background-color: lightsalmon; */
padding: 10px 0;
width: 100%;
margin: 20px auto 50px auto;
position: relative;
display: inline-block;
}
@media only screen and (max-width: 425px) {
.create-wedding {
max-width: none;
}
}
/* input group */
.create-wedding .cw__time-group {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
}
.create-wedding .cw__time-group .separator {
width: 20px;
height: 1px;
background: rgba(0, 0, 0, 0.25);
margin: 0px 10px;
}
.create-wedding .cw__time-group .form-control:read-only {
opacity: 1;
}
/* Head */
.create-wedding .head {
/* background-color: lightseagreen; */
width: 100%;
max-width: 400px;
margin: 0 auto;
padding: 10px;
margin-bottom: 20px;
text-align: center;
}
.create-wedding .head .logo {
/* background-color: olive; */
width: 45px;
height: auto;
margin: 0 auto 20px auto;
object-fit: contain;
object-position: center;
}
.create-wedding .head .title {
/* background-color: deeppink; */
font-family: "Bebas Neue";
font-weight: normal;
font-size: 30px;
margin-bottom: 7.5px;
}
.create-wedding .head p {
/* background-color: deepskyblue; */
font-size: 16px;
margin-bottom: 5px;
}
.create-wedding .head p:last-of-type {
margin-bottom: 0;
}
.create-wedding .head p.price {
color: #b90808;
font-size: 19px;
}
.create-wedding.start .head {
max-width: none;
}
.create-wedding.start .head .title {
font-size: 40px;
}
.create-wedding.start .head p {
font-weight: 300;
font-size: 19px;
}
.create-wedding.payment .head {
max-width: none;
margin-bottom: 8px;
}
.create-wedding.payment .head .title {
font-size: 65px;
}
.create-wedding.payment .head p {
font-weight: 300;
font-size: 19px;
}
@media only screen and (max-width: 425px) {
.create-wedding .head .title {
font-size: 28px;
}
.create-wedding .head p {
font-size: 15px;
}
.create-wedding .head p.price {
font-size: 17px;
}
.create-wedding.payment .head .title {
font-size: 40px;
}
}
/* Body */
.create-wedding .body {
/* background-color: coral; */
padding: 10px;
width: 100%;
max-width: 420px;
margin: 0 auto;
}
/* Paket Wrap */
.create-wedding .body .paket-wrap {
/* background-color: lightblue; */
display: block;
width: 100%;
}
.create-wedding .body .paket-wrap > label {
/* background-color: peru; */
display: block;
margin-bottom: 15px;
}
.create-wedding .body .paket-wrap > label:last-of-type {
margin-bottom: 0;
}
.create-wedding .body .paket-wrap .paket-item {
background-color: #f5edd7;
background-color: transparent;
/* height: 44px; */
padding: 12px 10px;
padding-left: 17px;
color: #030303;
font-weight: 400;
border-radius: 4px;
transition: all 0.2s ease-out;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
font-size: 19px;
line-height: 1.2;
border: 1.5px solid #030303;
}
.create-wedding .body .paket-wrap input[name="paket"]:checked + .paket-item,
.create-wedding .body .paket-wrap .paket-item:hover {
background-color: #030303;
color: #ffffff;
font-weight: 600;
}
.create-wedding .body .paket-wrap input[name="paket"]:disabled + .paket-item,
.create-wedding .body .paket-wrap input[name="paket"]:disabled + .paket-item:hover {
background-color: #eeeeee;
color: #030303;
font-weight: 400;
opacity: 0.75;
cursor: not-allowed;
}
@media only screen and (max-width: 425px) {
.create-wedding .body .paket-wrap .paket-item {
padding: 10px;
font-size: 15px;
line-height: 1.25;
}
}
/* Design Lists */
.create-wedding .body .design-category-wrap {
/* background-color: darkgreen; */
padding: 10px 0;
}
.create-wedding .body .design-category-wrap .design-category {
/* background-color: palevioletred; */
background-color: #f6eed7;
padding: 10px 0;
border-radius: 7px;
}
.create-wedding .body .design-category-wrap .design-category.biasa {
/* background-color: cornflowerblue; */
background-color: #fafafa;
}
/* head wrap */
.create-wedding .body .design-category .head-wrap {
/* background-color: burlywood; */
padding: 10px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.create-wedding .body .design-category .head-wrap h3 {
width: 140px;
font-family: "Bebas Neue";
font-weight: normal;
font-size: 30px;
line-height: 1;
margin: 2px 10px 0 10px;
color: #030303;
/* background-color: deeppink; */
}
.create-wedding .body .design-category .head-wrap .design-toggle {
font-size: 14px;
color: #030303;
background-color: #ffffff;
border: none;
outline: none;
width: 50px;
padding: 8px 10px;
border-radius: 20px;
cursor: pointer;
/* box-shadow: 0px 0px 5px rgb(0 0 0 / 20%); */
transition: all 0.25s ease-in-out;
}
.create-wedding .body .design-category .head-wrap .design-toggle.biasa {
background-color: #bcbcbc;
color: #ffffff;
}
.create-wedding .body .design-category .head-wrap .design-toggle:hover {
color: #efefef;
background-color: #030303;
}
/* Design Wrap */
.create-wedding .body .design-wrap {
/* background-color: crimson; */
width: 100%;
display: flex;
overflow: hidden;
}
.create-wedding .body .design-wrap .design-item {
/* background-color: chocolate; */
padding: 10px;
flex-shrink: 0;
margin: 5px;
border: none;
outline: none;
box-shadow: none;
}
.create-wedding .body .design-wrap .design-item > label {
display: block;
width: auto;
/* background-color: darkred; */
}
.create-wedding .body .design-wrap .design-item input[name="design"]:checked + .design-box-wrap::before {
width: calc(100% + 10px);
height: calc(100% + 10px);
}
.create-wedding .body .design-wrap .design-item .design-box-wrap {
position: relative;
}
.create-wedding .body .design-wrap .design-item .design-box-wrap::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 45px;
width: 100%;
height: 100%;
transition: all 0.25s ease-in-out;
box-shadow: -5px 5px 20px rgb(221 174 38 / 20%);
background-color: #d8b57f;
}
.create-wedding .body .design-wrap .design-item .design-box {
/* background-color: coral; */
width: 190px;
height: 240px;
border-radius: 40px;
overflow: hidden;
display: flex;
flex-direction: column;
position: relative;
cursor: pointer;
}
.create-wedding .body .design-wrap .design-item .design-box::after {
content: '';
position: absolute;
z-index: 2;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgb(0 0 0 / 10%);
}
.create-wedding .body .design-wrap .design-item .design-box .img-wrap {
/* background: olive; */
width: 100%;
height: 100%;
display: block;
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.create-wedding .body .design-wrap .design-item .design-box .img-wrap .img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.create-wedding .body .design-wrap .design-item .detail-wrap {
/* background-color: lightslategray; */
position: relative;
z-index: 3;
margin-top: auto;
animation-name: design-detail-animation;
animation-duration: .7s;
animation-delay: .2s;
animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
animation-fill-mode: forwards;
}
@keyframes design-detail-animation {
0% {
transform: translateY(100px);
}
100% {
transform: translateY(0);
}
}
.create-wedding .body .design-wrap .design-item .detail-wrap .color-wrap {
/* background-color: olive; */
width: 100%;
display: flex;
justify-content: center;
overflow: auto;
background-color: #ffffff;
}
.create-wedding .body .design-wrap .design-item .detail-wrap .color-wrap > label {
/* width: 80px; */
/* height: 36px; */
display: block;
flex-shrink: 0;
margin: 7.5px;
/* flex: 0 0 30%; */
/* flex-grow: 1; */
/* background-color: #00ac47; */
}
.create-wedding .body .design-wrap .design-item .detail-wrap .color-wrap input[name="color"]:checked + .color-item::before {
width: calc(100% + 8px);
height: calc(100% + 8px);
}
.create-wedding .body .design-wrap .design-item .detail-wrap .color-wrap .color-item {
width: 27.5px;
height: 27.5px;
position: relative;
}
.create-wedding .body .design-wrap .design-item .detail-wrap .color-wrap .color-item::before {
content: '';
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
border-radius: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
background-color: #d8b57f;
box-shadow: 0 0 5px rgb(0 0 0 / 17.5%);
transition: all 0.25s ease-in-out;
}
.create-wedding .body .design-wrap .design-item .detail-wrap .color-wrap .color-item .color-box {
width: 100%;
height: 100%;
margin: 0 auto;
border-radius: 50%;
background-color: var(--clr);
cursor: pointer;
position: relative;
z-index: 1;
}
.create-wedding .body .design-wrap .design-item .detail-wrap .design-action,
.create-wedding .body .design-wrap .design-item .detail-wrap .preview-design {
border: none;
outline: none;
display: block;
width: 100%;
cursor: pointer;
transition: all 0.25s ease-in-out;
}
.create-wedding .body .design-wrap .design-item input[name="design"]:checked + .design-box-wrap .design-box .detail-wrap .design-action {
color: #ffffff;
background-color: #d8b57f;
}
.create-wedding .body .design-wrap .design-item .detail-wrap .design-action {
background-color: #f5edd7;
padding: 4px;
padding-bottom: 2px;
font-family: "Bebas Neue";
font-size: 30px;
font-weight: normal;
color: #d8b57f;
}
.create-wedding .body .design-wrap .design-item .detail-wrap .preview-design {
padding: 10px;
font-size: 13px;
background-color: #ffffff;
color: #030303;
transition: all 0.25s ease-in-out;
}
.create-wedding .body .design-wrap .design-item .detail-wrap .preview-design:hover {
background-color: #030303;
color: #ffffff;
}
/* Payment */
.create-wedding .body .payment-wrap {
--border-radius: 4px;
background-color: transparent;
/* background-color: lightseagreen; */
/* padding: 10px; */
margin-bottom: 20px;
border-radius: var(--border-radius);
border-top-left-radius: 25px;
border-top-right-radius: 25px;
overflow: hidden;
box-shadow: 0 0 50px rgb(0 0 0 / 10%);
}
/* Preview Wrap */
.create-wedding .body .payment-wrap .preview-wrap {
/* background-color: peru; */
background-color: #ffffff;
width: 100%;
height: 450px;
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
position: relative;
overflow: hidden;
}
.create-wedding .body .payment-wrap .preview-wrap .img-wrap {
width: 100%;
height: 100%;
background: #fff;
overflow-y: auto;
position: relative;
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
/* background-color: cornflowerblue; */
}
/* Hide scrollbar for Chrome, Safari and Opera */
.create-wedding .body .payment-wrap .preview-wrap .img-wrap::-webkit-scrollbar {
display: none;
}
.create-wedding .body .payment-wrap .preview-wrap .img-wrap .img {
width: 100%;
height: auto;
margin: 0 auto;
display: block;
object-fit: contain;
object-position: top;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
}
/* Cart Wrap */
.create-wedding .body .payment-wrap .cart-wrap {
background-color: #f9f9f9;
/* background-color: tomato; */
/* min-height: 190px; */
padding: 30px 10px 50px;
margin-top: -10px;
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
position: relative;
/* box-shadow: 0 -5px 5px rgb(0 0 0 / 10%); */
}
.create-wedding .body .payment-wrap .cart-wrap .cart-head {
/* background-color: darkgreen; */
text-align: center;
padding: 10px 0;
/* margin-bottom: 8px; */
border-bottom: 0.5px solid rgb(0 0 0 / 20%);
}
.create-wedding .body .payment-wrap .cart-wrap .cart-head h3 {
font-weight: 600;
margin-bottom: 5px;
/* background-color: deeppink; */
}
.create-wedding .body .payment-wrap .cart-wrap .cart-head small {
/* background-color: deepskyblue; */
display: block;
font-size: 13px;
font-style: italic;
}
.create-wedding .body .payment-wrap .cart-wrap .cart-head + .table-wrap {
margin-top: -10px;
}
/* .create-wedding .body .payment-wrap .cart-wrap form#voucherForm {
padding: 10px;
margin: 10px auto;
}
.create-wedding .body .payment-wrap .cart-wrap form#voucherForm .form-label {
font-size: 14px;
font-weight: 400;
}
.create-wedding .body .payment-wrap .cart-wrap form#voucherForm .form-control {
padding: 10px;
font-size: 15px;
}
.create-wedding .body .payment-wrap .cart-wrap button#useVoucherBtn {
background-color: #030303;
color: #ffffff;
font-size: 14px;
padding: 10px 15px;
font-weight: 500;
}
.create-wedding .body .payment-wrap .cart-wrap button#useVoucherBtn:hover {
background-color: #d8b57f;
}
.create-wedding .body .payment-wrap .cart-wrap .voucher-group {
display: flex;
}
.create-wedding .body .payment-wrap .cart-wrap .voucher-group > .form-control {
flex-grow: 1;
border-radius: 4px;
}
.create-wedding .body .payment-wrap .cart-wrap .voucher-group > .btn {
margin-left: 10px;
border-radius: 4px;
} */
/* External Form */
.external__form {
padding: 0px 10px;
margin: 20px auto 0px;
}
.external__form .external__form-group {
}
.external__form .external__form-input {
display: grid;
grid-template-columns: 1fr auto;
}
.external__form .external__form-input > input.form-control {
padding: 10px;
font-size: 15px;
border-radius: 4px;
}
.external__form .external__form-input > button.submit {
margin-left: 10px;
background-color: #030303;
color: #ffffff;
font-size: 14px;
padding: 10px 15px;
font-weight: 500;
border-radius: 4px;
}
.external__form .external__form-input > button.submit:hover {
background-color: #d8b57f;
}
.external__form .external__form-input > button.submit:disabled {
opacity: .5;
pointer-events: none;
}
.external__form .external__form-label {
display: inline-block;
vertical-align: top;
font-size: 14px;
font-weight: 400;
color: #030303;
margin-bottom: 10px;
}
/* Status Wrap */
.create-wedding .body .payment-wrap .status-wrap {
background-color: #e7e7e7;
color: #030303;
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
margin-top: -10px;
padding-bottom: 10px;
position: relative;
}
.create-wedding .body .payment-wrap .status-wrap.settlement {
background-color: #339900;
color: #e7e7e7;
}
.create-wedding .body .payment-wrap .status-wrap.pending {
background-color: #ffcc00;
}
.create-wedding .body .payment-wrap .status-wrap.cancel {
background-color: #cc3300;
color: #e7e7e7;
}
.create-wedding .body .payment-wrap .status-wrap .status-box {
/* background-color: chocolate; */
padding: 15px;
text-align: center;
}
.create-wedding .body .payment-wrap .status-wrap .status-box .payment-status {
font-size: 15px;
font-weight: 600;
margin-bottom: 3px;
display: block;
padding: 0;
}
.create-wedding .body .payment-wrap .status-wrap .status-box .payment-status i {
font-size: 0.9em;
}
.create-wedding .body .payment-wrap .status-wrap .status-box .payment-end {
font-size: 13px;
font-weight: 400;
font-style: italic;
display: block;
}
/* Summary Wrap */
.create-wedding .body .payment-wrap .summary-wrap {
background-color: #f6eed7;
/* background-color: coral; */
min-height: 175px;
margin-top: -10px;
padding: 10px;
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
position: relative;
display: flex;
flex-direction: column;
/* box-shadow: 0 -5px 5px rgb(0 0 0 / 5%); */
}
.create-wedding .body .payment-wrap .summary-wrap::before {
content: '';
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
position: absolute;
z-index: 10;
background-color: transparent;
border: 1.75px solid #d8b57f;
pointer-events: none;
}
.create-wedding .body .payment-wrap .summary-wrap .summary-detail {
/* background-color: olive; */
padding: 10px;
margin: auto;
text-align: center;
width: 100%;
}
.create-wedding .body .payment-wrap .summary-wrap .summary-detail > p {
font-size: 14px;
margin-bottom: 5px;
}
.create-wedding .body .payment-wrap .summary-wrap .summary-detail .summary-total {
font-weight: 600;
font-size: 28px;
}
.create-wedding .body .payment-wrap .summary-wrap .summary-detail .summary-total + #selectPayment {
margin-top: 10px;
}
.create-wedding .body .payment-wrap .summary-wrap .summary-detail #selectPayment {
margin: 0 auto;
background-color: #030303;
color: #ffffff;
width: 60%;
border-radius: 4px;
}
.create-wedding .body .payment-wrap .summary-wrap .summary-detail #selectPayment:hover {
background-color: #d8b57f;
}
.create-wedding .body .payment-wrap .summary-wrap .summary-detail + .table-wrap {
margin-top: 10px;
}
.create-wedding .body .payment-wrap .summary-wrap .table-wrap table tbody tr {
border-top: 0.5px solid rgb(0 0 0 / 20%);
}
/* Table Wrap */
.create-wedding .body .payment-wrap .table-wrap {
/* background-color: cornflowerblue; */
padding: 10px 0;
}
.create-wedding .body .payment-wrap .table-wrap table {
border-collapse: collapse;
width: 100%;
}
.create-wedding .body .payment-wrap .table-wrap table tbody tr {
/* border-top: 0.5px solid rgb(0 0 0 / 20%); */
}
.create-wedding .body .payment-wrap .table-wrap table tbody tr td {
font-size: 15px;
padding: 10px;
text-align: left;
/* background-color: darkslategray; */
}
.create-wedding .body .payment-wrap .table-wrap table tbody tr td.price {
/* font-weight: 600;
font-size: 16px; */
}
.create-wedding .body .payment-wrap .table-wrap table tbody tr td:last-of-type {
text-align: right;
}
/* Button Wrap */
.create-wedding .body .button-wrap {
display: flex;
margin-top: 20px;
/* background-color: olive; */
}
.create-wedding .body .button-wrap,
.create-wedding .body .button-wrap p,
.create-wedding .body .button-wrap i {
font-size: 14px;
}
/* Next */
.create-wedding .body button#next {
background-color: #030303;
color: #ffffff;
width: 100%;
display: block;
flex-grow: 1;
font-size: 15px;
padding: 12px 10px;
line-height: 1.6;
border-radius: 4px;
transition: all 0.25s ease-in-out;
}
.create-wedding .body button#next:hover {
background-color: #452812;
}
/* Prev */
.create-wedding .body button#prev {
background-color: #fafafa;
border: 1px solid #f6eed7;
color: #030303;
width: 20%;
margin-right: 10px;
font-size: 15px;
padding: 12px 10px;
line-height: 1.6;
border-radius: 4px;
}
.create-wedding .body button#prev:hover {
background-color: #030303;
color: #ffffff;
}
.create-wedding .body .form-label {
color: #030303;
font-size: 16px;
}
.create-wedding .body .form-control {
font-size: 16px;
color: #030303;
padding: 12px 10px;
border-radius: 4px;
}
.create-wedding .body .form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
font-weight: 300;
opacity: 0.5; /* Firefox */
font-family: var(--roboto);
}
.create-wedding.start .body .form-label {
font-size: 19px;
}
.create-wedding.start .body .form-control {
padding-left: 17px;
font-size: 19px;
}
.create-wedding .body .form-group {
margin-bottom: 18px;
}
.create-wedding .body .form-control.datepicker {
opacity: 1;
}
.create-wedding .body .datepicker + .picker .picker__day {
font-weight: 300;
}
.create-wedding.start .body .input-group {
border-radius: 4px;
}
.create-wedding .body .input-group-append {
background-color: #030303;
padding: 0 12.5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.create-wedding .body .input-group-append .input-group-append-text {
color: #ffffff;
font-size: 19px;
}
@media only screen and (max-width: 425px) {
/* Next & Prev */
.create-wedding .body button#next,
.create-wedding .body button#prev {
padding: 10px;
line-height: 1.25;
}
.create-wedding .body .form-label,
.create-wedding.start .body .form-label {
font-size: 15px;
}
.create-wedding .body .form-group,
.create-wedding.start .body .form-group {
margin-bottom: 15px;
}
.create-wedding .body .input-group-append .input-group-append-text {
font-size: 14px;
}
}
/* ========================================
INSTAGRAM FILTER
======================================== */
.filter-outer {
margin: 30px 0 15px;
padding: 20px 0 30px;
border-top: 1px solid rgb(0 0 0 / 5%);
border-bottom: 1px solid rgb(0 0 0 / 5%);
}
.filter-outer > h3 {
color: var(--primary-clr);
margin-bottom: 15px;
font-size: 16px;
}
/* Filter Wrap */
.filter-wrap {
display: flex;
}
/* Filter Form */
.filter-wrap .filter-form {
width: 100%;
}
.filter-wrap .filter-form > div:last-child {
margin-bottom: 0;
}
.filter-wrap .filter-form .switch-group {
margin-bottom: 0.75em;
}
/* Filter Preview */
.filter-wrap .filter-preview {
margin-left: 30px;
display: flex;
align-items: flex-start;
flex-direction: column;
}
/* Filter Image Wrap */
.filter-wrap .filter-preview .filter-img-wrap {
width: 240px;
height: 250px;
border-radius: 30px 30px 12px 12px;
overflow: hidden;
box-shadow: 0 5px 25px rgb(217 182 128 / 60%);
position: relative;
display: none;
}
.filter-wrap .filter-preview .filter-img-wrap.show {
display: block;
}
.filter-wrap .filter-preview .filter-img-wrap .filter-img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
border-radius: 30px 30px 12px 12px;
position: relative;
}
.filter-wrap .filter-preview .filter-img-wrap .filter-pict-btn {
position: absolute;
z-index: 1;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
padding: 9px 12px;
border-radius: 0 0 10px 10px;
}
.filter-wrap .filter-preview .filter-img-wrap .remove-filter-btn {
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: #000;
color: #fff;
position: absolute;
z-index: 1;
top: 10px;
right: 10px;
text-decoration: none;
font-size: 22px;
font-weight: normal;
line-height: 1;
border: 2px solid #fff;
transition: background 0.2s;
}
.filter-wrap .filter-preview .filter-img-wrap .remove-filter-btn:hover {
background: #B22222;
}
/* Filter Picture Button */
.filter-wrap .filter-preview .filter-pict-btn-wrap {
display: none;
width: 240px;
flex-direction: column;
padding: 10px;
border-radius: 20px;
border: 2px dashed var(--secondary-clr);
flex-grow: 1;
}
.filter-wrap .filter-preview .filter-pict-btn-wrap.show {
display: flex;
}
.filter-wrap .filter-preview .filter-pict-btn-wrap .filter-pict-btn {
margin: auto;
padding: 8px 12px;
}
.filter-wrap .filter-preview .filter-pict-btn > i {
margin-left: 0;
}
@media only screen and (max-width: 768px) {
.filter-wrap {
flex-direction: column;
}
.filter-wrap .filter-form {
margin-bottom: 30px;
}
.filter-wrap .filter-preview {
width: 100%;
margin-left: 0;
}
.filter-wrap .filter-preview .filter-img-wrap {
height: 350px;
margin-left: 0;
box-shadow: none;
}
.filter-wrap .filter-preview .filter-pict-btn-wrap {
height: 125px;
}
}
@media only screen and (max-width: 425px) {
.filter-wrap .filter-preview .filter-img-wrap {
height: 300px;
margin: 0 auto;
}
}
/* ========================================
TABLE MANAGEMENT
======================================== */
body.tm__body-page .main {
/* max-width: 1440px; */
}
.table-mgmt-wrapper {
position: relative;
display: flex;
flex-direction: column;
flex-grow: 1;
}
/* Event Table */
.evtbl-wrap {
padding: 10px 0px 30px;
}
/* event table head */
.evtbl-wrap .evtbl-head {
padding: 20px;
display: flex;
align-items: center;
justify-content: flex-start;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.evtbl-head .evtbl-title {
font-size: 32px;
font-family: var(--butler);
font-weight: normal;
}
.evtbl-head .add-evtbl-btn {
display: flex;
align-items: center;
justify-content: center;
font-family: var(--roboto);
font-size: 15px;
font-weight: 600;
border: 1px solid var(--wood-clr);
background: transparent;
color: var(--primary-clr);
padding: 10px 20px;
margin-left: auto;
border-radius: 25px;
cursor: pointer;
transition: background 0.2s;
}
.evtbl-head .add-evtbl-btn > svg {
display: inline-block;
vertical-align: top;
margin: 0px;
width: 19px;
height: 19px;
margin-right: 5px;
}
.evtbl-head .add-evtbl-btn > svg path {
stroke-width: 4;
}
.evtbl-head .add-evtbl-btn:hover {
background: var(--wood-clr);
}
/* event table list */
.evtbl-wrap .evtbl-list {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
padding: 20px;
margin: 0px -10px;
}
.evtbl-list .evtbl-item {
position: relative;
background-color: #fff;
border: 1px solid var(--secondary-clr);
box-shadow: 2px -2px 10px rgba(var(--secondary-rgb), 0.2);
width: 31%;
padding: 44px 0px;
margin: 0px 10px 20px;
border-radius: 15px;
overflow: hidden;
isolation: isolate;
transition: opacity 0.4s;
}
.evtbl-list .evtbl-item.is-dragged {
}
.evtbl-list .evtbl-item.ui-sortable-placeholder {
background: none;
border: 1px dashed darkgrey;
box-shadow: none;
visibility: visible!important;
}
.evtbl-list .evtbl-item.ui-sortable-helper {
opacity: 0.7;
}
@media (max-width: 960px) {
.evtbl-list .evtbl-item {
width: 47.5%;
}
}
@media (max-width: 868px) {
.evtbl-list .evtbl-item {
width: 100%;
}
}
/* event table box */
.evtbl-item .evtbl-box {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
cursor: move;
padding: 0px 25px;
}
.evtbl-box .evtbl-icon {
display: block;
width: auto;
height: 60px;
margin: 0px 25px 0px 0px;
object-fit: contain;
object-position: center;
}
.evtbl-box .evtbl-text-wrap {
}
.evtbl-text-wrap .evtbl-text-title {
font-family: var(--roboto);
font-weight: 600;
font-size: 25px;
color: #000;
margin-bottom: 7px;
}
.evtbl-text-wrap .evtbl-link {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--roboto);
font-weight: 400;
font-size: 15px;
color: #000;
text-decoration: none;
transition: color 0.3s;
}
.evtbl-text-wrap .evtbl-link > svg {
display: inline-block;
vertical-align: top;
margin-left: 5px;
transition: margin-left 0.3s;
}
.evtbl-text-wrap .evtbl-link > svg path {
stroke: #000;
transition: stroke 0.3s;
}
.evtbl-text-wrap .evtbl-link:hover {
color: var(--wood-clr);
}
.evtbl-text-wrap .evtbl-link:hover > svg {
margin-left: 20px;
}
.evtbl-text-wrap .evtbl-link:hover > svg path {
stroke: var(--wood-clr);
}
/* empty event table */
.evtbl-list .empty-evtbl {
display: flex;
align-items: flex-end;
position: absolute;
top: 0px;
right: 96px;
}
.evtbl-list .empty-evtbl > h2 {
font-family: var(--parisienne);
font-weight: 400;
font-size: 40px;
width: 280px;
color: var(--wood-clr);
text-align: center;
transform: rotate(-5deg);
transform-origin: center;
}
.evtbl-list .empty-evtbl > svg {
transform: scaleX(-1);
display: block;
margin-left: 20px;
margin-bottom: 90px;
}
.evtbl-list .empty-evtbl > svg > g {
stroke: var(--wood-clr);
}
/* remove event table */
.evtbl-item .remove-evtbl-btn {
position: absolute;
right: 0;
bottom: 0;
width: 35px;
height: 35px;
color: #000;
border-top-left-radius: 10px;
background: transparent;
transition: background 0.3s;
}
.evtbl-item .remove-evtbl-btn > svg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
width: 20px;
height: 20px;
}
.evtbl-item .remove-evtbl-btn > svg path {
stroke: var(--error-clr);
transition: stroke 0.3s;
}
.evtbl-item .remove-evtbl-btn:hover {
background: var(--error-clr);
}
.evtbl-item .remove-evtbl-btn:hover > svg path {
stroke: var(--light-clr);
}
/* ========== */
/* MODAL - Delete Event Table */
.del-evtbl {
padding: 20px 10px;
border-radius: 7px;
}
.del-evtbl .modal-body {
padding: 12px 20px;
}
.del-evtbl .del-evtbl__title {
font-size: 21px;
font-family: var(--roboto);
font-weight: 500;
}
.del-evtbl .del-evtbl__caption {
font-size: 17px;
font-family: var(--roboto);
font-weight: 400;
margin-top: 10px;
}
.del-evtbl .modal-foot {
border-top: none;
justify-content: flex-end;
padding: 12px 20px;
}
.del-evtbl .del-evtbl__btn {
display: inline-block;
vertical-align: top;
font-family: var(--roboto);
font-size: 16px;
font-weight: 600;
padding: 12px 20px;
margin: 0px 0px 0px 15px;
border-radius: 20px;
border: 1px solid transparent;
color: #000;
background: transparent;
cursor: pointer;
transition: background 0.4s, border 0.4s, color 0.4s, opacity 0.4s;
}
.del-evtbl .del-evtbl__btn:hover {
background: #fafafa;
}
.del-evtbl .del-evtbl__btn.dark {
border: 1px solid #000;
}
.del-evtbl .del-evtbl__btn.dark:hover {
background: #000;
color: #fff;
}
.del-evtbl .del-evtbl__btn.danger {
border: 1px solid #b22222;
color: #b22222;
}
.del-evtbl .del-evtbl__btn.danger:hover {
background: #b22222;
color: #fff;
}
.del-evtbl .del-evtbl__btn:disabled {
pointer-events: none;
opacity: 0.5;
}
/* ========== */
/* Table Data */
.tm-wrap {
display: flex;
flex-direction: column;
flex-grow: 1;
}
/* header */
.tm-wrap .tm__header {
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.tm__header .tm__header-title {
font-size: 22px;
font-family: var(--roboto);
font-weight: 300;
color: var(--primary-clr);
}
/* event options */
.tm__header .tm__header__event-options {
margin-left: 10px;
}
.tm__header .tm__header__event-options > select {
border: none;
font-size: 22px;
line-height: 1.4;
color: var(--primary-clr);
font-weight: 600;
font-family: var(--roboto);
}
.tm__header .selectize-control.single .selectize-input {
display: block;
padding: 0px 35px 0px 10px;
border-radius: 0px;
border: none;
font-size: 22px;
line-height: 1.4;
color: var(--primary-clr);
font-weight: 600;
background: none;
font-family: var(--roboto);
}
.tm__header .selectize-control .item {
padding: 0px;
background: none;
color: var(--primary-clr);
transition: all 0.25s ease-in-out;
}
.tm__header .selectize-control .item:hover {
background: none;
color: var(--primary-clr);
}
.tm__header .selectize-control.single .selectize-input:after {
right: 10px;
border-width: 8px 8px 0px 8px;
}
.tm__header .selectize-control.single .selectize-input.dropdown-active:after {
border-width: 0px 8px 8px 8px;
}
.tm__header .selectize-input>input {
display: none!important;
}
.tm__header .selectize-dropdown.single {
border: none;
min-width: 280px;
right: 0px;
top: 44px!important;
left: auto!important;
box-shadow: -2px 2px 12px rgb(0 0 0 / 10%);
}
.tm__header .selectize-dropdown-content {
padding: 5px 0px;
}
.tm__header .selectize-dropdown [data-selectable].option {
padding: 7px 20px;
font-family: var(--roboto);
color: #000;
font-size: 20px;
font-weight: 300;
text-align: center;
line-height: 1.8;
background: none;
border-top: 1px solid #d9d9d9;
}
.tm__header .selectize-dropdown [data-selectable].option:first-of-type {
border-top: none;
}
.tm__header .selectize-dropdown [data-selectable].option:hover {
background: rgba(0, 0, 0, 0.025);
}
.tm__header .selectize-dropdown [data-selectable].option.selected {
background: rgba(0, 0, 0, 0.05);
}
/* content */
.tm-wrap .tm__content {
font-family: var(--roboto);
display: flex;
flex-grow: 1;
}
/* sidebar */
.tm__content .tm__sidebar {
max-width: 320px;
flex: 0 0 320px;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
background-color: #fff;
display: flex;
flex-direction: column;
}
.tm__sidebar .tm__sidebar__header {
background: var(--secondary-clr);
color: var(--primary-clr);
font-family: var(--roboto);
font-weight: 500;
font-size: 13px;
padding: 5px 10px;
text-align: center;
}
/* no going guest */
.tm__sidebar .tm__sidebar-no-going-guest {
padding: 20px;
font-family: var(--roboto);
font-size: 18px;
font-weight: 300;
color: #000;
line-height: 1.8;
}
/* guets list */
.tm__sidebar .tm__sidebar__list-wrap {
overflow-y: auto;
}
.tm__sidebar .tm__sidebar__guest {
border-bottom: 1px solid #d9d9d9;
padding: 7px 20px 7px 40px;
font-family: var(--roboto);
font-weight: 300;
min-height: 52px;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}
.tm__sidebar .tm__sidebar__guest.is-seated {
pointer-events: none;
opacity: 0.5;
background-color: #f7f7f7;
}
.tm__sidebar__guest .tm__sidebar__guest-check {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 13px;
}
.tm__sidebar__guest .tm__sidebar__guest-name {
font-weight: 400;
font-size: 15px;
color: #000;
}
.tm__sidebar__guest .tm__sidebar__guest-info {
font-size: 12px;
display: block;
margin-top: 0.3em;
color: rgba(0, 0, 0, 0.75);
}
/* tables container */
.tm__content .tm__tables-wrap {
width: 100%;
display: flex;
flex-direction: column;
}
/* toolbar */
.tm__content .tm__toolbar {
padding: 20px;
text-align: right;
}
.tm__content .tm__toolbar-link {
position: relative;
background: none;
display: inline-block;
vertical-align: top;
text-decoration: none;
color: var(--primary-clr);
font-family: var(--roboto);
font-weight: 500;
font-size: 14px;
border-radius: 20px;
min-height: 37px;
padding: 9px 18px;
margin: 2.5px;
border: 1px solid rgba(0, 0, 0, 0.5);
transition: color 0.3s, background 0.3s, border 0.3s;
}
.tm__content .tm__toolbar-link.disabled {
pointer-events: none;
opacity: 0.25;
}
.tm__content .tm__toolbar-link:hover {
background: var(--wood-clr);
color: var(--light-clr);
border: 1px solid var(--wood-clr);
}
.tm__content .tm__toolbar-link > svg {
display: inline-block;
vertical-align: top;
width: auto;
height: 17px;
margin-right: 3px;
}
.tm__content .tm__toolbar-link.no-text > svg {
height: 22px;
margin-right: 0px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* tables */
.tm__content .tm__tables {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
flex-grow: 1;
padding: 20px;
/* max-height: calc(100vh - 132px); */
/* min-height: 450px; */
overflow: auto;
}
.tm__tables .tm__table {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 6px 0 #0000001a;
height: auto;
margin: 0px 20px 20px 0px;
width: 320px;
transition: opacity 0.4s;
}
.tm__tables .tm__table.is-dragged {
}
.tm__tables .tm__table.ui-sortable-placeholder {
background: none;
border: 1px dashed darkgrey;
box-shadow: none;
visibility: visible!important;
}
.tm__tables .tm__table.ui-sortable-helper {
opacity: 0.7;
}
.tm__table .tm__table__header {
align-items: center;
border-bottom: 1px solid #d9d9d9;
cursor: move;
display: flex;
justify-content: space-between;
margin-left: 16px;
min-height: 63px;
padding-right: 16px;
}
.tm__table .tm__table__header-title {
color: #505050;
font-family: var(--roboto);
font-size: 16px;
font-weight: bold;
margin: 0;
padding: 0;
}
.tm__table .tm__table__header-settings {
display: inline-block;
vertical-align: top;
text-decoration: none;
color: #505050;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s;
}
.tm__table .tm__table__header-settings > svg {
display: inline-block;
vertical-align: top;
height: 22px;
width: auto;
}
.tm__table .tm__table__header:hover > .tm__table__header-settings {
opacity: 1;
pointer-events: visible;
}
/* seat */
.tm__table .tm__table__content {
padding: 6px 0px;
}
.tm__table__content .tm__table__seat {
align-items: center;
display: flex;
height: 46px;
padding: 2px 0 0;
position: relative;
}
.tm__table .tm__seat {
align-items: center;
display: flex;
padding: 12px 16px;
position: relative;
width: 100%;
transition: background 0.1s, opacity 0.2s;
}
.tm__table .tm__seat.is-partner {
opacity: .5;
}
.tm__table .tm__seat:not(.is-partner):hover {
background: #f3f3f3;
}
.tm__seat .tm__seat__delete-button {
cursor: pointer;
margin-left: auto;
display: inline-block;
vertical-align: top;
color: #505050;
text-decoration: none;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s;
}
.tm__seat:hover .tm__seat__delete-button {
opacity: 1;
pointer-events: visible;
}
.tm__seat .tm__seat__delete-button > svg {
display: block;
height: 24px;
width: auto;
}
.tm__table__seat .tm__table__seat-number,
.tm__seat .tm__seat__guest-number {
font-size: 14px;
margin-right: 8px;
display: inline-block;
vertical-align: top;
}
.tm__table__seat .tm__table__seat-name,
.tm__seat .tm__seat__guest-name {
color: #505050;
font-family: var(--roboto);
font-size: 16px;
line-height: 1.37;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tm__table__seat > .tm__table__seat-number {
display: none;
margin-left: 16px;
}
.tm__table__seat.empty-seat > .tm__table__seat-number {
display: inline-block;
}
.tm__table__seat > .tm__table__seat-name {
display: none;
}
.tm__table .tm__seat.is-partner .tm__seat__guest-name,
.tm__table .tm__seat.is-partner .tm__seat__guest-name-new {
font-style: italic;
font-weight: 300;
font-size: 15px;
}
/* Search */
.tm__table__seat > .tm__seat__search {
display: none;
position: relative;
}
.tm__table__seat.empty-seat > .tm__seat__search {
width: 100%;
margin-right: 21px;
display: flex;
align-items: center;
}
.tm__seat__search > i {
display: inline-block;
vertical-align: top;
font-size: 14px;
color: #505050;
margin-right: 8px;
}
.tm__seat__search .tm__seat-input {
border: none;
outline: none;
box-shadow: none;
background: none;
font-size: 16px;
color: #505050;
line-height: 1.6;
border-bottom: 1px solid #d9d9d9;
display: block;
width: 100%;
font-family: var(--roboto);
font-weight: 300;
}
.tm__seat__search:not(.active) .tm__seat-input {
font-weight: 500;
}
.tm__seat__search:not(.active) .tm__seat-input::-webkit-input-placeholder {
font-style: italic;
}
.tm__seat__search:not(.active) .tm__seat-input:-moz-placeholder {
font-style: italic;
}
.tm__seat__search:not(.active) .tm__seat-input::-moz-placeholder {
font-style: italic;
}
.tm__seat__search:not(.active) .tm__seat-input:-ms-input-placeholder {
font-style: italic;
}
/* search result */
.tm__seat__search .tm__search-result {
background: #fff;
position: absolute;
z-index: 10;
left: 0;
top: 100%;
width: 100%;
max-width: 250px;
margin-top: 10px;
padding: 7px 0px;
overflow-y: auto;
overflow-x: hidden;
box-shadow: -2px 2px 15px rgba(0, 0, 0, 0.1);
}
.tm__search-result .tm__search__guest {
font-family: var(--roboto);
font-weight: 300;
cursor: pointer;
padding: 10px 20px;
transition: background 0.2s;
}
.tm__search-result .tm__search__guest:hover {
background: rgba(0, 0, 0, 0.05);
}
.tm__search-result .tm__search__guest.disabled {
opacity: 0.5;
pointer-events: none;
}
.tm__search__guest .tm__search__guest-name {
color: #000;
font-size: 15px;
line-height: 1.37;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tm__search__guest .tm__search__guest-desc {
font-size: 13px;
color: rgba(0, 0, 0, 0.5);
}
.tm__search-result .tm__search-separator {
background: var(--secondary-clr);
font-size: 13px;
font-weight: 300;
padding: 5px 15px;
}
.tm__search-result .tm__search__no-guest {
text-align: center;
font-size: 18px;
font-weight: 400;
padding: 10px 20px;
color: #B22222;
}
@media (max-width: 1024px) {
.tm__content .tm__sidebar {
display: none;
}
.tm__tables .tm__table {
width: 47%;
}
}
@media (max-width: 768px) {
.tm__tables .tm__table {
width: 100%;
margin: 0px 0px 30px 0px;
}
.tm__content .tm__toolbar-link {
display: block;
text-align: center;
margin: 10px 2.5px;
}
}
/* ========== */
/* MODAL - Add Event Table */
.modalAddEventTable {
width: 100%;
max-width: 720px;
border-radius: 7px;
padding: 20px 0px;
}
.modalAddEventTable .modal-head {
border-bottom: none;
border-radius: 0px;
padding: 20px;
text-align: center;
}
.modalAddEventTable .modal-title {
font-family: var(--butler-bold);
font-weight: normal;
font-size: 30px;
line-height: normal;
letter-spacing: normal;
}
.modalAddEventTable .modal-caption {
font-family: var(--roboto);
font-weight: 400;
font-size: 17px;
margin-top: 12px;
}
.modalAddEventTable .modal-body {
width: 100%;
max-width: 450px;
margin: 0px auto;
padding: 20px;
}
.modalAddEventTable .double-input {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 0.7em;
position: relative;
}
.modalAddEventTable .remove-table-form {
position: absolute;
bottom: 13px;
left: 100%;
margin-left: 15px;
display: block;
text-decoration: none;
color: #000;
opacity: 0.25;
transition: opacity 0.4s;
}
.modalAddEventTable .remove-table-form:hover {
opacity: 0.75;
}
.modalAddEventTable .remove-table-form > svg {
display: block;
width: auto;
height: 20px;
}
.modalAddEventTable .remove-table-form > svg > path {
stroke: #000;
}
.modalAddEventTable .duplicate-wrap {
margin-top: 30px;
text-align: center;
}
.modalAddEventTable .duplicate-toggle {
border-bottom: 1px solid rgba(0,0,0,0.5);
color: rgba(0, 0, 0, 0.75);
text-decoration: none;
display: inline-block;
vertical-align: top;
font-size: 15px;
font-family: var(--roboto);
font-weight: 300;
padding-bottom: 1px;
}
.modalAddEventTable .modal-foot {
border-top: none;
border-radius: 0px;
padding: 20px;
}
.modalAddEventTable .modal-foot .modal-btn {
display: inline-block;
vertical-align: top;
margin: 0px 7.5px;
padding: 12px 30px;
font-size: 17px;
font-family: var(--roboto);
font-weight: 600;
background: none;
border: 1px solid transparent;
border-radius: 30px;
color: #000;
cursor: pointer;
transition: background 0.4s, border 0.4s, color 0.4s, opacity 0.4s;
}
.modalAddEventTable .modal-foot .modal-btn:hover {
background: #fafafa;
border: 1px solid #fafafa;
}
.modalAddEventTable .modal-foot .modal-btn.wood {
background: none;
border: 1px solid var(--wood-clr);
}
.modalAddEventTable .modal-foot .modal-btn.wood:hover {
background: var(--wood-clr);
border: 1px solid var(--wood-clr);
}
.modalAddEventTable .modal-foot .modal-btn.grey {
background: none;
border: 1px solid #cfcfcf;
}
.modalAddEventTable .modal-foot .modal-btn.grey:hover {
background: #cfcfcf;
border: 1px solid #cfcfcf;
}
.modalAddEventTable .modal-foot .modal-btn.delete {
background: none;
color: var(--error-clr);
border: 1px solid var(--error-clr);
}
.modalAddEventTable .modal-foot .modal-btn.delete:hover {
background: var(--error-clr);
color: var(--light-clr);
border: 1px solid var(--error-clr);
}
.modalAddEventTable .modal-foot .modal-btn:disabled {
pointer-events: none;
opacity: 0.5;
}
.modalAddEventTable .selectize-control .event-name {
font-family: var(--roboto);
font-weight: 400;
font-size: 16px;
color: #000;
}
.modalAddEventTable .selectize-dropdown .item-box {
background: #fff;
}
.modalAddEventTable .selectize-dropdown .item-box.selected {
background: rgba(var(--wood-rgb), 0.75);
}
.modalAddEventTable .selectize-dropdown .event-name {
font-family: var(--roboto);
font-weight: 400;
font-size: 15px;
line-height: 2.5;
padding-left: 20px;
color: #000;
transition: background 0.4s;
}
.modalAddEventTable .selectize-dropdown .event-name:hover {
background: rgba(var(--wood-rgb), 0.2);
}
/* Modal - New Table Data */
.modalAddEventTable.modal__new-table-data {
max-width: 500px;
padding: 20px;
overflow: hidden;
isolation: isolate;
}
.modalAddEventTable.modal__new-table-data .modal-head {
padding: 20px 20px 0px;
text-align: left;
}
.modalAddEventTable.modal__new-table-data .modal-body {
margin: 0px 40px 0px 0px;
}
.modalAddEventTable.modal__new-table-data .modal-body .form-group {
margin-bottom: 20px;
}
.modalAddEventTable.modal__new-table-data .modal-body .form-control {
padding: 13px 20px;
font-size: 16px;
}
.modalAddEventTable.modal__new-table-data .remove-table-form {
margin-left: 10px;
}
.modalAddEventTable.modal__new-table-data .duplicate-wrap {
text-align: left;
margin-top: 20px;
}
.modalAddEventTable.modal__new-table-data .duplicate-toggle {
border-bottom: none;
padding-bottom: 0px;
}
.modalAddEventTable.modal__new-table-data .modal-foot {
justify-content: flex-end;
}
/* ========== */
/* ========================================
SOUVENIR MANAGEMENT
======================================== */
.sv__body-page .main-body {
overflow: hidden;
}
.sv__container {
font-family: var(--roboto);
display: flex;
flex-grow: 1;
height: 100%;
}
/* sidebar */
.sv__container .sv__sidebar {
max-width: 280px;
flex: 0 0 280px;
box-shadow: 1px 0px 4px 0 rgba(0, 0, 0, 0.05);
background-color: #fff;
display: flex;
flex-direction: column;
}
/* sidebar search */
.sv__sidebar .sv__sidebar__search {
display: flex;
align-items: center;
padding: 10px 16px;
}
.sv__sidebar .sv__sidebar__search .fas {
margin-right: 10px;
}
.sv__sidebar .sv__sidebar__search > input {
width: 100%;
color: #505050;
font-size: 16px;
font-weight: 300;
font-family: var(--roboto);
line-height: 1.8;
border: none;
outline: none;
box-shadow: none;
}
/* sidebar filter */
.sv__sidebar .sv__sidebar__filter {
display: flex;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.sv__sidebar__filter > label {
display: block;
flex-grow: 1;
}
.sv__sidebar__filter input[type="checkbox"] {
display: none;
}
.sv__sidebar__filter .sv__filter-box {
font-size: 14px;
color: #505050;
font-weight: 300;
text-align: center;
padding: 10px 5px;
cursor: pointer;
transition: background 0.2s;
}
.sv__sidebar__filter input[type="checkbox"]:checked + .sv__filter-box {
background: #eeeeee;
}
/* guest list */
.sv__sidebar .sv__accordion {
position: relative;
overflow-y: auto;
}
.sv__accordion .accordion-label {
background: var(--secondary-clr);
padding: 5px 15px;
cursor: pointer;
font-family: var(--roboto);
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
border-top: 1px solid rgba(0, 0, 0, 0.075);
}
.sv__accordion .accordion-label > label {
font-size: 14px;
font-weight: 400;
}
.sv__accordion .accordion-label .toggle-plus {
position: relative;
width: 20px;
height: 20px;
}
.sv__accordion .accordion-item .accordion-label .toggle-plus .toggle-line {
display: block;
width: 20px;
height: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
transform-origin: center;
transition: transform .4s,-webkit-transform .4s;
}
.sv__accordion .accordion-item .accordion-label .toggle-plus .toggle-line.line-01 {
-webkit-transform: translate(-50%,-50%) rotate(0deg);
transform: translate(-50%,-50%) rotate(0deg);
}
.sv__accordion .accordion-item .accordion-label .toggle-plus .toggle-line.line-02 {
-webkit-transform: translate(-50%,-50%) rotate(-90deg);
transform: translate(-50%,-50%) rotate(-90deg);
}
.sv__accordion .accordion-item.show .accordion-label .toggle-plus .toggle-line.line-02 {
-webkit-transform: translate(-50%,-50%) rotate(0deg);
transform: translate(-50%,-50%) rotate(0deg);
}
.sv__sidebar .sv__guest-list {
border-top: 1px solid rgba(0, 0, 0, 0.075);
padding: 7px 20px 7px 40px;
font-family: var(--roboto);
font-weight: 300;
min-height: 52px;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}
.sv__sidebar .sv__guest-list.disabled {
pointer-events: none;
opacity: 0.5;
background-color: #ededed;
}
.sv__guest-list .sv__guest-name {
font-weight: 400;
font-size: 15px;
color: #000;
line-height: 1.37;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sv__guest-list .sv__guest-caption {
font-size: 12px;
display: block;
margin-top: 0.3em;
color: rgba(0, 0, 0, 0.75);
}
.sv__guest-list .sv__guest-check {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 13px;
}
/* wrap */
.sv__container .sv__wrap {
position: relative;
flex-grow: 1;
display: flex;
flex-direction: column;
}
/* toolbar */
.sv__wrap .sv__toolbar {
padding: 20px;
text-align: right;
}
.sv__toolbar .sv__toolbar-link {
position: relative;
background: none;
display: inline-block;
vertical-align: top;
text-decoration: none;
color: var(--primary-clr);
font-family: var(--roboto);
font-weight: 500;
font-size: 14px;
border-radius: 20px;
min-height: 37px;
padding: 9px 18px;
margin: 2.5px;
border: 1px solid rgba(0, 0, 0, 0.5);
transition: color 0.3s, background 0.3s, border 0.3s;
}
.sv__toolbar .sv__toolbar-link.disabled {
pointer-events: none;
opacity: 0.25;
}
.sv__toolbar .sv__toolbar-link:hover {
background: var(--wood-clr);
color: var(--light-clr);
border: 1px solid var(--wood-clr);
}
.sv__toolbar .sv__toolbar-link > svg {
display: inline-block;
vertical-align: top;
width: auto;
height: 17px;
margin-right: 3px;
}
/* empty event table */
.sv__empty {
display: flex;
align-items: flex-end;
position: absolute;
top: 0px;
right: 234px;
}
.sv__empty > h2 {
font-family: var(--parisienne);
font-weight: 400;
font-size: 40px;
width: 320px;
color: var(--wood-clr);
text-align: center;
transform: rotate(-5deg);
transform-origin: center;
}
.sv__empty > svg {
transform: scaleX(-1);
display: block;
margin-left: 20px;
margin-bottom: 90px;
}
.sv__empty > svg > g {
stroke: var(--wood-clr);
}
/* content */
.sv__wrap .sv__content {
padding: 20px;
position: relative;
overflow-y: auto;
flex-grow: 1;
}
/* box */
.sv__content .sv__box {
padding: 20px;
display: grid;
grid-template-columns: auto 1fr;
background-color: #fefefe;
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 12px;
margin-bottom: 30px;
}
/* graph */
.sv__box .sv__graph {
width: 150px;
margin-right: 20px;
position: relative;
}
.sv__graph .sv__canvas {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px!important;
height: 100px!important;
}
.sv__graph .sv__graph-data {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.sv__graph .sv__graph-count {
font-weight: 300;
font-size: 15px;
}
/* data */
.sv__box .sv__data {
position: relative;
}
/* header */
.sv__data .sv__data__header {
padding: 10px 0px;
display: flex;
align-items: center;
justify-content: space-between;
}
.sv__data .sv__data__header-title {
font-size: 21px;
font-weight: 400;
}
.sv__data .sv__data__header-setting-button {
display: inline-block;
vertical-align: top;
text-decoration: none;
padding: 4px;
border-radius: 4px;
background: none;
border: none;
outline: none;
color: #000;
}
.sv__data .sv__data__header-setting-button > svg {
display: block;
}
/* content */
.sv__data .sv__data__content {
padding: 10px 0px;
}
/* member */
.sv__data .sv__members {
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-direction: column;
flex-wrap: wrap;
min-height: 166.2px;
max-height: 166.2px;
}
.sv__members .sv__member {
background: none;
width: 33%;
display: flex;
align-items: center;
padding: 8px 12px;
margin-bottom: 5px;
border-radius: 3px;
position: relative;
font-weight: 300;
}
.sv__members .sv__member:hover {
background: #f9f9f9;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.1);
}
.sv__member .sv__member-number {
color: #505050;
font-size: 13px;
margin-right: 8px;
display: inline-block;
vertical-align: top;
}
.sv__member .sv__member-name {
flex-grow: 1;
color: #505050;
font-size: 15px;
line-height: 1.37;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sv__member .sv__member__delete-button {
cursor: pointer;
margin-left: auto;
display: block;
color: #505050;
text-decoration: none;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s;
}
.sv__member .sv__member__delete-button > svg {
display: block;
height: 20px;
width: auto;
}
.sv__member:hover .sv__member__delete-button {
opacity: 1;
pointer-events: visible;
}
/* footer */
.sv__data .sv__data__footer {
padding: 10px 0px;
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
/* search */
.sv__data .sv__search {
width: 100%;
visibility: hidden;
position: relative;
}
.sv__box:hover .sv__data .sv__search,
.sv__data .sv__search.active {
visibility: visible;
}
.sv__data .sv__search-input {
width: 100%;
max-width: 200px;
line-height: 1.8;
background: none;
outline: none;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 5px;
padding: 3px 16px;
font-size: 14px;
transition: max-width 0.3s, border 0.3s;
}
.sv__search.active .sv__search-input {
max-width: 240px;
border: 1px solid rgba(var(--wood-rgb), 0.75);
}
/* search result */
.sv__search .sv__search-result {
background: #fff;
position: absolute;
z-index: 10;
left: 0;
top: 100%;
width: 100%;
max-width: 250px;
max-height: 350px;
margin-top: 10px;
padding: 7px 0px;
overflow-y: auto;
overflow-x: hidden;
box-shadow: -2px 2px 15px rgba(0, 0, 0, 0.1);
}
.sv__search-result .sv__search__guest {
font-family: var(--roboto);
font-weight: 300;
cursor: pointer;
padding: 10px 20px;
transition: background 0.2s;
}
.sv__search-result .sv__search__guest.disabled {
opacity: 0.5;
pointer-events: none;
}
.sv__search-result .sv__search__guest:hover {
background: rgba(0, 0, 0, 0.05);
}
.sv__search__guest .sv__search__guest-name {
color: #000;
font-size: 15px;
line-height: 1.37;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sv__search__guest .sv__search__guest-desc {
font-size: 13px;
color: rgba(0, 0, 0, 0.5);
}
.sv__search-result .sv__search__no-guest {
text-align: center;
font-size: 18px;
font-weight: 400;
padding: 10px 20px;
color: #B22222;
}
.sv__search-result .sv__search-separator {
background: var(--secondary-clr);
font-size: 13px;
font-weight: 300;
padding: 5px 15px;
}
/* page */
.sv__data .sv__page {
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
opacity: 0;
}
.sv__data .sv__page.active {
pointer-events: visible;
opacity: 1;
}
.sv__page .sv__page__button {
border: none;
outline: none;
box-shadow: none;
background: none;
padding: 0px;
cursor: pointer;
}
.sv__page .sv__page__button.disabled,
.sv__page .sv__page__button:disabled {
pointer-events: none;
opacity: 0.08;
}
.sv__page .sv__page__button > svg {
display: block;
width: auto;
height: 20px;
}
.sv__page .sv__page__button.prev > svg {
transform: scaleX(-1);
}
.sv__page .sv__page__button > svg > path {
fill: var(--primary-clr);
}
.sv__page .sv__page__button:hover > svg > path {
fill: var(--wood-clr);
}
.sv__page .sv__page__number {
font-size: 12px;
font-weight: 300;
margin: 0px 5px;
}
/* souvenir modal */
.sv__modal {
width: 100%;
max-width: 500px;
padding: 20px;
overflow: hidden;
isolation: isolate;
border-radius: 7px;
}
/* modal head */
.sv__modal .modal-head {
border-bottom: none;
border-radius: 0px;
padding: 20px 20px 0px;
text-align: left;
}
.sv__modal.sv__modal-deletion .modal-head {
padding: 20px;
}
.sv__modal .modal-title {
font-family: var(--butler-bold);
font-weight: normal;
font-size: 30px;
line-height: normal;
letter-spacing: normal;
color: #000;
}
.sv__modal .modal-caption {
font-family: var(--roboto);
font-weight: 400;
font-size: 17px;
margin-top: 12px;
padding-right: 0px;
}
/* modal body */
.sv__modal .modal-body {
width: 100%;
padding: 20px;
margin: 0px 40px 0px 0px;
}
.sv__modal .double-input {
width: 100%;
max-width: 390px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 0.7em;
position: relative;
}
.sv__modal .modal-body .form-group {
margin-bottom: 20px;
}
.sv__modal .modal-body .form-control {
padding: 13px 20px;
font-size: 16px;
}
.sv__modal .detach-souvenir {
position: absolute;
bottom: 13px;
left: 100%;
margin-left: 10px;
display: block;
text-decoration: none;
color: #000;
opacity: 0.25;
transition: opacity 0.4s;
}
.sv__modal .detach-souvenir:hover {
opacity: 0.75;
}
.sv__modal .detach-souvenir > svg {
display: block;
width: auto;
height: 20px;
}
.sv__modal .detach-souvenir > svg > path {
stroke: #000;
}
.sv__modal .duplicate-wrap {
text-align: left;
margin-top: 20px;
}
.sv__modal .duplicate-toggle {
color: rgba(0, 0, 0, 0.75);
text-decoration: none;
display: inline-block;
vertical-align: top;
font-size: 15px;
font-family: var(--roboto);
font-weight: 300;
border-bottom: none;
padding-bottom: 0px;
}
/* foot */
.sv__modal .modal-foot {
border-top: none;
border-radius: 0px;
padding: 20px;
justify-content: flex-end;
}
.sv__modal .modal-foot .modal-btn {
display: inline-block;
vertical-align: top;
margin: 0px 0px 0px 15px;
padding: 12px 30px;
font-size: 17px;
font-family: var(--roboto);
font-weight: 600;
background: none;
border: 1px solid transparent;
border-radius: 30px;
color: #000;
cursor: pointer;
transition: background 0.4s, border 0.4s, color 0.4s, opacity 0.4s;
}
.sv__modal .modal-foot .modal-btn:hover {
background: #fafafa;
border: 1px solid #fafafa;
}
.sv__modal .modal-foot .modal-btn.wood {
background: none;
border: 1px solid var(--wood-clr);
}
.sv__modal .modal-foot .modal-btn.wood:hover {
background: var(--wood-clr);
border: 1px solid var(--wood-clr);
}
.sv__modal .modal-foot .modal-btn.grey {
background: none;
border: 1px solid #cfcfcf;
}
.sv__modal .modal-foot .modal-btn.grey:hover {
background: #cfcfcf;
border: 1px solid #cfcfcf;
}
.sv__modal .modal-foot .modal-btn.delete {
background: none;
color: var(--error-clr);
border: 1px solid var(--error-clr);
}
.sv__modal .modal-foot .modal-btn.delete:hover {
background: var(--error-clr);
color: var(--light-clr);
border: 1px solid var(--error-clr);
}
.sv__modal .modal-foot .modal-btn:disabled {
pointer-events: none;
opacity: 0.5;
}
@media (max-width: 1024px) {
.sv__container .sv__sidebar {
display: none;
}
}
@media (max-width: 600px) {
.sv__content .sv__box {
display: flex;
flex-direction: column;
}
.sv__box .sv__graph {
width: 100%;
height: 150px;
margin-bottom: 20px;
}
.sv__box .sv__data {
width: 100%;
}
.sv__graph .sv__canvas {
width: 150px!important;
height: 150px!important;
}
}
/* ========================================
E Invitation Management
======================================== */
/* Display */
.einvitation__display {
display: flex;
flex-wrap: wrap;
padding: 20px;
}
.einvitation__display > .form-label-lg {
flex-basis: 100%;
flex-grow: 1;
width: 100%;
}
@media (max-width: 720px) {
.einvitation__display {
padding: 20px 20px 50px;
}
}
@media (max-width: 375px) {
.einvitation__display {
padding: 20px;
}
}
/* Download */
.einvitation__download {
display: flex;
flex-wrap: wrap;
padding: 20px;
}
.einvitation__download > .form-label-lg {
flex-basis: 100%;
flex-grow: 1;
width: 100%;
}
/* ========================================
Filter Guest
======================================== */
.filter-guest {
outline: none;
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: center;
padding: 12px 16px;
gap: 8px;
/* Transition */
transition: 0.5s;
position: relative;
margin-left: auto;
margin-bottom: 10px;
}
.filter-guest svg {
display: block;
height: 20px;
width: 20px;
}
.filter-badge {
position: absolute;
top: -8px;
right: -3px;
background: #F4D24C;
color: #000;
font-weight: 500;
font-size: 12px;
/* display: none; */
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 22px;
min-height: 22px;
border-radius: 50%;
}
.filter-badge.show {
display: flex;
}
.reset {
display: flex;
align-items: center;
justify-content: flex-end;
}
.reset button {
outline: none;
border: none;
border-bottom: 1px solid transparent;
padding: 10px 16px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background: transparent;
font-family: var(--montserrat);
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 20px;
letter-spacing: -0.006em;
color: #757575;
transition: 0.5s, width 0.1s;
}
.reset button:hover {
border-bottom: 1px solid #d9b680;
cursor: pointer;
}
/* Flex Radio Button */
.flex-radio-button {
display: flex;
align-items: center;
gap: 12px;
}
.flex-radio-button.flex-wrap {
flex-wrap: wrap;
}
.flex-radio-button .radio-button {
display: block;
width: auto;
flex-basis: calc(32% - 5px);
}
.flex-radio-button .radio-button input {
display: none;
}
.flex-radio-button .radio-button .radio-label {
font-family: var(--montserrat);
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 20px;
letter-spacing: -0.006em;
color: #757575;
cursor: pointer;
display: flex;
align-items: center;
}
.flex-radio-button .radio-button .radio-label .dot {
position: relative;
display: inline-block;
vertical-align: top;
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid #EB2F59;
background: #fff;
margin-right: 6px;
flex-shrink: 0;
}
.flex-radio-button .radio-button .radio-label .dot.square {
border-color: #C2C2C2;
border-radius: 4px;
}
.flex-radio-button .radio-button input:checked + .radio-label .dot.square {
border-color: #EB2F59;
}
.flex-radio-button .radio-button .radio-label .dot::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #EB2F59;
width: 12px;
height: 12px;
border-radius: 50%;
opacity: 0;
transition: opacity .15s ease-in-out;
}
.flex-radio-button .radio-button .radio-label .dot.square::before {
border-radius: 3px;
}
.flex-radio-button .radio-button input:checked + .radio-label .dot::before {
opacity: 1;
}
/* Modal Filter Guest - Select */
.modal-filter-guest .select-options {
-webkit-appearance: none;
appearance: none;
outline: none;
border: none;
padding: 10px 16px;
width: 100%;
height: 40px;
background: #FFFFFF;
border: 1px solid #EDEDED;
border-radius: 25px;
/* Text */
font-family: var(--montserrat);
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 20px;
letter-spacing: -0.006em;
color: #757575;
}
.modal-filter-guest .select-options {
/* arrow */
background: url("data:image/svg+xml,") no-repeat;
background-position: calc(100% - 16px) center;
background-size: 12px;
}
.modal-form-input .select-options:focus {
background: url("data:image/svg+xml,") no-repeat;
background-position: calc(100% - 16px) center;
background-size: 12px;
}
/* margin form group and label */
.modal-filter-guest {
width: 100%;
max-width: 420px;
}
.modal-filter-guest .form-group {
margin-bottom: 1rem;
}
.modal-filter-guest .form-group.mb-0 {
margin-bottom: 0;
}
.modal-filter-guest .form-label {
margin-bottom: 12px;
}
/* ========================================
Head Table
======================================== */
.head-table-title {
display: flex;
justify-content: space-between;
align-items: center;
}
.head-table-title .sort-checked {
font-size: 15px;
font-weight: 500;
margin-left: 10px;
}
/* ========================================
SOON
======================================== */
.soon .soon-outer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 10;
}
.soon .soon-outer::before {
content: '';
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.75);
}
.soon .soon-outer .soon-inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
width: 100%;
height: 100%;
}
.soon .soon-outer .soon-inner i {
font-size: 30px;
color: var(--wood-clr);
margin-bottom: 10px;
}
.soon .soon-outer .soon-inner .title-01 {
font-family: "Bebas Neue";
letter-spacing: 3px;
font-size: 40px;
line-height: 36px;
font-weight: 500;
color: var(--wood-clr);
}
/* FOOT */
.foot {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
padding: 10px;
margin-top: auto;
/* background-color: mediumpurple; */
}
.foot>div {
position: relative;
font-size: 14px;
color: var(--primary-clr);
margin: 10px 0;
}
.foot>div::after {
content: '\00b7';
position: relative;
margin: 0 10px;
}
.foot>div:last-child:after {
content: none;
}
.foot div a {
font-size: 14px;
text-decoration: none;
color: var(--primary-clr);
}
.foot div a:hover {
text-decoration: underline;
}
@media only screen and (max-width: 425px) {
.foot {
display: flex;
align-items: center;
justify-content: center;
padding: 0.5em;
/* Edited */
margin-top: auto;
/* background-color: mediumpurple; */
}
.foot>div {
position: relative;
font-size: 13px;
/* Edited */
color: var(--primary-clr);
margin: 0.3em 0;
/* Edited */
width: 100%;
text-align: center;
/* background-color: ivory; */
}
.foot>div:nth-child(even) {
/* background-color: khaki; */
}
.foot>div::after {
content: '';
/* Edited */
position: relative;
margin: 0;
/* Edited */
}
.foot>div:last-child:after {
content: none;
}
.foot div a {
font-size: 13px;
/* Edited */
text-decoration: none;
color: var(--primary-clr);
}
.foot div a:hover {
text-decoration: underline;
}
}
/* SVG HOME */
svg.home {
transition: all 0.2s ease-in-out;
width: 38px;
height: auto;
}
svg.home .cls-1,
svg.home .cls-4,
svg.home .cls-5,
svg.home .cls-6 {
fill: none;
stroke: var(--wood-clr);
}
svg.home .cls-1 {
stroke-width: 12px;
}
svg.home .cls-1,
svg.home .cls-2,
svg.home .cls-3,
svg.home .cls-4,
svg.home .cls-5,
svg.home .cls-6 {
fill-rule: evenodd;
}
svg.home .cls-2 {
fill: var(--wood-clr);
}
svg.home .cls-3 {
fill: #fff;
}
svg.home .cls-4,
svg.home .cls-5,
svg.home .cls-6 {
stroke-linecap: round;
stroke-linejoin: round;
}
svg.home .cls-4 {
stroke-width: 15px;
}
svg.home .cls-5 {
stroke-width: 16px;
}
svg.home .cls-6 {
stroke-width: 8px;
}
svg.home:hover .cls-1,
svg.home:hover .cls-4,
svg.home:hover .cls-5,
svg.home:hover .cls-6 {
fill: none;
stroke: var(--primary-clr);
}
svg.home:hover .cls-2 {
fill: var(--primary-clr);
}
/* FLOAT BUTTON */
.floating-btn {
position: fixed;
bottom: 40px;
right: 40px;
display: flex;
align-items: flex-end;
justify-content: center;
flex-direction: column;
z-index: 999;
}
.floating-btn .wa-btn {
padding: 10px 15px;
border-radius: 16px;
background: var(--primary-clr);
position: relative;
text-decoration: none;
color: var(--white-clr);
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.25s ease-in-out;
}
.floating-btn .wa-btn>span {
opacity: 1;
color: var(--white-clr);
transition: all 0.5s ease-in-out;
}
.floating-btn .wa-btn i {
font-size: 26px;
color: var(--light-clr);
margin-right: 10px;
}
@media only screen and (max-width: 425px) {
/* FLOAT BUTTON */
.floating-btn {
position: fixed;
bottom: 15px;
/* Edited */
right: 15px;
/* Edited */
display: flex;
align-items: flex-end;
justify-content: center;
flex-direction: column;
z-index: 999;
/* visibility: hidden; */
}
.floating-btn .wa-btn {
padding: 0.5em 1em;
/* Edited */
border-radius: 12px;
/* Edited */
background: var(--primary-clr);
position: relative;
text-decoration: none;
color: var(--white-clr);
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.25s ease-in-out;
}
.floating-btn .wa-btn>span {
opacity: 1;
color: var(--white-clr);
transition: all 0.5s ease-in-out;
font-size: 14px;
/* Edited */
}
.floating-btn .wa-btn i {
font-size: 20px;
/* Edited */
color: var(--light-clr);
margin-right: 10px;
}
}
.modal .btn {
font-weight: normal;
}