/* #loader - spinner */
a{
    text-decoration: none;
}

.main-wrap {
    background: #000;
    text-align: center;
}
.main-wrap h1 {
    color: #fff;
    margin-top: 50px;
    margin-bottom: 100px;
}

.col-md-3 {
    display: block;
    background-color: #eee;
    padding: 50px 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
}

.col:first-of-type {
margin-left: 0;
}


/* ALL LOADERS */

.loader{
width: 100px;
height: 100px;
border-radius: 100%;
position: relative;
margin: 0 auto;
}

/* LOADER 1 */

#loader-1:before, #loader-1:after{
content: "";
position: absolute;
top: -10px;
left: -10px;
width: 100%;
height: 100%;
border-radius: 100%;
border: 10px solid transparent;
border-top-color: #3498db;
}

#loader-1:before{
z-index: 100;
animation: spin 1s infinite;
}

#loader-1:after{
border: 10px solid #ccc;
}

@keyframes spin{
0%{
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}

100%{
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}
}

/* LOADER 2 */

#loader-2 span{
display: inline-block;
width: 20px;
height: 20px;
border-radius: 100%;
background-color: #3498db;
margin: 35px 5px;
}

#loader-2 span:nth-child(1){
animation: bounce 1s ease-in-out infinite;
}

#loader-2 span:nth-child(2){
animation: bounce 1s ease-in-out 0.33s infinite;
}

#loader-2 span:nth-child(3){
animation: bounce 1s ease-in-out 0.66s infinite;
}

@keyframes bounce{
0%, 75%, 100%{
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}

25%{
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    -o-transform: translateY(-20px);
    transform: translateY(-20px);
}
}

/* LOADER 3 */

#loader-3:before, #loader-3:after{
content: "";
width: 20px;
height: 20px;
position: absolute;
top: 0;
left: calc(50% - 10px);
background-color: #3498db;
animation: squaremove 1s ease-in-out infinite;
}

#loader-3:after{
bottom: 0;
animation-delay: 0.5s;
}

@keyframes squaremove{
0%, 100%{
    -webkit-transform: translate(0,0) rotate(0);
    -ms-transform: translate(0,0) rotate(0);
    -o-transform: translate(0,0) rotate(0);
    transform: translate(0,0) rotate(0);
}

25%{
    -webkit-transform: translate(40px,40px) rotate(45deg);
    -ms-transform: translate(40px,40px) rotate(45deg);
    -o-transform: translate(40px,40px) rotate(45deg);
    transform: translate(40px,40px) rotate(45deg);
}

50%{
    -webkit-transform: translate(0px,80px) rotate(0deg);
    -ms-transform: translate(0px,80px) rotate(0deg);
    -o-transform: translate(0px,80px) rotate(0deg);
    transform: translate(0px,80px) rotate(0deg);
}

75%{
    -webkit-transform: translate(-40px,40px) rotate(45deg);
    -ms-transform: translate(-40px,40px) rotate(45deg);
    -o-transform: translate(-40px,40px) rotate(45deg);
    transform: translate(-40px,40px) rotate(45deg);
}
}

/* LOADER 4 */

#loader-4 span{
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: #3498db;
    margin: 35px 5px;
    opacity: 0;
}

#loader-4 span:nth-child(1){
    animation: opacitychange 1s ease-in-out infinite;
}

#loader-4 span:nth-child(2){
    animation: opacitychange 1s ease-in-out 0.33s infinite;
}

#loader-4 span:nth-child(3){
    animation: opacitychange 1s ease-in-out 0.66s infinite;
}

@keyframes opacitychange{
0%, 100%{
    opacity: 0;
}

60%{
    opacity: 1;
}
}

/* LOADER 5 */

#loader-5 span{
display: block;
position: absolute;
left: calc(50% - 20px);
top: calc(50% - 20px);
width: 20px;
height: 20px;
background-color: #3498db;
}

#loader-5 span:nth-child(2){
animation: moveanimation1 1s ease-in-out infinite;
}

#loader-5 span:nth-child(3){
animation: moveanimation2 1s ease-in-out infinite;
}

#loader-5 span:nth-child(4){
animation: moveanimation3 1s ease-in-out infinite;
}

@keyframes moveanimation1{
0%, 100%{
    -webkit-transform: translateX(0px);
    -ms-transform: translateX(0px);
    -o-transform: translateX(0px);
    transform: translateX(0px);
}

75%{
    -webkit-transform: translateX(30px);
    -ms-transform: translateX(30px);
    -o-transform: translateX(30px);
    transform: translateX(30px);
}
}

@keyframes moveanimation2{
0%, 100%{
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
}

75%{
    -webkit-transform: translateY(30px);
    -ms-transform: translateY(30px);
    -o-transform: translateY(30px);
    transform: translateY(30px);
}
}

@keyframes moveanimation3{
0%, 100%{
    -webkit-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    -o-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
}

75%{
    -webkit-transform: translate(30px, 30px);
    -ms-transform: translate(30px, 30px);
    -o-transform: translate(30px, 30px);
    transform: translate(30px, 30px);
}
}

/* LOADER 6 */

#loader-6{
top: 40px;
left: -2.5px;
}

#loader-6 span{
display: inline-block;
width: 5px;
height: 20px;
background-color: #3498db;
}

#loader-6 span:nth-child(1){
animation: grow 1s ease-in-out infinite;
}

