*{margin: 0px;padding: 0px}
#demo {
    position: relative;
}
.phone-demo {
   width: 414px;
    max-width: 100%;
        height: 84vh;
    max-height: 85vh;
    top: 10%;
    position: relative;
    margin: 0 auto 0 auto;
    border: 1px #737373 solid;
    background-color: #fff;
}
#phonebg {
    width: 424px;
    position: absolute;
    left: -6px;
    top: -60px;
    z-index: 0;
    display: block;height:100vh;
    max-width: 103%;
}
#demoiframe {
    width: 96.9%;
    height: 100%; border: none;
    position: absolute; 
  z-index: 2;
    margin: 0% 1.53%;
}
.home_btn{position: absolute;
    bottom: -4px;
    z-index: 3;
    background: #0f0f10;
    width: 94%;
    margin-left:5px;
    padding: 2px;
    color: #fff;
    /* text-align: center; */
    text-decoration: none;
    font-family: sans-serif;
    padding: 2%;
    text-align: center;}
.home_btn img{    width: 25px;}
.index_ul{padding:0px; width:96%; margin: 0 auto; display: block;position: relative;
    z-index: 1;}
.index_ul li{width: 100%; float: left; display: flex; margin:8px 0px;display: flex}
.index_ul li a{display: block; color: #000; padding: 10px; font-family: sans-serif; text-decoration: none; float: left; background: #f3f3f3; width: 100%; margin: 0% 2%; display: flex; box-shadow: 0px 3px 5px #ccccccbd; font-weight:600}
.index_ul li a img{width: 20px; height: 20px}
h4{text-align: center;
    padding:25px 0px 10px 0px; 
    float: left; background: #6c79df; color: #fff;
    width: 100%;font-family: sans-serif;
    font-size: 24px;}
.index_ul li a:hover{color: blue; background: skyblue}
.introjs-skipbutton{padding: 4px 10px}
.introjs-tooltip-header {
    padding-left: 20px;
    padding-right: 0px;
    padding-top: 0px;
}
.introjs-tooltiptext {
    padding: 10px; text-align: left
}
.introjs-tooltip-header a{display: none}
.introjs-button{padding: .3rem .8rem}


/*@media only screen and (max-width: 600px) {*/
  #login, #locationPermission, #allowcontact, #AllowPicture, #allowactivity, #locationaccess, #AllowAllPermissions, #Home, #Reminder, #Leave, #LeaveList, #LeaveForm, #LeadList, #Attendance {Width:100%;   height: 667px;position: relative}
  #login, #locationPermission, #allowcontact, #AllowPicture, #allowactivity, #locationaccess, #AllowAllPermissions, #Home, #Reminder, #Leave, #LeaveList. #LeaveForm {Width:100%;   height: 667px;position: relative}
    #userid{margin-left: 50px !important; width:260px !important; height:50px !important;position: absolute;top: 310px;}
    #password{margin-left: 50px !important; width:260px !important; height:50px !important;position: absolute;top: 400px; }
    #signin{margin-left: 34% !important; width:32% !important; height:34px !important; top:500px; position: absolute}
    .location_yes{margin-left: 34% !important; width:32% !important; height:40px !important; top:88% !important }
    #permissionAllow{margin-left: 75% !important; width:15% !important; height:22px !important; top:410px; position: absolute}
    #allowcontactbutton{margin-left:10% !important; width:80% !important; height:30px !important; top:340px !important;position: absolute }
     #AllowPicturebutton{margin-left:10% !important; width:80% !important; height:30px !important; top:318px !important;position: absolute}
      #allowactivitybutton{margin-left:10% !important; width:80% !important; height:30px !important; top:339px !important;position: absolute}
    #locationaccessbutton{margin-left:5% !important; width:85% !important; height:230px !important; top:200px !important;position: absolute }
    #AllowAllPermissionsbutton{margin-left:5% !important; width:90% !important; height:150px !important; top:450px !important;position: absolute}
    #clicktostart{margin-left:69% !important; width:27% !important; height:50px !important; top:260px !important;position: absolute }
    #Reminderbtn{margin-left:3% !important; width:27% !important; height:50px !important; top:260px !important;position: absolute}
    #Reminderlistbtn{margin-left:3% !important; width:94% !important; height:280px !important; top:70px !important;position: absolute }
    #AddReminderbtn{margin-left:63% !important; width:10% !important; height:30px !important; top:33px !important;position: absolute  }
    #selectclient{margin-left:10% !important; width:78% !important; height:30px !important; top:220px !important;position: absolute }
    #selecttypereminder{margin-left:10% !important; width:78% !important; height:30px !important; top:280px !important ;position: absolute }
     #alerttitleeminder{margin-left:10% !important; width:78% !important; height:30px !important; top:340px !important;position: absolute  }
    #selectdatereminder{margin-left:10% !important; width:78% !important; height:30px !important; top:410px !important;position: absolute  }
    #reminderSave{margin-left:75% !important; width:13% !important; height:20px !important; top:480px !important;position: absolute  }
    #Leavetab{margin-left:36% !important; width:27% !important; height:55px !important; top:330px !important;position: absolute}
#LeaveListpopup{margin-left:3% !important; width:94% !important; height:330px !important; top:78px !important;position: absolute }
 #Addleavebtn{margin-left:89% !important; width:7% !important; height:30px !important; top:33px !important;position: absolute  }

#selectstart{margin-left:10% !important; width:78% !important; height:30px !important; top:196px !important;position: absolute }
    #selectendate{margin-left:10% !important; width:78% !important; height:30px !important; top:258px !important ;position: absolute }
     #selecttype{margin-left:10% !important; width:78% !important; height:30px !important; top:315px !important;position: absolute  }
    #leaveremarks{margin-left:10% !important; width:78% !important; height:80px !important; top:380px !important;position: absolute  }
    #leaveSave{margin-left:76% !important; width:12% !important; height:20px !important; top:504px !important;position: absolute  }
#Leadtab{margin-left:70% !important; width:27% !important; height:55px !important; top:330px !important;position: absolute}
#LeadListpopup{margin-left:3% !important; width:94% !important; height:330px !important; top:65px !important;position: absolute }
#Addleadbtn{margin-left:62% !important; width:7% !important; height:30px !important; top:33px !important;position: absolute  }
#leadformfill{margin-left:3% !important; width:94% !important; height:550px !important; top:72px !important ;position: absolute }
#leadSave{margin-left:89% !important; width:7% !important; height:30px !important; top:33px !important;position: absolute  }
#LeadFilterbtn{margin-left:90% !important; width:7% !important; height:30px !important; top:33px !important;position: absolute  }
#Category_LeadFilterdiv{margin-left:2% !important; width:96% !important; height:200px !important; top:385px !important ;position: absolute }
#Stage_LeadFilterdiv{margin-left:2% !important; width:96% !important; height:200px !important; top:385px !important ;position: absolute }
#Level_LeadFilterdiv{margin-left:2% !important; width:96% !important; height:200px !important; top:385px !important ;position: absolute }
#source_LeadFilterdiv{margin-left:2% !important; width:96% !important; height:200px !important; top:385px !important ;position: absolute }
#search_lead_client{margin-left:77% !important; width:7% !important; height:30px !important; top:33px !important;position: absolute  }
#client_lead_view{margin-left:3% !important; width:94% !important; height:100px !important; top:225px !important;position: absolute }
#client_linfo_view{margin-left:3% !important; width:94% !important; height:550px !important; top:75px !important;position: absolute }
#LeadActivity_view{margin-left:3% !important; width:94% !important; height:100px !important; top:115px !important;position: absolute }
#Attendancebtn{margin-left:69% !important; width:27% !important; height:50px !important; top:260px !important;position: absolute}
#SurveyTab{margin-left:3% !important; width:27% !important; height:55px !important; top:455px !important;position: absolute}
#FormListdiv{margin-left:3% !important; width:94% !important; height:110px !important; top:73px !important;position: absolute}
#Surveyplusbtn{margin-left:86% !important; width:11% !important; height:42px !important; top:570px !important;position: absolute  }
#Formdiv{margin-left:3% !important; width:94% !important; height:510px !important; top:73px !important;position: absolute}
#SurveyAddbtn{margin-left:86% !important; width:12% !important; height:30px !important; top:33px !important;position: absolute  }
#Dashboardtab{margin-left:3% !important; width:27% !important; height:55px !important; top:330px !important;position: absolute}
#usersummary{margin-left:3% !important; width:92% !important; height:200px !important; top:170px !important;position: absolute}
#useractivity{margin-left:4% !important; width:42% !important; height:50px !important; top:440px !important;position: absolute}
#userorder{margin-left:54% !important; width:42% !important; height:50px !important; top:440px !important;position: absolute}
#useracticity_view{margin-left:3% !important; width:92% !important; height:40px !important; top:520px !important;position: absolute}
#useractivities{margin-left:3% !important; width:94% !important; height:540px !important; top:70px !important;position: absolute}
#user_one_activities{margin-left:3% !important; width:94% !important; height:80px !important; top:140px !important;position: absolute}
#MonthlySummary{margin-left:3% !important; width:94% !important; height:300px !important; top:70px !important;position: absolute}
#Monthlypiechart{margin-left:3% !important; width:94% !important; height:340px !important; top:170px !important;position: absolute}
#Dashboard_customer_categorization{margin-left:3% !important; width:94% !important; height:250px !important; top:250px !important;position: absolute}
#startAttendancebtn{margin-left:52% !important; width:45% !important; height:20px !important; top:223px !important;position: absolute  }