/*@font-face { font-family: roboto-regular; src: url('../fonts/montserrat/Roboto-Regular.ttf'); } */

@font-face { font-family: montserrat-black; src: url('../fonts/montserrat/Roboto-Regular.ttf'); } 
@font-face { font-family: montserrat-blackitalic; src: url('../fonts/montserrat/Montserrat-BlackItalic.ttf'); } 
@font-face { font-family: montserrat-bold; src: url('../fonts/montserrat/Montserrat-Bold.ttf'); } 
@font-face { font-family: montserrat-bolditalic; src: url('../fonts/montserrat/Montserrat-BoldItalic.ttf'); } 
@font-face { font-family: montserrat-extrabold; src: url('../fonts/montserrat/Montserrat-ExtraBold.ttf'); } 
@font-face { font-family: montserrat-extrabolditalic; src: url('../fonts/montserrat/Montserrat-ExtraBoldItalic.ttf'); } 
@font-face { font-family: montserrat-extralight; src: url('../fonts/montserrat/Montserrat-ExtraLight.ttf'); } 
@font-face { font-family: montserrat-extralightitalic; src: url('../fonts/montserrat/Montserrat-ExtraLightItalic.ttf'); } 
@font-face { font-family: montserrat-italic; src: url('../fonts/montserrat/Montserrat-Italic.ttf'); } 
@font-face { font-family: montserrat-light; src: url('../fonts/montserrat/Montserrat-Light.ttf'); } 
@font-face { font-family: montserrat-lightitalic; src: url('../fonts/montserrat/Montserrat-LightItalic.ttf'); }
@font-face { font-family: montserrat-medium; src: url('../fonts/montserrat/Montserrat-Medium.ttf'); }  
@font-face { font-family: montserrat-mediumitalic; src: url('../fonts/montserrat/Montserrat-MediumItalic.ttf'); } 
@font-face { font-family: montserrat-regular; src: url('../fonts/montserrat/Montserrat-Regular.ttf'); } 
@font-face { font-family: montserrat-semibold; src: url('../fonts/montserrat/Montserrat-SemiBold.ttf'); } 
@font-face { font-family: montserrat-semibolditalic; src: url('../fonts/montserrat/Montserrat-SemiBoldItalic.ttf'); } 
@font-face { font-family: montserrat-thin; src: url('../fonts/montserrat/Montserrat-Thin.ttf'); } 
@font-face { font-family: montserrat-thinitalic; src: url('../fonts/montserrat/Montserrat-ThinItalic.ttf'); } 

* {
  box-sizing: border-box;
}

body { touch-action: pan-y; }
body { touch-action: pan-y, pan-x; }

/*

declaring global variables

:root {
  --bg-page: #181818;
  --text-color: #f9f9f9;
  --blue: #0870f8;
  --blue-rgb: 8, 112, 248;
  --input-size: 70px;
  --border: #343434;
  --g-purple: linear-gradient(30deg, #85f, #9966ff);
  --g-yellow: linear-gradient(30deg, #fc0, #fc0);
  --g-red: linear-gradient(30deg, #f36, #f24);
  --g-blue: linear-gradient(30deg, #0cf, #0af);
  --g-purple: linear-gradient(30deg, #85f, #9966ff);
}

Using variable

color: var(--text-color);

*/

/*a, span, p, b, button, h1, h2, h3, h4, small, label, table, thead, tbody, tr, td, th, ul, li {
  user-select: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}*/

* {
  user-select: none; /* supported by Chrome and Opera */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
}

input[type="text"], input[type="password"], input[type="email"], textarea, input[type="time"], input[type="date"], input[type="datetime"], input[type="number"], input[type="range"] {
  user-select: auto; /* supported by Chrome and Opera */
  -webkit-user-select: auto; /* Safari */
  -khtml-user-select: auto; /* Konqueror HTML */
  -moz-user-select: auto; /* Firefox */
  -ms-user-select: auto; /* Internet Explorer/Edge */
}

.disable-user-selection{
  user-select: none; /* supported by Chrome and Opera */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
}

.enable-user-selection {
  user-select: auto; /* supported by Chrome and Opera */
  -webkit-user-select: auto; /* Safari */
  -khtml-user-select: auto; /* Konqueror HTML */
  -moz-user-select: auto; /* Firefox */
  -ms-user-select: auto; /* Internet Explorer/Edge */
}

html, body {
  font: 16px Roboto, Arial, sans-serif;
  background-color: rgb(229,229,234); /*rgb(209,209,214);*/
  margin: 0;
  height: 100%;
}

body{
  overflow: hidden;
  max-height:  100%;
}

a {
  text-decoration: none;
  color: inherit;
}

/* general styles */

.position-relative{
  position: relative;
}

.position-absolute{
  position: absolute;
}

.color-error{
  color: rgb(255, 59, 48)!important;
}

.color-warning{
  color: rgb(255, 204, 0)!important;
}

.color-success{
  color: rgb(52, 199, 89)!important;
}

.color-red{
  color: rgb(255,59,48)!important;
}

.color-purple{
  color: rgb(175,82,222)!important;
}

.color-blue-light{
  color: rgb(90,200,250)!important;
}

.background-error{
  background-color: rgb(255, 59, 48)!important;
}

.background-warning{
  background-color: rgb(255, 204, 0)!important;
}

.background-success{
  background-color: rgb(52, 199, 89)!important;
}

.background-red{
  background-color: rgb(255,59,48)!important;
}

.background-purple{
  background-color: rgb(175,82,222)!important;
}

.background-blue-light{
  background-color: rgb(90,200,250)!important;
}

.background-wite{
  background: #fff!important;
}

.default-section{
  width: 100%;
}

.container-centered{
  margin: auto;
}

.center-text{
  text-align: center;
}

.left-text{
  text-align: left;
}

.right-text{
  text-align: right;
}

.substract-left-15{
  margin-left: -15px;
}

.float-right{
  float: right;
}

.float-left{
  float: left;
}

.with-margin-top-5{
  margin-top: 5px;
}

.with-margin-top-10{
  margin-top: 10px;
}

.with-margin-top-15{
  margin-top: 15px;
}

.with-margin-top-20{
  margin-top: 20px;
}

.with-margin-top-25{
  margin-top: 25px;
}

.with-margin-top-30{
  margin-top: 30px;
}

.with-margin-top-40{
  margin-top: 40px;
}

.with-margin-left-5{
  margin-left: 5px;
}

.with-margin-left-10{
  margin-left: 10px;
}

.with-margin-left-15{
  margin-left: 15px;
}

.with-margin-left-30{
  margin-left: 30px;
}

.with-margin-bottom-5{
  margin-bottom: 5px;
}

.with-margin-bottom-10{
  margin-bottom: 10px;
}

.with-margin-bottom-15{
  margin-bottom: 15px;
}

.with-margin-bottom-20{
  margin-bottom: 20px;
}

.with-margin-bottom-25{
  margin-bottom: 25px;
}

.with-margin-bottom-30{
  margin-bottom: 30px;
}

.with-margin-bottom-35{
  margin-bottom: 35px;
}

.with-margin-bottom-40{
  margin-bottom: 40px;
}

.with-margin-bottom-45{
  margin-bottom: 45px;
}

.with-margin-right-5{
  margin-right: 5px;
}

.with-margin-right-10{
  margin-right: 10px;
}

.with-margin-right-15{
  margin-right: 15px;
}

.with-margin-right-30{
  margin-right: 30px;
}

.with-padding-top-5{
  padding-top: 5px;
}

.with-padding-top-10{
  padding-top: 10px;
}

.with-padding-top-15{
  padding-top: 15px;
}

.with-padding-top-30{
  padding-top: 30px;
}

.with-padding-left-5{
  padding-left: 5px;
}

.with-padding-left-10{
  padding-left: 10px;
}

.with-padding-left-15{
  padding-left: 15px;
}

.with-padding-left-30{
  padding-left: 30px;
}

.with-padding-bottom-5{
  padding-bottom: 5px;
}

.with-padding-bottom-10{
  padding-bottom: 10px;
}

.with-padding-bottom-15{
  padding-bottom: 15px;
}

.with-padding-bottom-30{
  padding-bottom: 30px;
}

.with-padding-right-5{
  padding-right: 5px;
}

.with-padding-right-10{
  padding-right: 10px;
}

.with-padding-right-15{
  padding-right: 15px;
}

.with-padding-right-30{
  padding-right: 30px;
}

.with-padding-5{
  padding: 5px;
}

.with-padding-10{
  padding: 10px;
}

.with-padding-15{
  padding: 15px;
}

.with-padding-30{
  padding: 30px;
}

.no-right-padding{
  padding-right: 0px!important;
}

.no-left-padding{
  padding-left: 0px!important;
}

.no-top-padding{
  padding-top: 0px!important;
}

.no-bottom-padding{
  padding-bottom: 0px!important;
}

.float-left{
  float: left;
}

.float-right{
  float: right;
}

.width-5{
  width: 5%;
}

.width-10{
  width: 10%;
}

.width-15{
  width: 15%;
}

.width-20{
  width: 20%;
}

.width-25{
  width: 25%;
}

.width-30{
  width: 30%;
}

.width-33{
  width: 33.333%;
}

.width-35{
  width: 35%;
}

.width-40{
  width: 40%;
}

.width-45{
  width: 45%;
}

.width-50{
  width: 50%;
}

.width-55{
  width: 55%;
}

.width-60{
  width: 60%;
}

.width-65{
  width: 65%;
}

.width-70{
  width: 70%;
}

.width-75{
  width: 75%;
}

.width-80{
  width: 80%;
}

.width-85{
  width: 85%;
}

.width-90{
  width: 90%;
}

.width-95{
  width: 95%;
}

.width-100{
  width: 100%;
}

.max-width-300{
  max-width: 300px;
}

.height-5{
  height: 5%;
}

.height-10{
  height: 10%;
}

.height-15{
  height: 15%;
}

.height-20{
  height: 20%;
}

.height-25{
  height: 25%;
}

.height-30{
  height: 30%;
}

.height-35{
  height: 35%;
}

.height-40{
  height: 40%;
}

.height-45{
  height: 45%;
}

.height-50{
  height: 50%;
}

.height-55{
  height: 55%;
}

.height-60{
  height: 60%;
}

.height-65{
  height: 65%;
}

.height-70{
  height: 70%;
}

.height-75{
  height: 75%;
}