#loader-6 span:nth-child(2){
animation: grow 1s ease-in-out 0.15s infinite;
}

#loader-6 span:nth-child(3){
animation: grow 1s ease-in-out 0.30s infinite;
}

#loader-6 span:nth-child(4){
animation: grow 1s ease-in-out 0.45s infinite;
}

@keyframes grow{
0%, 100%{
    -webkit-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    transform: scaleY(1);
}

50%{
    -webkit-transform: scaleY(1.8);
    -ms-transform: scaleY(1.8);
    -o-transform: scaleY(1.8);
    transform: scaleY(1.8);
}
}

/* LOADER 7 */

#loader-7{
-webkit-perspective: 120px;
-moz-perspective: 120px;
-ms-perspective: 120px;
perspective: 120px;
}

#loader-7:before{
content: "";
position: absolute;
left: 25px;
top: 25px;
width: 50px;
height: 50px;
background-color: #3498db;
animation: flip 1s infinite;
}

@keyframes flip {
0% {
    transform: rotate(0);
}

50% {
    transform: rotateY(180deg);
}

100% {
    transform: rotateY(180deg)  rotateX(180deg);
}
}

/* LOADER 8 */

#loader-8:before{
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    top: calc(50% - 10px);
    left: 0px;
    background-color: #3498db;
    animation: rotatemove 1s infinite;
}

    @keyframes rotatemove{
    0%{
        -webkit-transform: scale(1) translateX(0px);
        -ms-transform: scale(1) translateX(0px);
        -o-transform: scale(1) translateX(0px);
        transform: scale(1) translateX(0px);
    }

    100%{
        -webkit-transform: scale(2) translateX(45px);
        -ms-transform: scale(2) translateX(45px);
        -o-transform: scale(2) translateX(45px);
        transform: scale(2) translateX(45px);
    }
}
.loader-custom{
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); 
    color:#3498db;
    font-size: 55px;
    
}
.spinner-bg{
    background-color: rgba(230, 222, 222, 0.5);
}

/* # end loader - spinner */

.head-title {
    color: #333 !important;
    font-size: 35px;
    font-weight: 500;
    
}

/* datatable */
#dtTbl_filter{
    position: absolute;
    margin-left: 275px;
}
#dtTbl_wrapper{
    margin-top: -53px;
}
a.editor-create {
    display: inline-block;
    margin-bottom: 0.5em;
    cursor: pointer;
}
.editor-edit{
    width: 0% ;
}
.editor-edit, .editor-delete, .editor-details{
    cursor: pointer;
}
.editor-edit, .editor-details{
    color:#337ab7;
}
.editor-details:hover{
    text-decoration: underline;
}
.editor-delete{
    color:#e42030;
}
.dt-buttons{
    color:#337ab7;
}
.input-sm{
    width: 355px !important;
}
/* Tabs panel */
.tabbable-panel {
    border:1px solid #eee;
    padding: 10px;
  }
  
  /* Default mode */
  .tabbable-line > .nav-tabs {
    border: none;
    margin: 0px;
  }
  .tabbable-line > .nav-tabs > li {
    margin-right: 2px;
  }
  .tabbable-line > .nav-tabs > li > a {
    border: 0;
    margin-right: 0;
    color: #737373;
  }
  .tabbable-line > .nav-tabs > li > a > i {
    color: #a6a6a6;
  }
  .tabbable-line > .nav-tabs > li.open, .tabbable-line > .nav-tabs > li:hover {
    border-bottom: 4px solid #fbcdcf;
  }
  .tabbable-line > .nav-tabs > li.open > a, .tabbable-line > .nav-tabs > li:hover > a {
    border: 0;
    background: none !important;
    color: #333333;
  }
  .tabbable-line > .nav-tabs > li.open > a > i, .tabbable-line > .nav-tabs > li:hover > a > i {
    color: #a6a6a6;
  }
  .tabbable-line > .nav-tabs > li.open .dropdown-menu, .tabbable-line > .nav-tabs > li:hover .dropdown-menu {
    margin-top: 0px;
  }
  .tabbable-line > .nav-tabs > li.active {
    border-bottom: 4px solid #f3565d;
    position: relative;
  }
  .tabbable-line > .nav-tabs > li.active > a {
    border: 0;
    color: #333333;
  }
  .tabbable-line > .nav-tabs > li.active > a > i {
    color: #404040;
  }
  .tabbable-line > .tab-content {
    margin-top: -3px;
    background-color: #fff;
    border: 0;
    border-top: 1px solid #eee;
    padding: 15px 0;
  }
  .portlet .tabbable-line > .tab-content {
    padding-bottom: 0;
  }
  
  /* Below tabs mode */
  
  .tabbable-line.tabs-below > .nav-tabs > li {
    border-top: 4px solid transparent;
  }
  .tabbable-line.tabs-below > .nav-tabs > li > a {
    margin-top: 0;
  }
  .tabbable-line.tabs-below > .nav-tabs > li:hover {
    border-bottom: 0;
    border-top: 4px solid #fbcdcf;
  }
  .tabbable-line.tabs-below > .nav-tabs > li.active {
    margin-bottom: -2px;
    border-bottom: 0;
    border-top: 4px solid #f3565d;
  }
  .tabbable-line.tabs-below > .tab-content {
    margin-top: -10px;
    border-top: 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
  }