/* ================================ */
/* ======== INDICE ========= */
/* ================================ */
/*
0. RESETS
1. GOOGLE FONTS
2. VAR DE CORES
	2.1. VARIAVEIS DE COR
	2.2  SELETORES DE COR
3. ESTILOS BASICOS
4. ICONS
5. ESTUTURA MENUS
	5.1. MENU LATERAL
	5.2. MENU DO TOPO	
6. ESTRUTURA CENTRAL
6. BUTTONS
7. MESSAGES
8. POP UPS
*/
/* =============================== */
/* ========== 0. RESETS ==========*/
/* =============================== */
:root {	
	--font_family_regular: 'Roboto', sans-serif !important;	
}
html {
	-webkit-font-smoothing: antialiased !important;
    font-smoothing: antialiased !important;
	text-rendering: optimizeLegibility !important;
	overflow-x: hidden;
	width: 100%;
	height: 100%;
	position: relative;
}
body {
	font-size: 13px;
	font-weight: 400;
	line-height: 1.64285;
	overflow: hidden;	
	height: 100%;
	width: 100%;
	position: fixed;
	background-color: var(--background_light);
	color: var(--foreground_light);	
}
p {	
	margin-top: 0px !important;
	margin-bottom: 0px !important;
	line-height: 16px !important;
} 
label {	
	margin: 0 !important;
}
table {	
	max-width: 100%;
  	background-color: transparent;
  	border-collapse: collapse;
  	border-spacing: 0;
}
[type=file] {
	display: none;
}
::-webkit-scrollbar {
	width: 10px;
	height: 8px;	
}
::-webkit-scrollbar-track {
	background-color: var(--highlight_light);
	border-right: thin solid transparent;
	border-left: thin solid var(--highlight_light);
	border-top: thin solid transparent;
	border-bottom: thin solid transparent;	
}
::-webkit-scrollbar-track:HOVER {
	background-color: var(--highlight_light);	
}
::-webkit-scrollbar-thumb {
	background-color: var(--scroll_color);
	border: thin solid var(--border_color_light);
	border-radius: 6px;	
}
* {
	margin: 0;
	padding: 0;
}
/* =============================== */
/* ========== 1. GOOGLE FONTS ==========*/
/* =============================== */
@import url("font-face/releway.css");
@import url("font-face/open-sans.css");
@import url("font-face/roboto.css");
/* =================================  */
/* ========== 2. VAR DE CORES ==========  */
/* =================================  */
/* ========== 2.1. VARIAVEIS DE COR ==========  */	
/* 	THEME LIGHT */
:root {
	--background_light: #F4F2F0;
	--foreground_light: #292724;
	--highlight_light: #FFFFFF;
	--highlight_transparent_light: rgba(255,255,255,0.99);
	--accent_light: #44475A;
	--accent_high_contrast_light: #44475A;
	--border_color_light: #CFD8DC;		
	--background_hover_light: rgb(13,63,103,0.09);
	/* 	COMMOM COLOR */
	--background_popup: rgba(51,48,48,0.8);	
	--forerground_button_color: #f8f8f2;
	--contrast_color: #788fc8;
	--sub_menu_color: #f4f5f9;
	--table_selection: #e1e8f0; /*rgba(194,218,255,1)*/
	--scroll_color: rgba(208,223,230,1);
}
/* 	THEME DARK */
@media (prefers-color-scheme:dark) {
	:root {
	/* 	THEME LIGHT */
/* 	--background_light: #282a36; */
/* 	--foreground_light: #f8f8f2; */
/* 	--highlight_light: #44475a; */
/* 	--highlight_transparent_light: rgba(68,71,90,0.99); */
/* 	--accent_light: #6272a4; */
/* 	--accent_high_contrast_light: #AAB9E3; */
/* 	--border_color_light: #4B526E; */
/* 	--background_hover_light: #282a36;	 */
	/* 	COMMOM COLOR */
/* 	--background_popup: rgba(51,48,48,0.8);	 */
/* 	--forerground_button_color: #f8f8f2; */
/* 	--contrast_color: #EC6A5C; */
/* 	--sub_menu_color: #282a36; */
/* 	--table_selection: #282a36; */
/* 	--scroll_color: #6272a4; */
	}	
}
/* ========== 2.2 SELETORES DE COR ==========  */
.bg_highlight {
	background-color: var(--highlight_light);
	color: var(--foreground_light);
	border-color: var(--border_color_light); 	
}
.bg_primary { 
	background-color: var(--highlight_light);
}
.bg_secondary {
	background-color: var(--background_light);
}
.bg_header {
	background-color: var(--highlight_light);
}
.bg_bar {
	background-color: var(--highlight_light);
}
.bg_table_bar {
	background-color: #fafafa;
}
.bg_popup_loading {
	background-color: var(--highlight_light);
}
.bg_title{
	background-color: #8C95AA;	
	color: #fff;
	fill: #ffffff;
}
.bg_expander{
	background-color: #8C95AA;
	color: #ffffff;
	fill: #ffffff;
}
.bg_popup {
	background-color: var(--highlight_light);
}
.bg_title_popup{
	background-color: var(--accent_light);	
	color: #fff;
	fill: #fff;
}
.bg_authentication {
	background: #DDE0DF;
}
.bg_accent {
	background-color: #E57A44;
}
.bg_aura_1 {
	background-color: var(--accent_light);
	box-shadow: 0px 0px 60px 20px rgba(40,190,155 ,0.5);
}
.bg_aura_2 {
	background-color: var(--accent_light);
	box-shadow: 0px 0px 60px 10px rgba(96,145,148 ,0.5), 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
}
.bg_gray {
	background-color: #74828F;
	color: #fff;
}
.bg_deep_gray {
	background-color: #595959;
	color: #fff;
}
.bg_green {
	background-color: #6ABE83;
	color: #fff;
}
.bg_red {
	background-color: #E0474C;
	color: #fff;
}
.bg_orange {
	background-color: #E57A44;
	color: #fff;
}
.bg_blue {
	background-color: #4472CA;
	color: #fff;
}
.table .table_reset_label .tx_color_blue, .tx_color_blue {
	font-weight: 700;
	color: #3399FF;				
}
.table .table_reset_label .tx_color_white, .tx_color_white {
	font-weight: 700;
	color: #78c0a8;				
}
.table .table_reset_label .tx_color_orange, .tx_color_orange {	
	font-weight: 700;
	color: #F5783D;			
}
.table .table_reset_label .tx_color_red, .tx_color_red {	
	font-weight: 700;
	color: #e94c6f;	
}
.table .table_reset_label .tx_color_green, .tx_color_green {	
	font-weight: 700;
	color: #00c07f;			
}
.table .table_reset_label .tx_color_grey, .tx_color_grey {	
	font-weight: 700;
	color: #74828F;		
}
.table .table_reset_label .tx_color_deep_gray, .tx_color_deep_gray {	
	font-weight: 700;
	color: #595959;		
}
.fill_color_orange {	
	fill: #E57A44;	
}
.fill_color_red {	
	fill: #E0474C;
}
.fill_color_green {	
	fill: #38925E;	
}
.fill_color_blue {	
	fill: #1098F7;
}
.fill_color_grey {	
	fill: #1098F7;
}
/* =================================  */
/* ========== 3. ESTILOS BASICOS ==========  */
/* =================================  */
:root {
	--logo_app: url("../images/app/logo_cri_corp.svg");
	--logo_app_big: url("../images/theme-default-com/logo-agsdoc.png");
}
/* BORDAS */
.border_solid {
	border: 1px solid var(--border_color_light);
}
.border_solid_left {
	border-left: 1px solid var(--border_color_light);
}
.border_solid_top {
	border-top: 1px solid var(--border_color_light);
}
.border_solid_right {
	border-right: 1px solid var(--border_color_light);
}
.border_solid_bottom {
	border-bottom: 1px solid var(--border_color_light);
}
/* =================================  */
/* ========== 4. ICONS ==========  */
/* =================================  */

