#toTop {
     width:50px;
     height:50px;
     position:fixed;
     bottom:20px;
     right:60px;
     cursor:pointer;
     display:none;
     z-index:999;
     background: url(../../../images/frontend/2/totopoff.png) center center no-repeat;
     border:none;
}



body {
     color: #333;
     font-family: 'Open Sans', sans-serif;
     padding:0px;
     margin:0px;
     font-size:15px;
}

h1 {
     text-transform:uppercase;
     margin:0px;
     font-size: 13px;
     letter-spacing: 1px;
     font-weight: 300;
}
h2 {
     margin:0px 0px 10px 0px;
     font-family: 'Roboto Slab', serif;
     color: #A90000;
}


.background-1 {
     background: rgb(250, 246, 15);
     background: linear-gradient(76deg, rgba(250, 246, 15, 1) 0%, rgba(255, 192, 0, 1) 25%, rgba(255, 192, 0, 1) 75%, rgba(250, 246, 15, 1) 100%);
 }

.background-2 {
     background: rgb(0, 0, 0);
     background: linear-gradient(0deg, rgba(0, 0, 0, 1) 39%, rgba(77, 74, 74, 1) 79%);
 }

 .background-attachment-fixed {
     background-attachment: fixed;
 }

 .label-judul {
     color: #C00000;
     font-weight: bold;
     font-size: 18px;
 }
 

 



.pad7 {
     padding: 30px 0px;
}

.pad8 {
     padding: 60px 0px;
}

.pad9 {
     padding: 90px 0px;
}

.gap10 {
     grid-gap: 10px;
}

.gap20 {
     grid-gap: 20px;
}

.gap30 {
     grid-gap: 30px;
}

.head {
     font-size: 25px;
     font-weight: bold;
     text-transform: uppercase;
     text-align: center;

     background:url(../../../images/frontend/2/head.png) bottom center no-repeat;
     padding-bottom: 10px;
     margin-top: 20px;
}


/* ============  search =============== */
#pencarian-nomor {
     grid-template-columns: 2fr 2fr 1fr;
}

#pencarian-nomor input[type=text],#pencarian-nomor select {
     border: 1px solid black;
     width: 100%;
     font-family: 'Open Sans', sans-serif;
     background: white;
}

#atas1 {
     position: absolute;
     top: 0;
     left: 0;
     z-index: 2;
     width: 100%;
}
/*
#atas1 #pencarian-nomor input[type=text],#atas1 #pencarian-nomor select {
     border: 1px solid white;
     width: 100%;
     font-family: 'Open Sans', sans-serif;
     color: white;
     background: none;
}

#atas1 ::placeholder {
     color: white;
     opacity: 1; 
   }

#atas2 #pencarian-nomor input[type=text],#atas2 #pencarian-nomor select {
     border: 1px solid black;
     width: 100%;
     font-family: 'Open Sans', sans-serif;
     background: white;
}
*/

#pencarian-nomor input[type=submit] {
     background: #FFC000;
     border: none;
     font-weight: bold;
}

@media (max-width: 740px){
     #pencarian-nomor-container {
          display: flex;
     }
     #pencarian-nomor {
          margin-right: 10px;
     }
     #pencarian-nomor input[type=text],#pencarian-nomor select {
          padding: 5px;
          font-size: 10px;
     }

     #pencarian-nomor input[type=submit] {
          font-size: 10px;
     }
     #pencarian-nomor  {
          display: flex;
     }
}
@media (min-width: 741px){
     #pencarian-nomor input[type=text],#pencarian-nomor select {
          padding: 15px;
          font-size: 14px;
     }

     #pencarian-nomor input[type=submit] {
          font-size: 14px;
     }
}

/* ============  operatoricon =============== */
#operatoricon a {
     display: grid;
     justify-content: center;
     align-content: center;
     background: white;
     border-radius: 15px;
     -webkit-transition: all 0.7s ease;
     transition: all 0.7s ease;
}
#operatoricon a:hover {
     -webkit-transform:scale(1.2);
     transform:scale(1.2);
}


@media (max-width: 740px){
     #operatoricon {
          display: grid;
          grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
          grid-gap:0px;
      }
      #operatoricon a {
          padding: 0px 10px;
      }
      
}
@media (min-width: 741px){
     #operatoricon {
          display: flex;
      }

      #operatoricon a {
          padding: 0px 30px;
      }

}


/* ============  sidebar =============== */

.klik {
     font-family: 'Roboto Slab', serif;
	font-size:14px;
	text-transform:uppercase;
	color: black;
     text-decoration: underline;
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;

    -moz-animation-name: blinker;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;

    animation-name: blinker;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@-moz-keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0.5; }
    100% { opacity: 1.0; }
}

@-webkit-keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0.5; }
    100% { opacity: 1.0; }
}

@keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0.5; }
    100% { opacity: 1.0; }
}

.no-data {
     font-size: 16px;
     font-weight: bold;
     color: #de3713;
}




@media (max-width: 740px){
    
     .wrapper {
          margin-left:10px;
          margin-right:10px;
     }
     #bagian-atas {
          grid-template-columns: 1fr 4fr;
     }
}

@media (min-width: 741px){
     .wrapper {
          margin-left:10px;
          margin-right:10px;
     }
     #bagian-atas {
          grid-template-columns: 1fr 1fr;
          
     }

     #operatoricon-container {
          display: flex;
          justify-content: center;
          align-items: center;
     }

     #operatoricon-container a  {
          height: 50px;
      }
}

@media (min-width: 992px){
	.wrapper {
          margin-right: auto;
          margin-left: auto;
          max-width: 1170px;
     }
}