/*
 * Start Bootstrap - Landing Page (http://startbootstrap.com/)
 * Copyright 2013-2016 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
 */

@font-face {
  font-family: "MyFont";
  src:url("SegoeWP.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
html,body,table,.ui-widget, input,select{
  font-family:MyFont,"Segoe UI",Tahoma !important;
  color:#101010;
  font-size: 14px !important;
}
select{
    padding: 0px 3px !important;
}
a,button{
    font-family:MyFont,"Segoe UI",Tahoma !important;
    font-size: 14px !important;
}
button.close{
    font-size: 21px !important;
}

body,
html {
    width: 100%;
    height: 100%;
}

body,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: MyFont,"Segoe UI",Tahoma !important;
    font-weight: 400;
}

.topnav {
    font-size: 14px;
}

.lead {
    font-size: 18px;
    font-weight: 400;
}

.intro-header {
    padding-top: 50px; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */
    padding-bottom: 50px;
    text-align: center;
    color: #f8f8f8;
    background: url(../h_img/intro-bg.jpg) no-repeat center center;
    background-size: cover;
}

.intro-message {
    position: relative;
    padding-top: 20%;
    padding-bottom: 20%;
}

.intro-message > h1 {
    margin: 0;
    font-size: 5em;
}

.intro-divider {
    width: 400px;
    border-top: 1px solid #f8f8f8;
    border-bottom: 1px solid rgba(0,0,0,0.2);
}

.intro-message > h3 {

}

@media(max-width:767px) {
    .intro-message {
        padding-bottom: 15%;
    }

    .intro-message > h1 {
        font-size: 3em;
    }

    ul.intro-social-buttons > li {
        display: block;
        margin-bottom: 20px;
        padding: 0;
    }

    ul.intro-social-buttons > li:last-child {
        margin-bottom: 0;
    }

    .intro-divider {
        width: 100%;
    }
}

.network-name {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 2px;
}

.content-section-a {
    padding: 10px 0;
    background-color: #f8f8f8;
}

.content-section-b {
    padding: 10px 0;
    border-top: 1px solid #e7e7e7;
    border-bottom: 1px solid #e7e7e7;
}

.section-heading {
    margin-bottom: 20px;
}

.section-heading-spacer {
    float: left;
    width: 200px;
    border-top: 3px solid #e7e7e7;
}

.banner {
    padding: 100px 0;
    color: #f8f8f8;
    background: url(../h_img/banner-bg.jpg) no-repeat center center;
    background-size: cover;
}

.banner h2 {
    margin: 0;
    font-size: 3em;
}

.banner ul {
    margin-bottom: 0;
}

.banner-social-buttons {
    float: right;
    margin-top: 0;
}

@media(max-width:1199px) {
    ul.banner-social-buttons {
        float: left;
        margin-top: 15px;
    }
}

@media(max-width:767px) {
    .banner h2 {
        margin: 0;
        font-size: 3em;
    }

    ul.banner-social-buttons > li {
        display: block;
        margin-bottom: 20px;
        padding: 0;
    }

    ul.banner-social-buttons > li:last-child {
        margin-bottom: 0;
    }
}

footer {
    padding: 4px 0;
    background-color: #f0f0f0;
    font-size: smaller;
}

p.copyright {
    margin: 15px 0 0;
}

/* Kristo */

.navbar{
  background-color: #404144 !important; /* theme */
}
span.head{
  font-size:13pt;
  text-transform:uppercase;
  display:block;
  color:#efefef;
  padding-top:2px;
  padding-bottom:0px;
}
span.subhead{
  font-size:small;
  font-weight:normal;
  display:block;
  color:#efefef;
}
a.topnav{
  padding-top:5px !important;
}
div.headWrap{
  display:inline-block;
  height:30px;
}
a.block{
  display:inline-block;
  width:110px;
  color:#efefef !important;
  text-align:center;
  margin:0px;
  margin-left:1px;
  margin-right:1px;
  padding-left:5px !important;
  padding-right:5px !important;
    text-decoration:none;
}
a.blockS{
    width:90px;
}
a.blockL{
    width:120px;
}

a.btn{
  width:100px;
  padding:4px !important;
}
i[class^=ico]{
  background-size:100%;
  width:25px;
  height:25px;
  display:inline-block;
  vertical-align:middle;
  margin-right:2px;
}
i.ico-fb{ background-image:url("../h_img/fb.png"); }
i.ico-li{ background-image:url("../h_img/li.png"); }
i.ico-yt{ background-image:url("../h_img/yt.png"); }

div.banner{
  padding:5px;
  color:#efefef;
}
ht{
  font-size:14pt;
}
img.shadow{
  box-shadow: 2px 2px 2px rgba(10,10,10,0.5);
}
div.marginTop{
  margin-top:6px;
}
div.intro-header{
  height:400px;
}
.col-centered{
    float: none;
    margin: 0 auto;
}
.formPadded{
    margin-top:5px;
    margin-bottom:5px;
}
i.icon-info-2{
    color:#007fff;
}
.red{
    color:#ff3333;
}
.yellow{
    color:#fba000 !important; /*orange actually*/
}
.bgyellow,bgyellow{
    background:#ffffaa !important;
}
.bggreen,bggreen{
    background:#66ff66 !important;
}
.bgred,bgred{
    background-color: #ff6666 !important;
}
div.lightBlue{
    background-color:#eeeeff !important;
}
div.lightBlue tr td{
    background-color:#eeeeff !important;
}

span.red,re{
    color:#ff3333;
}
span.blue,bl{
    color:#3333ff;
}
.blue{
    color:#3333ff !important;
}
.orange{
    color:#ff6633;
}
.green{
    color:#33ff33;
}
.darkgreen{
    color:#43a047;
}
div.helpDiv{
    font-size:12pt;
    padding:5px;
    text-align:center;
    width:100%;
    height:35px;
    background-color:#E9E9E9;
}
span.notice{
    color:#3333ff;
}
span.score{
    color:#337ab7;
}
warn{
    color:#3333ff;
}
a.block:hover, .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover{
  background-color: #717273 !important; /* theme */
}
.paddedBottom{
    padding-bottom:8px;
}
.myxcrud{
    border-bottom: 1px solid #ddd;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgb(221, 221, 221);
    font-size: 17px;
    color: #000;
    padding: 0;
    margin: 10px 0;
    font-weight: normal;
}

.xcrud h2, h2.xcrud, h2.xcrud table{
    font-size: 17px !important;
    margin-top:5px !important;
}


td.left{
    width:150px;
    vertical-align:top;
}
td.narrow{
    width:110px;
}
td.mid{
    width:10px;
    vertical-align:top;
}
table.padded td{
    padding-top:2px;
    padding-bottom:2px;
    vertical-align:top;
}
table.paddedMid td{
    padding-top:2px;
    padding-bottom:2px;
    vertical-align:middle;
}
.xcrud-limit-buttons{
    display:inline-block !important;
}
i[class^=icon-]{
    width:15px;
    height:15px;
}
i.icobig{
  width:20px;
  height:20px;
  font-size:15px;
  padding-top:0px;
}


.xcrud-action{
    padding-left:4px !important;
    padding-right:4px !important;
}
.xcrud-noaction{
    padding-left:4px !important;
    padding-right:4px !important;
}
i.icon-remove,i.icon-pencil,i.icon-info-2,i.icon-filter-2,i.icon-close{
    width:12px;
    height:18px;
}
.xcrud-nav{
    padding:0 !important;
}
a.plain{
    text-decoration: none;
}
hr.big {
    margin-top: 0px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #ddd;
}
hr.small{
    border-top: 1px solid #ddd;
    margin-top: 5px;
    margin-bottom: 5px;
}
/* hapus tombol tooltip yg ga ada message */
a.xcrud-tooltip[title='']{
    display:none;
}
a.xcrud-tooltip[title='']:not([aria-describedby='']){
    display:inline-block;
}

th[data-orderby~="(hidden)"], td.hidden{
    display:none;
}

/* hilangkan tombol view */
a[data-task="view"]>*{
    display:none;
}
/* hilangkan tombol view */
a[data-task="view"]{
    padding:0 !important;
}

.xcrud-importantbutton {
    background-color:#007fff !important;
}
.xcrud-importantbutton:hover {
    background-color:#209fff !important;
}
.xcrud-grey2 {
    background-color:#8D8D8D !important;
}
.xcrud-grey2:hover {
    background-color:#9D9D9D !important;
}
.xcrud-cyan2 {
    background-color:#3AAAAD !important;
}
.xcrud-cyan2:hover {
    background-color:#2C8385 !important;
}
.xcrud-red2 {
    background-color:#BB3437 !important;
}
.xcrud-red2:hover {
    background-color:#9D292C !important;
}

/*tombol utk export pada tableexport */
caption.tableexport-caption{
    display:none;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.icon-checkmark-circle, .icon-cancel-circle{
    width:12px !important;
    height:18px !important;
}
.linkblue a{
    color:#3333ff !important;
}

.ui-widget.ui-widget-content {
    border: none !important; /* jquery tabs no border */
}
.ui-widget-header {
    border-top: none !important; /* jquery tabs header hanya border bottom */
    border-left: none !important;
    border-right: none !important;
    background: none !important;
}
.ui-tabs .ui-tabs-panel { /*container jquery tabs, supaya kiri kanan tak trll besar */
    padding-right: 5px !important;
    padding-left: 5px !important;
}


@media (max-width: 767px){
    .navbar-default .navbar-nav .open .dropdown-menu>li>a {
        color: #d2d2d2;
    }
}
smaller, .smaller{
    font-size:13px !important;
}
smallerr, .smallerr{
    font-size:12px !important;
}
.ui-tabs .ui-tabs-panel {
    padding-top: 10px !important; /* padding content pada jquery tab */
}
div.ui-tooltip{
    max-width: 767px;
    white-space:pre-line;
    background-color:rgba(40,40,40,0.9);
    color:#fafafa;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.mce-statusbar, .mce-menubar{
    display:none !important;
}


table.plain td{
    padding:3px 5px;
    vertical-align: top;
}

@media print
{    
    .no-print, .no-print *, footer
    {
        display: none !important;
    }
    .print-margin-top{
        margin-top:25px !important;
    }
}

.ui-tabs .ui-tabs-nav .ui-tabs-anchor { /* tombol jquery tabs, was 0.6 for left right, was 14px, changed on 18 dec 22*/
    padding: 0.3em 0.3em !important; 
    font-size:14px !important;
}
.ui-tabs ul li a { 
    /* tidak ada border waktu klik tabs */
    outline-width: 0;
}


#snackbar {
  width: 400px;
  margin-left: -200px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  padding: 7px;
  padding-left:25px;
  padding-right:25px;
  position: fixed;
  z-index: 1;
  left: 50%;
  bottom: 45%;
  font-size: 14px;
}

i.as_xcrud_button{
    line-height: 25px;
    height: 25px;
}

td.pad_small{
    padding-top:5px !important;
    padding-bottom:5px !important;
}

.ui-dialog-titlebar-close {
    visibility: hidden;
}
table.inputpanel td{
    padding:4px;
}

div[class^=badge_]{
    border-radius: 3px;
    color:#fafafa;
    padding-top:2px; 
    padding-bottom:3px;
    padding-left:4px;
    padding-right:4px;
    font-size:11px;
    line-height:12px;
    display:inline-block;
}
.badge_green{
    background: #3AAAAD;
}
.badge_red{
    background: #8D8D8D;
}
.badge_yellow{
    background: #fba000; /* orange actually, for white text */
}

.ui-tabs.ui-widget-content{
    background: #fcfcfc !important;
}

.xcrud-th th{
    white-space:normal !important;
}

.ralatas_panel{
    padding:0 10px;
    border:1px solid #ddd;
    margin-bottom:15px;
}

a[disabled="disabled"] {
    opacity: 0.5;
    pointer-events: none;
    cursor: default;
}


/*spinner*/
.sk-chase {
  width: 40px;
  height: 40px;
  position: relative;
  animation: sk-chase 2.5s infinite linear both;
}

.sk-chase-dot {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0; 
  animation: sk-chase-dot 2.0s infinite ease-in-out both; 
}

.sk-chase-dot:before {
  content: '';
  display: block;
  width: 25%;
  height: 25%;
  background-color: #707070;
  border-radius: 100%;
  animation: sk-chase-dot-before 2.0s infinite ease-in-out both; 
}

.sk-chase-dot:nth-child(1) { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2) { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3) { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4) { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5) { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6) { animation-delay: -0.6s; }
.sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; }

