input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;}
input[type=number]{-moz-appearance: textfield;}
*{box-sizing:border-box;margin:0;}

/*smart phone small and medium devices*/
@media screen and (max-width: 435px){
    html{height:100%;width:100%;top:0;bottom:0;overflow:hidden;}
    body {background:#f1f9ff;height:100%;width:100%;}
    a{color:#579caa;text-decoration: none;}
    .form {position: relative;z-index: 1;background: #f1f9ff;border-radius: 10px;max-width: 100%;margin: 0 auto 100px;padding: 15px;text-align: center;}
    .form input {outline: 0;background: #f1f9ff;width: 100%;border: 0;border-radius: 5px;margin: 0 0 15px;padding: 10px;box-sizing: border-box;border:1px solid #579caa;font-size: 14px;}
    .form input:focus {background: #dbdbdb;}
    .form button {text-transform: uppercase;outline: 0;background: #579caa;width: 100%;border: 0;border-radius: 5px;padding: 10px;color: #FFFFFF;font-size: 14px;-webkit-transition: all 0.3 ease;transition: all 0.3 ease;cursor: pointer;}
    .form button:active {background: #579caa;}
    .form div {font-size: 2em;margin: 20px 0px;color: #579caa;}
    .header_div{position:fixed;left:0;width:100%;top:0;height:15%;background:#579caa;bottom:0;overflow:hidden;}
    .body_div{position:fixed;left:0;top:15%;height:85%;border-right:1px solid #fff;border-left:1px solid #fff;overflow-y: auto;}
    .appLog{height:50%;text-align: center;padding: 8px !important;vertical-align: middle;}
    .appMenu{height:50%;background: #abd8e0 !important;}
    .appMenu a{display: block;width: 50%;height:100%;float: left;text-align: center;padding: 8px !important;color:#000;vertical-align: middle;backgound:red !important;}
    .appMenu a:first-child{border-right:1px solid #f1f9ff;}
    .daftari_btn{border:1px solid #f1f9ff;border-radius: 5px;font-size: small;}
    .daftari_btn:active{border:none;}
    .delete_btn{background: #e3130b !important;color:#f1f9ff;}
    .collect_btn{background: #579caa !important;color:#f1f9ff;}
    .details_btn{background: #579caa !important;color:#f1f9ff;}
    .add_btn,.success_btn{background: #579caa !important;position: absolute;bottom: 10px ;right:35%;border:none;padding: 10px;color: #f1f9ff;width:50px;height:50px;border-radius: 50px;border:none;}
    .positive_btn{background: #579caa !important;border:none;padding: 10px;color: #f1f9ff;border:none;}
    .add_btn:active{border:1px solid #f1f9ff;}
    .user_item,.loan_item{background: #fff;cursor: pointer;}
    .user_item:active,.loan_item:active{border:1px solid #fff;}
    .response_div{display:none;padding:0px;color:#579caa;}
    .swal2-styled.swal2-confirm{background:#579caa !important;}
    .swal2-styled.swal2-confirm:active{outline: none !important;}
    .swal2-styled:focus {box-shadow: none !important;}
    .appMenu a.active{color:#fff;font-weight: bold;}
    .text-success{color:#579caa !important;}
}

/*smart phone landscape and ipad land scape*/
@media only screen and (min-width: 436px) and (max-width: 800px){
    html{height:100%;width:100%;top:0;bottom:0;overflow:hidden;}
    body {background:#f1f9ff;height:100%;width:100%;}
    a{color:#579caa;text-decoration: none;}
    .form {position: relative;z-index: 1;background: #f1f9ff;border-radius: 10px;max-width: 100%;margin: 0 auto 100px;padding: 15px;text-align: center;}
    .form input {outline: 0;background: #f1f9ff;width: 100%;border: 0;border-radius: 5px;margin: 0 0 15px;padding: 10px;box-sizing: border-box;border:1px solid #579caa;font-size: 14px;}
    .form input:focus {background: #dbdbdb;}
    .form button {text-transform: uppercase;outline: 0;background: #579caa;width: 100%;border: 0;border-radius: 5px;padding: 10px;color: #FFFFFF;font-size: 14px;-webkit-transition: all 0.3 ease;transition: all 0.3 ease;cursor: pointer;}
    .form button:active {background: #579caa;}
    .form div {font-size: 2em;margin: 20px 0px;color: #579caa;}
    .header_div{position:fixed;left:0;width:100%;top:0;height:15%;background:#579caa;bottom:0;overflow:hidden;}
    .body_div{position:fixed;left:0;top:15%;height:85%;border-right:1px solid #fff;border-left:1px solid #fff;overflow-y: auto;}
    .appLog{height:50%;text-align: center;padding: 8px !important;vertical-align: middle;}
    .appMenu{height:50%;background: #abd8e0 !important;}
    .appMenu a{display: block;width: 50%;height:100%;float: left;text-align: center;padding: 8px !important;color:#000;vertical-align: middle;backgound:red !important;}
    .appMenu a:first-child{border-right:1px solid #f1f9ff;}
    .daftari_btn{border:1px solid #f1f9ff;border-radius: 5px;font-size: small;}
    .daftari_btn:active{border:none;}
    .delete_btn{background: #e3130b !important;color:#f1f9ff;}
    .collect_btn{background: #579caa !important;color:#f1f9ff;}
    .details_btn{background: #579caa !important;color:#f1f9ff;}
    .add_btn,.success_btn{background: #579caa !important;position: absolute;bottom: 10px ;right:35%;border:none;padding: 10px;color: #f1f9ff;width:50px;height:50px;border-radius: 50px;border:none;}
    .positive_btn{background: #579caa !important;border:none;padding: 10px;color: #f1f9ff;border:none;}
    .add_btn:active{border:1px solid #f1f9ff;}
    .user_item,.loan_item{background: #fff;cursor: pointer;}
    .user_item:active,.loan_item:active{border:1px solid #fff;}
    .response_div{display:none;padding:0px;color:#579caa;}
    .swal2-styled.swal2-confirm{background:#579caa !important;}
    .swal2-styled.swal2-confirm:active{outline: none !important;}
    .swal2-styled:focus {box-shadow: none !important;}
    .appMenu a.active{color:#fff;font-weight: bold;}
    .text-success{color:#579caa !important;}
}

/*work in a width of 850 px customed */
@media only screen and (min-width: 801px) and (max-width: 1000px){
    html{height:100%;position:fixed;width:100%;top:0;bottom:0;}
    body {background:#f1f9ff !important;}
    a{color:#579caa;text-decoration: none;}
    .form {position: relative;z-index: 1;background: #f1f9ff;border-radius: 10px;max-width: 100%;margin: 0 auto 100px;padding: 45px;text-align: center;}
    .form input {outline: 0;background: #f1f9ff;width: 100%;border: 0;border-radius: 5px;margin: 0 0 15px;padding: 10px;box-sizing: border-box;border:1px solid #579caa;font-size: 14px;}
    .form input:focus {background: #dbdbdb;}
    .form button {text-transform: uppercase;outline: 0;background: #579caa;width: 100%;border: 0;border-radius: 5px;padding: 10px;color: #FFFFFF;font-size: 14px;-webkit-transition: all 0.3 ease;transition: all 0.3 ease;cursor: pointer;}
    .form button:active {background: #579caa;}
    .form div {font-size: 2em;margin: 20px 0px;color: #579caa;}
    .header_div{height:12vh;background:#579caa;}
    .body_div{height:88vh;border-right:1px solid #fff;border-left:1px solid #fff;overflow-y: auto;}
    .appLog{height:60%;text-align: center;padding: 15px;}
    .appMenu{height:40%;background: #abd8e0;}
    .appMenu a{display: block;width: 50%;float: left;text-align: center;padding: 10px;color:#000;}
    .appMenu a:first-child{border-right:1px solid #f1f9ff;}
    .daftari_btn{border:1px solid #f1f9ff;border-radius: 5px;}
    .daftari_btn:active{border:none;}
    .delete_btn{background: #e3130b !important;color:#f1f9ff;}
    .collect_btn{background: #579caa !important;color:#f1f9ff;}
    .details_btn,.success_btn{background: #579caa !important;color:#f1f9ff;}
    .add_btn{background: #579caa !important;position: absolute;bottom: 10px ;right:35%;border:none;padding: 10px;color: #f1f9ff;width:50px;height:50px;border-radius: 50px;border:none;}
    .add_btn:active{border:1px solid #f1f9ff;}
    .positive_btn{background: #579caa !important;border:none;padding: 10px;color: #f1f9ff;border:none;}
    .user_item,.loan_item{background: #fff;cursor: pointer;}
    .user_item:active,.loan_item:active{border:1px solid #fff;}
    .response_div{display:none;padding:0px;color:#579caa;}
    .swal2-styled.swal2-confirm{background:#579caa !important;}
    .swal2-styled.swal2-confirm:active{outline: none !important;}
    .swal2-styled:focus {box-shadow: none !important;}
    .appMenu a.active{color:#fff;font-weight: bold;}
    .text-success{color:#579caa !important;}
}

/*work for ipad min and kindle fire*/
@media only screen and (min-width: 1001px) and (max-width: 1150px){
    html{height:100%;position:fixed;width:100%;top:0;bottom:0;}
    body {background:#f1f9ff !important;}
    a{color:#579caa;text-decoration: none;}
    .form {position: relative;z-index: 1;background: #f1f9ff;border-radius: 10px;max-width: 100%;margin: 0 auto 100px;padding: 45px;text-align: center;}
    .form input {outline: 0;background: #f1f9ff;width: 100%;border: 0;border-radius: 5px;margin: 0 0 15px;padding: 10px;box-sizing: border-box;border:1px solid #579caa;font-size: 14px;}
    .form input:focus {background: #dbdbdb;}
    .form button {text-transform: uppercase;outline: 0;background: #579caa;width: 100%;border: 0;border-radius: 5px;padding: 10px;color: #FFFFFF;font-size: 14px;-webkit-transition: all 0.3 ease;transition: all 0.3 ease;cursor: pointer;}
    .form button:active {background: #579caa;}
    .form div {font-size: 2em;margin: 20px 0px;color: #579caa;}
    .header_div{height:12vh;background:#579caa;}
    .body_div{height:88vh;border-right:1px solid #fff;border-left:1px solid #fff;overflow-y: auto;}
    .appLog{height:60%;text-align: center;padding: 15px;}
    .appMenu{height:40%;background: #abd8e0;}
    .appMenu a{display: block;width: 50%;float: left;text-align: center;padding: 10px;color:#000;}
    .appMenu a:first-child{border-right:1px solid #f1f9ff;}
    .daftari_btn{border:1px solid #f1f9ff;border-radius: 5px;}
    .daftari_btn:active{border:none;}
    .delete_btn{background: #e3130b !important;color:#f1f9ff;}
    .collect_btn{background: #579caa !important;color:#f1f9ff;}
    .details_btn,.success_btn{background: #579caa !important;color:#f1f9ff;}
    .add_btn{background: #579caa !important;position: absolute;bottom: 10px ;right:35%;border:none;padding: 10px;color: #f1f9ff;width:50px;height:50px;border-radius: 50px;border:none;}
    .add_btn:active{border:1px solid #f1f9ff;}
    .positive_btn{background: #579caa !important;border:none;padding: 10px;color: #f1f9ff;border:none;}
    .user_item,.loan_item{background: #fff;cursor: pointer;}
    .user_item:active,.loan_item:active{border:1px solid #fff;}
    .response_div{display:none;padding:0px;color:#579caa;}
    .swal2-styled.swal2-confirm{background:#579caa !important;}
    .swal2-styled.swal2-confirm:active{outline: none !important;}
    .swal2-styled:focus {box-shadow: none !important;}
    .appMenu a.active{color:#fff;font-weight: bold;}
    .text-success{color:#579caa !important;}
}

/*large screen style sheet*/
@media screen and (min-width: 1151px){
    html{height:100%;position:fixed;width:100%;top:0;bottom:0;}
    body {background:#f1f9ff !important;}
    a{color:#579caa;text-decoration: none;}
    .form {position: relative;z-index: 1;background: #f1f9ff;border-radius: 10px;max-width: 100%;margin: 0 auto 100px;padding: 45px;text-align: center;}
    .form input {outline: 0;background: #f1f9ff;width: 100%;border: 0;border-radius: 5px;margin: 0 0 15px;padding: 10px;box-sizing: border-box;border:1px solid #579caa;font-size: 14px;}
    .form input:focus {background: #dbdbdb;}
    .form button {text-transform: uppercase;outline: 0;background: #579caa;width: 100%;border: 0;border-radius: 5px;padding: 10px;color: #FFFFFF;font-size: 14px;-webkit-transition: all 0.3 ease;transition: all 0.3 ease;cursor: pointer;}
    .form button:active {background: #579caa;}
    .form div {font-size: 2em;margin: 20px 0px;color: #579caa;}
    .header_div{height:12vh;background:#579caa;}
    .body_div{height:88vh;border-right:1px solid #fff;border-left:1px solid #fff;overflow-y: auto;}
    .appLog{height:60%;text-align: center;padding: 15px;}
    .appMenu{height:40%;background: #abd8e0;}
    .appMenu a{display: block;width: 50%;float: left;text-align: center;padding: 10px;color:#000;}
    .appMenu a:first-child{border-right:1px solid #f1f9ff;}
    .daftari_btn{border:1px solid #f1f9ff;border-radius: 5px;}
    .daftari_btn:active{border:none;}
    .delete_btn{background: #e3130b !important;color:#f1f9ff;}
    .collect_btn{background: #579caa !important;color:#f1f9ff;}
    .details_btn,.success_btn{background: #579caa !important;color:#f1f9ff;}
    .add_btn{background: #579caa !important;position: absolute;bottom: 10px ;right:35%;border:none;padding: 10px;color: #f1f9ff;width:50px;height:50px;border-radius: 50px;border:none;}
    .add_btn:active{border:1px solid #f1f9ff;}
    .positive_btn{background: #579caa !important;border:none;padding: 10px;color: #f1f9ff;border:none;}
    .user_item,.loan_item{background: #fff;cursor: pointer;}
    .user_item:active,.loan_item:active{border:1px solid #fff;}
    .response_div{display:none;padding:0px;color:#579caa;}
    .swal2-styled.swal2-confirm{background:#579caa !important;}
    .swal2-styled.swal2-confirm:active{outline: none !important;}
    .swal2-styled:focus {box-shadow: none !important;}
    .appMenu a.active{color:#fff;font-weight: bold;}
    .text-success{color:#579caa !important;}
}

/*desktop style sheet*/
@media only screen and (min-width: 1151px) and (max-width: 999999999999px){
    html{height:100%;position:fixed;width:100%;top:0;bottom:0;}
    body {background:#f1f9ff !important;}
    a{color:#579caa;text-decoration: none;}
    .form {position: relative;z-index: 1;background: #f1f9ff;border-radius: 10px;max-width: 100%;margin: 0 auto 100px;padding: 45px;text-align: center;}
    .form input {outline: 0;background: #f1f9ff;width: 100%;border: 0;border-radius: 5px;margin: 0 0 15px;padding: 10px;box-sizing: border-box;border:1px solid #579caa;font-size: 14px;}
    .form input:focus {background: #dbdbdb;}
    .form button {text-transform: uppercase;outline: 0;background: #579caa;width: 100%;border: 0;border-radius: 5px;padding: 10px;color: #FFFFFF;font-size: 14px;-webkit-transition: all 0.3 ease;transition: all 0.3 ease;cursor: pointer;}
    .form button:active {background: #579caa;}
    .form div {font-size: 2em;margin: 20px 0px;color: #579caa;}
    .header_div{height:12vh;background:#579caa;}
    .body_div{height:88vh;border-right:1px solid #fff;border-left:1px solid #fff;overflow-y: auto;}
    .appLog{height:60%;text-align: center;padding: 15px;}
    .appMenu{height:40%;background: #abd8e0;}
    .appMenu a{display: block;width: 50%;float: left;text-align: center;padding: 10px;color:#000;}
    .appMenu a:first-child{border-right:1px solid #f1f9ff;}
    .daftari_btn{border:1px solid #f1f9ff;border-radius: 5px;}
    .daftari_btn:active{border:none;}
    .delete_btn{background: #e3130b !important;color:#f1f9ff;}
    .collect_btn{background: #579caa !important;color:#f1f9ff;}
    .details_btn,.success_btn{background: #579caa !important;color:#f1f9ff;}
    .add_btn{background: #579caa !important;position: absolute;bottom: 10px ;right:35%;border:none;padding: 10px;color: #f1f9ff;width:50px;height:50px;border-radius: 50px;border:none;}
    .add_btn:active{border:1px solid #f1f9ff;}
    .positive_btn{background: #579caa !important;border:none;padding: 10px;color: #f1f9ff;border:none;}
    .user_item,.loan_item{background: #fff;cursor: pointer;}
    .user_item:active,.loan_item:active{border:1px solid #fff;}
    .response_div{display:none;padding:0px;color:#579caa;}
    .swal2-styled.swal2-confirm{background:#579caa !important;}
    .swal2-styled.swal2-confirm:active{outline: none !important;}
    .swal2-styled:focus {box-shadow: none !important;}
    .appMenu a.active{color:#fff;font-weight: bold;}
    .text-success{color:#579caa !important;}
}
/* i have edit only small device and landscape device */