.height-80{
  height: 80%;
}

.height-85{
  height: 85%;
}

.height-90{
  height: 90%;
}

.height-95{
  height: 95%;
}

.height-100{
  height: 100%;
}

.margin-left-5{
  margin-left: 5%;
}

.margin-left-10{
  margin-left: 10%;
}

.margin-left-15{
  margin-left: 15%;
}

.margin-left-20{
  margin-left: 20%;
}

.margin-left-25{
  margin-left: 25%;
}

.margin-left-30{
  margin-left: 30%;
}

.margin-left-35{
  margin-left: 35%;
}

.margin-left-40{
  margin-left: 40%;
}

.margin-left-45{
  margin-left: 45%;
}

.margin-left-50{
  margin-left: 50%;
}

.margin-left-55{
  margin-left: 55%;
}

.margin-left-60{
  margin-left: 60%;
}

.margin-left-65{
  margin-left: 65%;
}

.margin-left-70{
  margin-left: 70%;
}

.margin-left-75{
  margin-left: 75%;
}

.margin-left-80{
  margin-left: 80%;
}

.margin-left-85{
  margin-left: 85%;
}

.margin-left-90{
  margin-left: 90%;
}

.margin-left-95{
  margin-left: 95%;
}

.margin-left-100{
  margin-left: 100%;
}

.margin-right-5{
  margin-right: 5%;
}

.margin-right-10{
  margin-right: 10%;
}

.margin-right-15{
  margin-right: 15%;
}

.margin-right-20{
  margin-right: 20%;
}

.margin-right-25{
  margin-right: 25%;
}

.margin-right-30{
  margin-right: 30%;
}

.margin-right-35{
  margin-right: 35%;
}

.margin-right-40{
  margin-right: 40%;
}

.margin-right-45{
  margin-right: 45%;
}

.margin-right-50{
  margin-right: 50%;
}

.margin-right-55{
  margin-right: 55%;
}

.margin-right-60{
  margin-right: 60%;
}

.margin-right-65{
  margin-right: 65%;
}

.margin-right-70{
  margin-right: 70%;
}

.margin-right-75{
  margin-right: 75%;
}

.margin-right-80{
  margin-right: 80%;
}

.margin-right-85{
  margin-right: 85%;
}

.margin-right-90{
  margin-right: 90%;
}

.margin-right-95{
  margin-right: 95%;
}

.margin-right-100{
  margin-right: 100%;
}

.margin-top-5{
  margin-top: 5%;
}

.margin-top-10{
  margin-top: 10%;
}

.margin-top-15{
  margin-top: 15%;
}

.margin-top-20{
  margin-top: 20%;
}

.margin-top-25{
  margin-top: 25%;
}

.margin-top-30{
  margin-top: 30%;
}

.margin-top-35{
  margin-top: 35%;
}

.margin-top-40{
  margin-top: 40%;
}

.margin-top-45{
  margin-top: 45%;
}

.margin-top-50{
  margin-top: 50%;
}

.margin-top-55{
  margin-top: 55%;
}

.margin-top-60{
  margin-top: 60%;
}

.margin-top-65{
  margin-top: 65%;
}

.margin-top-70{
  margin-top: 70%;
}

.margin-top-75{
  margin-top: 75%;
}

.margin-top-80{
  margin-top: 80%;
}

.margin-top-85{
  margin-top: 85%;
}

.margin-top-90{
  margin-top: 90%;
}

.margin-top-95{
  margin-top: 95%;
}

.margin-top-100{
  margin-top: 100%;
}

.margin-bottom-5{
  margin-bottom: 5%;
}

.margin-bottom-10{
  margin-bottom: 10%;
}

.margin-bottom-15{
  margin-bottom: 15%;
}

.margin-bottom-20{
  margin-bottom: 20%;
}

.margin-bottom-25{
  margin-bottom: 25%;
}

.margin-bottom-30{
  margin-bottom: 30%;
}

.margin-bottom-35{
  margin-bottom: 35%;
}

.margin-bottom-40{
  margin-bottom: 40%;
}

.margin-bottom-45{
  margin-bottom: 45%;
}

.margin-bottom-50{
  margin-bottom: 50%;
}

.margin-bottom-55{
  margin-bottom: 55%;
}

.margin-bottom-60{
  margin-bottom: 60%;
}

.margin-bottom-65{
  margin-bottom: 65%;
}

.margin-bottom-70{
  margin-bottom: 70%;
}

.margin-bottom-75{
  margin-bottom: 75%;
}

.margin-bottom-80{
  margin-bottom: 80%;
}

.margin-bottom-85{
  margin-bottom: 85%;
}

.margin-bottom-90{
  margin-bottom: 90%;
}

.margin-bottom-95{
  margin-bottom: 95%;
}

.margin-bottom-100{
  margin-bottom: 100%;
}

.padding-left-5{
  padding-left: 5%;
}

.padding-left-10{
  padding-left: 10%;
}

.padding-left-15{
  padding-left: 15%;
}

.padding-left-20{
  padding-left: 20%;
}

.padding-left-25{
  padding-left: 25%;
}

.padding-left-30{
  padding-left: 30%;
}

.padding-left-35{
  padding-left: 35%;
}

.padding-left-40{
  padding-left: 40%;
}

.padding-left-45{
  padding-left: 45%;
}

.padding-left-50{
  padding-left: 50%;
}

.padding-left-55{
  padding-left: 55%;
}

.padding-left-60{
  padding-left: 60%;
}

.padding-left-65{
  padding-left: 65%;
}

.padding-left-70{
  padding-left: 70%;
}

.padding-left-75{
  padding-left: 75%;
}

.padding-left-80{
  padding-left: 80%;
}

.padding-left-85{
  padding-left: 85%;
}

.padding-left-90{
  padding-left: 90%;
}

.padding-left-95{
  padding-left: 95%;
}

.padding-left-100{
  padding-left: 100%;
}

.padding-right-5{
  padding-right: 5%;
}

.padding-right-10{
  padding-right: 10%;
}

.padding-right-15{
  padding-right: 15%;
}

.padding-right-20{
  padding-right: 20%;
}

.padding-right-25{
  padding-right: 25%;
}

.padding-right-30{
  padding-right: 30%;
}

.padding-right-35{
  padding-right: 35%;
}

.padding-right-40{
  padding-right: 40%;
}

.padding-right-45{
  padding-right: 45%;
}

.padding-right-50{
  padding-right: 50%;
}

.padding-right-55{
  padding-right: 55%;
}

.padding-right-60{
  padding-right: 60%;
}

.padding-right-65{
  padding-right: 65%;
}

.padding-right-70{
  padding-right: 70%;
}

.padding-right-75{
  padding-right: 75%;
}

.padding-right-80{
  padding-right: 80%;
}

.padding-right-85{
  padding-right: 85%;
}

.padding-right-90{
  padding-right: 90%;
}

.padding-right-95{
  padding-right: 95%;
}

.padding-right-100{
  padding-right: 100%;
}

.padding-top-5{
  padding-top: 5%;
}

.padding-top-10{
  padding-top: 10%;
}

.padding-top-15{
  padding-top: 15%;
}

.padding-top-20{
  padding-top: 20%;
}

.padding-top-25{
  padding-top: 25%;
}

.padding-top-30{
  padding-top: 30%;
}

.padding-top-35{
  padding-top: 35%;
}

.padding-top-40{
  padding-top: 40%;
}

.padding-top-45{
  padding-top: 45%;
}

.padding-top-50{
  padding-top: 50%;
}

.padding-top-55{
  padding-top: 55%;
}

.padding-top-60{
  padding-top: 60%;
}

.padding-top-65{
  padding-top: 65%;
}

.padding-top-70{
  padding-top: 70%;
}

.padding-top-75{
  padding-top: 75%;
}

.padding-top-80{
  padding-top: 80%;
}

.padding-top-85{
  padding-top: 85%;
}

.padding-top-90{
  padding-top: 90%;
}

.padding-top-95{
  padding-top: 95%;
}

.padding-top-100{
  padding-top: 100%;
}

.padding-bottom-5{
  padding-bottom: 5%;
}

.padding-bottom-10{
  padding-bottom: 10%;
}

.padding-bottom-15{
  padding-bottom: 15%;
}

.padding-bottom-20{
  padding-bottom: 20%;
}

.padding-bottom-25{
  padding-bottom: 25%;
}

.padding-bottom-30{
  padding-bottom: 30%;
}

.padding-bottom-35{
  padding-bottom: 35%;
}

.padding-bottom-40{
  padding-bottom: 40%;
}

.padding-bottom-45{
  padding-bottom: 45%;
}

.padding-bottom-50{
  padding-bottom: 50%;
}

.padding-bottom-55{
  padding-bottom: 55%;
}

.padding-bottom-60{
  padding-bottom: 60%;
}

.padding-bottom-65{
  padding-bottom: 65%;
}

.padding-bottom-70{
  padding-bottom: 70%;
}

.padding-bottom-75{
  padding-bottom: 75%;
}

.padding-bottom-80{
  padding-bottom: 80%;
}

.padding-bottom-85{
  padding-bottom: 85%;
}

.padding-bottom-90{
  padding-bottom: 90%;
}

.padding-bottom-95{
  padding-bottom: 95%;
}

.padding-bottom-100{
  padding-bottom: 100%;
}

.text-example{
  font-size: 12px;
  color: rgb(99,99,102);
}

.text-example li {
  list-style-type: none;
}

.text-example ul {
  list-style-type: none;
  padding-left: 0px!important;
  margin-bottom: 0px;
  margin-top: 0px;
}

.display-flex{
  display: flex;
}

.flex-wrap{
  flex-wrap: wrap;
}

.flex-nowrap{
  flex-wrap: nowrap;
}

.display-none{
  display: none!important;
}

.flex-space-between{
  justify-content: space-between!important;
}

.flex-justify-left{
  justify-content: left;
}

.flex-justify-center{
  justify-content: center;
}

.flex-justify-right{
  justify-content: right;
}

.flex-column{
  flex-direction: column;
}

.flex-row{
  flex-direction: row;
}

.flex-align-items-end{
  align-items: flex-end;
}   

.flex-left{
  justify-content: left;
}

.flex-right{
  justify-content: right;
}

.flex-center{
  justify-content: center;
}

.flex-end{
  justify-content: flex-end;
}

._bold {
  font-weight: bold;
}