@keyframes sk-chase {
  100% { transform: rotate(360deg); } 
}

@keyframes sk-chase-dot {
  80%, 100% { transform: rotate(360deg); } 
}

@keyframes sk-chase-dot-before {
  50% {
    transform: scale(0.4); 
  } 100%, 0% {
    transform: scale(1.0); 
  } 
}

.spinner_small{
    display:inline-block;
    width:15px;
    height:15px
}
scd {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0; 
  animation: sk-chase-dot 2.0s infinite ease-in-out both; 
}

scd:before {
  content: '';
  display: block;
  width: 25%;
  height: 25%;
  background-color: #707070;
  border-radius: 100%;
  animation: sk-chase-dot-before 2.0s infinite ease-in-out both; 
}

scd:nth-child(1) { animation-delay: -1.1s; }
scd:nth-child(2) { animation-delay: -1.0s; }
scd:nth-child(3) { animation-delay: -0.9s; }
scd:nth-child(4) { animation-delay: -0.8s; }
scd:nth-child(5) { animation-delay: -0.7s; }
scd:nth-child(6) { animation-delay: -0.6s; }
scd:nth-child(1):before { animation-delay: -1.1s; }
scd:nth-child(2):before { animation-delay: -1.0s; }
scd:nth-child(3):before { animation-delay: -0.9s; }
scd:nth-child(4):before { animation-delay: -0.8s; }
scd:nth-child(5):before { animation-delay: -0.7s; }
scd:nth-child(6):before { animation-delay: -0.6s; }

