/*!
 * style.css * 
 *
 * Copyright (c) 2018 Aldrich Delos Santos
 */



 @charset "UTF-8";

/* NOTY PROGRESSBAR */
.noty_has_timeout.noty_has_progressbar .noty_progressbar {
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background-color: #49f3e8;
  opacity: 0.8;
  filter: alpha(opacity=10);
}

 /* 
 CUSTOM CLASSES 
 */
 .td-textarea-1 {min-width: 10em; min-height: 2em; max-width: 20em; max-height: 10em;}
 .td-textarea-2 {min-width: 10em; min-height: 4em; max-width: 20em; max-height: 10em;}
 
 .login-box, .register-box {
   /* width: 1024px; */
   width: auto;
   margin: 13% auto;
 }
 
 .bg-full-tanholdings {
   /* The image used */
   background-image: url("../images/sbu-logos-bg2.jpg");
 
   /* Full height */
   background-repeat: no-repeat;
   background-size: cover;
   width: 100%;
   height: 100vh !important;
   background-position: center center;
 }
 
 .bg-full-tanholdings-2 {
   background-color: #333; 
   background-image: url("../images/bg-thc.jpg");
 }
 
 .btn-icon-gradient {
   background: linear-gradient(135deg, #3f4cc1 1%,#4bbaed 41%,#4bbaed 60%,#6e8fea 100%);
 }
 
 .fixed-bottom {
   position: absolute;
   bottom: 0;
   margin-right: 0;
 }
 .flexbox {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
 .fix-height-500 {
   height: 500px !important;
 }
 .fix-height-600 {
   height: 44em !important;
 }
 
 .rounded-3 {border-radius: 3px;}
 
 /* Custom Icon Classess */
 .icon-id-card {
   background-image: url("../images/icons/id-card.svg");
   background-position: center center;
 }
 
 /* Bootstrap table custom add-ons */
 .table-sm {zoom:85%;}
 .thead-blue >tr>th { color: white; background-color: rgb(3, 151, 236);}
 .thead-orange >tr>th { color: white; background-color: #f9902a;}
 /*.table .record-detail {background-color: #f5f5f5;}*/
 .table-details tr, .table-details th {
   background-color: #d8d8d8;
   /*border: 1px solid #f4f4f4;*/
 }
 /*.table-hover>tbody>tr:hover { background-color: #f4feff;}*/
 .has-error td {background-color: #ffacac;}
 
 .no-padding {
   padding: 0 !important;  
 }
 
 .no-padding-t {
   padding-top: 0 !important;  
 }
 
 .no-padding-b {  
   padding-bottom: 0 !important;
 }
 
 .no-padding-t-b {
   padding-top: 0 !important;
   padding-bottom: 0 !important;
 }
 
 .no-margin {
   margin: 0 !important;  
 }
 
 .no-margin-t {
   margin-top: 0 !important;  
 }
 
 .no-margin-b {  
   margin-bottom: 0 !important;
 }
 
 .no-margin-t-b {
   margin-top: 0 !important;
   margin-bottom: 0 !important;
 }
 
 .no-gutter > [class*='col-'] {
     padding-right:0;
     padding-left:0;
 }

 .row-disabled {
    color: #ccc;
    background-color: #f9f9f9!important;
 }
 
 /* ==============
   Helper Classes
 ===================*/
 .p-0 {
   padding: 0px !important;
 }
 .p-t-0 {
   padding-top: 0px !important;
 }
 .p-t-5 {
   padding-top: 5px !important;
 }
 .p-b-5 {
   padding-bottom: 5px !important;
 }
 .p-r-5 {
   padding-right: 5px !important;
 }
 .p-l-5 {
   padding-left: 5px !important;
 }
 .p-t-10 {
   padding-top: 10px !important;
 }
 .p-b-10 {
   padding-bottom: 10px !important;
 }
 .p-r-10 {
   padding-right: 10px !important;
 }
 .p-l-10 {
   padding-left: 10px !important;
 }
 .p-t-15 {
   padding-top: 15px !important;
 }
 .p-b-15 {
   padding-bottom: 15px !important;
 }
 .p-r-15 {
   padding-right: 15px !important;
 }
 .p-l-15 {
   padding-left: 15px !important;
 }
 .p-t-20 {
   padding-top: 20px !important;
 }
 .p-t-30 {
   padding-top: 30px !important;
 }
 .p-t-40 {
   padding-top: 40px !important;
 }
 .p-t-50 {
   padding-top: 50px !important;
 }
 .p-b-20 {
   padding-bottom: 20px !important;
 }
 .p-r-20 {
   padding-right: 20px !important;
 }
 .p-l-20 {
   padding-left: 20px !important;
 }
 .m-0 {
   margin: 0px !important;
 }
 .m-r-5 {
   margin-right: 5px;
 }
 .m-r-10 {
   margin-right: 10px;
 }
 .m-r-15 {
   margin-right: 15px !important;
 }
 .m-l-5 {
   margin-left: 5px;
 }
 .m-l-10 {
   margin-left: 10px;
 }
 .m-l-15 {
   margin-left: 15px;
 }
 .m-t-5 {
   margin-top: 5px !important;
 }
 .m-t-0 {
   margin-top: 0px;
 }
 .m-t-10 {
   margin-top: 10px !important;
 }
 .m-t-15 {
   margin-top: 15px !important;
 }
 .m-t-20 {
   margin-top: 20px;
 }
 .m-t-30 {
   margin-top: 30px !important;
 }
 .m-t-40 {
   margin-top: 40px !important;
 }
 .m-t-50 {
   margin-top: 50px !important;
 }
 .m-b-0 {
   margin-bottom: 0px;
 }
 .m-b-5 {
   margin-bottom: 5px;
 }
 .m-b-10 {
   margin-bottom: 10px;
 }
 .m-b-15 {
   margin-bottom: 15px;
 }
 .m-b-30 {
   margin-bottom: 30px;
 }
 .m-b-40 {
   margin-bottom: 40px;
 }
 .m-b-50 {
   margin-bottom: 50px;
 }
 
 /* BACKGROUND COLORS */
 .bg-white {
   background-color: #ffffff!important;
 }
 .bg-primary {
   background-color: #3c8dbc!important;
 }
 .bg-info {
   background-color: #00c0ef!important;
 }
 .bg-success {
   background-color: #00a65a!important;
 }
 .bg-warning {
   background-color: #f39c12!important;
 }
 .bg-danger {
   background-color: #f56954!important;
 }
 .bg-gray {
   background-color: #aaadbc!important;
 }
 
 /* TEXT COLORS */
 .text-white {
   color: #ffffff!important;
 }
 .text-blue {
   color: blue !important;
 }
 .text-bold {
   font-weight: bold !important;
 }
 .text-semi-bold {
   font-weight: 600 !important;
 }
 
 /* BORDER RADIUS */
 .rounded {
   border-radius: .25rem!important;  
 }
 .rounded-left {
   border-top-left-radius: .25rem!important;
   border-bottom-left-radius: .25rem!important;
 }
 .rounded-right {
   border-top-right-radius: .25rem!important;
   border-bottom-right-radius: .25rem!important;
 }
 
 /* ==========
   Main Design
 =============*/
 
 .fullpage-content {margin: 1em;}
 
 .wrapper, .main-sidebar, .left-side {
     background-color: #ffffff !important;
 }
 
 .content-wrapper {
   background-color: #ffffff;
 }
 
 hr {
     margin-top: 10px;
     margin-bottom: 15px;
     border: 0;
     border-top: 1px solid #eee;
 }
 
 th.action-button {
   padding: 2px 2px 2px 5px !important;
 }
 
 td.action-button {
   padding: 0px 0px 0px 8px !important;
 }
 
 
 /* ===============
   Daterange Picker
 =================*/
 .daterangepicker td.in-range {
   background-color: #489fe6;
   border-color: transparent;
   color: #fff;
   border-radius: 0;
 }
 
 .daterangepicker td.active {
   background-color: #357ebd!important;
   color: #fff !important;	
 }
 
 /* ======
   Popover
 =========*/
 .leave-table .popover {	
   width: 50em;
   max-width: 720px;
 }
 
 /* ==============
   Checkbox and Radio
 ===================*/
 .checkbox {
   padding-left: 20px;
 }
 th .radio,
 th .checkbox {  
   margin-top: 0px;
   margin-bottom: 0px;
   padding-left: 25px;
 }
 td .radio,
 td .checkbox {    
   margin-bottom: 0px;
   padding-left: 20px;
 }
 .checkbox label {
   display: inline-block;
   padding-left: 5px;
   position: relative;
 }
 .checkbox label::before {
   -o-transition: 0.3s ease-in-out;
   -webkit-transition: 0.3s ease-in-out;
   background-color: #ffffff;
   border-radius: 3px;
   border: 1px solid #cccccc;
   content: "";
   display: inline-block;
   height: 17px;
   left: 0;
   margin-left: -20px;
   position: absolute;
   transition: 0.3s ease-in-out;
   width: 17px;
   outline: none !important;
 }
 .checkbox label::after {
   color: #555555;
   display: inline-block;
   font-size: 11px;
   height: 16px;
   left: 0;
   margin-left: -20px;
   padding-left: 3px;
   padding-top: 1px;
   position: absolute;
   top: 0;
   width: 16px;
 }
 .checkbox input[type="checkbox"] {
   cursor: pointer;
   opacity: 0;
   z-index: 1;
   outline: none !important;
 }
 .checkbox input[type="checkbox"]:disabled + label {
   opacity: 0.65;
 }
 .checkbox input[type="checkbox"]:focus + label::before {
   outline-offset: -2px;
   outline: none;
 }
 .checkbox input[type="checkbox"]:checked + label::after {
   content: "\f00c";
   font-family: 'FontAwesome';
 }
 .checkbox input[type="checkbox"]:disabled + label::before {
   background-color: #eeeeee;
   cursor: not-allowed;
 }
 .checkbox.checkbox-circle label::before {
   border-radius: 50%;
 }
 .checkbox.checkbox-inline {
   margin-top: 0;
 }
 .checkbox.checkbox-single label {
   height: 17px;
 }
 .checkbox-primary input[type="checkbox"]:checked + label::before {
   background-color: #6e8cd7;
   border-color: #6e8cd7;
 }
 .checkbox-primary input[type="checkbox"]:checked + label::after {
   color: #ffffff;
 }
 .checkbox-danger input[type="checkbox"]:checked + label::before {
   background-color: #ef5350;
   border-color: #ef5350;
 }
 .checkbox-danger input[type="checkbox"]:checked + label::after {
   color: #ffffff;
 }
 .checkbox-info input[type="checkbox"]:checked + label::before {
   background-color: #29b6f6;
   border-color: #29b6f6;
 }
 .checkbox-info input[type="checkbox"]:checked + label::after {
   color: #ffffff;
 }
 .checkbox-warning input[type="checkbox"]:checked + label::before {
   background-color: #ffd740;
   border-color: #ffd740;
 }
 .checkbox-warning input[type="checkbox"]:checked + label::after {
   color: #ffffff;
 }
 .checkbox-success input[type="checkbox"]:checked + label::before {
   background-color: #33b86c;
   border-color: #33b86c;
 }
 .checkbox-success input[type="checkbox"]:checked + label::after {
   color: #ffffff;
 }
 /*.radio {
   padding-left: 20px;
 }
 .radio label {
   display: inline-block;
   padding-left: 5px;
   position: relative;
 }
 .radio label::before {
   -o-transition: border 0.5s ease-in-out;
   -webkit-transition: border 0.5s ease-in-out;
   background-color: #ffffff;
   border-radius: 50%;
   border: 1px solid #cccccc;
   content: "";
   display: inline-block;
   height: 17px;
   left: 0;
   margin-left: -20px;
   outline: none !important;
   position: absolute;
   transition: border 0.5s ease-in-out;
   width: 17px;
 }
 .radio label::after {
   -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
   -ms-transform: scale(0, 0);
   -o-transform: scale(0, 0);
   -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
   -webkit-transform: scale(0, 0);
   -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
   background-color: #555555;
   border-radius: 50%;
   content: " ";
   display: inline-block;
   height: 11px;
   left: 3px;
   margin-left: -20px;
   position: absolute;
   top: 3px;
   transform: scale(0, 0);
   transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
   width: 11px;
 }
 .radio input[type="radio"] {
   cursor: pointer;
   opacity: 0;
   z-index: 1;
   outline: none !important;
 }
 .radio input[type="radio"]:disabled + label {
   opacity: 0.65;
 }
 .radio input[type="radio"]:focus + label::before {
   outline-offset: -2px;
   outline: none;
 }
 .radio input[type="radio"]:checked + label::after {
   -ms-transform: scale(1, 1);
   -o-transform: scale(1, 1);
   -webkit-transform: scale(1, 1);
   transform: scale(1, 1);
 }
 .radio input[type="radio"]:disabled + label::before {
   cursor: not-allowed;
 }
 .radio.radio-inline {
   margin-top: 0;
 }
 .radio.radio-single label {
   height: 17px;
 }
 .radio-primary input[type="radio"] + label::after {
   background-color: #6e8cd7;
 }
 .radio-primary input[type="radio"]:checked + label::before {
   border-color: #6e8cd7;
 }
 .radio-primary input[type="radio"]:checked + label::after {
   background-color: #6e8cd7;
 }
 .radio-danger input[type="radio"] + label::after {
   background-color: #ef5350;
 }
 .radio-danger input[type="radio"]:checked + label::before {
   border-color: #ef5350;
 }
 .radio-danger input[type="radio"]:checked + label::after {
   background-color: #ef5350;
 }
 .radio-info input[type="radio"] + label::after {
   background-color: #29b6f6;
 }
 .radio-info input[type="radio"]:checked + label::before {
   border-color: #29b6f6;
 }
 .radio-info input[type="radio"]:checked + label::after {
   background-color: #29b6f6;
 }
 .radio-warning input[type="radio"] + label::after {
   background-color: #ffd740;
 }
 .radio-warning input[type="radio"]:checked + label::before {
   border-color: #ffd740;
 }
 .radio-warning input[type="radio"]:checked + label::after {
   background-color: #ffd740;
 }
 .radio-success input[type="radio"] + label::after {
   background-color: #33b86c;
 }
 .radio-success input[type="radio"]:checked + label::before {
   border-color: #33b86c;
 }
 .radio-success input[type="radio"]:checked + label::after {
   background-color: #33b86c;
 }*/
 
 .help-block {
     display: block;
     margin-top: 5px;
     margin-bottom: 10px;
     color: #737373;
 }
 
 
 /* MODAL CUSTOM */
 .modal {
   text-align: center;
   padding: 0!important;
 }
 .modal .select2-dropdown {
   text-align: left;
 }
 
 .modal:before {
   content: '';
   display: inline-block;
   height: 100%;
   vertical-align: middle;
   margin-right: -4px;
 }
 
 .modal-dialog {
   display: inline-block;
   text-align: left;
   vertical-align: middle;
 }
 
 /* panels */
 .panel-default>.panel-heading
 ,.panel-default>.panel-footer {
     background-color: transparent;
 }
 
 .filter-col{
     padding-left:10px;
     padding-right:10px;
 }
 
 .form-group-custom {
     margin-bottom: 5px;
 }
 
 /* BOX */
 .box-body-custom {
     padding-left: 0;
 }
 
 .box-bordered-sides
 ,.box-bordered-sides .box-footer {
   border-right: 0.5px solid #ececec;
   border-left: 0.5px solid #ececec;
 }
 
 .emrequired {
   color:red;
   font-size: 16px;
 }
 
 .select2-custom {
   position: static !important;
     outline:none !important;
 }
 
 .has-error .select2-selection {
     border: 1px solid #a94442;
     border-radius: 4px;
 }
 
 .td-custom {
   padding-bottom: 4px !important;
 }
 .checkbox-custom {
   text-align: center;
 }
 
 /* custom button styles */
 .btn-shadow {box-shadow: 0 1px 5px rgba(0, 0, 0, 0.62);}
 .btn-toolbar .btn{display:inline-block;*display:inline;*zoom:1;padding:4px 12px;margin-bottom:0;font-size:14px;line-height:20px;text-align:center;vertical-align:middle;cursor:pointer;color:#333333;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);background-color:#f5f5f5;background-image:-moz-linear-gradient(top, #ffffff, #e6e6e6);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(top, #ffffff, #e6e6e6);background-image:-o-linear-gradient(top, #ffffff, #e6e6e6);background-image:linear-gradient(to bottom, #ffffff, #e6e6e6);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);border-color:#e6e6e6 #e6e6e6 #bfbfbf;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);*background-color:#e6e6e6;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);border:1px solid #cccccc;*border:0;border-bottom-color:#b3b3b3;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;*margin-left:.3em;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);}.btn.active,.btn.disabled,.btn[disabled]{color:#333333;background-color:#e6e6e6;*background-color:#d9d9d9;}
 .btn-toolbar .btn:active
 ,.btn-toolbar .btn.active{background-color:#cccccc \9;}
 .btn-toolbar .btn:first-child{*margin-left:0;}
 .btn-toolbar .btn:hover
 ,.btn-toolbar .btn:focus{color:#333333;text-decoration:none;background-position:0 -15px;-webkit-transition:background-position 0.1s linear;-moz-transition:background-position 0.1s linear;-o-transition:background-position 0.1s linear;transition:background-position 0.1s linear;}
 .btn-toolbar .btn:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;}
 .btn-toolbar .btn.active
 ,.btn-toolbar .btn:active{background-image:none;outline:0;-webkit-box-shadow:inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);-moz-box-shadow:inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);box-shadow:inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);}
 
 .btn-rounded {
   border-radius: 2em;
 }
 
 .btn-page {
   color: #3c8dbc;
   border: 1px solid transparent;
   border-bottom: 1px solid #6b6b6bb8;
     padding: 6px 20px;
   border-color: transparent;
   background-color: transparent;
   transition: border 0.5s;
   margin-top: 5px;
 }
 
 .btn-page.active {
   /*background-color: #fdfdfd;*/
   background-color: #d2d6de;
 }
 
 .btn-page:hover, .btn-page:active, .btn-page.hover {
     color: #3c8dbc;
     background-color: transparent;
 }
 
 .btn-page.active.focus, .btn-page.active:focus, .btn-page.active:hover, .btn-page:active.focus, .btn-page:active:focus, .btn-page:active:hover, .open>.dropdown-toggle.btn-page.focus, .open>.dropdown-toggle.btn-page:focus, .open>.dropdown-toggle.btn-page:hover {
     background-color: #f9f9f9;
 }
 
 .panel-heading  button.btn-filter:before {	
   font-family: 'Glyphicons Halflings';
   content: "\e114";
   float: right;
   transition: all 0.5s;
   padding-left: 5px;
 }
 .panel-heading button.btn-filter.active:before {
   padding-right: 10px;
   /*padding-left: 0px;*/
   -webkit-transform: rotate(180deg);
   -moz-transform: rotate(180deg);
   transform: rotate(180deg);
 } 
 
 /* custom-badge */
 
 .badge-right {    
     margin-right: 5px;
 }
 
 
 /* MENU STYLES */
 .underline-magical {
   /*color: #333;*/
   /*border-bottom: 1px solid #6b6b6bb8;*/
 }
 
 .main-header .skin-gradient{
   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3f4cc1+1,4bbaed+41,4bbaed+60,6e8fea+100 */
   background: #3f4cc1; /* Old browsers */
   background: -moz-linear-gradient(-45deg, #3f4cc1 1%, #4bbaed 41%, #4bbaed 60%, #6e8fea 100%); /* FF3.6-15 */
   background: -webkit-linear-gradient(-45deg, #3f4cc1 1%,#4bbaed 41%,#4bbaed 60%,#6e8fea 100%); /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(135deg, #3f4cc1 1%,#4bbaed 41%,#4bbaed 60%,#6e8fea 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f4cc1', endColorstr='#6e8fea',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
 }
 
 .page-level-header .navbar {
   background-color: #3c8dbc;
   border-radius: 3px;
   margin-bottom: inherit;
 }
 
 .page-level-header .navbar-brand {
   color: #fff;
 }
 
 .knockout {
   background: url(http://apod.nasa.gov/apod/image/0603/coma_misti.jpg) -80px -80px;
   color: red;
   -webkit-text-fill-color: transparent;
   -webkit-background-clip: text;
   font-weight: bold;
   font-size: 100px;
   font-family: arial, helvetica;
   width: 600px;
   margin: 50px auto;
   text-align: center;
 }
 
 
 /* REMOVE ME IF TOP-BAR MENU HAVE CONTENTS */
 @media (max-width: 991px) {
   /*.navbar-collapse.pull-left+.navbar-custom-menu {
       display: block;
       position: absolute;
       top: 0;
       right: 15px;
   }*/
 }
 
 /* PACE || PROGESS CUSTOM */
 body.pace-running:before {
   content: "";
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   z-index: 1500;
   background-color: rgba(0, 0, 0, 0.5);
 }
 
 /* For a nice fade-in */
 body:before {
   background-color: rgba(0, 0, 0, 0);
   -webkit-transition: background-color 200ms;
   -moz-transtition: background-color 200ms;
   -ms-transition: background-color 200ms;
   -o-transition: background-color 200ms;
   transition: background-color 200ms;
 }
 
 /* Display Label */
 .display-label {
   margin-bottom: 0;
   vertical-align: middle;
   font-weight: inherit;
 }
 
 label.text-bold {font-weight: bold;}
 
 /*******************
 User card page
 ******************/
 .el-element-overlay .white-box {
   padding: 0px; }
 
 .el-element-overlay .el-card-item {
   position: relative;
   padding-bottom: 25px; }
   .el-element-overlay .el-card-item .el-card-avatar {
     margin-bottom: 15px; }
   .el-element-overlay .el-card-item .el-card-content {
     text-align: center; }
     .el-element-overlay .el-card-item .el-card-content h3 {
       margin: 0px; }
     .el-element-overlay .el-card-item .el-card-content a {
       color: #99abb4; }
       .el-element-overlay .el-card-item .el-card-content a:hover {
         color: #009efb; }
   .el-element-overlay .el-card-item .el-overlay-1 {
     width: 100%;
     overflow: hidden;
     position: relative;
     text-align: center;
     cursor: default; 
     border: 1px solid #7b7b7b80; }
     /* border: 1px solid #7b7b7b; } */
     .el-element-overlay .el-card-item .el-overlay-1 img {
       display: block;
       position: relative;
       /* -webkit-transition: all .4s linear;
       -o-transition: all .4s linear;
       transition: all .4s linear; */
       -webkit-transition: all .25s linear;
       -o-transition: all .25s linear;
       transition: all .25s linear;
       width: 100%;
       height: auto; }
     .el-element-overlay .el-card-item .el-overlay-1:hover img {
       -ms-transform: scale(1.2) translateZ(0);
       -webkit-transform: scale(1.2) translateZ(0);
       /* transform: scale(1.2) translateZ(0); */ }
     .el-element-overlay .el-card-item .el-overlay-1 .el-info {
       text-decoration: none;
       display: inline-block;
       text-transform: uppercase;
       color: #ffffff;
       background-color: transparent;
       filter: alpha(opacity=0);
       -webkit-transition: all .2s ease-in-out;
       -o-transition: all .2s ease-in-out;
       transition: all .2s ease-in-out;
       padding: 0;
       margin: auto;
       position: absolute;
       top: 50%;
       left: 0;
       right: 0;
       transform: translateY(-50%) translateZ(0);
       -webkit-transform: translateY(-50%) translateZ(0);
       -ms-transform: translateY(-50%) translateZ(0); }
       .el-element-overlay .el-card-item .el-overlay-1 .el-info > li {
         list-style: none;
         display: inline-block;
         margin: 0 3px; }
         .el-element-overlay .el-card-item .el-overlay-1 .el-info > li a {
           border-color: #ffffff;
           color: #ffffff;
           padding: 12px 15px 10px; }
           .el-element-overlay .el-card-item .el-overlay-1 .el-info > li a:hover {
             /* background: #009efb;
             border-color: #009efb;  */
            }
   .el-element-overlay .el-card-item .el-overlay {
     width: 100%;
     height: 100%;
     position: absolute;
     overflow: hidden;
     top: 0;
     left: 0;
     opacity: 0;
     /* background-color: rgba(0, 0, 0, 0.7); */
     -webkit-transition: all .4s ease-in-out;
     -o-transition: all .4s ease-in-out;
     transition: all .4s ease-in-out; }
   .el-element-overlay .el-card-item .el-overlay-1:hover .el-overlay {
     opacity: 1;
     filter: alpha(opacity=100);
     -webkit-transform: translateZ(0);
     -ms-transform: translateZ(0);
     transform: translateZ(0); }
   .el-element-overlay .el-card-item .el-overlay-1 .scrl-dwn {
     top: -100%; }
   .el-element-overlay .el-card-item .el-overlay-1 .scrl-up {
     top: 100%;
     height: 0px; }
   .el-element-overlay .el-card-item .el-overlay-1:hover .scrl-dwn {
     top: 0px; }
   .el-element-overlay .el-card-item .el-overlay-1:hover .scrl-up {
     top: 0px;
     height: 100%; }
 
 /*
 * Border Radius
 * --------------------------------------------------
 */
 .rounded-5 {
   border-radius: .5rem!important;    
 }
 .rounded-top-5 {
   border-top-right-radius: .5rem!important;
   border-top-left-radius: .5rem!important;
 }
 .rounded-bottom-5 {
   border-bottom-right-radius: .5rem!important;
   border-bottom-left-radius: .5rem!important;
 }
 .rounded-left-5 {
   border-top-left-radius: .5rem!important;
   border-bottom-left-radius: .5rem!important;
 }
 .rounded-right-5 {
   border-top-right-radius: .5rem!important;
   border-bottom-right-radius: .5rem!important;
 }
 
 .rounded-samsung {
   border-radius: 2.3rem!important;    
 }
 .rounded-top-samsung {
   border-top-right-radius: 2.3rem!important;
   border-top-left-radius: 2.3rem!important;
 }
 .rounded-bottom-samsung {
   border-bottom-right-radius: 2.3rem!important;
   border-bottom-left-radius: 2.3rem!important;
 }
 .rounded-left-samsung {
   border-top-left-radius: 2.3rem!important;
   border-bottom-left-radius: 2.3rem!important;
 }
 .rounded-right-samsung {
   border-top-right-radius: 2.3rem!important;
   border-bottom-right-radius: 2.3rem!important;
 }
 
 
 /*******************
 Paddings
 *******************/
 html body .p-0 {
   padding: 0px; }
 
 html body .p-5 {
   padding: 5px; }
 
 html body .p-10 {
   padding: 10px; }
 
 html body .p-20 {
   padding: 20px; }
 
 html body .p-30 {
   padding: 30px; }
 
 html body .p-l-0 {
   padding-left: 0px; }
 
 html body .p-l-10 {
   padding-left: 10px; }
 
 html body .p-l-20 {
   padding-left: 20px; }
 
 html body .p-r-0 {
   padding-right: 0px; }
 
 html body .p-r-10 {
   padding-right: 10px; }
 
 html body .p-r-20 {
   padding-right: 20px; }
 
 html body .p-r-30 {
   padding-right: 30px; }
 
 html body .p-r-40 {
   padding-right: 40px; }
 
 html body .p-t-0 {
   padding-top: 0px; }
 
 html body .p-t-10 {
   padding-top: 10px; }
 
 html body .p-t-20 {
   padding-top: 20px; }
 
 html body .p-t-30 {
   padding-top: 30px; }
 
 html body .p-b-0 {
   padding-bottom: 0px !important; }
 
 html body .p-b-5 {
   padding-bottom: 5px; }
 
 html body .p-b-10 {
   padding-bottom: 10px; }
 
 html body .p-b-20 {
   padding-bottom: 20px; }
 
 html body .p-b-30 {
   padding-bottom: 30px; }
 
 html body .p-b-40 {
   padding-bottom: 40px; }
 
 /*******************
 Margin
 *******************/
 html body .m-0 {
   margin: 0px; }
 
 html body .m-5 {
   margin: 5px; }
 
 html body .m-10 {
   margin: 10px; }
 
 html body .m-l-5 {
   margin-left: 5px; }
 
 html body .m-l-10 {
   margin-left: 10px; }
 
 html body .m-l-15 {
   margin-left: 15px; }
 
 html body .m-l-20 {
   margin-left: 20px; }
 
 html body .m-l-30 {
   margin-left: 30px; }
 
 html body .m-l-40 {
   margin-left: 40px; }
 
 html body .m-r-5 {
   margin-right: 5px; }
 
 html body .m-r-10 {
   margin-right: 10px; }
 
 html body .m-r-15 {
   margin-right: 15px; }
 
 html body .m-r-20 {
   margin-right: 20px; }
 
 html body .m-r-30 {
   margin-right: 30px; }
 
 html body .m-r-40 {
   margin-right: 40px; }
 
 html body .m-t-0 {
   margin-top: 0px; }
 
 html body .m-t-5 {
   margin-top: 5px; }
 
 html body .m-t-10 {
   margin-top: 10px; }
 
 html body .m-t-15 {
   margin-top: 15px; }
 
 html body .m-t-20 {
   margin-top: 20px; }
 
 html body .m-t-30 {
   margin-top: 30px; }
 
 html body .m-t-40 {
   margin-top: 40px; }
 
 html body .m-b-0 {
   margin-bottom: 0px; }
 
 html body .m-b-5 {
   margin-bottom: 5px; }
 
 html body .m-b-10 {
   margin-bottom: 10px; }
 
 html body .m-b-15 {
   margin-bottom: 15px; }
 
 html body .m-b-20 {
   margin-bottom: 20px; }
 
 html body .m-b-30 {
   margin-bottom: 30px; }
 
 html body .m-b-40 {
   margin-bottom: 40px; }
 
 /*******************
 vertical alignment
 *******************/
 html body .vt {
   vertical-align: top; }
 
 html body .vm {
   vertical-align: middle; }
 
 html body .vb {
   vertical-align: bottom; }
 
 /*******************
 Opacity
 *******************/
 .op-5 {
   opacity: 0.5; }
 
 /*******************
 font weight
 *******************/
 html body .font-bold {
   font-weight: 700; }
 
 html body .font-normal {
   font-weight: normal; }
 
 html body .font-light {
   font-weight: 300; }
 
 html body .font-medium {
   font-weight: 500; }
 
 html body .font-16 {
   font-size: 16px; }
 
 html body .font-14 {
   font-size: 14px; }
 
 html body .font-10 {
   font-size: 10px; }
 
 html body .font-18 {
   font-size: 18px; }
 
 html body .font-20 {
   font-size: 20px; }
 
 /*******************
 Border
 *******************/
 html body .b-0 {
   border: none; }
 
 html body .b-r {
   border-right: 1px solid rgba(120, 130, 140, 0.13); }
 
 html body .b-l {
   border-left: 1px solid rgba(120, 130, 140, 0.13); }
 
 html body .b-b {
   border-bottom: 1px solid rgba(120, 130, 140, 0.13); }
 
 html body .b-b-0 {
   border-bottom: none; box-shadow: none; }
 
 html body .b-t {
   border-top: 1px solid rgba(120, 130, 140, 0.13); }
 
 html body .b-all {
   border: 1px solid rgba(120, 130, 140, 0.13); }
 
 
 /*** Box Shadows ***/
 .z-depth-0 {
   -webkit-box-shadow: none !important;
   box-shadow: none !important; }
 
 .z-depth-1 {
   -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); }
 
 .z-depth-1-half {
   -webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
   box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15); }
 
 .z-depth-2 {
   -webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }
 
 .z-depth-3 {
   -webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
   box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19); }
 
 .z-depth-4 {
   -webkit-box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
   box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21); }
 
 .z-depth-5 {
   -webkit-box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
   box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22); }
 
 .hoverable {
   -webkit-box-shadow: none;
   box-shadow: none;
   -webkit-transition: all 0.55s ease-in-out;
   -o-transition: all 0.55s ease-in-out;
   transition: all 0.55s ease-in-out; }
   .hoverable:hover {
     -webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     -webkit-transition: all 0.55s ease-in-out;
     -o-transition: all 0.55s ease-in-out;
     transition: all 0.55s ease-in-out; }
 
 @media (min-width: 768px) {
   .display-label {
     text-align: right;
     margin-bottom: 0;    
   }
 
   
 }
 
 @media (max-width: 990px) {
   .display-label {
     text-align: right;
     margin-bottom: 0;    
   }
 
   .login-container {margin: 22%;}
   .login-container .login-title {margin-top: 0 !important;}
   
 }
 
 /* Portrait */
 @media only screen and (max-width: 500px) {    
   .fullpage-content {margin: 1em 2em 2em 2em;}
   
   .modal-dialog {
     width: 90%;
   }
   
   /* ======
   Popover
   =========*/
   .leave-table .popover {	
     /*width: 50em;*/
     max-width: 250px;
   }
   
   .login-container {margin: 2.2%;}
   .login-container .login-title {margin-top: 0 !important;}
 }
 
 /* Landscape */
 @media only screen and (max-width: 800px) {    
   .modal-dialog {
     width: 90%;
   }
   /* ======
     Popover
   =========*/
   .leave-table .popover {	
     /*width: 50em;*/
     max-width: 250px;
   }
   
   .login-container {margin: 2.2%;}
   .login-container .login-title {margin-top: 0 !important;}
 }
 
 /*  Bootstrap Clearfix */
 
 /* Mobile */
 @media screen and (max-width: 767px) {
   .col-xs-1:nth-child(12n+1),
   .col-xs-2:nth-child(6n+1),
   .col-xs-3:nth-child(4n+1),
   .col-xs-4:nth-child(3n+1),
   .col-xs-6:nth-child(2n+1){
     clear: left;
   }
 }
 
 /*  Tablet  */
 @media (min-width:767px){
 
   /* Column clear fix */
   .col-lg-1:nth-child(12n+1),
   .col-lg-2:nth-child(6n+1),
   .col-lg-3:nth-child(4n+1),
   .col-lg-4:nth-child(3n+1),
   .col-lg-6:nth-child(2n+1),
   .col-md-1:nth-child(12n+1),
   .col-md-2:nth-child(6n+1),
   .col-md-3:nth-child(4n+1),
   .col-md-4:nth-child(3n+1),
   .col-md-6:nth-child(2n+1){
     clear: none;
   }
   .col-sm-1:nth-child(12n+1),
   .col-sm-2:nth-child(6n+1),
   .col-sm-3:nth-child(4n+1),
   .col-sm-4:nth-child(3n+1),
   .col-sm-6:nth-child(2n+1){
     clear: left;
   }
 }
 
 
 /*  Medium Desktop  */
 @media (min-width:992px){
 
   /* Column clear fix */
   .col-lg-1:nth-child(12n+1),
   .col-lg-2:nth-child(6n+1),
   .col-lg-3:nth-child(4n+1),
   .col-lg-4:nth-child(3n+1),
   .col-lg-6:nth-child(2n+1),
   .col-sm-1:nth-child(12n+1),
   .col-sm-2:nth-child(6n+1),
   .col-sm-3:nth-child(4n+1),
   .col-sm-4:nth-child(3n+1),
   .col-sm-6:nth-child(2n+1){
     clear: none;
   }
   .col-md-1:nth-child(12n+1),
   .col-md-2:nth-child(6n+1),
   .col-md-3:nth-child(4n+1),
   .col-md-4:nth-child(3n+1),
   .col-md-6:nth-child(2n+1){
     clear: left;
   }
 }
 
 
 /*  Large Desktop  */
 @media (min-width:1200px){
 
   /* Column clear fix */
   .col-md-1:nth-child(12n+1),
   .col-md-2:nth-child(6n+1),
   .col-md-3:nth-child(4n+1),
   .col-md-4:nth-child(3n+1),
   .col-md-6:nth-child(2n+1),
   .col-sm-1:nth-child(12n+1),
   .col-sm-2:nth-child(6n+1),
   .col-sm-3:nth-child(4n+1),
   .col-sm-4:nth-child(3n+1),
   .col-sm-6:nth-child(2n+1){
     clear: none;
   }
   .col-lg-1:nth-child(12n+1),
   .col-lg-2:nth-child(6n+1),
   .col-lg-3:nth-child(4n+1),
   .col-lg-4:nth-child(3n+1),
   .col-lg-6:nth-child(2n+1){
     clear: left;
   }
 }
 
 /* OVERLAY */
 tr .overlay, .overlay-wrapper .overlay {
   z-index: 50;
   background: rgba(255,255,255,0.7);
   border-radius: 3px;
 }
 
 tr>.overlay, .overlay-wrapper>.overlay, tr>.loading-img, .overlay-wrapper>.loading-img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
 }
 
 .main-header {
   z-index: 1000;;
 }
 
 /* BADGE */
 .el-card-item>.badge {
   position: absolute;
   top: -3px;
   right: -5px;
   font-size: 1.5rem;
   font-weight: 400;
   z-index: 10;
 }
 
 /* TYPOGRAPHY */
 .text-upper {text-transform: uppercase;}
 .text-lower {text-transform: lowercase;}
 
 /* SUB-FOOTER */
 footer .sub-footer{
   font-size: 12px;
   color: #9da5b3;
   border-top: 1px solid #eff1f5;
   margin-top: 40px;
   padding-top: 29px;
   padding-bottom: 10px;
   text-align: center;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-pack: justify;
   justify-content: space-between;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
 }
 footer .sub-footer ul{
   display: flex;
   list-style: none;
   flex: 0 0 auto;
   padding-left: 0;
 }
 footer .sub-footer ul>li{
   margin-right: 8px;
 }

 /*******************
Notify
*******************/
.notify {
  position: relative;
  top: -25px;
  right: -7px; }
  .notify .heartbit {
    position: absolute;
    top: -20px;
    right: -4px;
    height: 25px;
    width: 25px;
    z-index: 10;
    border: 5px solid #fc4b6c;
    border-radius: 70px;
    -moz-animation: heartbit 1s ease-out;
    -moz-animation-iteration-count: infinite;
    -o-animation: heartbit 1s ease-out;
    -o-animation-iteration-count: infinite;
    -webkit-animation: heartbit 1s ease-out;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite; }
  .notify .point {
    width: 6px;
    height: 6px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    background-color: #fc4b6c;
    position: absolute;
    right: 6px;
    top: -10px; }

@-moz-keyframes heartbit {
  0% {
    -moz-transform: scale(0);
    opacity: 0.0; }
  25% {
    -moz-transform: scale(0.1);
    opacity: 0.1; }
  50% {
    -moz-transform: scale(0.5);
    opacity: 0.3; }
  75% {
    -moz-transform: scale(0.8);
    opacity: 0.5; }
  100% {
    -moz-transform: scale(1);
    opacity: 0.0; } }

@-webkit-keyframes heartbit {
  0% {
    -webkit-transform: scale(0);
    opacity: 0.0; }
  25% {
    -webkit-transform: scale(0.1);
    opacity: 0.1; }
  50% {
    -webkit-transform: scale(0.5);
    opacity: 0.3; }
  75% {
    -webkit-transform: scale(0.8);
    opacity: 0.5; }
  100% {
    -webkit-transform: scale(1);
    opacity: 0.0; } }

/*
----------------
Animation Repo
----------------
Aldrich Delos Santos
2022-03-18
*/    
.gelatine {
  animation: gelatine 0.5s infinite;
}
@keyframes gelatine {
  from, to { transform: scale(1, 1); }
  25% { transform: scale(0.9, 1.1); }
  50% { transform: scale(1.1, 0.9); }
  75% { transform: scale(0.95, 1.05); }
}

.spin {
  animation: spin 1s infinite linear;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.elastic-spin {
  animation: elastic-spin 1s infinite ease;
}
@keyframes elastic-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(720deg); }
}

.pulse {
  animation: pulse 1s infinite ease-in-out alternate;
}
@keyframes pulse {
  from { transform: scale(0.8); }
  to { transform: scale(1.2); }
}

.flash {
  animation: flash 500ms ease infinite alternate;
}
@keyframes flash {
	from { opacity: 1; }	
	to { opacity: 0; }
}

.hithere {
  animation: hithere 1s ease infinite;
}
@keyframes hithere {
  30% { transform: scale(1.2); }
  40%, 60% { transform: rotate(-20deg) scale(1.2); }
  50% { transform: rotate(20deg) scale(1.2); }
  70% { transform: rotate(0deg) scale(1.2); }
  100% { transform: scale(1); }
}

.grow {
  animation: grow 2s ease infinite;
}
@keyframes grow {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

.fade-in {
  animation: fade-in 2s linear infinite;
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-out {
  animation: fade-out 2s linear infinite;
}
@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

.bounce {
  animation: bounce 2s ease infinite;
}
@keyframes bounce {
    70% { transform:translateY(0%); }
    80% { transform:translateY(-15%); }
    90% { transform:translateY(0%); }
    95% { transform:translateY(-7%); }
    97% { transform:translateY(0%); }
    99% { transform:translateY(-3%); }
    100% { transform:translateY(0); }
}

.bounce2 {
  animation: bounce2 2s ease infinite;
}
@keyframes bounce2 {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(-30px);}
	60% {transform: translateY(-15px);}
}

.shake {
  animation: shake 2s ease infinite;
}
@keyframes shake {
	0%, 100% {transform: translateX(0);}
	10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
	20%, 40%, 60%, 80% {transform: translateX(10px);}
}

.flip {
	backface-visibility: visible !important;
	animation: flip 2s ease infinite;
}
@keyframes flip {
	0% {
		transform: perspective(400px) rotateY(0);
		animation-timing-function: ease-out;
	}
	40% {
		transform: perspective(400px) translateZ(150px) rotateY(170deg);
		animation-timing-function: ease-out;
	}
	50% {
		transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
		animation-timing-function: ease-in;
	}
	80% {
		transform: perspective(400px) rotateY(360deg) scale(.95);
		animation-timing-function: ease-in;
	}
	100% {
		transform: perspective(400px) scale(1);
		animation-timing-function: ease-in;
	}
}

.swing {
	transform-origin: top center;
	animation: swing 2s ease infinite;
}
@keyframes swing {
	20% { transform: rotate(15deg); }	
	40% { transform: rotate(-10deg); }
	60% { transform: rotate(5deg); }	
	80% { transform: rotate(-5deg); }	
	100% { transform: rotate(0deg); }
}

.wobble {
  animation: wobble 2s ease infinite;
}
@keyframes wobble {
  0% { transform: translateX(0%); }
  15% { transform: translateX(-25%) rotate(-5deg); }
  30% { transform: translateX(20%) rotate(3deg); }
  45% { transform: translateX(-15%) rotate(-3deg); }
  60% { transform: translateX(10%) rotate(2deg); }
  75% { transform: translateX(-5%) rotate(-1deg); }
  100% { transform: translateX(0%); }
}

.fade-in-down {
  animation: fade-in-down 2s ease infinite;
}
@keyframes fade-in-down {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-left {
  animation: fade-in-left 2s ease infinite;
}
@keyframes fade-in-left {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.fade-out-down {
  animation: fade-out-down 2s ease infinite;
}
@keyframes fade-out-down {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(20px);
  }
}

.fade-out-right {
  animation: fade-out-right 2s ease infinite;
}
@keyframes fade-out-right {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(20px);
  }
}

.bounce-in {
  animation: bounce-in 1.3s ease;
  /* animation: bounce-in 2s ease infinite; */
}
@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: scale(.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% { transform: scale(.9); }
  100% { transform: scale(1); }
}

.bounce-in-right {
  animation: bounce-in-right 2s ease infinite;
}
@keyframes bounce-in-right {
  0% {
    opacity: 0;
    transform: translateX(2000px);
  }
  60% {
    opacity: 1;
    transform: translateX(-30px);
  }
  80% { transform: translateX(10px); }
  100% { transform: translateX(0); }
}

.bounce-out {
  animation: bounce-out 2s ease infinite;
}
@keyframes bounce-out {
  0% { transform: scale(1); }
  25% { transform: scale(.95); }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
    transform: scale(.3);
  } 
}

.bounce-out-down {
  animation: bounce-out-down 2s ease infinite;
}
@keyframes bounce-out-down {
  0% { transform: translateY(0); }
  20% {
    opacity: 1;
    transform: translateY(-20px);
  }
  100% {
    opacity: 0;
    transform: translateY(20px);
  }
}

.rotate-in-down-left {
  animation: rotate-in-down-left 2s ease infinite;
}
@keyframes rotate-in-down-left {
  0% {
    transform-origin: left bottom;
    transform: rotate(-90deg);
    opacity: 0;
  }
  100% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1;
  }
}

.rotate-in-up-left {
  animation: rotate-in-up-left 2s ease infinite;
}
@keyframes rotate-in-up-left {
  0% {
    transform-origin: left bottom;
    transform: rotate(90deg);
    opacity: 0;
  }
  100% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1;
  }
}