._black {
  color: #333;
}

._capitalize {
  text-transform: capitalize;
}

._uppercase {
  text-transform: uppercase;
}

._align-center{
  text-align: center!important;
}

._align-left{
  text-align: left!important;
}

._align-right{
  text-align: right!important;
}

.no-content{
  width: 100%;
  text-align: center;
  margin: auto; 
  padding: 10px;
  line-height: 1.8;
  min-height: 40px;
  font-size: 14px;
  color: rgb(99,99,102);
  opacity: 0.8;
}

.no-content a{
  color: #06c;
  cursor: pointer;
}

.theme-html5-styled-label{
  color: #333;
  padding-left:5px;
  margin-bottom: 5px;
  font: 14px Roboto, Arial, sans-serif!important;
}

.theme-html5-styled-input{
  border-radius: 10px;
  outline: none;
  border-color: transparent;
  font: 14px Roboto, Arial, sans-serif!important;
  height: 30px;
  background: #e2e2e2;
  padding-left:5px;
}

.theme-html5-styled-input:focus{
  font: 14px Roboto, Arial, sans-serif!important;
}

.theme-input-number{
  border-radius: 10px;
  outline: none;
  border-color: transparent;
  font-size: 14px;
  font: 18px Roboto, Arial, sans-serif;
  height: 30px;
  background: #e2e2e2;
  padding-left:5px;
  color: #333;
  width: 80px;
}

.theme-input-number::-webkit-inner-spin-button, 
.theme-input-number::-webkit-outer-spin-button {  

   opacity: 1;

}

.theme-button-top-add{
  font: 14px Roboto, Arial, sans-serif;
  cursor: pointer;
  color: rgb(0,122,255);
}

.theme-button-top-add.rounded{
  text-align: center;
  white-space: nowrap;
  /*font-size: 11px;*/
  /*text-transform: uppercase;*/
  line-height: 1.17648;
  font-weight: 400;
  min-width: 90px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 4px;
  padding-bottom: 4px;
  border-radius: 14px;
  color: #fff;
}

.button-theme{
  position: relative; /* testing */

  cursor: pointer;
  display: inline-block;
  text-align: center;
  white-space: nowrap;
  font-size: 14px;
  line-height: 1.17648;
  font-weight: 400;
  letter-spacing: -.022em;
  font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
  min-width: 28px;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-radius: 18px;
  background: var(--button-theme-color);
  color: #fff;
  pointer-events: unset;
}

.button-theme:hover{
  background: var(--button-theme-color-hover);
}

.button-theme span{
  visibility: visible;
}

.button-theme .lds-spinner{
  display: none;
}

.button-theme.loading {
  pointer-events: none;
}

.button-theme.loading .lds-spinner{
  display: unset;
}

.button-theme.loading span{
  visibility: hidden;
}

.button-loading{
  position: relative;
}

.button-loading .lds-spinner{
  display: none;
}

.button-loading.loading {
  pointer-events: none;
}

.button-loading.loading .lds-spinner{
  display: unset;
}

.button-loading.loading span{
  visibility: hidden;
}

.theme-green{
  background: rgb(52, 199, 89);
}

.theme-red{
  background: rgb(255, 59, 48);
}

/* button loader arrow */

.button-arrow-loading{
  position:relative;
}

.button-arrow-loading .lds-spinner{
  display: none;
}

.button-arrow-loading.loading {
  pointer-events: none;
}

.button-arrow-loading.loading .lds-spinner{
  display: unset;
}

.button-arrow-loading.loading i{
  display: none;
}

/* Theme select */

.theme-top-select {
    border-radius: 10px;
    outline: none;
    border-color: transparent;
    font-size: 14px;
    font: 16px Roboto, Arial, sans-serif;
    color: #fff;
    height: 35px;
    background: var(--button-theme-color);
    padding: 0px 5px;
}

/* navbars */

.top-navbar {
  width: 100%;
  height: 3em;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  box-shadow: 0 -9px 10px 10px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 -9px 10px 10px rgba(0, 0, 0, 0.2);
  will-change: transform;
}

.top-navbar .navbar {
  background: var(--theme-color);
  padding: 0 9px;
  width: 100%;
  height:100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
}