/*end of spinner*/

.bar_blue{
    width:100%; 
    padding:3px; 
    font-size:14px; 
    display:block; 
    color:#fafafa;
    background-color: rgb(23,162,184);
}

.bar_warning, .bar_notice, .bar_danger{
    width:100%; 
    padding:3px; 
    text-align:center; 
    font-size:13px; 
    display:block; 
}
.bar_warning{
    background-color:#ffff66;
}
.bar_danger{
    background-color:#FFA500;
}
.bar_notice{
    background-color:#66ff66;
}
.small{
    font-size:12px;
}

input,select{
    border:1px solid #c0c0c0;    
}
.nowrap{
    white-space: nowrap;
}


/*sini*/

table.freeze {
  white-space: nowrap;
  table-layout: fixed;
}

table.freeze thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

table.freeze tbody th {
  position: relative;
}
table.freeze thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
}
table.freeze tbody th, table.freeze tbody tr td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
}
div.divscroll{
    overflow-x: scroll;
    overflow-y: scroll;
}
.highlighted:hover {
    border: 1px solid #6666ff;
    background-color: #ddddff;
}
.tighttable td{
    padding:3px !important;
}
.ui-tabs-active i[class]{
    color:#fafafa !important;
}

.a_button{
    border:1px solid rgb(200,200,200);
    padding:1px 5px;
    border-radius:3px;
    margin:2px 0px;
    display:inline-block;
    background-color:rgb(239, 239, 239);
}

