/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
* {
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}

body {
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
    background-color:#A7A7A7;
    /*background-image:linear-gradient(to bottom, #A7A7A7 0%, #E4E4E4 51%);*/
    font-family: system-ui, -apple-system, -apple-system-font, 'Segoe UI', 'Roboto', sans-serif;
    font-size:12px;
    height:100vh;
    margin:0px;
    padding:0px;
    /* Padding to avoid the "unsafe" areas behind notches in the screen */
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    
    width:100%;
}

/* Portrait layout (default) */
.app {
    background:url(../img/logo.png) no-repeat center top; /* 170px x 200px */
    position:absolute;             /* position in the center of the screen */
    left:50%;
    top:50%;
    height:50px;                   /* text area height */
    width:225px;                   /* text area width */
    text-align:center;
    padding:180px 0px 0px 0px;     /* image height is 200px (bottom 20px are overlapped with text) */
    margin:-115px 0px 0px -112px;  /* offset vertical: half of image height and text area height */
                                   /* offset horizontal: half of text area width */
}

/* Landscape layout (with min-width) */
@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
    .app {
        background-position:left center;
        padding:75px 0px 75px 170px;  /* padding-top + padding-bottom + text area = image height */
        margin:-90px 0px 0px -198px;  /* offset vertical: half of image height */
                                      /* offset horizontal: half of image width and text area width */
    }
}

h1 {
    font-size:24px;
    font-weight:normal;
    margin:0px;
    overflow:visible;
    padding:0px;
    text-align:center;
}

.event {
    border-radius:4px;
    color:#FFFFFF;
    font-size:12px;
    margin:0px 30px;
    padding:2px 0px;
}

.event.listening {
    background-color:#333333;
    display:block;
}

.event.received {
    background-color:#4B946A;
    display:none;
}

#deviceready.ready .event.listening { display: none; }
#deviceready.ready .event.received { display: block; }

@keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: 0.4; }
    to { opacity: 1.0; }
}

.blink {
    animation:fade 3000ms infinite;
    -webkit-animation:fade 3000ms infinite;
}


@media screen and (prefers-color-scheme: dark) {
    body {
        background-image:linear-gradient(to bottom, #585858 0%, #1B1B1B 51%);
    }
}
#src_cari {

  }
  #src_cari li { width: 100%; list-style-type:none; display:inline-block;}

  #datacontent { width:100%; overflow:auto;}
  #datacontent ul { padding:5; margin:0; white-space:nowrap; }
  #datacontent li { width: 100%; list-style-type:none; display:inline-block; text-decoration:inherit;}
  #datacontent li label{ width: 100%;}
  #datacontent span{
      font-size: 11px;
      color: green;
      vertical-align: text-top;
      padding-right: 5px;
  }
  /*label{width:150px; display:inline-block}*/
  #datacontent input[type="checkbox"]:checked+label{background:#0086bf; color:white; padding: 0 5px;}​ 
  #datacontent input[type="checkbox"]:checked+label span { 
      color: #ffe700;
  }
  .btn_kitabsrc {
    font-weight: 700; 
    display: inline-block;
} 
.btn_kitabsrc span{
  display: inline-block;
    padding:0 10px;
    text-decoration:none;
}
.form-control {
    font-size: 16px;
    text-align: center;
}
.form-control:focus {
    border-color: #5cb85c;
}
.form-control, .btn {
    border-radius: 50px;
    outline: none !important;
}
form.cariin input[type=text] {
  padding: 10px;
  font-size: 17px;
  border: 1px solid grey;
  float: left;
  width: 80%;
  background: #f1f1f1;
}

form.cariin button {
  float: left;
  width: 20%;
  padding: 10px;
  background: #2196F3;
  color: white;
  font-size: 17px;
  border: 1px solid grey;
  border-left: none;
  cursor: pointer;
}

form.cariin button:hover {
  background: #0b7dda;
}