.top-navbar .navbar ._btn-back{
  font-size: 16px;
  padding-right: 5px;  
  color: #fff;
  cursor: pointer;
  max-width: 120px;
  cursor: pointer;
  display: inline-block;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.top-navbar .navbar ._title {
  display: block;
  width: 150px;
  line-height: 1.5;
  text-align: center;
  max-height: 40px;
  overflow: hidden;
  line-height: 2.5;
  color: #FFF;
  text-transform: capitalize;

  font-size: 16px;
  /*font-weight: bold;*/
  letter-spacing: .30px;

  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;

  -webkit-box-flex: 1;
  flex: 1;
}

.top-navbar .navbar ._title.fullSize {
  width: 100%!important;
}

.top-navbar .navbar ._location {
  display: block;
  width: 150px;
  max-height: 40px;
  overflow: hidden;
  line-height: 1.7;
  color: #FFF;
  text-transform: capitalize;
  text-align: right;
  font-size: 12px;
}

.bottom-nav {
  padding: 2px;
  width: 100%;
  height: 2.9375em;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 99;
  background: rgb(242,242,247);
  border-top: solid 1px rgb(199,199,204);
  will-change: transform;
}

@media (-webkit-min-device-pixel-ratio: 2) {
  .bottom-nav {
    border-color: #ccc;
  }
}

/* ends navbars */

/* Pages and containers */

.page{
  height: 100%;
  width: 100%;
  padding-top: 48px;
  padding-bottom: 47px;
  position: absolute;
  overflow-y: auto;
  transition: 0.3s filter linear;
  -webkit-transition: 0.3s -webkit-filter linear;
  -o-transition: 0.3s -o-filter linear;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.page::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.page {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.app-pages{
  display: none;
}

.app-pages.active{
  display:block;
}

.app-main-container{
  /*height: 100%;*/
  width: 100%;
  max-width: 1300px;
  margin: auto;
  /*position: absolute;*/
  /*overflow-y: auto;*/
  transition: 0.3s filter linear;
  -webkit-transition: 0.3s -webkit-filter linear;
}

.transition-delay-3{
  transition-delay: 0.2s!important;
  -webkit-transition-delay: 0.2s!important;
}

.blurred{

  -webkit-filter: blur(15px); 
  -moz-filter: blur(15px);
  -o-filter: blur(15px); 
  -ms-filter: blur(15px); 
  filter: blur(15px);  
  
  transition: 0.3s filter linear;
  -webkit-transition: 0.3s -webkit-filter linear;
  -o-transition: 0.3s -o-filter linear;
}

.app-row{
  box-sizing: border-box;
}

.app-row:after{
  display: table;
  content: " ";
  clear: both;
}

.app-row:before{
  display: table;
  content: " ";
}

.app-sub-pages{
  display: none;
  height: 100%;
  overflow-y: auto;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.app-sub-pages::-webkit-scrollbar {
  display: none;
}

.app-sub-pages.active{
  display: block;
}

.cont-title{
  text-transform: uppercase;
  padding: 9px;
  padding-bottom: 9px;
  font-size: 12px;
  line-height: 1;
  color: rgb(99,99,102);
  width:100%;
  display: flex;
}

.cont-title .title{
  line-height: 1.4;
  display: flex;
  align-items: center;
}

.cont-title .checkturn{
  text-align: right;
  float:right;
  text-transform: none;
  color: #0070c9; 
  cursor: pointer;
  text-align: right;
  width: 35%;
  padding-top: 2px;
}

.cont-title .checkturn:hover{
  text-decoration: underline;
}

.cont-default{
  width: 100%;
  background-color: rgb(242,242,247);
  display: block;
  border-top: 1px solid rgb(199,199,204);
  border-bottom: 1px solid rgb(199,199,204);
  padding-left: 15px;
  padding-right: 15px;
  
  position: relative;
  overflow: hidden;
}

.cont-default.full-width{
  height: 100%;
  overflow: auto;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.cont-default.full-width::-webkit-scrollbar {
  display: none;
}

.background-desktop{
  position: fixed;
  height: 100%;
  width: 100%;
  margin-left: -15px;

  /*background: linear-gradient(to right, #68d8d6, #ffffff);*/
  background: #eee;

  /*background-image:
    linear-gradient(to top, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73)),
    url('../img/forest.jpg');
  background-size: cover;
  color: white;*/

  /*filter: blur(10px);*/
  -webkit-transition: -webkit-filter 500ms linear;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.cont-default .item-row{
  padding-top: 10px;
  padding-bottom: 10px;
  width: 100%;
  min-height: 50px;
  display: flex;
}

/*.cont-default .item-row:first-child{
  padding-top: 0px;
}*/

.cont-default .item-row .title{
  height: 100%;
  font-size: 14px;
  color:#000;
  line-height: 2.2;
}

.cont-default .item-row.add-new{
  cursor: pointer;
}

.cont-default .item-row.add-new:hover{
  opacity: 0.9;
}

.cont-default .item-row.add-new .title{
  color: #0070c9!important;
}

.cont-default .item-row .inputs{
  height: 100%;
  text-align: left;
  float:left;
  padding-left: 15px;

  line-height: 2.2;
  font-size: 14px;
  color: #000;
}

.cont-default .item-row .inputs input{
  background-color: transparent!important;
  font-size: 14px!important;
  color: rgb(99, 99, 102)!important;
  border-color: transparent!important;
}

.cont-default .item-row .inputs input.input-default-theme{
  color: rgb(142,142,147)!important;
}

.cont-default .item-row .inputs input:focus{
  outline: none!important;
}

.cont-default .item-row .inputs input::placeholder {
  opacity: 0.7;
}

.cont-default .item-row .inputs select{
  background-color: transparent!important;
  font-size: 14px!important;
  color: rgb(99, 99, 102)!important;
  border-color: transparent!important;
}

.cont-default .item-row .inputs select:focus{
  outline: none!important;
}

.cont-default .item-row .inputs select::placeholder {
  opacity: 0.7;
}

.cont-default .item-row .buttons{
  height: 100%;
  text-align: right;
  padding-right: 15px;
  line-height: 1.8;
}

.cont-default .item-row .title.remove-category{
  color: rgb(255, 59, 48)!important;
  cursor: pointer;
  text-align: center;
}

.cont-default .item-row .title.remove-category span{
  visibility: visible;
}

.cont-default .item-row .title.remove-category .lds-spinner{
  display: none;
}

.cont-default .item-row .title.remove-category.loading {
  pointer-events: none;
}

.cont-default .item-row .title.remove-category.loading .lds-spinner{
  display: unset;
}

.cont-default .item-row .title.remove-category.loading span{
  visibility: hidden;
}

.cont-default .item-row .title.save-category{
  color: #0070c9!important;
  cursor: pointer;
  text-align: center;
}

.cont-default .item-row .title.save-category span{
  visibility: visible;
}

.cont-default .item-row .title.save-category .lds-spinner{
  display: none;
}

.cont-default .item-row .title.save-category.loading {
  pointer-events: none;
}

.cont-default .item-row .title.save-category.loading .lds-spinner{
  display: unset;
}

.cont-default .item-row .title.save-category.loading span{
  visibility: hidden;
}

.cont-default .item-row .title.theme-btn-remove{
  color: rgb(255, 59, 48)!important;
  cursor: pointer;
  text-align: center;
}

.cont-default .item-row .title.theme-btn-remove span{
  visibility: visible;
}

.cont-default .item-row .title.theme-btn-remove .lds-spinner{
  display: none;
}

.cont-default .item-row .title.theme-btn-remove.loading {
  pointer-events: none;
}

.cont-default .item-row .title.theme-btn-remove.loading .lds-spinner{
  display: unset;
}

.cont-default .item-row .title.theme-btn-remove.loading span{
  visibility: hidden;
}

.cont-default .item-row .title.theme-btn-save{
  color: #0070c9!important;
  cursor: pointer;
  text-align: center;
}

.cont-default .item-row .title.theme-btn-save span{
  visibility: visible;
}

.cont-default .item-row .title.theme-btn-save .lds-spinner{
  display: none;
}

.cont-default .item-row .title.theme-btn-save.loading {
  pointer-events: none;
}

.cont-default .item-row .title.theme-btn-save.loading .lds-spinner{
  display: unset;
}

.cont-default .item-row .title.theme-btn-save.loading span{
  visibility: hidden;
}

.cont-small{
  padding: 9px;
  padding-bottom: 9px;
  font-size: 12px;
  line-height: 1;
  color: rgb(99,99,102);
  line-height: 1.4;
  width:100%;
}

.item-separator{
  width: 100%;
  position: relative;
  border-bottom: 1px solid rgb(199,199,204);
  /*margin-top: 10px;
  margin-bottom: 5px;*/
}

.cont-add-button{
  /*margin: auto;*/
  text-align: center;
  padding: 15px;
}

.greyScale{
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
}

.shop-item{
  display: flex;
  flex-direction: column;
  width: 100%;
  cursor: pointer;

  background-color: rgb(242,242,247);
  height: 78px;
}

.shop-item .shop-border{
  width: 77%;
  margin-left: 23%;
  height: 1px;
  border-bottom: 1px solid rgb(199,199,204);
}

.shop-item .shop-content{
  /*display: flex;
  flex-direction: row;*/
  position: relative;
  width: 100%;
  height: 72px;
}

.shop-item .shop-content .shop-img{
  position: absolute;
  width: 72px;
  height: 100%;
  z-index: 3;
  padding:10px 5px 5px 10px;
  /*background: blue;*/
}

.shop-item .shop-content .shop-img .img{
  width:100%;
  height: 100%;
  text-align: center;
}

.shop-item .shop-content .shop-img .img .with-border{
  border-radius: 15px;
  border: 1px solid rgb(199,199,204);
}

.shop-item .shop-content .shop-img .img i{
  font-size: 37px;
  margin-top: 8px;
  color: rgb(28,28,30);
}

.shop-item .shop-content .shop-desc{
  position: absolute;
  width: 100%;
  padding-left: 84px;
  padding-right: 110px;
  height: 100%;
  z-index: 1;
  /*padding: 10px;*/
  /*background: red;*/
}

.shop-item .shop-content .shop-desc .content-description{
  width: 100%;
  height: 100%;
  padding: 15px 0px;
  display: flex;
  flex-direction: column;
  line-height: 1.8;
}

.shop-item .shop-content .shop-desc .content-description.bar-description{
  padding: 15px 0px 5px 0px;
}

.shop-item .shop-content .shop-desc .content-description .title{
  font-size: 14px;
  color: #000;
  overflow: hidden;
  max-height: 23.86px;

  white-space: nowrap; 
  text-overflow: ellipsis;
}

.shop-item .shop-content .shop-desc .content-description .description{
  font-size: 11px;
  overflow: hidden;
  color: #666;
  max-height: 18.14px;

  white-space: nowrap; 
  text-overflow: ellipsis;
}

.shop-item .shop-content .shop-desc .content-description.bar-description .description{

  max-height: 30px;
}

.shop-item .shop-content .shop-actions{
  position: absolute;
  right: 0;
  height: 100%;
  width: 110px;
  z-index: 2;
  /*padding: 10px;*/
  /*background: yellow;*/
}

.shop-item .shop-content .shop-actions .content-actions{
  width: 100%;
  height: 100%;
  padding: 19px 15px 16px 5px;
  display: flex;
  flex-direction: column;
  line-height: 2;
  text-align: center;
}

.shop-item .shop-content .shop-actions .content-actions .action-description{
  font-size: 10px;
  overflow: hidden;
  color: #666;
  /*max-height: 18.14px;*/
  white-space: nowrap; 
  text-overflow: ellipsis;
}

.font-description{
  height: 100%;
  font-size: 14px;
  color:#000;
  line-height: 1.6;
  width: 100%;
  padding: 10px 0px;
}

/* default select list */

.list {
  display: -webkit-box;
  display: flex;
  height: inherit;
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}

.item {
  -webkit-box-flex: 1;
  flex: 1;
  height: inherit;
  list-style-type: none;
}

.link {
  cursor: pointer;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  height: inherit;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  -webkit-transition: 0.25s;
  transition: 0.25s;
}

.disabled{
  pointer-events: none;
}

.buttonDisabled{
  opacity: .7;
  pointer-events: none;
}

.link i, .link .label {
  color: rgb(99,99,102);
}

.link .label {
  padding-top: 9px;
  font-size: 0.625rem;
  line-height: 1;
  text-transform: uppercase;
}

.link.active i, .link.active .label {
  color: rgb(28,28,30);
}

.link.active .label {
  font-weight: 600;
}

.link-icon {
  display: block;
  width: 1.625em;
  height: 1.625em;
  fill: #bbb;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.link-icon--bigger {
  width: 1.75em;
  height: 1.75em;
}

.select-wrap{
  position: relative;
  width: 100%;
  height:120px;
  margin:auto;
  background-color: rgb(242,242,247);
  text-align: center;
  overflow:hidden;
}

.select-wrap ul{
  transform:translatey(0);
  transition:.3s;
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

.select-wrap li{
  font-weight: 500;
  height:25px;
  line-height: 1.8;
  width:100%;
  color:rgb(174,174,178);
  transition:.3s;
  pointer-events: none;
  list-style-type: none;
  font-size: 14px;
  letter-spacing: .009em;
}

.select-wrap li.active{
  opacity:1;
  /*transform:scale(1.2);*/
  font-weight: 500;
  color: rgb(28,28,30);
}

.centerBox{
  position: absolute;
  /*transform:translateY(-50%);*/
  top:50px;/*top:50%;*/
  height:25px; /*25px*/
  width:100%;
  border-top:1px solid rgba(17, 17, 17, 0.2);
  border-bottom:1px solid rgba(17, 17, 17, 0.2);
  /*background-color: rgba(17, 17, 17, 0.1);*/
}

.number-success{
  background: rgb(52, 199, 89);
  opacity: 0.7;
}

/* ends default select list */

/* default button theme */

.buttons .action-button{
  display: inline-block;
}

.action-button{
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  font-size: 11px;
  text-transform: uppercase;
  line-height: 1.17648;
  font-weight: 400;
  letter-spacing: -.022em;
  min-width: 90px;
  padding-left: 6px;
  padding-right: 6px;
  padding-top: 4px;
  padding-bottom: 4px;
  border-radius: 14px;
  color: #fff;
}

.action-button-arrow{
  cursor: pointer;
  text-align: right;
  line-height: 1;
  height: 100%;
  width: 100%;
  /*font-size: 16px;
  color: rgb(142,142,147);*/
  background: transparent!important;
  font-size: 24px;
  color: #b1b1b1;

}

.blue{
  background: #0071e3;
}

.action-button.blue:hover{
  background: rgba(0, 113, 227, 0.9);
}

.red{
  background: rgb(255, 59, 48);
}

.action-button.red:hover{
  background: rgba(255, 59, 48, 0.9);
}

.rounded-button-default-theme {
  height: 30px;
  width: 30px;
  border: 1px solid rgb(209,209,214);
  border-radius: 50%;
  background: rgb(209,209,214);
  cursor: pointer;
  float:right;
}

.go-button {
  height: 100%;
  width: 100%;
  max-width: 60px;
  color: rgb(142,142,147);
  text-align: center;
  background: transparent!important;
  cursor: pointer;
  float:right;
}

/* default input theme */

.input-default-theme {
  
  color: rgb(142,142,147)!important;
  background: transparent!important;
  border-color: transparent!important;
  font: 14px Roboto, Arial, sans-serif!important;
  float:left;
  width: 100%;
  border: unset;
  padding: 0px;
  resize: none;
}

.input-default-theme:focus{
  outline: none!important;
}

.input-default-theme::placeholder {
  opacity: 0.7;
}

/* default textarea theme */

.textarea-default-theme {
  
  color: rgb(142,142,147);
  background: transparent!important;
  border-color: transparent!important;
  font: 14px Roboto, Arial, sans-serif!important;
  float:left;
  width: 100%;
  border: unset;
  padding: 0px;
  resize: none;
}

.textarea-default-theme:focus{
  outline: none!important;
}

.textarea-default-theme::placeholder {
  opacity: 0.7;
}

/* default switch theme */

.switch-default-theme {
  height: 30px;
  width: 50px;
  /*border: 1px solid rgb(209,209,214);*/
  border: 1px solid #dbdbdc;
  border-radius: 999px;
  /*background: rgb(209,209,214);*/
  background: #E4E4E6;
  cursor: pointer;
  float:right;
}

.switch-default-theme.connected {
  margin-left:15px;float:unset;margin-bottom: -9px;display:inline-block;
}

.switch-default-theme .btn-switch {
  height: 26px;
  width: 26px;
  /*border: 1px solid #ccc;*/
  border: 1px solid #dbdbdc;
  border-radius: 999px;
  background: #fff;
  margin-top: 1px;
  margin-left: 1px;
  transition: all 0.2s;
}

.switch-default-theme.active {
  background: rgb(52, 199, 89);
  border: 1px solid rgb(52, 199, 89);
}

.switch-default-theme.active .btn-switch {
  margin-left: 45%;
}

/* ends default Switch */

/* ticket */

widget[type="ticket"] {
  /*
    
    do not work with ios

    -webkit-filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.3));
    filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.3));

  */

    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    /*transform-origin: 30% 52%;
    transform: rotate(270deg);*/
    width: 140px;
    overflow: hidden;
    margin:auto;
}
widget[type="ticket"] .top > div,
widget[type="ticket"] .bottom > div {
  padding: 0 18px;
}
widget[type="ticket"] .top img,
widget[type="ticket"] .bottom img {
    padding: 5px;
    width: 140px;
    height: 140px;
}
widget[type="ticket"] .top,
widget[type="ticket"] .bottom,
widget[type="ticket"] .rip {
  background-color: #fff;
} 
widget[type="ticket"] .top {
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}
widget[type="ticket"] .top .deetz {
  font-size: 12px;
  text-align: center;
}
widget[type="ticket"] .bottom {
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  padding: 0px 5px 7px 5px;
  font-size: 14px;
  font-weight: 700;
  /*height: 30px;*/
}
widget[type="ticket"] .bottom .code {
  padding: 0; 
  text-align: center;
}
widget[type="ticket"] .rip {
  height: 20px;
  margin: 0 10px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAACCAYAAAB7Xa1eAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuOWwzfk4AAAAaSURBVBhXY5g7f97/2XPn/AcCBmSMQ+I/AwB2eyNBlrqzUQAAAABJRU5ErkJggg==);
  background-size: 4px 2px;
  background-repeat: repeat-x;
  background-position: center;
  position: relative;
  -webkit-box-shadow: 0 1px 0 0 #fff, 0 -1px 0 0 #fff;
          box-shadow: 0 1px 0 0 #fff, 0 -1px 0 0 #fff;
}
widget[type="ticket"] .rip:before, widget[type="ticket"] .rip:after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  top: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
          -ms-transform: translate(-50%, -50%) rotate(45deg);
      transform: translate(-50%, -50%) rotate(45deg);
  border: 5px solid transparent;
  border-top-color: #fff;
  border-right-color: #fff;
  border-radius: 100%;
  pointer-events: none;
}
widget[type="ticket"] .rip:before {
  left: -10px;
}
widget[type="ticket"] .rip:after {
  -webkit-transform: translate(-50%, -50%) rotate(225deg);
          -ms-transform: translate(-50%, -50%) rotate(225deg);
      transform: translate(-50%, -50%) rotate(225deg);
  right: -40px;
}

widget[type="ticket"] .date{
  padding-top: 5px;
}

/* Ends Ticket */

.login{
  width: 100%;
  height: 100%;
  overflow:hidden; 
}

.login .header{
  
  width: 100%;
  height: 3em;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  box-shadow: 0 -9px 10px 10px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 -9px 10px 10px rgba(0, 0, 0, 0.2);
  will-change: transform;
  background: var(--theme-color);
  line-height: 2.9;
  text-align: center;
  font-size: 16px;
  color: #fff;
}

.login .body{
  width: 100%;
  max-width: 350px;
  margin: auto;
  padding: 20px;
  margin-top: 3em;
}

.login .body .title{
  padding-top: 15px;
  padding-bottom: 10px;
  font-size: 16px;
  color: #494949!important; 
}

.login .body input{
  width: 100%;
  min-height: 42px;
  line-height: 1.8;
  font-size: 16px;
  color: #333!important; 
  padding-left: 10px;
  border-radius: 6px;
  border: 1px solid #d0d0d0;
}

.login .body .button-theme{
  padding-left: 60px;
  padding-right: 60px;
}

/* success timeline */

.success-timeline{
  width: 150px;
  height: 25px;
}

.success-timeline .text-success{
  width: 0px;
  min-width: 14%;
  height: 10px;
  text-align: right;
  font-size: 10px;
  line-height: 1;
  transition: width 1s ease 0s;
}

.success-timeline .text-success i{
  font-size: 9px;
  line-height: 0.9;
}

.success-timeline .container-timeline{
  width: 100%;
  height: 11px;
  padding: 3px;
  background-color:#E4E4E6;
  overflow: hidden;
  border-radius:30px;
  /*border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;*/
}

.success-timeline .container-timeline .bar{
  width: 0px;
  height: 5px;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  transition: width 1s ease 0s;

  /*background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.30) 15%,transparent 15%,transparent 50%,rgba(255,255,255,.30) 50%,rgba(255,255,255,.30) 85%,transparent 85%,transparent);
  background-image: -o-linear-gradient(45deg,rgba(255,255,255,.30) 15%,transparent 15%,transparent 50%,rgba(255,255,255,.30) 50%,rgba(255,255,255,.30) 85%,transparent 85%,transparent);
  background-image: linear-gradient(45deg,rgba(255,255,255,.30) 15%,transparent 15%,transparent 50%,rgba(255,255,255,.30) 50%,rgba(255,255,255,.30) 85%,transparent 85%,transparent);
  -webkit-background-size: 40px 40px;
  background-size: 40px 40px;*/

}

/* Section My Home */

/*

--bg-page: #181818;
    --text-color: #f9f9f9;
    --blue: #0870f8;
    --blue-rgb: 8, 112, 248;
    --input-size: 70px;
    --border: #343434;
    --g-purple: linear-gradient(30deg, #85f, #9966ff);
    --g-yellow: linear-gradient(30deg, #fc0, #fc0);
    --g-red: linear-gradient(30deg, #f36, #f24);
    --g-blue: linear-gradient(30deg, #0cf, #0af);
    --g-purple: linear-gradient(30deg, #85f, #9966ff);

*/

.selectable-icon-list{
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  margin:auto;
  max-width: 500px;
  width: 100%;
  padding-top: 15px;
  padding-bottom: 15px;
  /*height: 100%;*/
}

@media (min-width:800px){
  .selectable-icon-list{
    max-width: 800px;
  }
}

.selectable-icon-list .selectable-item {
  display: block;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  border-radius: 15px;
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.2);
  background: #fbfcee;
  position: relative;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black); /* fix bottom rounded corners on safari */
  /*transform: translate3d(0, 0, 0);*/
  cursor: pointer;
  /*background-image: url('../img/library.jpg');*/
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  /*transition: all .2s ease-in-out;*/
}

/*.selectable-icon-list .selectable-item:after {
  content: "";
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #ccc;
  background: linear-gradient(to bottom, #ee88aa, rgba(221, 238, 255, 0) 80%, rgba(255, 255, 255, 0.5));
  z-index: 11;
  transform: translate3d(0, 0, 0);
}*/

.selectable-icon-list .selectable-item.big{
    width: 100%;
    /*min-width: 100px;*/
    max-width: 800px;
    height: 100%;
    min-height: 150px;
    max-height: 170px;
}

.selectable-icon-list .selectable-item.medium{
    width: 100%;
    /*min-width: 100px;*/
    max-width: 350px;
    height: 100%;
    min-height: 150px;
    max-height: 170px;
}

.selectable-icon-list .selectable-item.large{
    width: 100%;
    /*min-width: 100px;*/
    max-width: 800px;
    height: 100%;
    min-height: 80px;
    max-height: 100px;
}

/*.selectable-icon-list .selectable-item.medium:nth-child(1){
  margin-right: 5px;
}

.selectable-icon-list .selectable-item.medium:nth-child(2){
  margin-left: 5px;
}*/

@media (min-width:360px){

  .selectable-icon-list .selectable-item.medium{
    width: 45%;
  }

}

@media (min-width:500px){

  .selectable-icon-list .selectable-item.medium{
    width: 30%;
  }

}

@media (min-width:800px){

  .selectable-icon-list .selectable-item.medium{
    width: 23%;
  }

  .selectable-icon-list .selectable-item.large{
    width: 48%;
  }

}

.selectable-icon-list .selectable-item .padlock{
    position: absolute;
    display: none;
    top: 6px;
    left: 6px;
    height: 25px;
    width: 25px;
    border-radius: 25px;
    text-align: center;
    color: #fff;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    background: rgba(0,0,0,0.4);
    font-size: 12px;
    line-height: 2;
    z-index: 2;
}

.selectable-icon-list .selectable-item .padlock.active{
    display: inline-block;
}

.selectable-icon-list .selectable-item .label-box{
    position: absolute;
    display: none;
    top: 6px;
    right: 6px;
    min-width: 15px;
    height: 25px;
    border-radius: 25px;
    line-height: 2.5;
    font-size: 10px;
    font-family: montserrat-semibold;
    padding: 0px 7px;
    color: #000;
    background:#fff;
    z-index: 2;
}

.selectable-icon-list .selectable-item .label-box.active{
    display: inline-block;
}

/*.box:hover{
  transition: transform .2s ease-in-out;
  transform: scale(1.05);
}*/

.selectable-icon-list .selectable-item .title {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  min-height: 60px;
  z-index: 1;
  text-align: left;
  padding: 10px 15px;
  color: #fff;

  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.selectable-icon-list .selectable-item.large .title{
    left: 80px;
    top:0px;
    width: 100%;
    width: calc(100% - 80px);
    height: 100%;
    padding: 15px 30px 15px 15px;
}

.selectable-icon-list .selectable-item.large .padlock{
    top: 6px;
    right: 6px;
    left:unset;
}

.selectable-icon-list .selectable-item .title h1{
    font-family: montserrat-semibold;
    font-size: 18px;
    margin: 0px;
    padding: 0px;
}

.selectable-icon-list .selectable-item .title h3{
    font-family: montserrat-light;
    font-size: 12px;
    font-weight: 300;
    margin: 0px;
    padding: 0px;
}

/*
.selectable-icon-list  .selectable-item {
  display: block;
  width: 300px;
  margin: 5px auto;
  padding: 10px 15px;
  border-radius: 15px;
  cursor: pointer;
  box-sizing: border-box;
  filter: drop-shadow(0px 0px 9px #dedede);
}

.selectable-icon-list  .selectable-item.large {
  width: 310px;
  height: 80px;
}

.selectable-icon-list  .selectable-item.medium {
  width: 150px;
  height: 100px;
}

.selectable-item.dictionary{
  background: #3D5AFE;
}

.selectable-item.tasks{
  background:linear-gradient(30deg, #00cc42, #008c1e);
}

.selectable-item.meetings{
  background:linear-gradient(30deg, rgb(245 42 31 / 88%), rgb(255 70 59));
}

.selectable-item.notes{
  background:linear-gradient(30deg, #85f, #9966ff);
}

.selectable-item.phrases{
  background:linear-gradient(30deg, #f36, #f24);
}

.selectable-item.ideas{
  background:linear-gradient(30deg, #fc0, #fc0);
}

.selectable-item.your-circle{
  background:linear-gradient(30deg, #0cf, #0af);
}

.selectable-icon-list  .selectable-item .icon {
  position: relative;
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}

.selectable-icon-list  .selectable-item.dark .icon {

  background: rgba(0, 0, 0, 0.1);

}

.selectable-icon-list  .selectable-item .icon:hover {
  background: rgba(0, 0, 0, 0.2) !important;
}

.selectable-icon-list  .selectable-item .icon i{
  font-size: 22px;
  color: #fff;
}

.selectable-icon-list  .selectable-item.dark .icon i{
  color: #181818;
}

.selectable-icon-list  .selectable-item .info-sl {
  display: flex;
}

.selectable-icon-list  .selectable-item .text-sl {
  margin-left: 15px;
}

.selectable-icon-list  .selectable-item .text-sl h1 {
  color:#fff;
  font-size: 1.4rem;
  font-weight: 700;
  font-variation-settings: "wght" 700;
  margin: 0;
}

.selectable-icon-list  .selectable-item.dark .text-sl h1 {
  color: #181818;
}

.selectable-icon-list  .selectable-item.medium .text-sl h1, .selectable-icon-list  .selectable-item.medium .text-sl .desc {
  max-width: 70px;
}

.selectable-icon-list  .selectable-item .text-sl .desc {
  margin: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.selectable-icon-list  .selectable-item.dark .text-sl .desc {
  color: rgba(0, 0, 0, 0.5);
}

.selectable-icon-list  .selectable-item:hover{
  transition: all .2s ease-in-out;
  transform: scale(1.05);
}
*/

/* contacts circle animation */

.contacts-circle-container{
  width:125px;
  margin-left: 10px;
  height:90px;
  display: inline-table;
  position:relative;
}

.contacts-circle-container .first-circle{
  position:absolute;
  border-radius:50%;
  width:50px;
  height:50px;
  z-index:3;
  top:20px;
  left:20px;
  text-align: center;

  background: rgb(255,59,48);
  -webkit-box-shadow: 0 0 0 0 rgb(255,59,48);
          box-shadow: 0 0 0 0 rgb(255,59,48);
  background-size:cover;
  background-repeat: no-repeat;
  cursor: pointer;
  -webkit-animation: circlePulseFirst 3s infinite cubic-bezier(.66, 0, 0, 1);
  animation: circlePulseFirst 3s infinite cubic-bezier(.66, 0, 0, 1);
}

.contacts-circle-container .first-circle i{
  font-size: 30px;
  line-height: 1.7;
  color: #222222c4;
}

.contacts-circle-container .second-circle{
  position:absolute;
  border-radius:50%;
  width:70px;
  height:70px;
  z-index:2;
  top:10px;
  left:10px;

  background: rgb(175,82,222);
  -webkit-box-shadow: 0 0 0 0 rgb(175,82,222);
          box-shadow: 0 0 0 0 rgb(175,82,222);
  background-size:cover;
  background-repeat: no-repeat;
  cursor: pointer;
  -webkit-animation: circlePulseSecond 3s infinite cubic-bezier(.66, 0, 0, 1);
  animation: circlePulseSecond 3s infinite cubic-bezier(.66, 0, 0, 1);
}

.contacts-circle-container .third-circle{
  position:absolute;
  border-radius:50%;
  width:90px;
  height:90px;
  z-index:1;
  
  background: rgb(90,200,250);
  -webkit-box-shadow: 0 0 0 0 rgb(90,200,250);
          box-shadow: 0 0 0 0 rgb(90,200,250);
  background-size:cover;
  background-repeat: no-repeat;
  cursor: pointer;
  -webkit-animation: circlePulseThree 3s infinite cubic-bezier(.66, 0, 0, 1);
  animation: circlePulseThree 3s infinite cubic-bezier(.66, 0, 0, 1);
}

/* calendar */

figure.to-calendar-icon{
    width: 56px;
    height: 59px;
    background-color: #ffffff;
    border-radius: 2px;
    position: relative;
    
    /*box-shadow: 0px 0px 2px 0 rgba(0, 0, 0, 0.2), 0 0px 20px 0 rgba(0, 0, 0, 0.19);
    -webkit-box-shadow: 0px 0px 2px 0 rgba(0, 0, 0, 0.2), 0 0px 20px 0 rgba(0, 0, 0, 0.19);*/

    border: 1px solid #ececec;

    display: inline-block;
    margin:0!important; 

    border-radius: 10px;
    overflow: hidden;
}

figure.to-calendar-icon header{
    width: 56px;
    height: 17px;
    position: absolute;
    top: -1px;
    background-color: #fa565a;
    border-radius: 2px 2px 0 0;
    font: 400 11px/11px Arial, Helvetica, Geneva, sans-serif;
    color: #fff;
    text-align: center;
    padding-top:4px;
    text-transform: uppercase;
}

figure.to-calendar-icon section{
    width: 56px;
    height: 25px;
    position: absolute;
    top: 17px;
    text-align: center;
    z-index: 10;
    color:#4e4949; 
    padding-top: 4px;
    /*color:#65A0D0; */
}

figure.to-calendar-icon section span:nth-child(1){
  font: 400 15px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  font-weight: 700;
}

/*figure.to-calendar-icon section span:nth-child(2){
  font: 400 10px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  font-weight: 700;
  margin-left: -4px;
}*/

figure.to-calendar-icon footer{
    width: 56px;
    height: 17px;
    position: absolute;
    top: 42px;
    font: 400 10px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    text-align: center;
    z-index: 10;
    color:#4e4949; 
    padding-top: 2px;
    font-weight: 700;
    background: #dcdcdc;
    /*border-top: 1px solid #f4f4f4;*/
}

/* custom buttons */

.button-close-thin {
  position: absolute;
  width: 32px;
  height: 32px;
  background-color: rgba(86,86,86,0.7);
  border-radius: 50%;
  padding: 6px;
  cursor: pointer;
}

.button-close-thin:hover {
  opacity: .9;
}

.button-close-thin:before, .button-close-thin:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 20px;
  width: 1px;
  background-color: #fff;
}

.button-close-thin:before {
  transform: rotate(45deg);
}

.button-close-thin:after {
  transform: rotate(-45deg);
}

.theme-check{
  background-repeat: no-repeat;
  background-position: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}

.check-green{
  background-image: url('../img/icons/check_green.png');
}

.check-wite{
  background-image: url('../img/icons/check_wite.png');
}

/* Full Page */

.app-full-page{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 999;
  top:100%;

  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;

  display: none;
}

.app-full-page.in{
  display: block;
}

.app-full-page.showed{
  top: 100%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  top:0;
}

/* unlock container */

#app-unlockpro{
  /*background: black;
  opacity: .9;*/
}

#app-unlockpro .unlock-background{
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;

  /*background-image:url('../img/blurred1.jpg');
  opacity: .7;
  filter: grayscale(50%);*/

  background: black;
  opacity: .7;
}

#app-unlockpro .container-unlock{
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  padding: 20px 15px;
  position: relative;
  width: 100%;
  height: 100%;
  font-size: 10px;
  font-weight: 300;
  color: #fff;
  font-family: Roboto, Arial, sans-serif;
  z-index: 2;
  background: transparent;
  /*16px Roboto, Arial, sans-serif*/
}

