/*Color
    #E8F3E8
    #92C591
    #559E54
    #305A30
    #0A3409
*/
/*===================================*/
body{
    margin:0;
    margin-top: 2px;
    background-color: #E8F3E8;
}
header, main, footer{
    margin-bottom: 10px;
}
footer{
    text-align: center;
    font-size: 11px;
}
a, body, .pagination>li>a{
    color: #305A30;
}
.response a, .response body, .response .pagination>li>a, .response th, .response td {
  color: #ff0000;
}
.alert, .breadcrumb{
    box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
}

#user .btn{
    margin:5px;
    cursor: pointer;
}
/*#user .btn:nth-child(2){
    margin: 0px;
}*/
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control, .form-control {
    -webkit-transition: .4s;
}
.glyphicon-eye-close, .glyphicon-eye-open{
  float: right; 
  position: relative; 
  right: 10px; 
  top: -30px; 
  z-index: 3;
}
.goog-te-gadget-simple{
  border-radius: 4px;
}
/*==============Component===========*/
table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: 1px solid #ddd;
}

th, td {
    text-align: center;
    padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}
/*==============NAV_form===========*/
.nav>li>form {
    position: relative;
    display: block;
    padding: 10px 15px;
}
.navbar-nav>li>form {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 20px;
}
@media (min-width: 768px){
  .navbar-nav>li>form {
      padding-top: 15px;
      padding-bottom: 15px;
  }
  .navbar {
  border-radius: 0;
  }
}
.navbar-default .navbar-nav>li>form>button {
  border: none;
  background-color: transparent;
  color: #777;
}
.navbar-default .navbar-nav > li > form>button:hover, .navbar-default .navbar-nav > li > form>button:focus {
  color: #333;
  background-color: transparent;
}

.dropdown-menu{
    background-color: #f8f8f8;
    border-color: #e7e7e7;
}
.dropdown-menu>li>form>button {
  border: none;
  background-color: transparent;
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    white-space: nowrap;
    cursor:pointer;
}
.dropdown-menu>li>form>button:focus, .dropdown-menu>li>form>button:hover {
    color: #262626;
    text-decoration: none;
    background-color: #f5f5f5;
}
.dropdown-menu, .dropdown-menu>li>button, .dropdown-menu>li>form>button {
  width: 100%;
  text-align: left;
  color:#777;
}

/*Breadcrumb*/
.breadcrumb{ padding-top: 0px; padding-bottom: 0px; }
.breadcrumb>li{ padding-top: 8px; padding-bottom: 8px; }
.breadcrumb>li>a{ color: #777; }
.breadcrumb>li>a.active, .breadcrumb>li>a:focus, .breadcrumb>li>a:hover{ color: #555; }
.breadcrumb-inverse>li>a{ color: #9d9d9d; }
.breadcrumb-inverse>li.active, .breadcrumb-inverse>li:focus, .breadcrumb-inverse>li:hover{ color: #fff; }
/*===============GO_TOP===========*/
#go-top {
    position: fixed; 
    bottom: 10px; 
    right: 10px;
    text-align: center;
    cursor:pointer; 
    display:none;
    width: 60px;
    height: 60px;
    background: #92C591;
    line-height: 30px;
    border-radius: 30px;
}
#go-top:hover {
    background: #559E54;
    color: #0A3409;
}
/*==============LOGIN==============*/
.input-group .form-control{
    position: initial!important;
}
.form_container {
    padding: 16px;
    max-width: 100%;
}
/* Add Zoom Animation */
.animate {
    -webkit-animation: animatezoom 0.6s;
    animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
    from {-webkit-transform: scale(0)} 
    to {-webkit-transform: scale(1)}
}
    
@keyframes animatezoom {
    from {transform: scale(0)} 
    to {transform: scale(1)}
}
/*==============snackbar==============*/
#snackbar {
    visibility: hidden; /* Hidden by default. Visible on click */
    min-width: 250px; /* Set a default minimum width */
    margin-left: -125px; /* Divide value of min-width by 2 */
    background-color: #333; /* Black background color */
    color: #fff; /* White text color */
    text-align: center; /* Centered text */
    border-radius: 4px; /* Rounded borders */
    padding: 16px; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 4; /* Add a z-index if needed */
    left: 50%; /* Center the snackbar */
    bottom: 30px; /* 30px from the bottom */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
    visibility: visible; /* Show the snackbar */

/* Add animation: Take 0.5 seconds to fade in and out the snackbar. 
However, delay the fade out process for 2.5 seconds */
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;} 
    to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;} 
    to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}
/*==============progress-bar-load==============*/
.load {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
  background-color: #f1f1f1;
}
.progress-container-load {
  width: 100%;
  height: 2px;
  background: #ccc;
}
.progress-bar-load {
  height: 2px;
  background: #4caf50;
  width: 0%;
}
/*=================Switch CHECKBOX===================*/
.switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 25px;
}

.switch input {
    display:none;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 19px;
    width: 19px;
    left: 3px;
    bottom: 3px;
    background-color: #fefefe;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #4ed765;
}

input:focus + .slider {
    box-shadow: 0 0 1px #4ed765;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

  /* Rounded sliders */
.slider.round {
    border-radius: 25px;
}

.slider.round:before {
    border-radius: 50%;
}
/*==============Radio_button_&_Checkbox==============*/
.cont {
    display: block;
    position: relative;
    padding-top: 4px;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.cont input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 26px;
    width: 26px;
    background-color: #ccc;
}

.cont input:checked ~ .checkmark {
    background-color: #4ed765;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.cont input:checked ~ .checkmark:after {
    display: block;
}
/*Checkbox*/
.square .checkmark:after {
    left: 9px;
    top: 5px;
    width: 8px;
    height: 13px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/*Radio Button*/
.circle .checkmark {
    border-radius: 50%;
}

.circle .checkmark:after {
    top: 8px;
    left: 8px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: white;
}
/*==============Deactivated==============*/
.Deactivated .btn{
    background-color: #777;
    border-color: #777;
    color: white;
}
.Deactivated td, .Deactivated a{ color: #777; }
.Deactivated td{ background-color: rgba(119, 119, 119, 0.1); }
/*==============Registration==============*/
  #msg p{
    margin: 5px;
  }
  .valid {
      color: green;
  }
  .valid:before {
      position: relative;
      content: "✔";
  }
  .invalid {
      color: red;
  }
  .invalid:before {
      position: relative;
      content: "✖";
  }
  /*==============Loader==============*/
  .loader {
  position: relative;
  margin: 0 auto;
  width: 100px;
}
.loader:before {
  content: '';
  display: block;
  padding-top: 100%;
}

.circular {
  -webkit-animation: rotate 2s linear infinite;
          animation: rotate 2s linear infinite;
  height: 100%;
  -webkit-transform-origin: center center;
          transform-origin: center center;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.path {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
          animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  stroke-linecap: round;
}

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

@keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}
@-webkit-keyframes color {
  100%,
  0% {
    stroke: #d62d20;
  }
  40% {
    stroke: #0057e7;
  }
  66% {
    stroke: #008744;
  }
  80%,
  90% {
    stroke: #ffa700;
  }
}
@keyframes color {
  100%,
  0% {
    stroke: #d62d20;
  }
  40% {
    stroke: #0057e7;
  }
  66% {
    stroke: #008744;
  }
  80%,
  90% {
    stroke: #ffa700;
  }
}
.showbox {
  width:100%;
  height:100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color:#eee;
  display: flex;
  justify-content:center;
  align-items:center;
  z-index: 10;
}