/*#region loading circle*/

.loadingCircle {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  -webkit-border-radius:50%;
  
  border-top: 16px solid blue;
  border-right: 16px solid green;
  border-bottom: 16px solid red;
  width: 60px;
  height: 60px;
   position: fixed;
    z-index: 1;
    left: 0;right:0;
    bottom: 30px;
    //width:200px;
   visibility: hidden;
   margin:auto;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/*#endregion*/
/*#region progress bar*/
#progressBar 
{
    position: fixed;
    z-index: 1;
    left: 0;right:0;
    bottom: 30px;
    width:200px;
    //line-height:20px;
   visibility: hidden;
   margin:auto;
   //opacity:0;
 //-moz-opacity:0;


   //opacity: 1;
   //-moz-transition:opacity 3000ms linear;
   // -webkit-transition: opacity 3000ms linear;
   // transition: opacity 3000ms linear;
}
  .m-fadeOut {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}
  .m-fadeIn {
  visibility: visible;
  opacity: 1;
  transition: opacity 2s linear;
}

.w3-light-grey
{
    color:#000!important;
    background-color:#ccc!important

}
.w3-round-xlarge
{
    
    border-radius:16px;

}
.w3-container
{
    text-align: center;
    white-space:nowrap;
    //text-wrap:none;
    //text-overflow:clip;
   
   padding-left:4px;
    //padding:0.01em 16px

}
.w3-blue
{
    color:#fff!important;
    background-color:#2196F3!important;

}

/*#endregion*/

/*css toast*/
/*#region css toast message */
#toast {
    visibility: hidden;
    max-width: 50px;
    height: 50px;
    /*margin-left: -125px;*/
    margin: auto;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 2px;

    position: fixed;
    z-index: 1;
    left: 0;right:0;
    bottom: 30px;
    font-size: 17px;
    white-space: nowrap;
}
#toast #img{
	width: 50px;
	height: 50px;
    background-image:url(../images/alert-orange.png);
    background-repeat:no-repeat;
   background-size:40px;
   background-position:center;
    float: left;
    
    padding-top: 16px;
    padding-bottom: 16px;
    
    box-sizing: border-box;

    
    background-color: #111;
    color: #fff;
}
#toast #desc{

    
    color: #fff;
   
    padding: 16px;
    
    overflow: hidden;
	white-space: nowrap;
}

#toast.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
}

@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;} 
    to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes expand {
    from {min-width: 50px} 
    to {min-width: 350px}
}

@keyframes expand {
    from {min-width: 50px}
    to {min-width: 350px}
}
@-webkit-keyframes stay {
    from {min-width: 350px} 
    to {min-width: 350px}
}

@keyframes stay {
    from {min-width: 350px}
    to {min-width: 350px}
}
@-webkit-keyframes shrink {
    from {min-width: 350px;} 
    to {min-width: 50px;}
}

@keyframes shrink {
    from {min-width: 350px;} 
    to {min-width: 50px;}
}

@-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;} 
    to {bottom: 60px; opacity: 0;}
}

@keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 60px; opacity: 0;}
}

/*#endregion */

/* Icon 1 */

#nav-icon1, #nav-icon2, #nav-icon3, #nav-icon4 {
  width: 40px;
  height: 30px;
  //position: relative;
  margin: 0px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#nav-icon1 span, #nav-icon3 span, #nav-icon4 span {
  display: block;
  position: absolute;
  height: 6px;
  width: 100%;
  background: #d3531a;
  border-radius: 6px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

/*#region code for non-used menu */
/*
#nav-icon1 span:nth-child(1) {
  top: 0px;
}

#nav-icon1 span:nth-child(2) {
  top: 18px;
}

#nav-icon1 span:nth-child(3) {
  top: 36px;
}

#nav-icon1.open span:nth-child(1) {
  top: 18px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

#nav-icon1.open span:nth-child(2) {
  opacity: 0;
  left: -60px;
}

#nav-icon1.open span:nth-child(3) {
  top: 18px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

//Icon 2 

#nav-icon2 {
}

#nav-icon2 span {
  display: block;
  position: absolute;
  height: 9px;
  width: 50%;
  background: #d3531a;
  opacity: 1;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#nav-icon2 span:nth-child(even) {
  left: 50%;
  border-radius: 0 9px 9px 0;
}

#nav-icon2 span:nth-child(odd) {
  left:0px;
  border-radius: 9px 0 0 9px;
}

#nav-icon2 span:nth-child(1), #nav-icon2 span:nth-child(2) {
  top: 0px;
}

#nav-icon2 span:nth-child(3), #nav-icon2 span:nth-child(4) {
  top: 18px;
}

#nav-icon2 span:nth-child(5), #nav-icon2 span:nth-child(6) {
  top: 36px;
}

#nav-icon2.open span:nth-child(1),#nav-icon2.open span:nth-child(6) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon2.open span:nth-child(2),#nav-icon2.open span:nth-child(5) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon2.open span:nth-child(1) {
  left: 5px;
  top: 7px;
}

#nav-icon2.open span:nth-child(2) {
  left: calc(50% - 5px);
  top: 7px;
}

#nav-icon2.open span:nth-child(3) {
  left: -50%;
  opacity: 0;
}

#nav-icon2.open span:nth-child(4) {
  left: 100%;
  opacity: 0;
}

#nav-icon2.open span:nth-child(5) {
  left: 5px;
  top: 29px;
}

#nav-icon2.open span:nth-child(6) {
  left: calc(50% - 5px);
  top: 29px;
}

// Icon 3

#nav-icon3 span:nth-child(1) {
  top: 0px;
}

#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
  top: 18px;
}

#nav-icon3 span:nth-child(4) {
  top: 36px;
}

#nav-icon3.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}

#nav-icon3.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon3.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon3.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}
*/

