* {
    box-sizing: border-box;
    outline: none
}
body {
    font-family: Roboto,"Helvetica Neue",sans-serif;
    -webkit-overflow-scrolling: touch;
    overflow: hidden;
    position: absolute;
}
body.platform-ios {
    font-family: -apple-system,"Helvetica Neue",Roboto,sans-serif;
}
a {
  cursor: pointer;
  color: #000;
  text-decoration: none;
}
/*Create the scrollable viewport of your app.*/
.content {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: auto;
}
/*Floats any element to the left.*/
.left {
    float: left
}
/*Floats any element to the right.*/
.right {
    float: right
}
/*Floats any element to the top.*/
.top {
    position: absolute;
    top: 0;
    left: 0;
}
/*Floats any element to the bottom.*/
.bottom {
    position: absolute;
    bottom: 0;
    left: 0;
}
/*Align text, icons, and elements to the left.*/
.align-left {
    text-align: left;
}
/*Align text, icons, and elements to the center.*/
.align-center {
    text-align: center;
}
/*Align text, icons, and elements to the right.*/
.align-right {
    text-align: right;
}
/*Add a small border in element.*/
.border {
  border-width: 1px;
  border-style: solid;
}
/*Hide a element.*/
.hidden {
  display: none;
}
/*Define 90% of opacity.*/
.opacity-90 {
  opacity: 0.9;
}
/*Define 80% of opacity.*/
.opacity-80 {
  opacity: 0.8;
}
/*Define 70% of opacity.*/
.opacity-70 {
  opacity: 0.7;
}
/*Define 60% of opacity.*/
.opacity-60 {
  opacity: 0.6;
}
/*Define 50% of opacity.*/
.opacity-50 {
  opacity: 0.5;
}
/*Define 40% of opacity.*/
.opacity-40 {
  opacity: 0.4;
}
/*Define 30% of opacity.*/
.opacity-30 {
  opacity: 0.3;
}
/*Define 20% of opacity.*/
.opacity-20 {
  opacity: 0.2;
}
/*Define 10% of opacity.*/
.opacity-10 {
  opacity: 0.1;
}
/*Create a horizontal line, you need define color using <code>base</code> colors.*/
.line {
  width: 100%;
  height: 1px;
  display: block;
  clear: both;
}
.icon {
    font-size: 28px;
}
img, video {
    max-width: 100%
}
p {
    margin-top: 5px;
    margin-bottom: 5px
}
/*Add an internal space.*/
.padding {
    padding: 10px
}
/*Add a padding on the top.*/
.padding-top {
    padding-top: 10px;
}
/*Add an external space.*/
.margin {
    margin: 10px
}
span.padding {
  padding: 6px;
  padding-top: 2px;
  padding-bottom: 2px;
}
/*Add a small rounded border.*/
.radius {
    border-radius: 4px;
}
/*Add a large rounded border.*/
.radius-big {
    border-radius: 22px;
}
/*Add a circular border.*/
.circle {
    border-radius: 50%;
}
/*Adds a small border just to the left.*/
.radius-left {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px
}
/*Adds a small border just to the right.*/
.radius-right {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px
}
/*Adds a small border just to the top.*/
.radius-top {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
/*Limit the display of a text in only one line with periods at the end.*/
.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/*Create a shadow on an element (not text).*/
.shadow {
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}
/*Add a space vertically.*/
.space {
    width: 100%;
    height: 20px;
}
/*Add a big space vertically.*/
.space-big {
    width: 100%;
    height: 50px;
}
/*Add a huge space vertically.*/
.space-huge {
    width: 100%;
    height: 100px;
}
/*Add a margin on the bottom.*/
.margin-bottom {
  margin-bottom: 10px;
}
/*Add a margin on the top.*/
.margin-top {
  margin-top: 10px;
}
/*Create a shadow in a text.*/
.text-shadow {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}
/*Leave the text small.*/
.text-tiny {
    font-size: 12px;
}
.text-small {
    font-size: 14px;
}
.text-small .icon,
.text-small.icon {
  font-size: 14px !important;
}
/*Leave the icon small.*/
.icon-small {
  font-size: 14px !important;
}
/*Leave the icon big.*/
.icon-big {
  font-size: 50px !important; 
}
/*Leave the icon huge.*/
.icon-huge {
  font-size: 65px !important; 
}
/*Leave the icon extra-huge.*/
.icon-extra-huge {
  font-size: 120px !important; 
}
/*Leave the text large.*/
.text-medium {
    font-size: 18px
}
.text-big {
    font-size: 22px
}
.text-big .icon,
.text-big.icon {
    font-size: 22px !important;
}
/*Leave the text extra-huge.*/
.text-extra-huge {
    font-size: 65px
}
.text-extra-huge .icon,
.text-extra-huge.icon {
    font-size: 65px !important;
}
/*Leave the text huge.*/
.text-huge {
    font-size: 32px
}
.text-huge .icon,
.text-huge.icon {
    font-size: 32px !important;
}
/*Leave the text thinner.*/
.text-light {
    font-weight: 300;
}
/*Leave a bold text.*/
.text-bold {
    font-weight: bold;
}
/*Leave the text thicker.*/
.text-strong {
    font-weight: 800;
}
/*Italc text*/
.text-italic{
  font-style: italic;
}
/*Floats an element in the footer to the right.*/
.float-bottom-right {
    position: fixed;
    right: 15px;
    bottom: 15px;
}
/*Floats an element in the footer to the left.*/
.float-bottom-left {
    position: fixed;
    left: 15px;
    bottom: 15px;
}
/*Floats an element in the footer to the left.*/
.float-bottom-center {
    position: fixed;
    margin: auto;
    left: 0;
    bottom: 15px;
}
/*Create a completely round icon.*/
.icon-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.icon-circle-small {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.icon-circle-small i {
    font-size: 15px;
}
.icon-circle-big {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.icon-circle-big i {
    font-size: 70px;
}
.backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: .01;
  z-index: 9999;
  transition-duration: 280ms;
}
.backdrop.show {
  opacity: 0.4;
}
.mark {
  border-left-width: 8px !important;
}