@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,200);
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);


/* card */
#custom-card .form-group + .form-group {
    border-top: none;
}
#custom-card {
    background-color: #086574 !important;
    border-radius: 10px;
    border: 0;
    border-top: 0;
}
#custom-card label {
    color: #FFF;
    font-weight: 400;
}


#custom-card .help-block a {
    color: #FFF;
    text-decoration: underline;
}
#custom-card .help-block a:hover {
    color: #FFF;
    text-decoration: none;
}

#custom-card .bg-logo {
  background-color: rgba(255, 255, 255, 0.3);
  /*margin:-15px -15px 0 -15px;*/
  padding: 30px 0;
  text-align: center;
}


#custom-card .input-group-addon {
    color: #086574;
  }

/* FOOTER */
footer {
  position: relative;
  color: #000000;
}

/* WIDTH & HEIGHT*/
.w-25 {
width: 25% !important; }
.w-50 {
width: 50% !important; }
.w-75 {
width: 75% !important; }
.w-100 {
width: 100% !important; }
.w-auto {
width: auto !important; }
.h-25 {
height: 25% !important; }
.h-50 {
height: 50% !important; }
.h-75 {
height: 75% !important; }
.h-100 {
height: 100% !important; }
.h-auto {
height: auto !important; }

.mw-100 {
max-width: 100% !important; }
.mh-100 {
max-height: 100% !important; }
.min-vw-100 {
min-width: 100vw !important; }
.min-vh-100 {
min-height: 100vh !important; }

.vw-100 {
width: 100vw !important; }
.vh-100 {
height: 100vh !important; }

/* MARGIN & PADDING */
.m-0 {
margin: 0 !important; }
.mt-0, .my-0 {
margin-top: 0 !important; }
.mr-0, .mx-0 {
margin-right: 0 !important; }
.mb-0, .my-0 {
margin-bottom: 0 !important; }
.ml-0, .mx-0 {
margin-left: 0 !important; }
.m-1 {
margin: 0.25rem !important; }
.mt-1, .my-1 {
margin-top: 0.25rem !important; }
.mr-1, .mx-1 {
margin-right: 0.25rem !important; }
.mb-1, .my-1 {
margin-bottom: 0.25rem !important; }
.ml-1, .mx-1 {
margin-left: 0.25rem !important; }
.m-2 {
margin: 0.5rem !important; }
.mt-2, .my-2 {
margin-top: 0.5rem !important; }
.mr-2, .mx-2 {
margin-right: 0.5rem !important; }
.mb-2, .my-2 {
margin-bottom: 0.5rem !important; }
.ml-2, .mx-2 {
margin-left: 0.5rem !important; }
.m-3 {
margin: 1rem !important; }
.mt-3, .my-3 {
margin-top: 1rem !important; }
.mr-3, .mx-3 {
margin-right: 1rem !important; }
.mb-3, .my-3 {
margin-bottom: 1rem !important; }
.ml-3, .mx-3 {
margin-left: 1rem !important; }
.m-4 {
margin: 1.5rem !important; }
.mt-4, .my-4 {
margin-top: 1.5rem !important; }
.mr-4, .mx-4 {
margin-right: 1.5rem !important; }
.mb-4, .my-4 {
margin-bottom: 1.5rem !important; }
.ml-4, .mx-4 {
margin-left: 1.5rem !important; }
.m-5 {
margin: 3rem !important; }
.mt-5, .my-5 {
margin-top: 3rem !important; }
.mr-5, .mx-5 {
margin-right: 3rem !important; }
.mb-5, .my-5 {
margin-bottom: 3rem !important; }
.ml-5, .mx-5 {
margin-left: 3rem !important; }