/* indefinite progress bar */
.loadingbar{
  position:fixed;
  width:100vw;
  height:3px;
  top:0px;
  left:0px;
  z-index:1000;
  overflow-x: hidden;
}

.loadingbar .line{
  position:absolute;
  opacity: 0.4;
  background:#75a7ff;
  width:150%;
  height:3px;
}

.loadingbar .subline{
  position:absolute;
  background:#75a7ff;
  height:3px; 
}
.inc{
  animation: increase 2s infinite;
}
.dec{
  animation: decrease 2s 0.5s infinite;
}

@keyframes increase {
   from { left: -5%; width: 5%; }
   to { left: 130%; width: 100%;}
}
@keyframes decrease {
   from { left: -80%; width: 80%; }
   to { left: 110%; width: 10%;}
}
/* end of indefinite progress bar */


tr.xcrud-th a{
  font-size:12px !important;
}

.xcrud-small-table *:not(sml){
    font-size:12px !important;
}
.xcrud-small-table td,.xcrud-small-table th{
    padding:3px !important;
    height:25px !important;
}
.xcrud-med-table *{
    font-size:13px !important;
}
.xcrud-med-table td,.xcrud-med-table th{
    padding:3px !important;
    height:29px !important;
}

select.select2 *, select.select2, .select2-selection, .select2-selection--single{
  text-align: left !important;
}