/* Lembrar de alterar para Image Sprites */
/* ICONS LIGHT */
.icon_menu_painel {background-image: url("../images/svg/painel.svg");}
.icon_menu_contracts {background-image: url("../images/svg/contratos.svg");}
.icon_menu_protocols {background-image: url("../images/svg/e-protocolo.svg");}
.icon_menu_e_bank {background-image: url("../images/svg/e-bank.svg");}
.icon_menu_e_notas {background-image: url("../images/svg/e-notas.svg");}
.icon_menu_certificate {background-image: url("../images/svg/certidao.svg");}
.icon_menu_rcde {background-image: url("../images/svg/rcde.svg");}
.icon_menu_electronic_search {background-image: url("../images/svg/pesquisa.svg");}
.icon_menu_online_registration {background-image: url("../images/svg/matricula.svg");}
.icon_menu_financial {background-image: url("../images/svg/financeiro.svg");}
.icon_menu_settings {background-image: url("../images/svg/configuracao.svg");}
.icon_expander {background-image: url("../images/svg/expander.svg");}
.icon_menu_associate {background-image: url("../images/svg/associate.svg");}
.icon_menu_convenantes {background-image: url("../images/svg/convenantes.svg");}
.icon_menu_error {background-image: url("../images/svg/error.svg");}
.icon_menu_manager-bank {background-image: url("../images/svg/manager-bank.svg");}
.icon_menu_register_office {background-image: url("../images/svg/register-office.svg");	}
.icon_menu_estate {background-image: url("../images/svg/estate.svg")}
.icon_menu_bank {background-image: url("../images/svg/bank.svg");}
.icon_menu_pass {background-image: url("../images/svg/repasses.svg");}
.icon_menu_fail_registre {background-image: url("../images/svg/tentatia-cadastro.svg")}
.icon_menu_coupons {background-image: url("../images/svg/cupons-de-desconto.svg")}
.icon_excel {background-image: url("../images/svg/excel-icon.svg");}
.icon_menu_notification {background-image: url("../images/svg/notification-icon.svg");} 
.icon_menu_system_notification {background-image: url("../images/svg/system_notification.svg");}
.icon_menu_other_services {background-image: url("../images/svg/other_services.svg");}
.icon_menu_real_estate_registration {background-image: url("../images/svg/estate-services.svg");}
.icon_menu_notary {background-image: url("../images/svg/notary-services.svg");}
.icon_menu_users {background-image: url("../images/svg/usuarios.svg");}
.icon_menu_user_groups {background-image: url("../images/svg/grupos.svg");}
.icon_menu_spe {background-image: url("../images/svg/spe.svg");}
.icon_menu_e_protocol_signatures {background-image: url("../images/svg/assinatura-de-e-protocolos.svg");}
.icon_menu_alerts_and_notifications {background-image: url("../images/svg/notificacoes-e-alertas.svg");}
.icon_menu_credit_follow_up {background-image: url("../images/svg/acompanhamento-de-creditos.svg");}
.icon_menu_billets {background-image: url("../images/svg/boletos-gerados.svg");}
.icon_menu_invoices {background-image: url("../images/svg/faturas.svg");}
.icon_menu_movements {background-image: url("../images/svg/movimentacoes.svg");}
.icon_menu_refund_movements {background-image: url("../images/svg/reembolso.svg");}
.icon_menu_prices_list {background-image: url("../images/svg/tabela-de-precos.svg");}
.icon_menu_notary_certificate_request {background-image: url("../images/svg/certidao-de-notas.svg");}
.icon_menu_scripture {background-image: url("../images/svg/escrituras.svg");}
.icon_menu_power_of_attorney {background-image: url("../images/svg/procuracoes.svg");}
.icon-menu-registry-offices-indicated {background-image: url("../images/svg/register-office.svg");}
.icon-menu-birth {background-image: url("../images/svg/nascimento.svg");}
.icon-menu-wedding {background-image: url("../images/svg/casamento.svg");}
.icon-menu-death {background-image: url("../images/svg/obito.svg");}

/* ICONS DARK */
@media (prefers-color-scheme:dark) {
/* 	.icon_menu_painel {background-image: url("../images/svg/painel-dark.svg");} */
/* 	.icon_menu_contracts {background-image: url("../images/svg/contratos-dark.svg");} */
/* 	.icon_menu_protocols {background-image: url("../images/svg/e-protocolo-dark.svg");} */
/* 	.icon_menu_e_bank {background-image: url("../images/svg/e-bank-dark.svg");} */
/* 	.icon_menu_e_notas {background-image: url("../images/svg/e-notas-dark.svg");} */
/* 	.icon_menu_certificate {background-image: url("../images/svg/certidao-dark.svg");} */
/* 	.icon_menu_rcde {background-image: url("../images/svg/rcde-dark.svg");} */
/* 	.icon_menu_electronic_search {background-image: url("../images/svg/pesquisa-dark.svg");} */
/* 	.icon_menu_online_registration {background-image: url("../images/svg/matricula-dark.svg");} */
/* 	.icon_menu_financial {background-image: url("../images/svg/financeiro-dark.svg");} */
/* 	.icon_menu_settings {background-image: url("../images/svg/configuracao-dark.svg");} */
/* 	.icon_expander {background-image: url("../images/svg/expander-dark.svg");} */
/* 	.icon_menu_associate {background-image: url("../images/svg/associate-dark.svg");} */
/* 	.icon_menu_convenantes {background-image: url("../images/svg/convenantes-dark.svg");} */
/* 	.icon_menu_error {background-image: url("../images/svg/error-dark.svg");} */
/* 	.icon_menu_manager-bank {background-image: url("../images/svg/manager-bank-dark.svg");} */
/* 	.icon_menu_register_office {background-image: url("../images/svg/register-office-dark.svg");} */
/* 	.icon_menu_bank {background-image: url("../images/svg/bank-dark.svg");} */
/* 	.icon_menu_pass {background-image: url("../images/svg/repasses-dark.svg");} */
}
/* =================================  */
/* ========== 5. ESTUTURA MENUS ==========  */
/* =================================  */
:root {
	--width_close_nav_sidebar: 70px;
	--width_open_nav_sidebar: 200px;
	--height_nav_sidebar: 100%;		
	--height_nav_sidebar_item: 50px;	
	--height_nav_menu_option: 100px; /*O DOBRO DO VALOR DA VAR (height_nav_sidebar_item)*/
	--shadow_nav_sidebar: rgba(80,54,191,.08);
	--transition_all: all 0.09s ease;	
}
@media (prefers-color-scheme:dark) {
	:root {
/* 		--shadow_nav_sidebar: rgba(49,49,49,.2);	 */
	}
}
/* ========== 5.1. MENU LATERAL ==========  */
/* AJUSTES DO MENU FECHADO */
.sidebar_close .nav_sidebar {
	width: var(--width_close_nav_sidebar);
	box-shadow: 5px 50px 4px var(--shadow_nav_sidebar);
}
.sidebar_close .nav_sidebar .logo_app {
	background-image: var(--logo_app);
	background-size: 35px;
}
.sidebar_close .sub_nav_sidebar {
	left: var(--width_close_nav_sidebar);		
}
.sidebar_close .nav_sidebar .menu-option ul li a label {
	display: none;	
}
.sidebar_close .header_top {
	width: calc(100% - var(--width_close_nav_sidebar));
	left: var(--width_close_nav_sidebar);
}
.sidebar_close .wrapper_view { 
	width: calc(100% - var(--width_close_nav_sidebar));
	left: var(--width_close_nav_sidebar);
}
.accordion {
  color: #444;
  cursor: pointer;
  margin: 0;
  font-weight: 300;
  background-color: lightsteelblue; 
  width: 100%; 
  padding-bottom: 4px !important;
}
.ac_active, .accordion:hover, .accordion:hover::after {
	background-color: #2b51b191;
	color: white;
  	height: -webkit-fill-available;
}
.accordion::before {
	color: #50659b;
	display: inline-block;	
    margin-left: 8px;
    vertical-align: 2px;
    content: "";
    border-top: .4em solid;
    border-right: .4em solid transparent;
    border-bottom: 0;
    border-left: .4em solid transparent;
    margin-right: 8px;
}
.ac_active::before {
	color: #50659b;
	display: inline-block;	
    margin-left: 4px;
    vertical-align: 3px;
    content: "";
    border-bottom: .4em solid;
    border-right: .4em solid transparent;
    border-top: 0;
    border-left: .4em solid transparent;
    margin-right: 8px;
}
.accordion-panel {
  padding: 0 8px;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.2s ease-out;
}
.financ_submenu_close {
	display: none !important;
}
.financ_submenu_open {
	display: inline-block !important;
	margin-top: 15px !important; 
	background-color: #f9f9f9;
	padding-left: 0px;
}
.price_table_submenu_close {
	display: none !important;
}
.price_table_submenu_open {
	display: inline-block !important;
	margin-top: -10px !important;
	background-color: #f9f9f9;
	padding-left: 0px;
}
.price_table_submenu_title_down::after {
	color: #50659b;
	display: inline-block;	
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .4em solid;
    border-right: .4em solid transparent;
    border-bottom: 0;
    border-left: .4em solid transparent;
    margin-right: 8px;
    padding-top: 7px !important;
}
.price_table_submenu_title_up::after {
	color: #50659b;
	display: inline-block;	
    margin-left: 12px;
    vertical-align: 12px;
    content: "";
    border-bottom: .4em solid;
    border-right: .4em solid transparent;
    border-top: 0;
    border-left: .4em solid transparent;
    margin-right: 8px;
}
.price_table_region_submenu_close {
	display: none !important;
}
.price_table_region_submenu_open {
	display: inline-block !important;
	margin-top: -10px !important;
	background-color: #f9f9f9;
	padding-left: 0px;
}
.price_table_region_submenu_title_down::before {
	color: #50659b;
	display: inline-block;	
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .4em solid;
    border-right: .4em solid transparent;
    border-bottom: 0;
    border-left: .4em solid transparent;
    margin-right: 8px;
}
.price_table_region_submenu_title_up::before {
	color: #50659b;
	display: inline-block;	
    margin-left: 4px;
    vertical-align: 3px;
    content: "";
    border-bottom: .4em solid;
    border-right: .4em solid transparent;
    border-top: 0;
    border-left: .4em solid transparent;
    margin-right: 8px;
}
.financ_submenu_title_down::before {
	color: #788fc8;
	display: inline-block;	
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .4em solid;
    border-right: .4em solid transparent;
    border-bottom: 0;
    border-left: .4em solid transparent;
    margin-right: 8px;
}
.financ_submenu_title_up::before {
	color: #788fc8;
	display: inline-block;	
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-bottom: .4em solid;
    border-right: .4em solid transparent;
    border-top: 0;
    border-left: .4em solid transparent;
    margin-right: 8px;
}
.sidebar_open .nav_sidebar {
	width: var(--width_open_nav_sidebar);	
	box-shadow: 5px 60px 4px var(--shadow_nav_sidebar);
}
.sidebar_open .nav_sidebar .logo_app {
	background-image: var(--logo_app_big);
	background-size: 130px;
}
.sidebar_open .sub_nav_sidebar {
	left: var(--width_open_nav_sidebar);		
}
.sidebar_open .nav_sidebar .menu-option ul li a label {	
	display: inline-block;	
}
.sidebar_open .header_top {
	width: calc(100% - var(--width_open_nav_sidebar));
	left: var(--width_open_nav_sidebar);
}
.sidebar_open .wrapper_view { 
	width: calc(100% - var(--width_open_nav_sidebar));
	left: var(--width_open_nav_sidebar);
}
/* SELETORES DO MENU LATERAL */
.nav_sidebar {
	background-color: var(--highlight_light);
	height: var(--height_nav_sidebar);
	position: fixed;
	z-index: 10;	
	border-right: 1px solid var(--border_color_light);	
	overflow: hidden;
	-webkit-transition: var(--transition_all);
	transition: var(--transition_all); 
}
/* SELETOR DO LOGO DO APP */
.nav_sidebar .logo_app {
	width: 100%;
	height: var(--height_nav_sidebar_item);	
	background-repeat: no-repeat;
	background-position: center;
	border-bottom: 1px solid var(--border_color_light);	
	position: absolute;
	top: 0;
	cursor: pointer;
}
/* OP�AO DE EXPANDIR MENU */
.nav_sidebar .expander {
	width: 100%;
	height: var(--height_nav_sidebar_item);
	border-top: 1px solid var(--border_color_light);
	text-align: center;
	transition: var(--transition_all);
	position: absolute;
	bottom: 0;		
}
.nav_sidebar .expander a {
	display: block;	
	width: 100%;
	height: var(--height_nav_sidebar_item);
}
.nav_sidebar .expander a i {
	float: left;
	width: 100%;
	height: var(--height_nav_sidebar_item);
	background-repeat: no-repeat;
	background-size: 70px;	
	background-position: center;	
}
/* AREA DOS ITENS DE MENU */
.nav_sidebar .menu-option {	
	width: 100%;
	height: calc(100% - var(--height_nav_menu_option));
	margin-top: var(--height_nav_sidebar_item);
	overflow-x: hidden;
}