/*#endregion */

/* Icon 4 */

#nav-icon4 {
    //width:250px; /* or whatever width you want. */
   //max-width:250px; /* or whatever width you want. */
   //display: inline-block;
   left:10px;
   top:10px;
}
    #nav-icon4:hover span:nth-child(1) {
    top:3px;
    }
    #nav-icon4:hover span:nth-child(3) {
    top:21px;
    }

#nav-icon4 span:nth-child(1) {
  top: 0px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}
   
#nav-icon4 span:nth-child(2) {
  top: 12px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4 span:nth-child(3) {
  top: 24px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}
    
#nav-icon4.open span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: -3px;
  left: 8px;
}

#nav-icon4.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

#nav-icon4.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 27px;
  left: 8px;
}
.btn-ico {
     border:none; 
     background-color:transparent; 
     background-image:url(../images/preview-arrow.png);
     background-repeat:no-repeat;
     background-position:left;
     //background-attachment:fixed;
    background-size:cover;
     border:none;
     width:24px;
     height:24px;
     cursor:pointer;
     float:right;
     -webkit-transition: width .3s, height .3s, -webkit-transform .3s; /* Safari */
    transition: width .3s, height .3s, transform .3s;
}
.btn-ico:hover{

    
   //width: 28px;
   // height: 28px;
    -webkit-transform: translateX(5px); /* Safari */
    transform: translateX(5px);//scaleX(1.5);//rotate(360deg);
}
.btn-ico-clear {
     border:none; 
     background-color:transparent; 
     background-image:url(../images/clear.png);
     background-repeat:no-repeat;
     background-position:center;
     background-size:cover;
     border:none;
     width:32px;
     height:32px;
     cursor:pointer;
     -webkit-transition: width 0.3s, height 0.3s, -webkit-transform 0.3s; /* Safari */
    transition: width 0.3s, height 0.3s, transform 0.3s;
}
.btn-ico-clear:hover{

    
   width: 38px;
    height: 38px;
    //-webkit-transform: rotate(360deg); /* Safari */
    //transform: rotate(360deg);
}
.btn-ico-dwn {
     border:none; 
     //margin-right:4px;
     background-color:transparent; 
     background-image:url(../images/download.png);
     background-repeat:no-repeat;
     background-position:center;
     background-size:cover;
     border:none;
     width:32px;
     height:32px;
     cursor:pointer;
     float:right;
     -webkit-transition: width 0.3s, height 0.3s, -webkit-transform 0.3s; /* Safari */
    transition: width 0.3s, height 0.3s, transform 0.3s;
}
.btn-ico-dwn:hover{

    
   width: 38px;
   height: 38px;
   // -webkit-transform: rotate(360deg); /* Safari */
   // transform: rotate(360deg);
}
.btn-ico-back {
    position: fixed;
    bottom: 0;
    right: 0;
     border:none; 
     //margin-right:4px;
     background-color:transparent; 
     background-image:url(../images/left-arrow.png);
     background-repeat:no-repeat;
     background-position:center;
     background-size:cover;
     border:none;
     width:50px;
     height:50px;
     cursor:pointer;
     float:right;
     -webkit-transition: width 0.3s, height 0.3s, -webkit-transform 0.3s; /* Safari */
    transition: width 0.3s, height 0.3s, transform 0.3s;
}
.btn-ico-back:hover{

    
   width: 64px;
   height: 64px;
   // -webkit-transform: rotate(360deg); /* Safari */
   // transform: rotate(360deg);
}
.styled-select {
   background: url(../images/15xvbd5.png) no-repeat 96% 0;
   height: 29px;
   overflow: hidden;
   width: 140px;
}