str, strb{ /*force this div to stay in 1 line*/
    width: max-content; /*allow all the contents to be shown*/
    display:inline-block;
    overflow: hidden;
    white-space: nowrap;
}
.nobreak *{
    width: max-content; /*allow all the contents to be shown*/
    overflow: hidden;
    white-space: nowrap;
}
strb{
    display:block;
}
grey{ /* prodi mahasiswa, tampilan di grade */
  display:block;
  font-size:10px;
  line-height:10px;
  color:#a0a0a0;
}
sml{ /*small text div*/
  display:block;
  color:#777 !important;
  font-size:11px !important;
  font-weight:normal !important;
}

.smalltext *, .smalltext{
  font-size:12px !important;
}

.bordered{
  border:1px solid #ddd;
  padding:3px;
}

#loadingtext {
  width: 300px;
  color: #3333ff;
  text-align: right;
  position: absolute;
  z-index: 1;
  right: 30px;
  top: 55px;
  font-size: 14px;
}

.ui-widget-content a.xcrud-button{
  color:white !important;
}

@media print {
  .printcolorexact, .printcolorexact *{
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
    color-adjust: exact; /* Non-Webkit Browsers */
  }
}

.equal { /* equal bootstrap column height */
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
}

.myxcrudbtn{
    height:20px !important;
    width:20px !important;
    line-height:20px !important;
    margin:0 !important;
}
.myxcrudbtn i{
    font-size:11px;
    margin-top:4px
}
div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index:999;
}


nav *{
  z-index:1000;
}

.plainforce *{
  border:none !important;
  padding:0 0 2px 0 !important;
}
.innerlabel tr td:first-child{
  color:#a0a0a0;
  padding-right:8px !important;
}
.innerlabel *{
  font-size:13px !important;
}

/*how to remove ugly black border on bootstrap button when clicked*/
.btn:focus,.btn:active {
   outline: none !important;
   box-shadow: none;
}

.search-input-wrapper {
  width: 200px;
}

.search-input {
  width: 100%;
}

span[class^=boldtabinfo_]{
  font-weight:bold;
  font-size:12px;
}
.ui-tabs-active span[class^=boldtabinfo_]{
    color:#fafafa !important;
}

.boldtabinfo_red{
  color:#ff3333;
}
.boldtabinfo_blue{
  color:#3333ff;
}

.generalpanel{
  border: 1px solid #dddddd;
  background: #fcfcfc;
  padding: 5px;
}

@media print {
    .keep-together {
        break-inside: avoid; /* For modern browsers */
        page-break-inside: avoid; /* For older browsers */
    }
}
@media print {
    .page-break-after {
        page-break-after: always;
        break-after: page;
    }
}