.nav_sidebar .menu-option ul {	
	list-style: none;	
}
.nav_sidebar .menu-option ul li {
	float: left;
	width: 100%;
	height: var(--height_nav_sidebar_item);
	border-bottom: 1px solid var(--border_color_light);
	position: relative;		
}
.nav_sidebar .menu-option ul li:hover {
	background: var(--background_hover_light);
}
/* SELETOR PARA ITEM SELECIONADO */
.nav_sidebar .menu-option ul .select {
	background: var(--background_hover_light);
	color: var(--contrast_color);
	fill: var(--contrast_color);
}
.nav_sidebar .menu-option ul .select a label {	
	color: var(--contrast_color) !important;	
}
.nav_sidebar .menu-option ul .select a {	
	color: var(--contrast_color) !important;	
}
.nav_sidebar .menu-option ul .select::before {
	background: var(--contrast_color);	
	width: 5px;
	height: var(--height_nav_sidebar_item);	
	position: absolute;	
	content: "";
	box-shadow: 5px 0px 4px var(--shadow_nav_sidebar);	
}
/* SELETOR DO ITENS DA LISTA */
.nav_sidebar .menu-option ul li a {
	display: block;		
	display: inline-table;	
	width: 100%;		
}
.nav_sidebar .menu-option ul li a i {
	float: left;
	width: var(--width_close_nav_sidebar);
	height: var(--height_nav_sidebar_item);	
	background-repeat: no-repeat;
	background-size: 60px;
	background-position: 5px 5px;	
}
.nav_sidebar .menu-option ul li a label {
	float: left;
	width: calc(100% - var(--width_close_nav_sidebar));	
	font-size: 12px;
	line-height: 14px;
	padding-top: 18px;
	display: inline-block;	
	font-weight: 600;	
	cursor: pointer;
	color: var(--foreground_light);	
}
.nav_sidebar .menu-option ul .select a label {
	font-weight: 700;
}
/* SELETORES DO SUB-MENU */
.base_sub_nav_sidebar {
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: var(--background_popup);
	backdrop-filter: saturate(180%) blur(5px);
	z-index: 8;
	transition: var(--transition_all);
}
.base_sub_nav_sidebar .sub_nav_sidebar {		
	width: var(--width_open_nav_sidebar);	
	height: var(--height_nav_sidebar);
	background-color: var(--sub_menu_color);
	position: fixed;
	z-index: 9;	
	box-shadow: 2px 0 4px rgba(0,0,0,0.3);
	transition: var(--transition_all);
	overflow: auto;
}
.close_sub_sidebar {
	display: none;
	transition: var(--transition_all);
}
.sub_nav_sidebar ul {
	list-style: none;
	display: inline-table;
	width: 100%;
}
/* TITULO SUB-MENU */
.sub_nav_sidebar ul .title {		
	background-color: var(--highlight_light);
	color: var(--contrast_color);
	padding-top: 18px;
	padding-left: 15px;
	box-shadow: 5px 5px 4px var(--shadow_nav_sidebar);
	font-weight: 600;
	font-size: 15px;
	line-height: 16px;
}
.sub_nav_sidebar ul .title:HOVER {
	background: var(--highlight_light);
}
/* ITENS SUB-MENU */
.sub_nav_sidebar ul li {
	float: left;
	width: 100%;
	height: var(--height_nav_sidebar_item);
	border-bottom: 1px solid var(--border_color_light);	
}
.sub_nav_sidebar ul li:HOVER {
	background: rgba(0,0,0,0.07);
}
.sub_nav_sidebar ul li a {	
	text-decoration: none;	
	display: inline-block;
	padding-top: 18px;
	padding-left: 15px;	
	width: 100%;
	height: 100%;
	color: var(--foreground_light);
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;	
}
/* ========== 5.2. MENU DO TOPO ==========  */
.header_top {	
	height: var(--height_nav_sidebar_item); /*A MESMA ALTURA DOS ITENS DO SIDEBAR*/
	position: fixed;
	border-bottom: 1px solid var(--border_color_light);	
	z-index: 7;
	box-shadow: 5px 5px 4px var(--shadow_nav_sidebar);
	-webkit-transition: var(--transition_all);
	transition: var(--transition_all);	
}
/* AREA DO TITULO DA PAGINA */
.header_top .title_header {
	position: absolute;
	width: 300px;
	height: 100%;
	padding-top: 16px;
	padding-left: 15px;	
}
.header_top .title_header label {
	font-size: 15px;
	line-height: 16px;
	font-weight: 700;
}

.header_top .user_area {
	width: auto;
	height: 100%;	
	position: absolute;
	right: 0;	
	display: flex;
}

.header_top .creditos_cri {
	width: auto;
	position: absolute;
	right: 240px;
	display: flex;
}
.header_top .creditos_cri label {
	color: #3DC7BE;
	border: 1px solid #3DC7BE;
	border-radius: 4px;
	box-shadow: 0 2px 4px var(--shadow_nav_sidebar);
	padding: 4px 8px;
}
/* CARRINHO */
.header_top .user_area .user_cart {	
	position: relative;
	padding-top: 12px;
	min-width: 80px;
	min-height: 50px;
	text-align: center;
	cursor: pointer;
/* 	right: 80px; */
}
.header_top .user_area .user_cart:HOVER {
	background-color: rgba(0,0,0,0.1);
	transition: all 0.3s;
}
.header_top .user_area .user_cart svg {
	width: 26px;
	fill: var(--accent_light);	
}
.header_top .user_area .user_cart label {
	position: absolute;
	width: 20px;
	height: 20px;
	top: 5px;
	right: 12px;
	background-color: #e42c64;
	color: #fff;
	border-radius: 50%;
	box-shadow: 0 4px 2px rgba(0,0,0,.3);
	cursor: pointer;
}

/* NOTIFICA��ES */