#app-unlockpro .container-unlock h1{
  
  font-family: montserrat-light;
  font-size: 24px;
  font-weight: 300;
  margin: 0px;
}

#app-unlockpro .container-unlock .h1-underline{
  margin-top:6px;
  border-bottom:1px solid #fff;
  width:195px;
}

#app-unlockpro .container-unlock .font-bold{
  font-weight: 700;
}

#app-unlockpro .container-unlock .unlock-text-list{
  float: left;
  width: 100%;
}

#app-unlockpro .container-unlock .unlock-text-list .unlock-text-list-li{
  display: flex;
  float: left;
  width: 100%;
  margin-top: 15px;
}

#app-unlockpro .container-unlock .unlock-text-list .unlock-check{
  font-size: 16px;
}

#app-unlockpro .container-unlock .unlock-text-list .unlock-check.white{
  color: #fff;
}

#app-unlockpro .container-unlock .unlock-text-list .unlock-check.green{
  color: #6afd6a;
  /*margin-top: -1px;*/
}

#app-unlockpro .container-unlock .unlock-text-list .text-list{
  font-family: montserrat-regular;
  font-size: 13px;
  line-height: 1.3;
  margin-left: 15px;
  letter-spacing: 0px;
}

#app-unlockpro .container-unlock .unlock-text-list .unlock-text-list-li.unlock-btn-rounded{
  padding:5px 10px 5px 5px;
  background:rgba(175,175,175,.7);
  border-radius:15px;
  width: auto;
  margin-left:-3px;
  margin-top: 5px;
  letter-spacing: 0px;
  font-family: montserrat-bold;
  line-height: 0;
}

