.dw-jadwal-shalat {
width: 400px;
max-width: 100%;
background-image: var(--dwjs-background);
background-position: var(--dwjs-position);
background-size: cover;
border-radius: 1em;
box-shadow: 0 10px 15px -5px var(--dwjs-shadow-color);
font-size: small;
position: relative;
}
.dw-jadwal-shalat .data-wrapper {
padding: 1em;
background: var(--dwjs-foreground-gradient);
border-radius: 1em;
}
.dw-jadwal-shalat .data-wrapper .dwjs-kota {
font-size: 12px;
color: var(--dwjs-general-color);
font-weight: 600;
text-align: center;
margin: 1em 0;
}
.jadwal-card {
background-color: #33333390;
border-radius: .5em;
padding: .5em 1em;
display: flex;
align-items: center;
margin-top: 5px;
gap: 1em;
}
.jadwal-card > i {
font-size: 20px;
color: var(--dwjs-accent-color);
padding: 10px;
}
.jadwal-card .jadwal-inner-card {
display: flex;
width: 100%;
justify-content: space-between;
}
.jadwal-card .jadwal-inner-card p {
margin: 0;
color: var(--dwjs-accent-color);
}
.jadwal-card .jadwal-inner-card p:last-child {
float: right;
font-weight: 600;
}
.jadwal-card.fardhu > i {
color: var(--dwjs-general-color);
}
.jadwal-card.fardhu .jadwal-inner-card p{
color: var(--dwjs-general-color);
}
.jadwal-card.coming {
border: 2px solid var(--dwjs-accent-color);
box-shadow: 0 0 10px var(--dwjs-accent-color);
}
.dwjs-time-now {
display: flex;
justify-content: center;
flex-direction: column;
}
#dwjs_time_now {
font-size: 36px;
text-align: center;
font-weight: 600;
color: var(--dwjs-clock-color);
line-height: 30px;
margin-top: 20px;
margin-bottom: 10px;
}
.the_time_now {
text-shadow: 3px 3px 5px #333333;
}
.the_date_now {
font-size: 14px;
text-align: center;
font-weight: 600;
color: var(--dwjs-clock-color);
line-height: 14px;
margin-bottom: 20px;
}
span#dwjs_date_now:not(.hijriah) {
margin-bottom: 0.25em;
}
span.select2-selection.select2-selection--single {
padding: 6px;
height: 40px;
border-radius: .5em;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
top: 6px;
}
.select2-container--default .select2-selection--single .select2-selection__clear { display: none;
}
.select2-dropdown.select2-dropdown--below {
border-bottom-left-radius: .5em!important;
border-bottom-right-radius: .5em!important;
}
.select2-dropdown.select2-dropdown--above {
border-top-left-radius: .5em!important;
border-top-right-radius: .5em!important;
}
li.select2-results__option.select2-results__message {
font-size: 12px;
}
input.select2-search__field {
border-radius: 5px;
padding: 8px!important;
height: 36px;
} .dw-jadwal-shalat.horizontal {
width: 100%;
max-width: 100%;
}
.jadwal-card.coming {
border: 2px solid var(--dwjs-accent-color);
box-shadow: 0 0 10px var(--dwjs-accent-color);
}
.dw-jadwal-shalat.horizontal .data-wrapper .dwjs-header {
display: flex;
gap: 7em;
justify-content: space-between;
align-items: center;
}
.dw-jadwal-shalat.horizontal .data-wrapper .dwjs-header .dwjs-time-now {
width: 100%;
}
.dw-jadwal-shalat.horizontal .data-wrapper .data-response .dwjs-kota {
text-align: right;
}
.dw-jadwal-shalat.horizontal .data-wrapper .data-response .grid-jadwal-shalat {
display: grid;
grid-template-columns: var(--dwjs-grid);
gap: 1em;
}
.dw-jadwal-shalat.horizontal .data-wrapper .data-response .jadwal-inner-card {
flex-direction: column-reverse;
}
.dw-jadwal-shalat.horizontal .data-wrapper .data-response .jadwal-card p:last-child {
font-size: large;
font-weight: bold;
}
.dw-jadwal-shalat.horizontal .data-wrapper .data-response .jadwal-card p:first-child {
font-size: smaller;
}
.dw-jadwal-shalat.horizontal .data-wrapper .data-response .jadwal-inner-card {
justify-content: center;
align-items: center;
}
.dw-jadwal-shalat.horizontal .data-wrapper .data-response .jadwal-card {
flex-direction: column;
gap: 0;
}
.dw-jadwal-shalat.horizontal .data-wrapper .data-response .jadwal-card i {
height: 36px;
}
.dw-jadwal-shalat.horizontal .data-wrapper .data-response {
margin-top: -3em;
}
.dw-jadwal-shalat.horizontal .data-wrapper .dwjs-header span {
margin-bottom: 1em;
}
.dw-jadwal-shalat.horizontal .wifi-loader {
grid-column-start: 4;
grid-column-end: 6;
}
@media only screen and (min-width: 1025px){
.dw-jadwal-shalat.horizontal .data-wrapper .dwjs-header {
flex-direction: column;
justify-content: flex-start;
align-items: start;
gap: 0em;
}
.dw-jadwal-shalat.horizontal .data-wrapper .dwjs-header .dwjs-time-now {
text-align: left;
}
.dw-jadwal-shalat.horizontal .data-wrapper {
display: grid;
grid-template-columns: 25% 70%;
gap: 5%;
align-items: end;
}
.dw-jadwal-shalat.horizontal .data-wrapper .dwjs-header span {
margin-bottom: 0;
}
h1#dwjs_time_now {
width: 100%;
}
}
@media only screen and (max-width: 768px){
.dw-jadwal-shalat.horizontal .data-wrapper .data-response .grid-jadwal-shalat {
width: 100%;
overflow-x: scroll;
padding-bottom: 1em;
}
.dw-jadwal-shalat.horizontal .data-wrapper .dwjs-header {
flex-direction: column;
gap: 0;
margin-bottom: 2em;
}
.dw-jadwal-shalat.horizontal .data-wrapper .dwjs-header .dwjs-time-now {
width: 100%;
}
.dw-jadwal-shalat.horizontal .data-wrapper .data-response .dwjs-kota {
text-align: center;
}
.dw-jadwal-shalat.horizontal .data-wrapper .data-response .grid-jadwal-shalat {
gap: 1.25em;
}
} .wifi-loader {
--background: var(--dwjs-accent-color);
--front-color: var(--dwjs-accent-color);
--back-color: #c3c8de;
--text-color: #414856;
height: 64px;
border-radius: 50px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin-top: 50px;
margin-bottom: 50px;
}
.wifi-loader svg {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
.wifi-loader svg circle {
position: absolute;
fill: none;
stroke-width: 6px;
stroke-linecap: round;
stroke-linejoin: round;
transform: rotate(-100deg);
transform-origin: center;
}
.wifi-loader svg circle.back {
stroke: var(--back-color);
}
.wifi-loader svg circle.front {
stroke: var(--front-color);
}
.wifi-loader svg.circle-outer {
height: 86px;
width: 86px;
}
.wifi-loader svg.circle-outer circle {
stroke-dasharray: 62.75 188.25;
}
.wifi-loader svg.circle-outer circle.back {
animation: circle-outer135 1.8s ease infinite 0.3s;
}
.wifi-loader svg.circle-outer circle.front {
animation: circle-outer135 1.8s ease infinite 0.15s;
}
.wifi-loader svg.circle-middle {
height: 60px;
width: 60px;
}
.wifi-loader svg.circle-middle circle {
stroke-dasharray: 42.5 127.5;
}
.wifi-loader svg.circle-middle circle.back {
animation: circle-middle6123 1.8s ease infinite 0.25s;
}
.wifi-loader svg.circle-middle circle.front {
animation: circle-middle6123 1.8s ease infinite 0.1s;
}
.wifi-loader svg.circle-inner {
height: 34px;
width: 34px;
}
.wifi-loader svg.circle-inner circle {
stroke-dasharray: 22 66;
}
.wifi-loader svg.circle-inner circle.back {
animation: circle-inner162 1.8s ease infinite 0.2s;
}
.wifi-loader svg.circle-inner circle.front {
animation: circle-inner162 1.8s ease infinite 0.05s;
}
.wifi-loader .text {
position: absolute;
bottom: -40px;
display: flex;
justify-content: center;
align-items: center;
text-transform: lowercase;
font-weight: 500;
font-size: 14px;
letter-spacing: 0.2px;
}
.wifi-loader .text::before, .wifi-loader .text::after {
content: attr(data-text);
}
.wifi-loader .text::before {
color: var(--text-color);
}
.wifi-loader .text::after {
color: var(--front-color);
animation: text-animation76 3.6s ease infinite;
position: absolute;
left: 0;
}
@keyframes circle-outer135 {
0% {
stroke-dashoffset: 25;
}
25% {
stroke-dashoffset: 0;
}
65% {
stroke-dashoffset: 301;
}
80% {
stroke-dashoffset: 276;
}
100% {
stroke-dashoffset: 276;
}
}
@keyframes circle-middle6123 {
0% {
stroke-dashoffset: 17;
}
25% {
stroke-dashoffset: 0;
}
65% {
stroke-dashoffset: 204;
}
80% {
stroke-dashoffset: 187;
}
100% {
stroke-dashoffset: 187;
}
}
@keyframes circle-inner162 {
0% {
stroke-dashoffset: 9;
}
25% {
stroke-dashoffset: 0;
}
65% {
stroke-dashoffset: 106;
}
80% {
stroke-dashoffset: 97;
}
100% {
stroke-dashoffset: 97;
}
}
@keyframes text-animation76 {
0% {
clip-path: inset(0 100% 0 0);
}
50% {
clip-path: inset(0);
}
100% {
clip-path: inset(0 0 0 100%);
}
}
.dw-jadwal-shalat-kalendar th, .dw-jadwal-shalat-kalendar td { vertical-align: middle!important;
text-align: center;
} 
button[name=refresh] {
border-radius: .5em;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
padding-left: 1em;
padding-right: 1em;
}
table#tabel-jadwal-shalat tbody tr:hover {
background-color: #ccc;
}
.dw-jadwal-shalat-kalendar input.form-control.search-input {
height: 40px;
}
span.jadwal-icon {
display: flex;
flex-direction: column;
}
span.jadwal-icon i {
height: 2em;
font-size: 1.5em;
margin-bottom: -10px;
}