.styled-select select {
   background: transparent;
   border: none;
   font-size: 14px;
   height: 29px;
   padding: 5px; /* If you add too much padding here, the options won't show in IE */
   width: 168px;
}
.styled-select option {
   color:black;
}

.styled-select.slate {
   background: url(../images/2e3ybe1.jpg) no-repeat right center;
   height: 34px;
   width: 140px;
}

.styled-select.slate select {
   border: 1px solid #ccc;
   font-size: 16px;
   height: 34px;
   width: 168px;
}

/* -------------------- Rounded Corners */
.rounded {
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
}

.semi-square {
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
}

/* -------------------- Colors: Background */
.slate   { background-color: #ddd; }
.green   { background-color: #779126; }
.blue    { background-color: #3b8ec2; }
.yellow  { background-color: #eec111; }
.black   { background-color: #000; }

/* -------------------- Colors: Text */
.slate select   { color: #000; }
.green select   { color: #fff; }
.blue select    { color: #fff; }
.yellow select  { color: #000; }
.black select   { color: #fff; }



#mainselection select {
   border: 0;
   color: #EEE;
   background: transparent;
   font-size: 20px;
   font-weight: bold;
   padding: 2px 10px;
   width: 378px;
   *width: 350px;
   *background: #58B14C;
   -webkit-appearance: none;
}

#mainselection {
   overflow:hidden;
   width:350px;
   -moz-border-radius: 9px 9px 9px 9px;
   -webkit-border-radius: 9px 9px 9px 9px;
   border-radius: 9px 9px 9px 9px;
   box-shadow: 1px 1px 11px #330033;
   background: #58B14C url("../images/15xvbd5.png") no-repeat scroll 319px center;
}



select#soflow, select#soflow-color {
   -webkit-appearance: button;
   -webkit-border-radius: 2px;
   -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
   -webkit-padding-end: 20px;
   -webkit-padding-start: 2px;
   -webkit-user-select: none;
   background-image: url(../images/15xvbd5.png), -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
   background-position: 97% center;
   background-repeat: no-repeat;
   border: 1px solid #AAA;
   color: #555;
   font-size: inherit;
   margin: 20px;
   overflow: hidden;
   padding: 5px 10px;
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 300px;
}

select#soflow-color {
   color: #fff;
   background-image: url(../images/15xvbd5.png), -webkit-linear-gradient(#779126, #779126 40%, #779126);
   background-color: #779126;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
   padding-left: 15px;
}

.input--text {
    background: #fff;
    border: 2px solid #dbdfe4;
    transition: all .2s linear;
    //padding: 5px 9px;
    margin: 3px auto 3px 10px;
    border-radius: 4px;
    font-size: 13px;
    //height: 32px;
    width:160px;
    box-sizing:border-box;
    box-shadow:inset;
}

.btn {
  font-family: 'Cabin', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 600;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  text-transform: uppercase;
  //border-radius: 50px;
}

.btn-default {
  color: #42DCA3;
  border: 1px solid #42DCA3;
  background-color: transparent;
  cursor:pointer;
}
.btn-default:focus, .btn-default:hover {
  color: black;
  border: 1px solid #42DCA3;
  outline: none;
  background-color: #42DCA3;
}
.btn-circle {
  font-size: 26px;
  width: 55px;
  height: 55px;
  margin-top: 15px;
  line-height: 45px;
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: background 0.3s ease-in-out;
  color: white;
  border: 2px solid white;
  border-radius: 100% !important;
  background: transparent;
}

.btn-circle:focus, .btn-circle:hover {
  color: white;
  outline: none;
  background: rgba(255, 255, 255, 0.1);
}
.btn-lg {
    padding: .5rem 1rem;
    font-size: 1.25rem;
    line-height: 1.5;
    border-radius: .3rem;
    
}
.btn-md {
    padding: .5rem .5rem;
    font-size: .75rem;
    line-height: 1;
    border-radius: .3rem;
    margin:7px;
}
.canv {position:absolute}

.overlay {position:absolute;
          z-index:2;
          background-color:transparent;

}

.whiteText{color:white}
.sidenav {
    height: 100%;
    width: 0px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: transparent;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
    overflow:hidden;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
    margin-right: 70px;
}
.maxbtn {
    position: absolute;
    top: 10px;
       //margin-left: 50px;
    margin-left: 170px;
    //background-image:url(../image0px);
    //background-image:url(../images/maximize-blue.png);
    width:24px;
    height:24px;
    cursor:pointer;
}
.maxbtn:hover{
    width:28px;
    height:28px;

}
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}


#topNavInnerDiv {
    color:white;
    display:none;
}
#topNavOuterDiv {
    position:fixed;
    top:0;
    left:50%;
    transform:translate(-50%);
    -webkit-transform:translate(-50%);
}
#topNavToggleButton{
    text-align:center;
}