#app-unlockpro .container-unlock .text-bottom{
  font-size: 14px;
  letter-spacing: .3px;
}

#app-unlockpro .container-unlock .unlock-btn-subscribe{

  cursor: pointer;
  font-family: montserrat-semibold;
  font-size: 18px;
  padding: 15px 45px;
  border-radius: 30px;
  background-color: #fff;
  color: #000;
  text-align: center;
  display: inline-block;
}

#app-unlockpro .container-unlock .unlock-btn-subscribe:hover{
  opacity: .9;
}

/* app list */

ul.app-summary-list{

  margin-top: 10px;
  padding-left: 0px;
  border-radius: 5px;
  border: 1px solid #e8ebed;
  float: left;
}

ul.app-summary-list li{
  float: left;
  width: 100%;
}

ul.app-summary-list li span{
  line-height: 1.4;
}

ul.app-summary-list li.header{
  
  list-style-type:none;
  padding:5px;
  color: #555;
  background: #e8ebed;
  border:1px solid #dedede;
  font-weight: 600;
  width: 100%;
}

ul.app-summary-list li.header span:nth-child(1){
  float: left;
  width: 25%;
  text-align: center;
}

ul.app-summary-list li.header span:nth-child(2){
  padding-left:8px;
  padding-right:8px;
  float: left;
  width: 65%;
  text-align: left;
}

