@charset "utf-8";
:root {
  --f7-theme-color: #2196f3;
  --f7-theme-color-rgb: 33, 150, 243;
  --f7-theme-color-shade: #0c82df;
  --f7-theme-color-tint: #48a8f5;
  --f7-safe-area-left: 0px;
  --f7-safe-area-right: 0px;
  --f7-safe-area-top: 0px;
  --f7-safe-area-bottom: 0px;
  --f7-safe-area-outer-left: 0px;
  --f7-safe-area-outer-right: 0px;
  --f7-device-pixel-ratio: 1;
  
   --f7-font-size: 14px;
   --f7-font-family: -apple-system, SF Pro Text, SF UI Text, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif;
  --f7-text-color: #000;
  --f7-line-height: 1.4;
  	
  --f7-button-font-size: 14px;
  --f7-button-min-width: 32px;
  --f7-button-bg-color: transparent;
  
  
  --f7-button-border-color: var(--f7-button-outline-border-color, var(--f7-theme-color));
  --f7-button-border-width: var(--f7-button-outline-border-width);
   
  --f7-button-text-color: var(--f7-theme-color);
  --f7-button-pressed-text-color: var(--f7-button-text-color, var(--f7-theme-color));
  
  --f7-button-fill-text-color: #fff;
  --f7-button-fill-bg-color: var(--f7-theme-color);
  --f7-button-outline-border-color: var(--f7-theme-color);
   
  --f7-button-raised-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0,0,0,0.24);
  --f7-button-raised-pressed-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0,0,0,0.23);
  --f7-segmented-raised-divider-color: rgba(0, 0, 0, 0.1);
 
  --f7-button-height: 29px;
  --f7-button-padding-horizontal: 10px;
  --f7-button-border-radius: 5px;
  --f7-button-font-weight: 400;
  --f7-button-letter-spacing: 0;
  --f7-button-text-transform: none;
 
  --f7-button-outline-border-width: 1px;
  --f7-button-large-height: 44px;
  --f7-button-large-font-size: 17px;
  --f7-button-large-font-weight: 400;
  --f7-button-small-height: 26px;
  --f7-button-small-font-size: 13px;
  --f7-button-small-font-weight: 600;
  --f7-button-small-text-transform: uppercase;
  --f7-button-small-outline-border-width: 2px;
  
   --f7-input-bg-color: transparent;
  --f7-label-font-weight: 400;
  --f7-label-line-height: 1.2;
  --f7-input-error-text-color: #ff3b30;
  --f7-input-error-font-size: 12px;
  --f7-input-error-line-height: 1.4;
  --f7-input-error-font-weight: 400;
  --f7-input-info-font-size: 12px;
  --f7-input-info-line-height: 1.4;
  --f7-input-outline-height: 40px;
  --f7-input-outline-border-color: #999;
  --f7-input-outline-border-radius: 4px;
  --f7-input-outline-padding-horizontal: 12px;
   
  --f7-input-outline-focused-border-color: var(--f7-theme-color);
  --f7-input-outline-invalid-border-color: var(--f7-input-error-text-color);
   
  --f7-input-height: 44px;
  --f7-input-text-color: #000000;
  --f7-input-font-size: 17px;
  --f7-input-placeholder-color: #a9a9a9;
  --f7-textarea-padding-vertical: 11px;
   
  --f7-input-focused-border-color: var(--f7-list-item-border-color);
  --f7-input-invalid-border-color: var(--f7-list-item-border-color);
  --f7-input-invalid-text-color: var(--f7-input-error-text-color);
  
  --f7-label-font-size: 12px;
  --f7-label-text-color: inherit;
   
  --f7-label-focused-text-color: var(--f7-label-text-color);
  --f7-label-invalid-text-color: var(--f7-label-text-color);
   
  --f7-floating-label-scale: calc(17 / 12);
  --f7-inline-label-font-size: 17px;
  --f7-inline-label-line-height: 1.4;
  --f7-inline-label-padding-top: 3px;
  --f7-input-info-text-color: #8e8e93;
  --f7-input-clear-button-size: 14px;
  --f7-input-clear-button-color: #8e8e93;
  
  /***** list *****/
  --f7-list-bg-color: #fff;
  --f7-list-item-text-max-lines: 2;
  --f7-list-chevron-icon-color: #c7c7cc;
  --f7-list-chevron-icon-font-size: 20px;
  --f7-list-item-title-font-size: inherit;
  --f7-list-item-title-font-weight: 400;
  --f7-list-item-title-text-color: inherit;
  --f7-list-item-title-line-height: inherit;
  --f7-list-item-title-white-space: nowrap;
  --f7-list-item-subtitle-font-weight: 400;
  --f7-list-item-subtitle-text-color: inherit;
  --f7-list-item-subtitle-line-height: inherit;
  --f7-list-item-text-font-weight: 400;
  --f7-list-item-after-font-weight: 400;
  --f7-list-item-header-text-color: inherit;
  --f7-list-item-header-font-size: 12px;
  --f7-list-item-header-font-weight: 400;
  --f7-list-item-header-line-height: 1.2;
  --f7-list-item-footer-font-size: 12px;
  --f7-list-item-footer-font-weight: 400;
  --f7-list-item-footer-line-height: 1.2;
  --f7-list-button-font-size: inherit;
  --f7-list-button-font-weight: 400;
  --f7-list-item-divider-line-height: inherit;
  --f7-list-group-title-line-height: inherit;  
  --f7-list-in-list-padding-left: 30px;
  --f7-list-inset-side-margin: 15px;
  --f7-list-inset-border-radius: 7px;
  --f7-list-margin-vertical: 35px;
  --f7-list-font-size: 17px;
  --f7-list-chevron-icon-area: 20px;
  --f7-list-border-color: #c8c7cc;
  --f7-list-item-border-color: #c8c7cc;
  --f7-list-link-pressed-bg-color: #d9d9d9;
  --f7-list-item-subtitle-font-size: 15px;
  --f7-list-item-text-font-size: 15px;
  --f7-list-item-text-text-color: #8e8e93;
  --f7-list-item-text-line-height: 21px;
  --f7-list-item-after-font-size: inherit;
  --f7-list-item-after-text-color: #8e8e93;
  --f7-list-item-after-line-height: inherit;
  --f7-list-item-after-padding: 5px;
  --f7-list-item-footer-text-color: #8e8e93;
  --f7-list-item-min-height: 44px;
  --f7-list-item-media-margin: 15px;
  --f7-list-item-media-icons-margin: 5px;
  --f7-list-item-cell-margin: 15px;
  --f7-list-item-padding-vertical: 8px;
  --f7-list-item-padding-horizontal: 15px;
  --f7-list-media-item-padding-vertical: 10px;
  --f7-list-media-item-padding-horizontal: 15px;
  --f7-list-media-item-title-font-weight: 600;  
  --f7-list-button-text-color: var(--f7-theme-color);  
  --f7-list-button-text-align: center;
  --f7-list-button-border-color: #c8c7cc;
  --f7-list-button-pressed-bg-color: #d9d9d9;
  --f7-list-item-divider-height: 31px;
  --f7-list-item-divider-text-color: #8e8e93;
  --f7-list-item-divider-font-size: inherit;
  --f7-list-item-divider-font-weight: 400;
  --f7-list-item-divider-bg-color: #f7f7f7;
  --f7-list-item-divider-border-color: #c8c7cc;
  --f7-list-group-title-height: 31px;
  --f7-list-group-title-text-color: #8e8e93;
  --f7-list-group-title-font-size: inherit;
  --f7-list-group-title-font-weight: 400;
  --f7-list-group-title-bg-color: #f7f7f7;
}
  
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  :root {
    --f7-device-pixel-ratio: 2;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  :root {
    --f7-device-pixel-ratio: 3;
  }
}
    
