@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700,800,900,bold');
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700,800,900,bold');
body{margin:0;padding:0;font-family: 'Open Sans', sans-serif;}
h1,h2,h3,h4,h5,p{margin:0;padding:0;font-weight: normal;}
a, a:active, a:focus {outline: none;}
a {outline:none !important;}
a, a:active, a:focus, 
button, button:focus, button:active, 
.btn, .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn.focus:active, .btn.active.focus {outline: none;outline: 0;}
a{outline: medium none !important;}
a.image-link:focus { outline: 0; }
input{border: 0; outline:0;}

/* -----Top banner css------------*/

.header{ margin-top:30px; margin-bottom:30px;}
.header img{width: 220px;}

/* -----login page css------------*/

.ams-login{background-color: #fff;-moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;-webkit-box-shadow: 0 0 30px rgba(0,0,0, .35);-moz-box-shadow: 0 0 30px rgba(0,0,0, .35);box-shadow: 0 0 30px rgba(0,0,0, .35); text-align:center;max-width: 750px;width:100%; margin:0 auto; padding:20px; padding-bottom: 20px; background: #e4e4e5; border: 8px solid #fff; font-size: 16px;padding-bottom: 20px;}
.login-page p{ padding-top:0px;}
.inner-addon {position: relative;width: 210px;margin: 0 auto;}
.inner-addon.san2, .inner-addon.san{width: 170px;}
.san2{ margin-right: 25px;}
.san1{width: 270px;}
.inner-addon .icom {position: absolute;padding: 10px; pointer-events: none;padding-top: 5px;}
.left-addon .icom  { left:  5px;}
.right-addon .icom { right: 0px;}
.right-addon .icom img{width: 30px;}
.left-addon .icom img{width: 18px; padding-top: 6px;}
.left-addon input  { padding-left:  40px;-webkit-box-shadow: inset 4px 3px 5px 0px rgba(216,216,216,1);
-moz-box-shadow: inset 4px 3px 5px 0px rgba(216,216,216,1);
box-shadow: inset 4px 3px 5px 0px rgba(216,216,216,1); }
.ams-login .form-control{ height:44px;width: 100%;margin: 25px 0px;display: block;border-radius: 8px;}
.ams-login h1{font-size:24px; color:#58595b; padding-top:36px;font-family: 'Roboto', sans-serif; font-weight:600; padding-bottom:10px; }
input[type="checkbox"]{ margin-right: 10px;}
.buttoon button{border:none; background: none; margin: 25px 0px;}
.ams-login a, .check{text-decoration: none; color:#f26c6b; }
.headuser{
/*background: -moz-linear-gradient(left, #ec008b 0%, #f24b55 49%, #f7971d 100%); /* FF3.6-15 */
/*background: -webkit-linear-gradient(left, #ec008b 0%,#f24b55 49%,#f7971d 100%); /* Chrome10-25,Safari5.1-6 */
/*background: linear-gradient(to right, #ec008b 0%,#f24b55 49%,#f7971d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
background: #000000;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ec008b', endColorstr='#f7971d',GradientType=1 ); /* IE6-9 */ color: #fff; padding: 30px 0px;}
.headuser .whitelogo{ width: 220px;}
.logout-button{border:none; background: none;margin-top: 0px;}
.welcomebox{float: left;margin-right: 20px; font-size: 18px; color:#6d6e71;}
.welcome-name{line-height: 30px;}
.log-right{max-width: 700px; width:100%; margin:20px auto;}

/* -----Side menu box css------------*/
.modal-header{border:none;padding:8px;}
.menubox .nav-side-menu {overflow: auto;font-family: 'Roboto', sans-serif; font-size: 14px; font-weight: 400;position: absolute;top: 164px;height: auto;color: #58595b; width:190px;-webkit-box-shadow: inset -5px 1px 32px -18px rgba(0,0,0,1);-moz-box-shadow: inset -5px 1px 32px -18px rgba(0,0,0,1);box-shadow: inset -5px 1px 32px -18px rgba(0,0,0,1);z-index:9; background:#fff;margin-top:15px;}
  .menubox .nav-side-menu .menu-list .menu-content {display: block; }

.menubox .nav-side-menu ul, .menubox .nav-side-menu li {list-style: none;margin: 0px; cursor: pointer;padding: 20px 0px;}
.menubox .nav-side-menu ul{padding: 0px;}
.menubox .nav-side-menu li.active{ background: #000000;color:#ffffff;-webkit-box-shadow: inset -5px 1px 42px -18px rgba(0,0,0,1);
-moz-box-shadow: inset -5px 1px 42px -18px rgba(0,0,0,1);
box-shadow: inset -5px 1px 42px -18px rgba(0,0,0,1);}
.menubox .nav-side-menu ul li svg{ width: 30px;}
.menubox .nav-side-menu li.active a{color:#fff;}

.menubox .nav-side-menu li {border-bottom: 1px solid #e6e7e8;padding: 12px 10px;}
.menubox .nav-side-menu li a {text-decoration: none; color: #58595b;padding: 9px 3px;}
.menubox .nav-side-menu li:hover a{color:#fff;}
.menubox .nav-side-menu li a i {padding-left: 10px;width: 20px;padding-right: 20px;}
.menubox .nav-side-menu li:hover {background: #000000;color:#ffffff;-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;-ms-transition: all 1s ease;transition: all 1s ease;-webkit-box-shadow: inset -5px 1px 42px -18px rgba(0,0,0,1);
-moz-box-shadow: inset -5px 1px 42px -18px rgba(0,0,0,1);
box-shadow: inset -5px 1px 42px -18px rgba(0,0,0,1);}
#togglebut{display: none;}
#togglebut .fa{font-size: 30px; color: #4E4949; float: left; margin-top: 20px; cursor: pointer;}
.menubox .nav-side-menu li.active a svg{ fill: #fff;}
.menubox .nav-side-menu li a svg{ fill: #bcbec0;}
.menubox .nav-side-menu li:hover svg{ fill: #fff;}
.iconsan{float: left;}
.iconsan2{line-height: 31px;padding-left: 10px;} 
.spsant{margin-bottom:30px !important;border-bottom: 0px solid #e6e7e8 !important;}

/* -----Add Office Devices css------------*/

.ofc-device-add{max-width:800px; width:100%; margin:0px auto; height:auto; margin-top:5px; padding-bottom:40px; overflow:hidden; -webkit-box-shadow: inset 1px -6px 52px -20px rgba(0,0,0,1);
-moz-box-shadow: inset 1px -6px 52px -20px rgba(0,0,0,1);
box-shadow: inset 1px -6px 52px -20px rgba(0,0,0,1);}
.ofc-device-add h4{ padding:15px 35px; background:#b2b4b6; color:#ffffff; font-size:18px;}
.main-form-inside{ padding:20px;}
.main-form form label{ color:#b5b7b9; font-size:15px;  padding-bottom:10px;font-weight: 600;}
.ofc-device-add .form-control{color:#939598;border-radius:0px;}
.ofc-device-add select {font-size:15px; padding: 5px 35px 5px 15px;-webkit-appearance: none;-moz-appearance: none; appearance: none;background:url(../images/arrow.png) 96% / 20px no-repeat;color: #979797;background-color: #fff;border: 1px solid #ccc;-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);box-shadow: inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; width:100%;}
.main-form form input{ height:35px;width: 100%;border: 1px solid #ccc;}
.device-btn{ max-width:300px; width:100%; margin:0 auto;}
.device-btn button{ background:none; border:none; margin-top:30px;}
.device-btn .cancel-btn{ float:right;}

/* -----Add Employee css------------*/
.main-form-emloyee .main-form-inside{ padding: 35px 30px 0px 30px;}
.main-form-emloyee form input{ height:40px; margin-top:0px; font-size:15px;}
.main-form-emloyee form select{height:40px; margin-top:0px; font-size:15px; border-radius:0px;}

/* -----Add Guest css------------*/
.add-guest{ padding:10px 30px;}
.main-form-guest form input{ height:40px; margin-top:10px; font-size:15px;}

/* -----Change password css------------*/
.wi-fi-change-password h3{color:#6d6e71; margin:50px 0px;}
.wi-fi-change-password{max-width:590px; width:100%; margin:-35px auto;}
.wi-fi-change-password label{ color:#939598; font-size:16px; margin-top:20px; line-height:40px; font-weight: 500;}
.wi-fi-change-password input{ border-radius:0px; height:40px; margin-top:20px;}

/* -----office-device-list css------------*/
.office-device-list h3{color:#6d6e71; margin:30px 0px;}

/* -----emloyee-list css------------*/
/*.emloyees-list1 h3{color:#6d6e71; margin:30px 0px;} */

.emloyees-list h3{color:#6d6e71; margin:15px 0px;}

/* -----Guest-list css------------*/
.guests-list h3{color:#6d6e71; margin:30px 0px;}
#example thead tr th {color:#6d6e71; font-size:16px; border-top:2px solid #ddd;}
#example > tbody > tr > td{vertical-align: middle;color:#6d6e71;}


/* -----popup css------------*/
.popup{ max-width:700px; margin:0 auto; width:100%; background:#ffffff;}
.popup h3{color:#6d6e71; margin:30px 0px; margin-top:0px;}
.popup form label {color: #b5b7b9;font-size: 15px; padding-bottom: 10px;font-weight: 600;}
.popup form input { height: 35px; width: 100%; border: 1px solid #ccc;}
.popup form select {
    font-size: 15px;
    padding: 5px 35px 5px 15px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url(../images/arrow.png) 96% / 20px no-repeat;
    color: #979797;
    background-color: #fff;
    border: 1px solid #ccc;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    width: 100%;
}
.popup form label span{ width:15px; height:15px; float:left; margin-top:-10px;     margin-right: 5px;}
.popup form .send-cred{margin-top:10px;}
.popup form .submit-btn{ border:none; background:none;}
.modal-dialog { max-width: 775px !important; width:100% !important; margin:40px auto !important;}
.rwd-table {background: #ffff;color: #000; width: 100%}
.rwd-table tr {border-top: 3px solid #ccc;border-color: #ccc;}
.rwd-table th {display: none;}
.rwd-table td {display: block;}
.rwd-table td:first-child {padding-top: .5em;}
.rwd-table td:last-child {padding-bottom: .5em;}
.rwd-table td:before {content: attr(data-th) " : ";width: 6.5em;display: inline-block;}
.rwd-table th, .rwd-table td {margin: .5em 1em;}
@media (min-width: 480px) {.rwd-table td:before {display: none;}}
.rwd-table th, .rwd-table td {text-align: left;}
@media (min-width: 480px) {.rwd-table th, .rwd-table td {display: table-cell;padding: .25em .5em;}
.rwd-table th:first-child, .rwd-table td:first-child { padding-left: 0;}
.rwd-table th:last-child, .rwd-table td:last-child { padding-right: 0;}
	.rwd-table th, .rwd-table td {padding: 1em !important;}
.rwd-table th, .rwd-table td:before {color: #000;
	}}
	
.close{ position:absolute; right:10px; top:10px; z-index:99;}


.sanenable, .sandesble{ width:60px; font-family: 'Roboto', sans-serif; }
.sandeactive, .sanactive{width: 73px;}
.actspac{margin-right: 20px;width: 74px;}
.sanadd-device{ width:92px; font-family: 'Roboto', sans-serif; }
.sanlogout{ width:93px;font-family: 'Roboto', sans-serif; }
.sanremove{ width:108px; height:26px;font-family: 'Roboto', sans-serif; }
.submit2{ width:97px; height:35px;font-family: 'Roboto', sans-serif; }
.sancancel, .sansave{width:96px; height:37px;font-family: 'Roboto', sans-serif; }
.popup .sanenable{ margin-right:20px;}

.main-table{width:1080px !important; margin:0 auto!important;}
/* -----responsive css------------*/
@media (max-width: 1560px) {
.main-table{width:1080px !important; float:left !important; margin-left:210px !important;}	
}
@media (max-width: 1299px) {
.main-table{max-width:1080px !important; width:97% !important; float:none !important;  margin:0 auto!important;}	
.menubox .nav-side-menu .menu-list .menu-content {display: none;}
#togglebut{display: block;}
}
@media (max-width:767px){
.header {margin-top:20px; margin-bottom:20px;}
.login-page{margin-bottom:50px;}
section{ padding-bottom:10px;padding-top:10px;}	
.ams-login h1{padding-top: 10px;font-size: 19px;}	
.ofc-device-add, .wi-fi-change-password { width: 90%; text-align:center;margin-top: 30px;}
.main-form form label { padding-top: 8px;margin-bottom: 0px; padding-bottom: 2px;}
.wi-fi-change-password input { margin-top: 0px;}
.wi-fi-change-password h3 {  margin: 20px 0px;}
.wi-fi-change-password label { margin-top: 5px; margin-bottom: 0px;line-height: 30px;}
.guests-list h3, .emloyees-list h3, .office-device-list h3, .popup h3{text-align:center; font-size:17px; font-weight:700; margin: 20px 0px;}
.modal-dialog { width:95% !important;}
.popup{text-align:center;}
.popup form .send-cred{margin-top:1px;}
.popup form label{padding-bottom: 0px; margin-bottom:0; margin-top:10px;}
.popup form .submit-btn { margin-top: 20px;  margin-bottom: 20px;}
}
@media (max-width:480px){
.menubox .nav-side-menu li { padding: 15px 20px;}
.spsant { margin-bottom: 15px !important;}
.popup form .send-cred{margin-top:0px;}
.welcomebox {margin-right: 0px;}
.sanlogout{ width:75px;font-family: 'Roboto', sans-serif; }
.menubox .nav-side-menu{width:210px;}
}
@media (max-width:384px){
.ams-login h1{font-size: 16px;padding-bottom: 0px;}
.header img {width: 180px;}
.header { padding: 20px 0px;}
.welcomebox { float: left; margin-left: 15px;margin-right: 5px;}
}
@media (max-width:360px){
.welcomebox {  margin-left: 5px;margin-right: 0px;font-size:15px;}
.log-right{max-width: 280px;}
.popup a .sanremove{ margin-left: 65px !important; margin-top: 10px !important;}
}

.dataTables_filter {
text-align: left !important;
padding-left: 120px;
}