ul.app-summary-list li.header span:nth-child(3){
  float: left;
  width: 10%;
  text-align: center;
  padding-left:5px;
}

/**/

ul.app-summary-list li.large{
  
  list-style-type:none;
  padding:5px;
  border-top: 1px solid #e8ebed;
  color: #676767;
  float: left;
  width: 100%;
  text-align: center;
}

ul.app-summary-list li.default{
  
  list-style-type:none;
  padding:5px;
  border-top: 1px solid #e8ebed;
  color: #676767;
}

ul.app-summary-list li.default span:nth-child(1){
  float: left;
  width: 25%;
  text-align: right;
}

ul.app-summary-list li.default span:nth-child(2){
  padding-left:8px;
  padding-right:8px;
  float: left;
  width: 65%;
  text-align: left;
  /*overflow: hidden;
  white-space: nowrap;
  text-align: left;
  text-overflow: ellipsis;*/
}

ul.app-summary-list li.default span:nth-child(3){
  float: left;
  width: 10%;
  text-align: center;
  padding-left:5px;
}

ul.app-summary-list li.default span:nth-child(3) i{
  color:rgb(255, 59, 48)!important;
  font-size: 16px;
  cursor: pointer;
  transition: all 200ms;
}

ul.app-summary-list li.default span:nth-child(3) i:hover{
  transform:scale(1.3, 1.3);
  -webkit-transform:scale(1.3, 1.3);
}

ul.app-summary-list li.default:nth-last-child(3){
  /*color: rgb(99,99,102);
  background: #e8ebed;
  border-top: 1px solid #bbb;*/
  font-weight: 700;
  border-top: 2px solid #bbb;
}

ul.app-summary-list li.default:nth-last-child(2){
  font-weight: 700;
  /*color: rgb(99,99,102);
  background: #e8ebed;*/
}

ul.app-summary-list li.default:nth-last-child(1){
  color: #333;
  font-weight: 700;
  background: #e8ebed;
  border-top: 2px solid #bbb;
}

/*ul.app-summary-list li.delimitter{
  list-style-type:none;
  height: 2px;
  border-top: 1px solid #bbb;
  margin-top: 5px;
  margin-bottom: 5px;
}*/

/* animations */

.tiemblaI{
  -webkit-animation: tiembla 0.1s infinite;
}

.shake-rotate {
  display: inherit;
  transform-origin: center center;

  animation-name: shake-rotate;
  animation-duration: 100ms;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite
}

@keyframes shake-rotate {
  2% {
    transform: translate(0, 0) rotate(.5deg)
  }

  4% {
    transform: translate(0, 0) rotate(5.5deg)
  }

  6% {
    transform: translate(0, 0) rotate(.5deg)
  }

  8% {
    transform: translate(0, 0) rotate(-5.5deg)
  }

  10% {
    transform: translate(0, 0) rotate(.5deg)
  }

  12% {
    transform: translate(0, 0) rotate(2.5deg)
  }

  14% {
    transform: translate(0, 0) rotate(5.5deg)
  }

  16% {
    transform: translate(0, 0) rotate(-5.5deg)
  }

  18% {
    transform: translate(0, 0) rotate(-1.5deg)
  }

  20% {
    transform: translate(0, 0) rotate(4.5deg)
  }

  22% {
    transform: translate(0, 0) rotate(-6.5deg)
  }

  24% {
    transform: translate(0, 0) rotate(1.5deg)
  }

  26% {
    transform: translate(0, 0) rotate(1.5deg)
  }

  28% {
    transform: translate(0, 0) rotate(-4.5deg)
  }

  30% {
    transform: translate(0, 0) rotate(5.5deg)
  }

  32% {
    transform: translate(0, 0) rotate(2.5deg)
  }

  34% {
    transform: translate(0, 0) rotate(3.5deg)
  }

  36% {
    transform: translate(0, 0) rotate(-3.5deg)
  }

  38% {
    transform: translate(0, 0) rotate(-4.5deg)
  }

  40% {
    transform: translate(0, 0) rotate(2.5deg)
  }

  42% {
    transform: translate(0, 0) rotate(.5deg)
  }

  44% {
    transform: translate(0, 0) rotate(-3.5deg)
  }

  46% {
    transform: translate(0, 0) rotate(-4.5deg)
  }

  48% {
    transform: translate(0, 0) rotate(-1.5deg)
  }

  50% {
    transform: translate(0, 0) rotate(-3.5deg)
  }

  52% {
    transform: translate(0, 0) rotate(-2.5deg)
  }

  54% {
    transform: translate(0, 0) rotate(3.5deg)
  }

  56% {
    transform: translate(0, 0) rotate(.5deg)
  }

  58% {
    transform: translate(0, 0) rotate(-6.5deg)
  }

  60% {
    transform: translate(0, 0) rotate(-3.5deg)
  }

  62% {
    transform: translate(0, 0) rotate(-1.5deg)
  }

  64% {
    transform: translate(0, 0) rotate(3.5deg)
  }

  66% {
    transform: translate(0, 0) rotate(.5deg)
  }

  68% {
    transform: translate(0, 0) rotate(4.5deg)
  }

  70% {
    transform: translate(0, 0) rotate(1.5deg)
  }

  72% {
    transform: translate(0, 0) rotate(-3.5deg)
  }

  74% {
    transform: translate(0, 0) rotate(-3.5deg)
  }

  76% {
    transform: translate(0, 0) rotate(2.5deg)
  }

  78% {
    transform: translate(0, 0) rotate(-1.5deg)
  }

  80% {
    transform: translate(0, 0) rotate(-5.5deg)
  }

  82% {
    transform: translate(0, 0) rotate(7.5deg)
  }

  84% {
    transform: translate(0, 0) rotate(.5deg)
  }

  86% {
    transform: translate(0, 0) rotate(5.5deg)
  }

  88% {
    transform: translate(0, 0) rotate(4.5deg)
  }

  90% {
    transform: translate(0, 0) rotate(-2.5deg)
  }

  92% {
    transform: translate(0, 0) rotate(1.5deg)
  }

  94% {
    transform: translate(0, 0) rotate(-5.5deg)
  }

  96% {
    transform: translate(0, 0) rotate(7.5deg)
  }

  98% {
    transform: translate(0, 0) rotate(-3.5deg)
  }

  0%, 100% {
    transform: translate(0, 0) rotate(0)
  }

}

.shake-little {
  display: inherit;
  transform-origin: center center;

  animation-name: shake-little;
  animation-duration: 100ms;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite
}

@keyframes shake-little {
  2% {
    transform: translate(1px, 1px) rotate(.5deg)
  }

  4% {
    transform: translate(0px, 1px) rotate(.5deg)
  }

  6% {
    transform: translate(0px, 1px) rotate(.5deg)
  }

  8% {
    transform: translate(1px, 0px) rotate(.5deg)
  }

  10% {
    transform: translate(0px, 0px) rotate(.5deg)
  }

  12% {
    transform: translate(1px, 0px) rotate(.5deg)
  }

  14% {
    transform: translate(1px, 0px) rotate(.5deg)
  }

  16% {
    transform: translate(0px, 1px) rotate(.5deg)
  }

  18% {
    transform: translate(0px, 1px) rotate(.5deg)
  }

  20% {
    transform: translate(0px, 1px) rotate(.5deg)
  }

  22% {
    transform: translate(0px, 1px) rotate(.5deg)
  }

  24% {
    transform: translate(0px, 0px) rotate(.5deg)
  }

  26% {
    transform: translate(1px, 1px) rotate(.5deg)
  }

  28% {
    transform: translate(1px, 1px) rotate(.5deg)
  }

  30% {
    transform: translate(1px, 1px) rotate(.5deg)
  }

  32% {
    transform: translate(1px, 0px) rotate(.5deg)
  }

  34% {
    transform: translate(0px, 1px) rotate(.5deg)
  }

  36% {
    transform: translate(0px, 1px) rotate(.5deg)
  }

  38% {
    transform: translate(1px, 1px) rotate(.5deg)
  }

  40% {
    transform: translate(1px, 1px) rotate(.5deg)
  }

  42% {
    transform: translate(1px, 1px) rotate(.5deg)
  }

  44% {
    transform: translate(1px, 1px) rotate(.5deg)
  }

  46% {
    transform: translate(1px, 0px) rotate(.5deg)
  }

  48% {
    transform: translate(1px, 1px) rotate(.5deg)
  }

  50% {
    transform: translate(1px, 1px) rotate(.5deg)
  }

  52% {
    transform: translate(1px, 0px) rotate(.5deg)
  }

  54% {
    transform: translate(0px, 1px) rotate(.5deg)
  }

  56% {
    transform: translate(0px, 0px) rotate(.5deg)
  }

  58% {
    transform: translate(0px, 0px) rotate(.5deg)
  }

  60% {
    transform: translate(1px, 1px) rotate(.5deg)
  }

  62% {
    transform: translate(0px, 0px) rotate(.5deg)
  }

  64% {
    transform: translate(1px, 0px) rotate(.5deg)
  }

  66% {
    transform: translate(1px, 1px) rotate(.5deg)
  }

  68% {
    transform: translate(1px, 0px) rotate(.5deg)
  }

  70% {
    transform: translate(1px, 1px) rotate(.5deg)
  }

  72% {
    transform: translate(0px, 0px) rotate(.5deg)
  }

  74% {
    transform: translate(1px, 0px) rotate(.5deg)
  }

  76% {
    transform: translate(0px, 1px) rotate(.5deg)
  }

  78% {
    transform: translate(1px, 1px) rotate(.5deg)
  }

  80% {
    transform: translate(0px, 0px) rotate(.5deg)
  }

  82% {
    transform: translate(1px, 0px) rotate(.5deg)
  }

  84% {
    transform: translate(0px, 0px) rotate(.5deg)
  }

  86% {
    transform: translate(1px, 1px) rotate(.5deg)
  }

  88% {
    transform: translate(1px, 1px) rotate(.5deg)
  }

  90% {
    transform: translate(1px, 1px) rotate(.5deg)
  }

  92% {
    transform: translate(0px, 0px) rotate(.5deg)
  }

  94% {
    transform: translate(1px, 1px) rotate(.5deg)
  }

  96% {
    transform: translate(0px, 1px) rotate(.5deg)
  }

  98% {
    transform: translate(0px, 0px) rotate(.5deg)
  }

  0%, 100% {
    transform: translate(0, 0) rotate(0)
  }

}