.button
{	
	width: 100%;
	transition-duration: .1s;	     
    text-decoration: none;
    text-align: center;
    display: block;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: 0 0;
    margin: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    position: relative;
    overflow: hidden;
    font-family: inherit;
    cursor: pointer;
    outline: 0;
    box-sizing: border-box;
    vertical-align: middle;
    justify-content: center;
    align-items: center;
    border: var(--f7-button-border-width,0px) solid var(--f7-button-border-color,var(--f7-theme-color));
    font-size: var(--f7-button-font-size);
    color: var(--f7-button-text-color,var(--f7-theme-color));
    height: var(--f7-button-height);
    line-height: calc(var(--f7-button-height) - var(--f7-button-border-width,0) * 2);
    padding: var(--f7-button-padding-vertical,0px) var(--f7-button-padding-horizontal);
    border-radius: var(--f7-button-border-radius);
    min-width: var(--f7-button-min-width);
    font-weight: var(--f7-button-font-weight);
    letter-spacing: var(--f7-button-letter-spacing);
    text-transform: var(--f7-button-text-transform);
    background-color: var(--f7-button-bg-color);
    box-shadow: var(--f7-button-box-shadow);
}
.list {
    position: relative;
    z-index: 1;
    font-size: var(--f7-list-font-size);
    margin: var(--f7-list-margin-vertical) 0;
}
.list ul {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    background: var(--f7-list-bg-color);
}
.list li {
    position: relative;
    box-sizing: border-box;
}
.list .item-content {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    align-items: center;
    min-height: var(--f7-list-item-min-height);
    padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
}
.list .item-inner {
    position: relative;
    width: 100%;
    min-width: 0;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    align-items: center;
    align-self: stretch;
    padding-top: var(--f7-list-item-padding-vertical);
    padding-bottom: var(--f7-list-item-padding-vertical);
    min-height: var(--f7-list-item-min-height);
    padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
}
.item-input .item-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.list .item-title {
    min-width: 0;
    flex-shrink: 1;
    white-space: var(--f7-list-item-title-white-space);
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    font-size: var(--f7-list-item-title-font-size);
    font-weight: var(--f7-list-item-title-font-weight);
    color: var(--f7-list-item-title-text-color);
    line-height: var(--f7-list-item-title-line-height);
}
.list .item-floating-label, .list .item-label {
    width: 100%;
    vertical-align: top;
    flex-shrink: 0;
    font-size: var(--f7-label-font-size);
    font-weight: var(--f7-label-font-weight);
    line-height: var(--f7-label-line-height);
    color: var(--f7-label-text-color);
    transition-duration: .2s;
    transition-property: transform,color;
}
.list .item-input-wrap {
    width: 100%;
    flex-shrink: 1;
    position: relative;
}
.item-input-wrap {
    margin-top: calc(-1 * var(--f7-list-item-padding-vertical));
    margin-bottom: calc(-1 * var(--f7-list-item-padding-vertical));
}
.item-floating-label+.item-input-wrap, .item-label+.item-input-wrap {
    margin-top: 0;
}
input[type=date], input[type=datetime-local], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], select, textarea {
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    outline: 0;
    display: block;
    padding: 0;
    margin: 0;
    font-family: inherit;
    background: 0 0;
    resize: none;
    font-size: inherit;
    color: inherit;
}
.list input[type=date], .list input[type=datetime-local], .list input[type=email], .list input[type=number], .list input[type=password], .list input[type=search], .list input[type=tel], .list input[type=text], .list input[type=time], .list input[type=url], .list select {
    width: 100%;
    height: var(--f7-input-height);
    color: var(--f7-input-text-color);
    font-size: var(--f7-input-font-size);
    background-color: var(--f7-input-bg-color,transparent);
}
.item-divider, li.item-divider, li.list-group-title {
    white-space: nowrap;
    position: relative;
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    z-index: 15;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
    padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
    box-sizing: border-box;
    display: flex;
    align-items: center;
    align-content: center;
}
.item-divider, li.item-divider {
    margin-top: -1px;
    height: var(--f7-list-item-divider-height);
    color: var(--f7-list-item-divider-text-color);
    font-size: var(--f7-list-item-divider-font-size);
    font-weight: var(--f7-list-item-divider-font-weight);
    background-color: var(--f7-list-item-divider-bg-color);
    line-height: var(--f7-list-item-divider-line-height);
}
.links-list a:after, .list .item-inner:after, .simple-list li:after {
    content: '';
    position: absolute;
    background-color: var(--f7-list-item-border-color);
    display: block;
    z-index: 15;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    height: 1px;
    width: 100%;
    transform-origin: 50% 100%;
    transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
}
.list ul:before {
    content: '';
    position: absolute;
    background-color: var(--f7-list-border-color);
    display: block;
    z-index: 15;
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
    height: 1px;
    width: 100%;
    transform-origin: 50% 0%;
    transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
}
.list ul:after {
    content: '';
    position: absolute;
    background-color: var(--f7-list-border-color);
    display: block;
    z-index: 15;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    height: 1px;
    width: 100%;
    transform-origin: 50% 100%;
    transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
}
.input-clear-button {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition-duration: .1s;
    position: absolute;
    top: 50%;
    border: none;
    padding: 0;
    margin: 0;
    outline: 0;
    z-index: 1;
    cursor: pointer;
    background: 0 0;
    width: var(--f7-input-clear-button-size);
    height: var(--f7-input-clear-button-size);
    margin-top: calc(-1 * var(--f7-input-clear-button-size)/ 2);
    color: var(--f7-input-clear-button-color);
    right: 0;
}
.item-input-wrap .input-clear-button {
    top: calc(var(--f7-input-height)/ 2);
}
.inline-label .item-floating-label, .inline-label .item-label, .inline-labels .item-floating-label, .inline-labels .item-label {
    padding-top: var(--f7-inline-label-padding-top);
    align-self: flex-start;
    width: 35%;
    font-size: var(--f7-inline-label-font-size);
    line-height: var(--f7-inline-label-line-height);
}