.p-0 {
padding: 0 !important; }
.pt-0, .py-0 {
padding-top: 0 !important; }
.pr-0, .px-0 {
padding-right: 0 !important; }
.pb-0, .py-0 {
padding-bottom: 0 !important; }
.pl-0, .px-0 {
padding-left: 0 !important; }
.p-1 {
padding: 0.25rem !important; }
.pt-1, .py-1 {
padding-top: 0.25rem !important; }
.pr-1, .px-1 {
padding-right: 0.25rem !important; }
.pb-1, .py-1 {
padding-bottom: 0.25rem !important; }
.pl-1, .px-1 {
padding-left: 0.25rem !important; }
.p-2 {
padding: 0.5rem !important; }
.pt-2, .py-2 {
padding-top: 0.5rem !important; }
.pr-2, .px-2 {
padding-right: 0.5rem !important; }
.pb-2, .py-2 {
padding-bottom: 0.5rem !important; }
.pl-2, .px-2 {
padding-left: 0.5rem !important; }
.p-3 {
padding: 1rem !important; }
.pt-3, .py-3 {
padding-top: 1rem !important; }
.pr-3, .px-3 {
padding-right: 1rem !important; }
.pb-3, .py-3 {
padding-bottom: 1rem !important; }
.pl-3, .px-3 {
padding-left: 1rem !important; }
.p-4 {
padding: 1.5rem !important; }
.pt-4, .py-4 {
padding-top: 1.5rem !important; }
.pr-4, .px-4 {
padding-right: 1.5rem !important; }
.pb-4, .py-4 {
padding-bottom: 1.5rem !important; }
.pl-4, .px-4 {
padding-left: 1.5rem !important; }
.p-5 {
padding: 3rem !important; }
.pt-5, .py-5 {
padding-top: 3rem !important; }
.pr-5, .px-5 {
padding-right: 3rem !important; }
.pb-5, .py-5 {
padding-bottom: 3rem !important; }
.pl-5, .px-5 {
padding-left: 3rem !important; }

.m-auto {
margin: auto !important; }
.mt-auto, .my-auto {
margin-top: auto !important; }
.mr-auto, .mx-auto {
margin-right: auto !important; }
.mb-auto, .my-auto {
margin-bottom: auto !important; }
.ml-auto, .mx-auto {
margin-left: auto !important; }

/* TEXT */
.text-justify {
text-align: justify !important; }
.text-wrap {
white-space: normal !important; }
.text-nowrap {
white-space: nowrap !important; }
.text-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
.text-left {
text-align: left !important; }
.text-right {
text-align: right !important; }
.text-center {
text-align: center !important; }
.text-lowercase {
text-transform: lowercase !important; }
.text-uppercase {
text-transform: uppercase !important; }
.text-capitalize {
text-transform: capitalize !important; }
.font-weight-light {
font-weight: 300 !important; }
.font-weight-lighter {
font-weight: lighter !important; }
.font-weight-normal {
font-weight: 400 !important; }
.font-weight-bold {
font-weight: 700 !important; }
.font-weight-bolder {
font-weight: bolder !important; }
.font-italic {
font-style: italic !important; }

/* DISPLAY */
.clearfix::after {
display: block;
clear: both;
content: ""; }
.d-none {
display: none !important; }
.d-inline {
display: inline !important; }
.d-inline-block {
display: inline-block !important; }
.d-block {
display: block !important; }
.d-table {
display: table !important; }
.d-table-row {
display: table-row !important; }
.d-table-cell {
display: table-cell !important; }
.d-flex {
display: flex !important; }
.d-inline-flex {
display: inline-flex !important; }