/* SPINNERS */

.lds-spinner {
  color: official;
  /*display: inline-block;*/
  position: relative;
  width: 20px;
  height: 20px;

  /* custom styles */

  margin: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -10px;
  margin-left: -10px;
}
.lds-spinner div {
  transform-origin: 10px 10px;
  animation: lds-spinner 1.2s linear infinite;
}
.lds-spinner div:after {
  content: " ";
  display: block;
  position: absolute;
  top: 0.75px;
  left: 9px;
  width: 1.5px;
  height: 4.5px;
  border-radius: 20%;
  background: #fff;
}
.lds-spinner.red-skin div:after {
  background: rgb(255, 59, 48)!important;
}
.lds-spinner.blue-skin div:after {
  background: #0070c9!important;
}
.lds-spinner div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.1s;
}
.lds-spinner div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -1s;
}
.lds-spinner div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.9s;
}
.lds-spinner div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.8s;
}
.lds-spinner div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.7s;
}
.lds-spinner div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.6s;
}
.lds-spinner div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.5s;
}
.lds-spinner div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.4s;
}
.lds-spinner div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.3s;
}
.lds-spinner div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.2s;
}
.lds-spinner div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.1s;
}
.lds-spinner div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
}

@keyframes lds-spinner {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes circlePulseFirst {
  to {
    -webkit-box-shadow: 0 0 0 15px rgba(175,82,222, 0);
    box-shadow: 0 0 0 15px rgba(175,82,222, 0);
  }

}

@keyframes circlePulseFirst {
  to {
    -webkit-box-shadow: 0 0 0 15px rgba(175,82,222, 0);
    box-shadow: 0 0 0 15px rgba(175,82,222, 0);
  }

}

@-webkit-keyframes circlePulseSecond {
  to {
    -webkit-box-shadow: 0 0 0 15px rgba(175,82,222, 0);
    box-shadow: 0 0 0 15px rgba(175,82,222, 0);
  }

}

@keyframes circlePulseSecond {
  to {
    -webkit-box-shadow: 0 0 0 15px rgba(175,82,222, 0);
    box-shadow: 0 0 0 15px rgba(175,82,222, 0);
  }

}

@-webkit-keyframes circlePulseThree {
  to {
    -webkit-box-shadow: 0 0 0 15px rgba(90,200,250, 0);
    box-shadow: 0 0 0 15px rgba(90,200,250, 0);
  }

}

@keyframes circlePulseThree {
  to {
    -webkit-box-shadow: 0 0 0 15px rgba(90,200,250, 0);
    box-shadow: 0 0 0 15px rgba(90,200,250, 0);
  }

}

/* float button style */

.theme-float-button {
  /*width: 150px;*/
  overflow: hidden;
  height: 35px;
  text-align: center;
  font-weight: 500;
  padding: .4rem 1.6rem;
  font: 16px Roboto, Arial, sans-serif;
  /*text-transform: uppercase;*/
  
  font-family: "Roboto",sans-serif;
  
  border-radius: 10em;
  color: #fff;
  background: var(--button-theme-color);
  white-space: normal;
  cursor: pointer;
  text-decoration: none;
  border: 0;
  line-height: 1.5;
  -webkit-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
}

.theme-float-button:hover {
  background: var(--button-theme-color-hover);
}

/* MEDIAS */

@media (max-width:576px){

  .text-example{
    font-size: 14px;
  }

}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  select:focus,
  textarea:focus,
  input:focus {
    font-size: 16px;
  }
}

/* PAGE CUSTOMIZATIONS */

.app-page-1 .shop-item .shop-content .shop-img{
  position: absolute;
  width: 72px;
  height: 100%;
  z-index: 3;
  padding:14px 10px 10px 10px;
  /*background: blue;*/
}

.sectionActions{
    position: fixed;
    background: rgb(229,229,234);
    z-index: 2;
    width: 100%;
    height: 49px;
    padding: 7px 15px;
    display: none;
    /*justify-content: space-between;*/
}

.sectionActions.show{
    display: flex;
}

.sectionActions .theme-float-button{
    margin-right:7px;
}

/* Page Selectors */

.container-selector-select-user{
  position: relative;
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  height: 35px;
  background: var(--button-theme-color);
  width: 260px;
}

.container-selector-select-user img{
  position: absolute;
  height: 29px;
  width: 29px;
  top: 3px;
  left: 3px;
  border-radius: 50%;

  /* clarity */

  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  image-rendering: -webkit-optimize-contrast;
    
}

.container-selector-select-user .select-selector-users{
  position: absolute;
  top:0px;
  left: 32px;
  max-width: 224px;
  width: 100%;
}

/* theme panel switch */

.panelSwitchContainerChoose{
  display: none;
}

.panelSwitchContainerChoose.active{
  display: block;
}

.modalStretchItem{
  height: 40px;
  width: 100%;
  border-radius: 40px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background: #ddd;
  border: 1px solid #b3b3b3;
  margin-bottom: 5px;
  position: relative;
  z-index: 1;
}

.modalStretchItem.stretchItemWeek{
  margin-top: 20px;
}

.modalStretchItem .stretchModalDay{
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 2;
  border: 1px solid #b3b3b3;
  height: 20px;
  width: 30px;
  font-size: 12px;
  background: #ddd;
  padding: 1px 6px;
  border-radius: 15px;
  margin-top: -12px;
  margin-left: 0px;
  cursor: pointer;
  text-align: left;
}

.modalStretchItem .stretchModalDay.active{
  background: rgb(52, 199, 89);
  color: white;
  border: 1px solid #29a700;
}

.modalStretchItem .stretchModalDay.active:before{
  font-family: "Font Awesome 5 Free";
  content: "\f00c";
  font-weight: 600;
  position: absolute;
  top: -7px;
  right: -6px;
  /* background: rgb(52, 199, 89); */
  color: #146800;
  width: 18px;
  height: 18px;
  z-index: 1;
  text-align: center;
  line-height: 18px;
  border-radius: 50%;
  /* box-shadow: 0 0 1px #333; */
  font-size: 11px;
}

.modalStretchItem .stretchModalDay.mo{
  margin-left:  0px;
}

.modalStretchItem .stretchModalDay.tu{
  margin-left:  32px;
}

.modalStretchItem .stretchModalDay.we{
  margin-left:  64px;
}

.modalStretchItem .stretchModalDay.th{
  margin-left:  96px;
}

.modalStretchItem .stretchModalDay.fr{
  margin-left:  128px;
}

.modalStretchItem .stretchModalDay.sa{
  margin-left:  160px;
}

.modalStretchItem .stretchModalDay.su{
  margin-left:  192px;
}

.modalStretchItem .modalStretchItemInput{
  font-size: 14px;
  color: #555;
  padding: 10px 15px;
}

.modalStretchItem .modalStretchItemOutput{
  font-size: 14px;
  color: #555;
  padding: 10px 40px;
}

.modalStretchItem .modalStretchItemOutput.not-show{
  pointer-events:none;
  visibility:hidden;
  padding:0px;
}

.modalStretchItem .modalStretchRemoveButton{
  font-size: 20px;
  color: #555;
  line-height: 0;
  border-radius: 50%;
  top: 9px;
  position: absolute;
  width: 19px;
  height: 19px;
  right: 10px;
  color: rgb(255, 59, 48);
  overflow: hidden;
  cursor: pointer;
}

.modalStretchItem .modalStretchRemoveButton i{
  background: #fff;
}

.modalStretchItem.add{
  margin-top: 18px;
  border: 2px dashed #898989;
  background: transparent;
}

.addStretchInput{
  background: transparent!important;
  border: unset!important;
  font: 14px Roboto, Arial, sans-serif!important;
  color: #555;
  padding: 0px;
  margin: 0px;
}

.modalStretchAddTextMiddle{
  line-height: 2.8;
  font-size: 14px;
}

.addStretchInput:focus{
  background: transparent!important;
  border: unset!important;
  font: 14px Roboto, Arial, sans-serif!important;
  color: #555;
}

.modalStretchItem .modalStretchAddButton{
  font-size: 20px;
  color: #555;
  line-height: 0;
  border-radius: 50%;
  top: 9px;
  position: absolute;
  width: 19px;
  height: 19px;
  right: 10px;
  color: rgb(0, 122, 255);
  overflow: hidden;
  cursor: pointer;
}

.modalStretchItem .modalStretchAddButton i{
  background: #fff;
}

@media (max-width: 610px) {

  .top-actions-content{
    height: auto;
    display: block;
    padding: 5px 5px;
  }

  .top-actions-content .display-flex{
    width: 100%!important;
    justify-content: right;
  }

  .top-actions-content .display-flex:nth-child(2){
    margin-top: 5px;
  }

  .top-actions-content .theme-float-button{
    margin-right: 0px!important;
  }

  .container-selector-select-user{
    width: 180px;
  }

  .container-selector-select-user .select-selector-users{
    max-width: 100px;
  }

  /*.main-container-top-selectors{
    flex-direction: column!important;
    justify-content: center!important;
    align-items: center;
  }

  .container-selector-row{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top:5px;
  }

  .container-selector-row:nth-child(1){
    margin-top: 0px;
  }*/
}

@media (max-width: 500px) {

  .width-100-on-mini{
    width: 100%!important;
  }

  .width-50-on-mini{
    width: 100%!important;
  }

  .flex-column-on-mini{
    flex-direction: column!important;
  }

  .height-auto-on-mini{
    height: auto!important;
  }

  .flex-center-on-mini{
    justify-content: center!important;
  }

  .margin-top-5-on-mini{
    margin-top: 5px!important;
  }

}