.header_top .user_notification {
	width: auto;
	height: 100%;
	position: absolute;
	right: 80px;		
	display: flex;
}
.header_top .user_notification .user_cart {	
	position: relative;
	padding-top: 12px;
	min-width: 80px;
	min-height: 50px;
	text-align: center;
	cursor: pointer;	
}
.header_top .user_notification .user_cart:HOVER {
	background-color: rgba(0,0,0,0.1);
	transition: all 0.3s;
}
.header_top .user_notification .user_cart svg {
	width: 26px;
	fill: var(--accent_light);	
}
.header_top .user_notification .user_cart label {
	position: absolute;
	width: 20px;
	height: 20px;
	top: 5px;
	right: 12px;
	background-color: #e42c64;
	color: #fff;
	border-radius: 50%;
	box-shadow: 0 4px 2px rgba(0,0,0,.3);
	cursor: pointer;
}

.header_top .user_notification .user_option {	
	width: 80px;
	height: 100%;		  
	text-align: center;
	padding-top: 6px;	
	cursor: pointer;
	-webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.header_top .user_notification .user_option:HOVER {
	background-color: rgba(0,0,0,0.1);
	transition: all 0.3s;
}
.header_top .user_notification .user_option label {
	border: 2px solid var(--accent_high_contrast_light);	
	color: var(--accent_high_contrast_light);
	background-color: var(--background_hover_light);	
	padding-top: 5px;
	width: 38px;
	height: 38px;
	border-radius: 50%; 
	font-size: 16px;
	font-weight: 700;
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
	cursor: pointer;	
}
.header_top .user_notification .user_option::AFTER {
	color: var(--accent_light);
	display: inline-block;	
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .4em solid;
    border-right: .4em solid transparent;
    border-bottom: 0;
    border-left: .4em solid transparent;
}

/* OP�OES DO USUARIO */
.header_top .user_area .user_option {	
	width: 80px;
	height: 100%;		  
	text-align: center;
	padding-top: 6px;	
	cursor: pointer;
	-webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.header_top .user_area .user_option:HOVER {
	background-color: rgba(0,0,0,0.1);
	transition: all 0.3s;
}
.header_top .user_area .user_option label {
	border: 2px solid var(--accent_high_contrast_light);	
	color: var(--accent_high_contrast_light);
	background-color: var(--background_hover_light);	
	padding-top: 5px;
	width: 38px;
	height: 38px;
	border-radius: 50%; 
	font-size: 16px;
	font-weight: 700;
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
	cursor: pointer;	
}
.header_top .user_area .user_option::AFTER {
	color: var(--accent_light);
	display: inline-block;	
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .4em solid;
    border-right: .4em solid transparent;
    border-bottom: 0;
    border-left: .4em solid transparent;
}

/* =================================  */
/* ========== 6. ESTRUTURA CENTRAL ==========  */
/* =================================  */
:root {
	--canvas_app: var(--height_nav_sidebar_item);
	--width_details: 350px;
}
@media (max-width: 1450px) {
	:root {
		--width_details: 250px;
	}	
}
/* DIV PAI */
.wrapper_view {	
	height: calc(100% - var(--canvas_app));	
	top: var(--canvas_app);	
	position: fixed;
	overflow: hidden;	
	z-index: 1;			
	-webkit-transition: var(--transition_all);
	transition: var(--transition_all);	
	width: fit-content;
}
/* BASE SEM DETALHES NA DIREITA */
.base_view_table_no_details {
	width: calc(100% - 0px);
	height: 100%;
	float: left;
	overflow: auto;
	position: relative;
	transition: var(--transition_all);	
}
/* BASE COM DETALHES NA DIREITA */
.base_view_table_with_details {	
	height: 100%;
	float: left;
	overflow: hidden;
	position: relative;
	transition: var(--transition_all);	
}
/* AREA DE DETALHEDES FECHADA */
.details_close .base_view_table_with_details {
	width: calc(100% - 0px);
}
.details_close .area_details {
	width: 0px;
}
/* AREA DE DETALHEDES ABERTA */
.details_open .base_view_table_with_details {
	width: calc(100% - var(--width_details));
}
.details_open .area_details {
	width: var(--width_details);
	height: 100%;
	float: left;	
	overflow: hidden;
	-webkit-transition: var(--transition_all);
   	transition: var(--transition_all);
   	border-left: 1px solid var(--border_color_light);
   	background-color: var(--highlight_light);
}

/**************************************************
*************  AREA A SER SUBSTITUIDA  ****************
**************************************************/
/* BASE SEM DETALHE DA DIREITA */
.base_view {
	width: 100%;
	height: 100%;	
}
/* BASE SEM DETALHES NA DIREITA */
.base_view_table_fixed {
	width: calc(100% - 0px);
	height: 100%;
	float: left;
	overflow: auto;
	position: relative;
	transition: var(--transition_all);	
}
/* BASE COM DETALHES NA DIREITA */
.base_view_table {	
	height: 100%;
	float: left;
	overflow: hidden;
	position: relative;
	transition: var(--transition_all);	
}
/* AREA DE DETALHEDES FECHADA */
.details_close .base_view_table {
	width: calc(100% - 0px);
}
/* AREA DE DETALHEDES ABERTA */
.details_open .base_view_table {
	width: calc(100% - 350px);
}
@media (max-width: 1460px) {
	.details_open .base_view_table {
		width: calc(100% - 250px);
	}
	.details_open .base_view_table_details {
		width: 250px;
	}	
}
.details_close .base_view_table_details {
	width: 0px;
}
.details_open .base_view_table_details {
	width: 350px;
}
.base_view_table_details {	
	height: 100%;
	float: left;	
	overflow: hidden;
	-webkit-transition: var(--transition_all);
   	transition: var(--transition_all);
   	border-left: 1px solid var(--border_color_light);
}

.base_view_space_left {
	width: 100px;
	height: 100%;	
	float: left;
	padding: 5px;
	-webkit-transition: var(--transition_all);
   	transition: var(--transition_all);
	z-index: 907;
}
.base_view_space_center_height_fixed_fluid {
	width: calc(100% - 100px);
	height: calc(100% - 0px);	
	float: left;
	-webkit-transition: var(--transition_all);
   	transition: var(--transition_all);
   	overflow: auto;
}
.base_view_space_center_height_fluid_right_left {
	width: calc(100% - 0px);
	height: calc(100% - 0px);	
	float: left;
	-webkit-transition: var(--transition_all);
   	transition: var(--transition_all);
   	overflow: auto;
}
.base_view_space_left_big {
	width: 350px;
	height: 100%;	
	float: left;
	-webkit-transition: var(--transition_all);
   	transition: var(--transition_all);   	
	z-index: 907;		
}
.base_view_space_center_height_fixed_fluid_space_left {
	width: calc(100% - 350px);
	height: calc(100% - 0px);	
	float: left;
	-webkit-transition: var(--transition_all);
   	transition: var(--transition_all);
   	overflow: auto;
}
.base_view_space_right_fluid  {
	width: calc(100% - 350px);
	height: calc(100% - 0px);	
	float: left;
	-webkit-transition: var(--transition_all);
   	transition: var(--transition_all);
   	overflow: auto;
}
.base_view_space_right {
	width: 350px;
	height: 100%;	
	float: right;
	-webkit-transition: var(--transition_all);
   	transition: var(--transition_all);   	
	z-index: 907;		
}
/**************************************************
************* FIM DA AREA A SER SUBSTITUIDA  ****************
**************************************************/
/* AREA FIXA DE BAIXO */
.area_bottom {
	width: 100%;
	background-color: var(--highlight_light);
	height: var(--height_nav_sidebar_item);	
	overflow: hidden;	
	border-top: 1px solid var(--border_color_light);
	position: absolute;
}
.area_bottom nav {	
	float: right;
	padding-top: 8px;
	padding-right: 5px;
	cursor: pointer;
}
.area_bottom nav .page-link {
	background: var(--highlight_light);
	border: 1px solid var(--border_color_light);
	color: var(--foreground_light);
	fill: var(--foreground_light);
}
.area_bottom nav .page-item.active .page-link {
	color: #fff;
    background-color: var(--accent_light);
    border-color: var(--accent_light);
}
/* =================================  */
/* ========== 6. BUTTONS ==========  */
/* =================================  */
/**** ESTILO DO BOT�O *****/
.btn {		
	display: inline-block;
    font-weight: 500;
    text-align: center;
	text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;    
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    cursor: pointer;    
    transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    font-size: 13px;			
}
.btn:FOCUS {
	outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(231,58,26,.25);
}
.btn:HOVER, .btn:ACTIVE  {
	background: rgba(0,0,0,0.1);
	color: var(--forerground_button_color) !important;
}
.btn i svg {
	width: 24px;
	height: 24px;
}
/**** TAMANHO DOS BOT�ES *****/
/**** BOT�ES DA ESQUERDA *****/
.btn_shape_fix_width {
	width: 100%;	
	min-height: 60px;
	white-space: normal;	
	overflow: visible;
	margin-bottom: 5px;
	padding: 18px 0;						
}
/**** BOT�ES GEN�RICO *****/
.btn_shape_fix_height {
	width: auto;	
	min-width: 100px;
	height: 40px;
	padding: 10px 10px;
	white-space: normal;	
	overflow: visible;
}
/**** BOT�ES DO HEADER DA LISTA *****/
.btn_shape_fix_witdh_heigh {
	width: 95px;
	height: 40px;
	padding: 10px 0;	
	white-space: normal;	
	overflow: visible;
}
@media (max-width: 1200px) {
	.btn_shape_fix_witdh_heigh {
		width: 65px;
	}	
}
.btn_shape_fix_witdh_heigh_5_button {
	width: 115px;
	height: 40px;
	padding: 10px 0;	
	white-space: normal;	
	overflow: visible;
}
@media (max-width: 1200px) {
	.btn_shape_fix_witdh_heigh_5_button {
		width: 80px;
	}	
}
/**** CORES DOS BOT�ES *************************/
/**** COR PADR�O *****/
.btn_color_default_action {
	background: var(--accent_light);	
	color: var(--forerground_button_color);	
	fill: var(--forerground_button_color);
}
.btn_color_default_action:FOCUS {
	box-shadow: 0 0 0 0.2rem rgba(231,58,26,.5);
}
.btn_color_default_action:HOVER, .btn_color_default_action:ACTIVE {    
    background:  var(--contrast_color);
    border-color:  var(--contrast_color);
    color: var(--forerground_button_color);	
	fill: var(--forerground_button_color);
}
.btn_color_default_action:DISABLED {
	background:  #8A949B;
    border-color:  #8A949B;
    color: rgba(255,255,255,0.5);
    cursor: default;
}
/**** COR VERDE *****/
.btn_color_green_action {
	background: #13C4A3;	
	color: var(--forerground_button_color);
	fill: var(--forerground_button_color);
}
.btn_color_green_action:FOCUS {
	box-shadow: 0 0 0 0.2rem rgba(231,58,26,.5);
}
.btn_color_green_action:HOVER, .btn_color_green_action:ACTIVE{    
    background: #379392;
    border-color: #379392;
    color: var(--forerground_button_color);
}
.btn_color_green_action:DISABLED {
	background:  #8A949B;
    border-color:  #8A949B;
    color: rgba(255,255,255,0.5);
}
/**** COR AZUL *****/
.btn_color_main_action {
	background: #3399FF;	
	color: var(--forerground_button_color);
	fill: var(--forerground_button_color);
}
.btn_color_main_action:FOCUS {
	box-shadow: 0 0 0 0.2rem rgba(231,58,26,.5);
}
.btn_color_main_action:HOVER, .btn_color_main_action:ACTIVE{    
    background: #3366CC;
    border-color: #3366CC;
    color: var(--forerground_button_color);
}
.btn_color_main_action:DISABLED {
	background:  #8A949B;
    border-color:  #8A949B;
    cursor: auto;
}
/**** COR VERMELHO *****/
.btn_color_dangerous_action {
	background: #E0474C;	
	color: var(--forerground_button_color);
	fill: var(--forerground_button_color);
}
.btn_color_dangerous_action:FOCUS {
	box-shadow: 0 0 0 0.2rem rgba(231,58,26,.5);
}
.btn_color_dangerous_action:HOVER, .btn_color_dangerous_action:ACTIVE {    
    background: rgb(222, 58, 63);
    border-color: rgb(222, 58, 63);
}
.btn_color_dangerous_action:DISABLED {
	background:  #8A949B;
    border-color:  #8A949B;
    color: rgba(255,255,255,0.5);
    cursor: default;
}
/**** COR DESABILITADO *****/
.btn_color_disabled_action {
	background:  #8A949B;
    border-color:  #8A949B;
    color: rgba(255,255,255,0.5);
    cursor: default;
}
.btn_color_disabled_action:HOVER, .btn_color_disabled_action:FOCUS, .btn_color_disabled_action:ACTIVE {
	background:  #8A949B;
    border-color:  #8A949B;
}
/**** RESPONSIVIDADE BOT�ES *****/
@media (max-width: 1300px) {
	.btn {
		font-size: 13px;
	}	
}
@media (max-width: 500px) {
	.btn {
		font-size: 10px;
	}	
}
/* =================================  */
/* ========== 7. MESSAGES ==========  */
/* =================================  */
/*******  ALERTA DE ERRO  *******/
.message_erro_alert {
	margin-left: auto;
	margin-right: auto;	
	position: relative;
	display: none;
	width: 500px;	
	z-index: 999;	
}
.message_erro_alert_content {
	background: #dd5959;
	background: -moz-linear-gradient(top, #dd5959 0%, #c9342f 46%, #c15252 100%);
	background: -webkit-linear-gradient(top, #dd5959 0%,#c9342f 46%,#c15252 100%);
	background: linear-gradient(to bottom, #dd5959 0%,#c9342f 46%,#c15252 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dd5959', endColorstr='#c15252',GradientType=0 );
	overflow: hidden;	
	position: absolute;	
	margin-top: 20px;			
	display: block;
	border-radius: 6px;	
	border: 2px solid rgba(255,255,255,0.6);
	width: 100%;
	height: 60px;
	padding: 10px 5px;
}
.message_erro_alert_content a {
	width: 30px;
	height: 30px;	
	float: right;	
	background: #fff;
	color: #c9342f;
	fill: #c9342f;
	border-radius: 20px;	
}
.message_erro_alert_content label {
	color: #fff;
	font-size: 14px;
	line-height: 20px;		
	width: calc(100% - 50px);
	height: 40px;	
	float: left;				
	overflow: auto;		
}
@media (max-width: 500px) { 
	.message_erro_alert {
		width: 100%;
	}
	.message_erro_alert_content {
		margin-top: 0px;
     	border-radius: 0px;		
	}
	.message_erro_alert_content label {			
		font-size: 12px;
		text-align: left;
	}
}

.snackbar_target {
	background: #0B9BA9;		
	border-radius: 6px;	
}

.snackbar_warning {
	background: #EBAF60;	
	border-radius: 6px;	
}

.snackbar-close {
	visibility: hidden;  
}
.snackbar-open {
	visibility: visible;
	position:absolute;
	margin-left: -250px; 
	left: 50%;
	bottom: 60px;
	z-index: 99999;
	height: auto;
	width: 700px;
	padding: 15px;	
	box-shadow: 5px 5px 4px var(--shadow_nav_sidebar);
}
@media (max-width: 600px) { 
	.snackbar-open {
		width: 300px;
		margin-left: -150px;
	}	
}
.snackbar-open .close { 
	margin-top: -8px;
}
.snackbar-text {
	width: calc(100% - 50px);
	display: inline-block;	
	font-weight: 600;
	font-size: 13px;
	line-height: 16px;
	
}
.snackbar_warning .snackbar-text {
	color: #38595E;
}
.snackbar_target .snackbar-text {
	color: #fafafa;
}
/* =================================  */
/* ========== 8. POP UPS ==========  */
/* =================================  */
/**************************************************
****************** CLASSES POP UPS *******************
**************************************************/
/*******  POPUP DE DEFAULT  *******/
.base_default_popup {		
	width: 100%;
	height: 100%;
	padding: 0px;	
	display: none;	
	position: fixed;
	left: 0;
	top: 0;	
	overflow: auto;	
	background: var(--background_popup);
	z-index: 999;
	backdrop-filter: saturate(180%) blur(5px);
}
.container_full_default_popup {		
	width: 100%;
	height: 100%;	
	min-width: 250px;	 			
}
.container_400_center_default_popup {		
	width: 400px;
	height: auto;
	margin-left: -200px;
	left: 50%;
	position: relative;	
	top: 200px;	
	border-radius: 6px; 
	overflow: hidden;						
}
.container_500_center_default_popup {		
	width: 500px;
	height: auto;
	margin-left: -250px;
	left: 50%;
	position: relative;	
	top: 200px;	
	border-radius: 6px; 
	overflow: hidden;						
}
.container_800_center_default_popup {		
	width: 800px;
	height: auto;
	margin-left: -400px;
	left: 50%;
	position: relative;	
	top: 200px;	
	border-radius: 6px; 
	overflow: hidden;						
}
.container_900_center_default_popup {		
	width: 900px;
	height: auto;
	margin-left: -500px;
	left: 50%;
	position: relative;	
	top: 200px;	
	border-radius: 6px; 
	overflow: hidden;						
}
.base_default_title_popup {
	font-size: 18px;
	width: 100%;
	height: 50px;	
	padding: 15px 15px;	
}
.base_default_middle_popup {
	width: 100%;
	height: auto;	
	padding: 15px;
}
.base_default_bar_bottom_popup {
	width: 100%;
	height: 50px;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 5px;	
}
/*******  POPUP LOADING  *******/
.loading_popup {
	width: 100%;
	height: 100%;
	background: transparent;		
	position: fixed;
	margin: 0px auto;
	display: none;						  
    z-index: 999;    
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.loading_popup_content {	
	width: 350px;
	min-height: 200px;
	max-height: 300px;
	position: fixed;	
	left: 50%;
	margin-left: -150px;
	top: 50%;	
	margin-top: -100px;	
	border: 1px solid var(--accent_light);				
	border-radius: 8px;	 
	text-align: center;
	background-color: var(--accent_light);
	-webkit-transition: var(--transition_all);
   	transition: var(--transition_all);
   	padding: 40px 0;   
   	box-shadow: 
   		inset 0 0 0 2px #788fc88f,
   		5px 5px 4px var(--shadow_nav_sidebar);      		
}
.loading_popup_content p label {	
	font-size: 18px;
	margin-top: 8px;	
	color: #fff;	
}
.loading_popup_progress_style {	
	width: 80px !important;
	height: 80px !important;
	
}
.loading_img {	
	width: 100%;
	height: 90px;
}
.loading_img img {
	width: 60px;
	height: auto;
}
/*******  RESPONSIVIDADE LOADING  *******/
@media (max-width: 500px) {
	.loading_popup_content {
		width: 160px;
		min-height: 120px;
		max-height: 200px;
		margin-left: -80px;
		margin-top: -60px;
		padding: 10px 0;
	}	
	.loading_popup_progress_style {
		width: 60px !important;
		height: 60px !important;
	}	
}
/*******  POPUP PROGRESS  *******/
.progress_popup {
	width: 100%;
	height: 100%;
	background: var(--background_popup);
	backdrop-filter: saturate(180%) blur(5px);		
	position: fixed;
	margin: 0px auto;
	display: none;						  
    z-index: 999;    
}
.progress_popup_content {	
	width: 300px;
	min-height: 200px;
	max-height: 300px;
	position: fixed;	
	left: 50%;
	margin-left: -150px;
	top: 50%;	
	margin-top: -100px;					
	border-radius: 4px;	 
	text-align: center;
	-webkit-transition: var(--transition_all);
   	transition: var(--transition_all);
   	padding: 70px 20px;
   	color: #fff;
   	font-size: 18px;   	
   	box-shadow: 0px 5px 4px var(--shadow_nav_sidebar);        		
}
.progress_popup_content p label {
	color: var(--foreground_light);
	font-size: 18px;
	padding-top: 30px;	
}
.progress_control {
	width: 100%;	
	margin-top: 20px;	
}
.progress_popup_content .progress {
	background-color: var(--background_light);
	border: 1px solid var(--border_color_light);
	height: 25px;
}
.progress_popup_content .progress .progress-bar {
	background-color: var(--accent_light);
}
/*******  RESPONSIVIDADE PROGRESS  *******/
@media (max-width: 500px) {
	.progress_popup_content {
		width: 160px;
		min-height: 120px;
		max-height: 200px;
		margin-left: -80px;
		margin-top: -60px;
		padding: 10px 10px;
	}
	.progress_control {
		margin-top: 40px;
	}
}
/*******  POPUP M�DULO  *******/
.header_module_popup {		
	width: 300px !important;
	height: auto;	
	max-height: 350px;
	overflow: hidden;		
	padding: 10px 12px !important;	
}
.header_module_popup li {
	width: 84px; 
	height: 95px;
	float: left;
	margin: 4px;
	transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out, all .15s;
	border: 1px solid transparent;
	border-radius: 6px;
}
.header_module_popup li:FOCUS, .header_module_popup li:HOVER {
	border: 1px solid #dcdcdc;	
}
.header_module_popup li:ACTIVE {
	background: rgba(0,0,0,0.1);
}
.item_module_popup {	
	display: block;
	width: 100%;
	height: 100%;	
	text-decoration: none;
	text-align: center;		
	color: #312b45;
	font-size: 12px;
	cursor: pointer;
	overflow: hidden;		
	padding: 5px;
	line-height: 12px;
}
.item_module_popup:HOVER {	
}
.item_module_popup i {
	display: block;
	background-image: url(../images/modules/icone.png);
	-webkit-background-size: 92px 2731px;
    background-size: 92px 2731px;
	width: 100%;
	height: 58px;
	
}
/*******  POPUP DE PREVIEW DE DOCUMENTO  *******/
.preview_document_poupup {		
	width: 100%;
	height: 100%;
	padding: 0px;	
	display: none;	
	position: fixed;
	left: 0;
	top: 0;	
	overflow: auto;	
	background-color: rgba(255, 255, 255, 0.8);
	z-index: 999;
}
.base_document_preview {		
	width: 100%;
	height: 100%;	
	min-width: 250px;
	background: #444; 
	border: 2px solid #444;			
}
.document_preview_title {
	font-size: 18px;
	width: 100%;
	height: 50px;	
	color: #fff;
	padding: 10px 15px;	
}
.document_preview_title svg {
	width: 25px;
	height: 25px;
}
.document_visual {
	overflow: hidden;	
	width: 100%;	
	height: calc(100% - 50px);
}
/*******  POPUP DE CONFIRMA��O  *******/
.message_confimation_poupup {
	width: 100%;
	height: 100%;
	padding: 0px;	
	display: none;	
	position: fixed;
	left: 0;
	top: 0;	
	overflow: auto;	
	background-color: var(--background_popup);
	backdrop-filter: saturate(180%) blur(5px);
	z-index: 999;	
}
.base_message-popup {	
	width: 400px;
	height: 250px;
	margin-left: -200px;
	left: 50%;
	position: relative;	
	top: 200px;	
	border-radius: 6px; 
	overflow: hidden;	
}
.base_qrcode-popup {	
	width: 400px;
	height: 500px;
	margin-left: -200px;
	left: 50%;
	position: relative;	
	top: 200px;	
	border-radius: 6px; 
	overflow: hidden;	
}
.message_title {
	font-size: 18px;
	width: 100%;
	height: 50px;	
	color: #fff;
	padding: 15px 15px;
}
.content_message_confirmation_popup {
	width: 100%;
	height: calc(100% - 100px);
	overflow: auto;
	text-align: center;
	padding-left: 15px;
	padding-top: 20px;
	padding-right: 15px;
	padding-bottom: 5px;
}
.content_message_confirmation_popup label {
	font-size: 16px;
}
.message_bar_bottom_popup {
	width: 100%;
	height: 50px;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 5px;	
}
/*******  RESPONSIVIDADE POPUP CONFIRMA��O  *******/
@media (max-width: 500px) {
	.base_message-popup {	
		width: 250px;
		height: 200px;
		margin-left: -125px;
		left: 50%;
		position: relative;	
		top: 100px;		
		border-radius: 6px; 
		overflow: hidden;
	}
	.content_message_confirmation_popup label {
		font-size: 14px;
	}
}
/*******  POPUP DE ATUALIZA��O DE PESSOA  *******/
.message_select_person_poupup {
	width: 100%;
	height: 100%;
	padding: 0px;	
	display: none;	
	position: fixed;
	left: 0;
	top: 0;	
	overflow: auto;	
	background-color: rgba(80, 84, 96, 0.7);
	z-index: 999;	
}
.base_message_select_person_popup {	
	width: 500px;
	height: 400px;
	margin-left: -250px;
	left: 50%;
	position: relative;	
	top: 200px;	
	border-radius: 6px; 
	overflow: hidden;
}
.message_select_person_title {
	font-size: 18px;
	width: 100%;
	height: 50px;	
	color: #fff;
	padding: 15px 15px;
}
.content_message_select_person_popup {
	width: 100%;
	height: calc(100% - 100px);
	overflow: auto;
	text-align: center;
	padding-left: 15px;
	padding-top: 20px;
	padding-right: 15px;
	padding-bottom: 5px;
}
.content_message_select_person_popup label {
	font-size: 16px;
}
.message_bar_bottom_select_person_popup {
	width: 100%;
	height: 50px;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 5px;	
}
/*******  RESPONSIVIDADE POPUP CONFIRMA��O  *******/
@media (max-width: 500px) {
	.base_message_select_person_popup {	
		width: 250px;
		height: 400px;
		margin-left: -125px;
		left: 50%;
		position: relative;	
		top: 50px;		
		border-radius: 6px; 
		overflow: hidden;
	}
	.content_message_select_person_popup label {
		font-size: 14px;
	}
}
/*******  POPUP DOWNLOAD DOCUMENTO  *******/
.download_document_poupup {
	width: 100%;
	height: 100%;
	padding: 0px;	
	display: none;	
	position: fixed;
	left: 0;
	top: 0;	
	overflow: auto;	
	background-color: rgba(80, 84, 96, 0.7);
	z-index: 999;	
}
.base_download_document_poupup {	
	width: 700px;
	height: 550px;
	margin-left: auto;
	margin-right: auto;
	position: relative;	
	top: 100px;	
	border-radius: 6px; 
	overflow: hidden;
}
.space_download_popup {	
	width: 100%;
	height: calc(100% - 100px);
	overflow: auto;
}
.botttom_bar_download_popup {
	width: 100%;
	height: 50px;
	padding-left: 15px;
	padding-top: 5px;
	padding-right: 15px;
}
.space_download_buttons_popup {
	text-align: center;
	width: 452px;
	height: 50px;		
	margin-left: auto;
	margin-right: auto;	
}
.space_download_buttons_popup a {
	float: left;
	width: 220px;
	margin: 2.5px;
}
@media (max-width: 900px) {
	.base_download_document_poupup {
		width: 600px;		
		top: 30px;
	}
}
@media (max-width: 600px) {
	.base_download_document_poupup {
		width: 300px;
		height: 400px;
		top: 30px;
	}
	.space_download_buttons_popup {
		width: 280px;
		height: 95px;
	}
	.space_download_buttons_popup a {
		width: 270px;;		
	}
}

/*******  POPUP DE HASH DE BLOCKCHAIN  *******/
.message_popup_hash_blockchain {
	width: 100%;
	height: 100%;
	padding: 0px;
	display: none;
	position: fixed;
	left: 0;
	top: 0;	
	overflow: auto;	
	background-color: var(--background_popup);
	backdrop-filter: saturate(180%) blur(5px);
	z-index: 999;
}
.message_popup_hash_blockchain .base_popup {
	width: 600px;
	height: 400px;
	margin-left: -300px;
	left: 50%;
	position: relative;	
	top: 200px;	
	border-radius: 6px; 
	overflow: hidden;
	background-color: #F5F8FF;
}
.message_popup_hash_blockchain .base_popup .title {
	background-color: var(--accent_light);
	border-bottom: 1px solid var(--border_color_light);
	height: 50px;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	padding: 10px 15px;
}
.message_popup_hash_blockchain .base_popup .title .ico_close {
	position: absolute;
	width: 24px;
	height: 24px;
	top: 15px;
	right: 15px;
	background: var(--highlight_light);
	border-radius: 50%;
	fill: var(--accent_light);		
	text-align: center;
	padding-top: 1px;		
}
.ico_close svg {
	vertical-align: top;
}
.message_popup_hash_blockchain .base_popup .content {
	width: 100%;
	height: calc(100% - 100px);
}
.content .img_blockchain {
	float: left;
	width: 200px;
	height: 100%;
	background: url("../images/gif/blockchain_2.gif") no-repeat;
	background-size: 200px 200px;
	background-position: center center; 
	border-right: 1px solid var(--border_color_light);
}
.content .text {
	float: left;
	width: calc(100% - 200px);
	height: 100%;
	font-size: 14px;	
	overflow: auto;
}
.content .text ul {
	list-style: none;
}
.content .text ul li {
	border-bottom: 1px solid var(--border_color_light);
	padding: 15px;
}
.content .text label {
	font-weight: 400;
	display: inline-block;
	width: 100%;
	word-wrap: break-word;
	color: var(--contrast_color);
}
.content .text span {
	font-weight: 700;
	word-wrap: break-word;
}
.message_popup_hash_blockchain .base_popup .bottom_area {
	background-color: var(--highlight_light);
	border-top: 1px solid var(--border_color_light);
	width: 100%;
	height: 50px;
	padding: 5px 10px;
}

/* =================================  */
/* ========== 6.TEMPORARIO ==========  */
/* =================================  */


/**************************************************
****************** 9. CLASSES INPUTS *******************
**************************************************/
/*******  RESETS INPUTS  *******/

input, select, textarea {
	transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	border-radius: 2px;	
	background-color: var(--highlight_light) !important;		
	border: 1px solid var(--border_color_light) !important;
	-webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,.2);
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.2);
    font-size: 13px;    
 }
input, select, textarea:FOCUS {
	outline: 0;    
}
input:DISABLED, select:DISABLED, textarea:DISABLED {
	border: 1px solid #8A949B;
	background: #8A949B;
	color: rgba(255,255,255,0.5);
}
input:read-only { 
    border: 1px solid #8A949B;
	background: #8A949B;
	color: rgba(255,255,255,0.5);
}
input:-moz-read-only { 
    border: 1px solid #8A949B;
	background: #8A949B;
	color: rgba(255,255,255,0.5);
}
.inp:FOCUS {
	border-color: #28B78D !important;
/* 	box-shadow: 0 0 0 0.2rem rgba(231,58,26,.25); */
}
.inp:HOVER, .inp:ACTIVE {
	border-color: #28B78D !important;
}
/*******  CLASSES INPUTS  *******/
/*******  INPUT DEFAULT  *******/
.input_default_action {	
	width: 100%;
	height: 80px;
	-webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

}
.input_default_action label {
	width: 100%;		
	display: block;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	font-weight: 800;	
}
.input_default_action i {
	color: #E0474C
}
.input_default_action input, .input_default_action select {
	width: 100%;
	padding-left: 5px;
	height: 40px;
	background-color: var(--highlight_light);	
	border: 1px solid var(--border_color_light);
	color: var(--foreground_light)
}
.input_default_action input:disabled, .input_default_action select:disabled, .input_default_action textarea:disabled {
	background-color: #8A949B !important;
	border: 1px solid #8A949B !important;
	color: var(--foreground_light) !important;
}
.input_default_action textarea {
	width: 100%;
	padding-left: 5px;
	padding-top: 5px;
	height: 80px;
	background-color: var(--highlight_light);	
	border: 1px solid var(--border_color_light);
	color: var(--foreground_light)	
}
.input_default_action span {
	width: 100%;	
	display: none;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	padding-left: 5px;
	font-size: 13px;
	height: 20px;	
	
}
/*******  INPUT ERRO  *******/
.input_error_action {	
	width: 100%;
	height: 80px;
	-webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.input_error_action label {
	width: 100%;		
	display: block;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	color: #E0474C;
}
.input_error_action i {
	color: #E0474C
}
.input_error_action input, .input_error_action select, .input_error_action textarea {
	width: 100%;
	padding-left: 5px;
	height: 40px;
	border-color: #E0474C;
	background-color: rgba(244,71,76,0.1);
}
.input_error_action span {
	width: 100%;	
	display: inline-block;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	padding-left: 5px;
	font-size: 13px;
	height: 20px;	
	background-color: #E0474C;	
	color: #f1f0ee;
	
}
/*******  INPUT ITEM LIST  *******/
.input_item_list_default_action {	
	width: 100%;
	height: 80px;
	-webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding-right: 15px;
    padding-top: 10px;

}
.input_item_list_default_action input {
	width: 100%;
	padding-left: 5px;	
	height: 50px;
	background-color: var(--highlight_light);	
	border: 1px solid var(--border_color_light);
	color: var(--foreground_light)
}
.input_item_list_default_action textarea {
	width: 100%;
	padding-left: 5px;
	padding-top: 15px;	
	height: 50px;
	min-height: 50px;
	max-height: 50px;
	background-color: var(--highlight_light);	
	border: 1px solid var(--border_color_light);
	color: var(--foreground_light)
}
.input_item_list_default_action span {
	width: 100%;	
	display: none;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	padding-left: 5px;
	font-size: 13px;
	height: 20px;	
}
/*******  INPUT ITEM LIST COM ERRO *******/
.input_item_list_error_action {	
	width: 100%;
	height: 80px;
	-webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding-right: 15px;
    padding-top: 10px;

}
.input_item_list_error_action input {
	width: 100%;
	padding-left: 5px;	
	padding-bottom: 0px;
	height: 50px;
	border-color: #E0474C;
	background-color: rgba(244,71,76,0.1);
}
.input_item_list_error_action span {
	width: 100%;	
	display: block;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	padding-left: 5px;
	font-size: 13px;
	height: 20px;
	background-color: #E0474C;	
	color: #f1f0ee;	
}
/*******  INPUT ITEM TYPE FILE SELECIONADO *******/
.input_file_selected_action {
	width: 100%;
	height: 80px;
	-webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;	
}
.input_file_selected_action label {
	width: 100%;		
	display: block;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;	
}
.input_file_selected_action input {
	width: calc(100% - 110px);
	padding-left: 5px;
	height: 40px;
	float: left;
	-webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: var(--highlight_light);	
	border: 1px solid var(--border_color_light);
	color: var(--foreground_light)
}
.input_file_selected_action a {
	float: right;
}
.input_file_selected_action span {
	width: 100%;	
	display: none;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	padding-left: 5px;
	font-size: 13px;
	height: 20px;			
}
/*******  INPUT ITEM TYPE FILE SELECIONADO COM ERRO *******/
.input_file_selected_action_error {
	width: 100%;
	height: 80px;
	-webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

}
.input_file_selected_action_error label {
	width: 100%;		
	display: block;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	color: #E0474C;	
}
.input_file_selected_action_error input {
	width: calc(100% - 110px);
	padding-left: 5px;
	height: 40px;
	float: left;
	-webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background: rgba(240,89,69,0.3);
    border-color: #E0474C;
    color: #E0474C;
}
.input_file_selected_action_error a {
	float: right;
}
.input_file_selected_action_error span {
	width: 100%;	
	display: block;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	padding-left: 5px;
	font-size: 13px;
	height: 20px;
	background-color: #E0474C;	
	color: #f1f0ee;		
}
/*******  INPUT ITEM TYPE FILE N�O SELECIONADO *******/
.input_file_no_selected_action div {
	border: 2px dashed #AEB8C3;	
	border-radius: 6px;
	min-height: 160px;
	padding-left: 60px;
	padding-right: 60px;
	padding-top: 60px;
	text-align: center;
}
.input_file_no_selected_action span {
	width: 100%;	
	display: none;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	padding-left: 5px;
	font-size: 13px;
	height: 20px;		
}
/*******  INPUT ITEM TYPE FILE N�O SELECIONADO COM ERRO *******/
.input_file_no_selected_action_error div {
	border: 2px dashed #E0474C;
	background: rgba(240,89,69,0.1);
	border-radius: 6px;
	min-height: 160px;
	padding-left: 60px;
	padding-right: 60px;
	padding-top: 60px;
}
.input_file_no_selected_action_error label {
	color: #E0474C
}
.input_file_no_selected_action_error span {
	width: 100%;	
	display: block;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	padding-left: 5px;
	font-size: 13px;
	height: 20px;	
	background-color: #E0474C;	
	color: #f1f0ee;		
}
/*******  INPUT RADIOBUTTON SELECIONADO *******/
.input_default_type_radio_action {	
	width: 100%;
	height: 100%;
	-webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;    
    padding-top: 20px;
}
.input_default_type_radio_action label {
	cursor: pointer;
	font-size: 14px; 
	float: left;
    margin-top: 4px;	
}
.input_default_type_radio_action input[type="radio"] {
	width: 50px;
	height: 25px;
	outline: 0;
	float: left;
	box-shadow: none;
}
 
.input_default_type_radio_action span {
	width: 100%;	
	display: none;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	padding-left: 5px;
	font-size: 13px;
	height: 20px;	
	
}
/*******  INPUT RADIOBUTTON COM ERRO *******/
.input_default_type_radio_error_action label {
	cursor: pointer;
	font-size: 14px; 
	float: left;
    margin-top: 4px;
    color: #E0474C;	
}
.input_default_type_radio_error_action span {	
	display: block;	
	background-color: #E0474C;	
	color: #f1f0ee;
	
}
/*******  INPUT FORM:RADIOBUTTON *******/
.input_default_form_radio_button_action {	
	width: 100%;
	height: 80px;
	-webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;    
}
.input_default_form_radio_button_action label:FIRST-CHILD {
	width: 100%;		
	display: block;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;	
}
.input_default_form_radio_button_action i {
	color: #E0474C
}
.input_default_form_radio_button_action span {
	padding-left: 15px;
	padding-top: 10px;		
	float: left; 	
}
.input_default_form_radio_button_action span input[type="radio"] {
	width: 20px;
	height: 20px;	
	float: left;
	box-shadow: none !important;
}
.input_default_form_radio_button_action span label {
	padding-left: 10px;		
	float: left;
}
.input_default_form_radio_button_action span:LAST-CHILD {	
	display: none;	
	background-color: #E0474C;	
	color: #f1f0ee;
	
}
/*******  INPUT FORM:RADIOBUTTON COM ERRO *******/
.input_error_form_radio_button_action {
	width: 100%;
	height: 80px;
	-webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;    
}
.input_error_form_radio_button_action label:FIRST-CHILD {
	width: 100%;		
	display: block;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	color: #E0474C;	
}
.input_error_form_radio_button_action i {
	color: #E0474C
}
.input_error_form_radio_button_action span {
	padding-left: 15px;
	padding-top: 10px;		
	float: left; 	
	color: #E0474C;	
}
.input_error_form_radio_button_action span input[type="radio"] {
	width: 20px;
	height: 20px;	
	float: left;
	box-shadow: none !important;
}
.input_error_form_radio_button_action span label {
	padding-left: 10px;		
	float: left;
}
.input_error_form_radio_button_action span:nth-child(4){	
	width: 100%;	
	display: block;	
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	padding-left: 5px;
	font-size: 13px;
	height: 20px;	
	background-color: #E0474C;	
	color: #f1f0ee;		
}
.input_error_form_radio_button_action span:LAST-CHILD {
	margin-top: -20px;
    margin-left: -10PX;
    color: #FFF;
}
/*******  INPUT TYPE CHECKBOX  *******/
.input_checkbock_action {	
	width: 100%;
	height: 50px;
	-webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;    
}
.input_checkbock_action label:FIRST-CHILD {
	width: calc(100% - 60px);
	float: left;			
}
.input_checkbock_action label:LAST-CHILD {
	float: right;
	width: 45px;
}
.input_checkbock_action i {
	color: #E0474C;
}
.input_checkbock_action span {
	width: 100%;	
	display: none;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	padding-left: 5px;
	font-size: 13px;
	height: 20px;	
	
}

option {	
	border-bottom: 1px solid var(--border_color_light);
	height: 30px;
	padding-top: 6px;
	padding-left: 5px;
	cursor: pointer;
	color: var(--foreground_light);		
}

option:nth-child(even) {	
	background-color: var(--background_light);
	
}

option:nth-child(odd) {
	background-color: var(--highlight_light);
}

option:checked { 
	 background: #d4e8fe;
}

select[multiple]:focus option:checked {
 	 background: #d4e8fe;
}

.cati-modal {
	z-index: 1000;
	display: none;
	padding-top: 100px;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0, 0, 0);
	background-color: rgba(0, 0, 0, 0.7);
}

.cati-modal-content {
	margin: auto;
	background-color: #fff;
	position: relative;
	padding: 0;
	outline: 0;
	width: 600px;
}

@media ( max-width :600px) {
	.cati-modal-content {
		margin: 0 10px;
		width: auto !important;
	}
	.cati-modal {
		padding-top: 30px;
	}
}

@media ( max-width :768px) {
	.cati-modal-content {
		width: 500px;
	}
	.cati-modal {
		padding-top: 50px;
	}
}
/**************************************************
****************** CLASSES ANIMA��O*******************
**************************************************/
@-webkit-keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

@keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

@-webkit-keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

@keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}



@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}

@-webkit-keyframes shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

@keyframes shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

@-webkit-keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.headShake {
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: headShake;
  animation-name: headShake;
}

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

.swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}

@-webkit-keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}