.input-clear-button:before {
    position: absolute;
    content: '';
    left: 50%;
    top: 50%;
       width: 44px;
    height: 44px;
    margin-left: -22px;
    margin-top: -22px;
}
 
.input-clear-button:after {
	 content: 'delete_round_ios';
    font-size: calc(var(--f7-input-clear-button-size)/ (14 / 10));
    line-height: 1.4;
    font-family: framework7-core-icons;
    font-weight: 400;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    -moz-font-feature-settings: "liga";
    font-feature-settings: "liga";
    text-align: center;
    display: block;
    width: 100%;
    height: 100%;
    font-size: 20px;
}
.list textarea {
    width: 100%;
    color: var(--f7-input-text-color);
    font-size: var(--f7-input-font-size);
    resize: none;
    line-height: 1.4;
    height: 100px;
    background-color: var(--f7-input-bg-color,transparent);
    padding-top: var(--f7-textarea-padding-vertical);
    padding-bottom: var(--f7-textarea-padding-vertical);
}
.input-dropdown input, .input-dropdown select, .input-dropdown textarea, .input-dropdown-wrap input, .input-dropdown-wrap select, .input-dropdown-wrap textarea {
    padding-right: 20px;
}
.input-dropdown-wrap:before, .input-dropdown:before {
    content: '';
    pointer-events: none;
    position: absolute;
    top: 50%;
    margin-top: -2px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #727272;
    right: 6px;
} 
.inline-label .item-floating-label+.item-input-wrap, .inline-label .item-label+.item-input-wrap, .inline-labels .item-floating-label+.item-input-wrap,.inline-labels .item-label+.item-input-wrap {
    margin-top: calc(-1 * var(--f7-list-item-padding-vertical));
}
.inline-label .item-inner, .inline-labels .item-inner {
    display: flex;
    align-items: center;
    flex-direction: row;
}