.hinge {
  animation: hinge 2s ease infinite;
}
@keyframes hinge {
  0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; }  
  20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; }  
  40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; } 
  80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; } 
  100% { transform: translateY(700px); opacity: 0; }
}

.roll-in {
  animation: roll-in 2s ease infinite;
}
@keyframes roll-in {
  0% {
    opacity: 0;
    transform: translateX(-100%) rotate(-120deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0px) rotate(0deg);
  }
}

.roll-out {
  animation: roll-out 2s ease infinite;
}
@keyframes roll-out {
    0% {
    opacity: 1;
    transform: translateX(0px) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translateX(100%) rotate(120deg);
  }
}

/*******************
Print
*******************/
@media print {
  tr.page-break  { display: block !important; page-break-before: always; }
}


/*
PYRO / FIREWORKS
*/
.pyro > .before, .pyro > .after {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  box-shadow: -120px -218.66667px blue, 248px -16.66667px #00ff84, 190px 16.33333px #002bff, -113px -308.66667px #ff009d, -109px -287.66667px #ffb300, -50px -313.66667px #ff006e, 226px -31.66667px #ff4000, 180px -351.66667px #ff00d0, -12px -338.66667px #00f6ff, 220px -388.66667px #99ff00, -69px -27.66667px #ff0400, -111px -339.66667px #6200ff, 155px -237.66667px #00ddff, -152px -380.66667px #00ffd0, -50px -37.66667px #00ffdd, -95px -175.66667px #a6ff00, -88px 10.33333px #0d00ff, 112px -309.66667px #005eff, 69px -415.66667px #ff00a6, 168px -100.66667px #ff004c, -244px 24.33333px #ff6600, 97px -325.66667px #ff0066, -211px -182.66667px #00ffa2, 236px -126.66667px #b700ff, 140px -196.66667px #9000ff, 125px -175.66667px #00bbff, 118px -381.66667px #ff002f, 144px -111.66667px #ffae00, 36px -78.66667px #f600ff, -63px -196.66667px #c800ff, -218px -227.66667px #d4ff00, -134px -377.66667px #ea00ff, -36px -412.66667px #ff00d4, 209px -106.66667px #00fff2, 91px -278.66667px #000dff, -22px -191.66667px #9dff00, 139px -392.66667px #a6ff00, 56px -2.66667px #0099ff, -156px -276.66667px #ea00ff, -163px -233.66667px #00fffb, -238px -346.66667px #00ff73, 62px -363.66667px #0088ff, 244px -170.66667px #0062ff, 224px -142.66667px #b300ff, 141px -208.66667px #9000ff, 211px -285.66667px #ff6600, 181px -128.66667px #1e00ff, 90px -123.66667px #c800ff, 189px 70.33333px #00ffc8, -18px -383.66667px #00ff33, 100px -6.66667px #ff008c;
  -moz-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  -webkit-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  -o-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  -ms-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards; }