form.cariin::after {
  content: "";
  clear: both;
  display: table;
}
.scroll{
    overflow-y: auto;
    overflow-x:none;
    padding: 0px 10px;
    margin: 0px;
    width:100%;
    height:87vh; 
}
/*.scroll ul { width: 100%; padding:5; margin:0; white-space:nowrap; }
   label{width:150px; display:inline-block}*/
   #src_lastread{
    width: 100%; list-style-type:none;
   }
   .scroll li { width: 100%; list-style-type:none;  text-decoration:inherit; position: relative; padding-right: 0px;}
  .scroll li label{width: 100%; text-align: justify;}
  /*.scroll li div{display:inline;}*/
  .scroll span{
      font-size: 11px;
      color: green;
      vertical-align: text-top;
      padding-right: 5px; 
      
  }
  .scroll span a{ 
    font-size: 14px;
      padding:0px 5px; 
  }
  .scroll li input[type="checkbox"]:checked+label{background:#0086bf; color:white; padding-right: 40px;}​ 
  .scroll li input[type="checkbox"]:checked+label span { 
      color: #ffe700;
  }
.a_right{
display: inline-block;
position: absolute;
right: 0;
top: 0;
margin:0 5px;
}
.a_right a{
  margin: 0 2px;
}

  .aa-cartbox-summary { 
    color: #fff;
  display: none;
  border: 1px solid #ccc;
  padding: 15px 10px;
  position: absolute;
  right: 0;
  top: 100%;
  width: 250px; 
  z-index: 9999999;
font-size: 13px;
text-align: left;
}
 
.aa-cartbox-summary a{ 
    display: inline-block;
  width: 100%;
  text-align: left;
  position: relative; 
  color: #fff;
}
.aa-cartbox-summary a:hover{  
  color: yellow;
}

  .menubar { 
    color: #fff;
  display: none;
  border: 1px solid #ccc;
  padding: 15px 10px;
  position: absolute;
  right: 0;
  top: 100%;
  width: 100%; 
  height: 100%;
  z-index: 9999999;
font-size: 13px;
text-align: left;
opacity: 0.8;
}
 .menubar #menubarlist {
  width: 100%;
}
.menubar #menubarlist li{
  width: 100%;
  padding: 5px 0;
}

 #modal_load {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999999999;
  background-color: #fff;
}
#modal_load .loading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  font: 14px arial;
}
.modal-xl{
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  
  .modal-xl .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
 
.modal-body {
    /* 100% = dialog height, 120px = header + footer */
    max-height: calc(100% - 120px);
    overflow-y: scroll; 
    /*margin: 0;
    padding: 0;*/
}
 
.modal-body textarea{
  height: 70vh;
  max-height: 70vh;
  display: block; 
  overflow: auto; 
  margin-bottom:0px;
  width:100%;
  padding:0px;
  padding-bottom:0px
}

#cont_modal {
    width: 100%;
    height: 100%;
    position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
    display:none;
    z-index:9999999999;
    background-color: rgba(22,22,22,0.5);
}

#cont_modal:target {
    visibility: visible;
    display: block;
}
.reveal-modal {
    background:#e1e1e1; 
    margin: 0 auto;
    width:75%; 
    position:relative;
    top: 5%;
    padding:30px 5px 5px; 
    -webkit-box-shadow:0 0 10px rgba(0,0,0,0.4);
    -moz-box-shadow:0 0 10px rgba(0,0,0,0.4); 
    box-shadow:0 0 10px rgba(0,0,0,0.4);
}
.reveal-modal .close-reveal-modal{
  position: absolute;
  right: 0px;
  top: 0px;
  padding: 0.25vh 0.75vh;
  border: 2px solid #ccc;
  font-weight: bold;
}
#datareveal{
  width: 100%;
  overflow: auto;
  padding: 0 1vh;
  height: 50%;
  max-height: 350px;
}