@-webkit-keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}

@-webkit-keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

@keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

.jello {
  -webkit-animation-name: jello;
  animation-name: jello;
  -webkit-transform-origin: center;
  transform-origin: center;
}

@-webkit-keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.heartBeat {
  -webkit-animation-name: heartBeat;
  animation-name: heartBeat;
  -webkit-animation-duration: 1.3s;
  animation-duration: 1.3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

@-webkit-keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.bounceIn {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}

@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}

.bounceOut {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

@keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

@keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

@keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

@keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}

@-webkit-keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

@keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

.animated.flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}

@-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

@-webkit-keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

@keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

.flipOutX {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

@keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

.flipOutY {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}

@-webkit-keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

@keyframes lightSpeedOut {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
}

@-webkit-keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
}

@-webkit-keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}

@keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}

.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
}

@-webkit-keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
}

@-webkit-keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
}

@-webkit-keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}

.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
}

@-webkit-keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

@keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-name: hinge;
  animation-name: hinge;
}

@-webkit-keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }

  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }

  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.jackInTheBox {
  -webkit-animation-name: jackInTheBox;
  animation-name: jackInTheBox;
}



@-webkit-keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}



@-webkit-keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

@keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}

@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