.pyro > .after {
  -moz-animation-delay: 1.25s, 1.25s, 1.25s;
  -webkit-animation-delay: 1.25s, 1.25s, 1.25s;
  -o-animation-delay: 1.25s, 1.25s, 1.25s;
  -ms-animation-delay: 1.25s, 1.25s, 1.25s;
  animation-delay: 1.25s, 1.25s, 1.25s;
  -moz-animation-duration: 1.25s, 1.25s, 6.25s;
  -webkit-animation-duration: 1.25s, 1.25s, 6.25s;
  -o-animation-duration: 1.25s, 1.25s, 6.25s;
  -ms-animation-duration: 1.25s, 1.25s, 6.25s;
  animation-duration: 1.25s, 1.25s, 6.25s; }

@-webkit-keyframes bang {
  from {
    box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white; } }
@-moz-keyframes bang {
  from {
    box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white; } }
@-o-keyframes bang {
  from {
    box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white; } }
@-ms-keyframes bang {
  from {
    box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white; } }
@keyframes bang {
  from {
    box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white; } }
@-webkit-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0; } }
@-moz-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0; } }
@-o-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0; } }
@-ms-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0; } }
@keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0; } }
@-webkit-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%; }

  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%; }

  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%; }

  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%; }

  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%; } }
@-moz-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%; }

  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%; }

  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%; }

  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%; }

  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%; } }
@-o-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%; }

  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%; }

  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%; }

  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%; }

  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%; } }
@-ms-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%; }

  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%; }

  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%; }

  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%; }

  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%; } }
@keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%; }

  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%; }

  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%; }

  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%; }

  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%; } }



/* Auto-hide chatbot when a modal is open (all screen sizes, Bootstrap 3 & 4 compatible) */
body.modal-open .chatbot-preview-container,
body.modal-open .chatbot-overlay {
  display: none !important;
}