.badge {
  display: inline-block;
  padding: 0.25em 0.4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.2308rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
  @media (prefers-reduced-motion: reduce) {
  .badge {
    transition: none; } }
  .badge[href]:hover, .badge[href]:focus {
    text-decoration: none; }
  .badge:empty {
    display: none; }

.btn .badge {
  position: relative;
  top: -1px; }

.badge-pill {
  padding-right: 0.6em;
  padding-left: 0.6em;
  border-radius: 10rem; }
  .badge-primary {
    color: #fff;
    background-color: #1e91cf; }
  .badge-primary[href]:hover, .badge-primary[href]:focus {
    color: #fff;
    background-color: #1872a2; }
  .badge-primary[href]:focus, .badge-primary[href].focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(30, 145, 207, 0.5); }
  .badge-secondary {
    color: #fff;
    background-color: #6c757d; }
  .badge-secondary[href]:hover, .badge-secondary[href]:focus {
    color: #fff;
    background-color: #545b62; }
  .badge-secondary[href]:focus, .badge-secondary[href].focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5); }
  .badge-success {
    color: #fff;
    background-color: #4cb64c; }
  .badge-success[href]:hover, .badge-success[href]:focus {
    color: #fff;
    background-color: #3c933c; }
  .badge-success[href]:focus, .badge-success[href].focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(76, 182, 76, 0.5); }
  .badge-info {
    color: #fff;
    background-color: #54b7d3; }
  .badge-info[href]:hover, .badge-info[href]:focus {
    color: #fff;
    background-color: #32a2c2; }
  .badge-info[href]:focus, .badge-info[href].focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(84, 183, 211, 0.5); }
  .badge-warning {
    color: #fff;
    background-color: #f3a638; }
  .badge-warning[href]:hover, .badge-warning[href]:focus {
    color: #fff;
    background-color: #ea8f0e; }
  .badge-warning[href]:focus, .badge-warning[href].focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(243, 166, 56, 0.5); }
  .badge-danger {
    color: #fff;
    background-color: #e3503e; }
  .badge-danger[href]:hover, .badge-danger[href]:focus {
    color: #fff;
    background-color: #d0321e; }
  .badge-danger[href]:focus, .badge-danger[href].focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(227, 80, 62, 0.5); }
  .badge-light {
    color: #212529;
    background-color: #fff; }
  .badge-light[href]:hover, .badge-light[href]:focus {
    color: #212529;
    background-color: #e6e6e6; }
  .badge-light[href]:focus, .badge-light[href].focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5); }
  .badge-dark {
    color: #fff;
    background-color: #343a40; }
  .badge-dark[href]:hover, .badge-dark[href]:focus {
    color: #fff;
    background-color: #1d2124; }
  .badge-dark[href]:focus, .badge-dark[href].focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5); }


.img-x {
  display: inline;
}

@media (min-width: 768px) {
  .form-horizontal .control-label-x {
      text-align: left;
      margin-bottom: 0;
      padding-bottom: 9px;
      padding-top: 0;
  }
}

.bg-dark-blue .control-label-x {
  color: #fff;
  font-weight: 400;
}

.bg-pale-blue .control-label-x {
  color: #000;
  font-weight: 400;
}

.form-group-x {
  border-top: 0px !important;
}

.bg-dark-blue {
  background-color: #2493D1;
}

.bg-pale-blue {
  background-color: #bce8f1;
}

/* Editor - Full Screen Bug */
.mce-fullscreen {
    z-index: 9999 !important;
}

/* Chnage default color */
#container {
    background: none;
}

.panel-default .panel-heading {
  color: #FFF;
  border-color: #2493D1;
  background: #2493D1;
  text-shadow: 0 -1px 0 rgba(50, 50, 50, 0);
}
.panel-default {
  border: 1px solid #2493D1;
  border-top: 1px solid #2493D1;
}

.nav-tabs {
  border-bottom: 1px solid #2493D1;
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
  color: #2493D1;
  background-color: #FFF;
  border: 1px solid #2493D1;
  border-bottom-color: transparent;
}
.nav-tabs > li > a {
  color: #000;
  border-radius: 2px 2px 0 0;
}
.nav-tabs > li > a:hover {
    border-color: #ff6600 #ff6600 #fff;
    color: #ff6600;
}
.nav > li > a:hover, .nav > li > a:focus {
    text-decoration: none;
    background-color: #D4F0E1;
    color: #086574 !important;
}

/*
.main-block {
  position: relative;
  height: 80vh;
}

.vertical-center {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
*/

#form-card {
    /*background-color: #2493D1 !important;*/
    background: rgb(2,0,36);
    /*background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
    background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
    background: linear-gradient(90deg, #3a47d5 0%, #00d2ff 100%);
    background: linear-gradient(90deg, #0072ff 0%, #00d4ff 100%);*/
    background: linear-gradient(90deg, #3a47d5 0%, #0072ff 100%);
    border-radius: 10px;
    border: 0;
    border-top: 0;
    padding: 25px;
    margin: 25px 0 50px 0;
}
#form-card label {
    color: #FFF;
    font-weight: 400;
}
#form-card .form-group + .form-group {
    border-top: none;
}
#form-card .form-group {
    padding-top:5px;
    padding-bottom: 0px;
}
#form-card .control-label{
    text-align: left;
    padding-bottom: 5px;
}

#search-card {
    margin: 25px 0 50px 0;
}

#search-card .panel-default{
    border-radius: 10px 10px 0 0;
}

#search-card .panel-heading {
    border-radius: 10px 10px 0 0;
}

#search-card .panel-body{
    /*padding: 0;*/
}

#search-card .btn {
    padding: 8px 18px;
    font-size: 11px;
  }

.table-striped>tbody>tr:nth-child(odd)>td,
.table-striped>tbody>tr:nth-child(odd)>th {
  background-color: #d9edf7;
  color: #333;
}
.table-striped>tbody>tr:nth-child(even)>td,
.table-striped>tbody>tr:nth-child(even)>th {
  background-color: #fff;
  color: #333;
}

#search-card .table > thead > tr > td, #search-card .table > tfoot > tr > td {
  color: #2493D1;
  font-size: 13px;
  padding-top:12px;
  padding-bottom: 12px;
}

#search-card .table > tfoot > tr > td {
    line-height: 30px;
}
#search-card .table tfoot td {
    font-weight: bold;
}