@-webkit-keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
}

@-webkit-keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft;
}

@-webkit-keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
}

@-webkit-keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
}

@-webkit-keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}

@keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}

.zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}

@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown;
}

@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}

@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}

.zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft;
}

@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}

@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}

.zoomOutRight {
  -webkit-animation-name: zoomOutRight;
  animation-name: zoomOutRight;
}

@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp;
}

@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}

@-webkit-keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

.slideOutDown {
  -webkit-animation-name: slideOutDown;
  animation-name: slideOutDown;
}

@-webkit-keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

.slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.animated.delay-2s {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.animated.delay-3s {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

.animated.delay-4s {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}

.animated.delay-5s {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}

.animated.fast {
  -webkit-animation-duration: 800ms;
  animation-duration: 800ms;
}

.animated.faster {
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
}

.animated.slow {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.slower {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
}

@media (print), (prefers-reduced-motion: reduce) {
  .animated {
    -webkit-animation-duration: 1ms !important;
    animation-duration: 1ms !important;
    -webkit-transition-duration: 1ms !important;
    transition-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
  }
}

a.btnDisabled {
	background-color: gray;
	pointer-events: none;
	cursor: default;
}

.table-scrollbar {
		position: relative;
		height: 200px;
		overflow: auto;
	}

.table-wrapper-scroll-y {
	display: block;
}
form.input_search_service_price input[type=text] {
  padding: 8px;
  padding-left: 4px;
  padding-right: 20px;
  font-size: 14px;
  border: 1px solid grey;
  float: left;
  width: 100%;
  background-position: 280px 1px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M15.5%2014h-.79l-.28-.27C15.41%2012.59%2016%2011.11%2016%209.5%2016%205.91%2013.09%203%209.5%203S3%205.91%203%209.5%205.91%2016%209.5%2016c1.61%200%203.09-.59%204.23-1.57l.27.28v.79l5%204.99L20.49%2019l-4.99-5zm-6%200C7.01%2014%205%2011.99%205%209.5S7.01%205%209.5%205%2014%207.01%2014%209.5%2011.99%2014%209.5%2014z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-size: 22px;
}
form.input_search_service_price button:hover {
  background: #0b7dda;
}

form.input_search_service_price::after {
  content: "";
  clear: both;
  display: table;
}