/* @import url(//fonts.googleapis.com/earlyaccess/notosanskr.css); */
.tooltip {
    z-index:1030;
}

body {
    padding-top:50px;
    position:relative;

}

.sidebar {
  display: none;
}
@media (min-width: 768px) {
  .sidebar {
    position: fixed;
    top: 51px;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: block;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
    background-color: #f5f5f5;
    border-right: 1px solid #eee;
  }
}

.sidebar-title {
  font-size:0.9em;
  font-weight:bold;
  color:#aaa;
  letter-spacing: -0.1em;
  border-left:5px solid #ca5c54;
  margin-left:-20px;
  padding-left:20px;
}

ul.sidebar-btn-list {
  margin-top:20px;
  margin-left:-20px;
  margin-right:-20px;
  border-top:1px solid #ddd;
  list-style-type:none;
  padding:0px;

}
ul.sidebar-btn-list li {

  cursor:pointer;
  display:block;
  padding:6px 20px 6px 20px;
  border-bottom:1px solid #ddd;
  color:#333;
  font-size:0.9em;
  overflow:wrap;
}

ul.sidebar-btn-list li:hover {
  background:#FFF;

}
ul.sidebar-btn-list li.active,
ul.sidebar-btn-list li.active:hover,
ul.sidebar-btn-list li:active,
ul.sidebar-btn-list li:focus {
  background:#333;
  color:white;
  border-bottom:1px solid #222;
}
/*
 * Main content
 */

.main {
  padding: 20px;
}
@media (min-width: 768px) {
  .main {
    padding-right: 40px;
    padding-left: 40px;
  }
}
.main .page-header {
  margin-top: 0;
}


.navbar-brand
{
    position: relative;
    background: url(../img/navbar-logo.png) no-repeat center center;

    background-size: 29px 29px;
    /*background-size: contain;*/
    margin-right:10px;
    margin-left:20px;
}
table.table-noborder td {
    border:0px !important;
    vertical-align: middle !important;
}

a.anchor {
    display: block;
    position: relative;
    top: -100px;
    visibility: hidden;
}

.spinner {
  width: 15px;
  height: 15px;
  background-color: #ca5c54;
  display:inline-block;
  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  animation: sk-rotateplane 1.2s infinite ease-in-out;
  vertical-align: middle;
}


.spinner-inverse {

  background-color: #FFF !important;

}
@-webkit-keyframes sk-rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes sk-rotateplane {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
  } 50% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
  } 100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}



.form-control.no-full-width {
     width:inherit;
    display:inline-block;
}

.pink-text {
    color:#bc565a;
}

.lightblue-text {
    color:#416e93;
}




.spinner_inline {
  width: 40px;
  height: 40px;

  position: relative;
  margin: 20px auto 20px auto;
}

.double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;

  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;

  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}
.blue > .double-bounce1, .blue > .double-bounce2 {
  background-color: #428bca;

}
.red > .double-bounce1, .red > .double-bounce2 {
  background-color: #c9302c;

}
.orange > .double-bounce1, .orange > .double-bounce2 {
  background-color: #eea236;

}

.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
  0%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

.transient-message {
    position: absolute;
    border-radius:50px;
    background:rgba(0,0,0,0.35);
    /* border:3px solid #FFF; */
    color:white;
    font-weight:bold;
    text-align:center;
    z-index:99999;
    padding:10px 15px 10px 15px;
}
.highlight {
    color:#000;
    background-color: #fff34d;
    -moz-border-radius: 5px; /* FF1+ */
    -webkit-border-radius: 5px; /* Saf3-4 */
    border-radius: 5px; /* Opera 10.5, IE 9, Saf5, Chrome */
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* FF3.5+ */
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Saf3.0+, Chrome */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Opera 10.5+, IE 9.0 */
}

.highlight {
    padding:1px 4px;
    margin:0 -4px;
}
.highlight.more {
    background:#ffb867;

}


.selectable {
    background:#CCC !important;
    cursor:pointer !important;
    pointer-events: all !important;
    opacity:1.0 !important;
}
.selectable.disabled {
    opacity:0.5 !important;
    cursor:default !important;
    pointer-events: none !important;
}
.selectable:hover:not(.disabled) {
    /* opacity:0.5; */
    background:#fff34d !important;
}
.selectable:active:not(.disabled),
.selectable:focus:not(.disabled) {
    background:#ffb867 !important;
}
.selectable.selected {
    background:#428bca !important;
    color:white;

}
.selectable.selected:hover,
.selectable.selected:active {
    background:#416e93 !important;
}
.selectable.field-radio-group {
    padding:5px;
    border-radius:3px;
}
.selectable.checkbox {
    padding:3px;
    border-radius:3px;
    display:inline-block;
}

.selectable.checkbox > input {
    margin-left:0px;
    position:relative;
}

.selectable.form-group {
    padding:3px;
    border-radius:3px;
    margin:5px 10px;
}
.selectable input {
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    pointer-events:none;

}
.selectable label {
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    pointer-events:none;
}



#item-selector-hover-affix {
    color:white;
    font-weight:bold;

    position:fixed;top:50px;right:50px;z-index:9999;
    text-align:right;
}
#item-selector-hover-affix > ul > li {
    padding:2px;

}
#item-selector-hover-affix > ul > li > a {
    color:white;
    padding:0px;
}
#item-selector-hover-affix > ul > li > a:hover {
    background:transparent;
    opacity:0.5;
}
#item-selector-hover-affix > ul > li.active > a {
    color:#337ab7;
}

#new-item-selector-hover-affix {
    color:white;
    font-weight:bold;

    position:fixed;top:50px;right:50px;z-index:9999;
    text-align:right;
}
#new-item-selector-hover-affix > ul > li {
    padding:2px;

}
#new-item-selector-hover-affix > ul > li > a {
    color:white;
    padding:0px;
}
#new-item-selector-hover-affix > ul > li > a:hover {
    background:transparent;
    opacity:0.5;
}
#new-item-selector-hover-affix > ul > li.active > a {
    color:#337ab7;
}
/* .js-item-selector-hover:hover {
    animation-name: js-menu-resize;
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
    animation-fill-mode:forwards;
} */
/* @keyframes js-menu-resize {
    from {
        width:50px;
        height:10px;
    }
    to {
        width:200px;
        height:auto;
    }
} */

.help-floater {
    position:fixed;
    bottom:60px;
    right:40px;
    background:#ca5c54;
    width:60px;
    height:60px;
    border-radius: 50%;
    z-index:2;
    box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.3);
    color:white; font-weight:bold;
    font-size:15pt;
    text-align: center;
    line-height: 15pt;
    padding-top:8px;
    border:3px solid #FFF;
    cursor:pointer;
    user-select: none;
    -webkit-user-select:none;

    animation-name: help-floater-animate;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
}
.help-floater:hover {
    border:3px solid #ca5c54;
}
.help-floater > div {
    font-size:8pt;
    font-weight: normal;
    opacity:0.5;

}
.help-floater:hover > div {
    opacity:1;
}

.help-floater:focus,
.help-floater:active {
    background:#FFF;
    color:#ca5c54;
}

@keyframes help-floater-animate {
    from {
        right:-50px;
        transform: rotate(900deg) scale(0.5);
        opacity:0;
    }
    to {
        right: 40px;
        transform: rotate(0deg) scale(1);
        opacity:1;
    }
}