#search-card .table > tbody > tr > td {
  border-top: 1px solid #fff;
}

#search-card .panel-heading h3 {
  font-weight: 400;
}
#search-card .panel-title {
  font-size: 14px;
}

.breadcrumb > li:last-child a {
    color: #086574;
}
.breadcrumb > li {
    text-shadow: none;
}

#windows {
  color: #fff;
  font-weight: 300;
  font-size: 1.5em;
  font-family: 'Lato', Arial, sans-serif;
}

#windows .wrapper{
  margin:0 auto;  
  padding-left:12%;
  padding-right:12%;
}
#windows .heading{
  font-size: 4em;
  font-weight: 300;
  margin-bottom: .5em;
}

#windows .wrap{
width: auto;
height: auto;
/*margin: 70px 0px;*/
float: left;
}
#windows .fa{
color:#FFFFFF;
}
#windows div[class^="btn"]{
float: left;
margin: 0 10px 10px 0;
height: 95px;
position: relative;
cursor: pointer;
transition: all .4s ease;
user-drag: element;
border: solid 2px transparent;
text-align:center;
line-height:70px;
}
#windows div[class^="btn"]:hover{
  opacity: 0.7;
}
#windows div[class^="btn"]:active{
  transform: scale(.98,.98);
}
#windows .btn-big{width: 200px;}
#windows .btn-small{width: 95px;}
#windows .last{margin-right: 0 !important;}
#windows .Start{
color: #fff;
font: normal 30px 'Yanone Kaffeesatz', sans-serif;
margin-top: 20px;
margin-bottom: 20px;
cursor: pointer;
user-select: none;
transition: all .3s ease;
}
#windows .Start:hover{
  text-shadow: 0 0 4px #2493D1;
}

#windows .wrap:hover .Start{
  text-shadow: 0 0 4px #2493D1;
}
#windows .space{
  margin-bottom: 110px;
}
#windows .label{
  position: absolute;
  color: white;
  font: 500 12px sans-serif;
  left: 0;
  user-select: none;
  white-space: unset;
  text-align: center;
  width: 100%;
}
#windows .bottom{bottom: 5px;}
#windows .top{top: 5px;}

#windows .red{background: #df0024;}
#windows .blue{ background: #00a9ec;}
#windows .orange{background: #ff9000;}
#windows .green{background: #0e5d30;}
#windows .purple{background: #8b0189;}
#windows .red-light{background: #ce4e4e;}
#windows .photo{
  background: url('http://lorempixel.com/200/95/people');
  background-position: -2px -2px;
}
#windows .gray{
  background: #5f5f5f;
  animation: flip 6s linear infinite;
  transform: rotateX(0deg);
}
#windows .green-bright{background: #78d204;}
#windows .blue-nav{background: #25478e;}
#windows .redish{background: #fe0000;}
#windows .yellow{background: #d0d204;}

#windows .fa-2x {
    font-size: 1.5em;
}

#windows div[class^="icon"]{
  width: 45px;
  height: 45px;
  margin: 20px auto;
  background-size: 45px 45px;
}

::-webkit-scrollbar{
  width: 10px;
  height: 10px;
  cursor: pointer;  
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px 2px rgba(0,0,0,0.3);
    background: #007491;
}
::-webkit-scrollbar-thumb {
    background: #002f3b; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
    cursor: pointer;
}
::selection{
    background: #ff0000; 
    color: #fff;
}

@keyframes flip{
  0%{
    transform: rotateX(0deg);
  }
  15%{
    transform: rotateX(360deg);  
  }
  100%{
    transform: rotateX(360deg); 
  }
}

#windows .photo img{
  top: -4px;
  left: -4px;
  position: absolute;
  opacity: 0;
  animation: fade 8s ease-in-out infinite 8s;
  z-index: 0;
  border: solid 2px transparent;
  transition: all .3s ease;
}

#windows .photo img:hover{
  border: solid 2px mintcream;
}

@keyframes fade{
  0%{
    opacity: 0; 
  }
  10%{
    opacity: 1;
  }
  50%{
    opacity: 1;
  }
  60%{
    opacity: 0;
  }
}

.config-owner{
  color: #fff;
  font: normal 24px 'Yanone Kaffeesatz', sans-serif;
  padding: 5px 15px;
  top: 10px;
  position: relative;
}

.config-name{
  font: normal 14px 'Lato', Arial, sans-serif;
  color: #fff;
  padding: 0 15px;
  top: 7px;
  position: relative;
}

.has-error .select2-selection {
    border-color: #e3503e !important;
    }

    .bg-grey {
    background-color: #ccc!important;
}