html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}
/************************************************************/
/************************************************************/
/*the end of css frame ***************************************************************************************************************************/
@font-face{
font-family: Roboto-Regular;
src:url(Font/OpenSans-Regular.ttf);
}
/* The general setting for css of Main Page******************************************************************************************************/
/*Main frame*/
body{font-family: Roboto-Regular;background-color:white;}
div#main_frame{float:left;position: relative;width: 100%;margin-bottom: 40px;}
div#main_mf{float:left;width:360px;margin-top: 40px;margin-left: calc(50% - 180px);font-family: Roboto-Regular;}
div#loginwork_mmf{float: left;width: calc(100% - 20px);padding: 10px;display: block;border-radius: 14px;box-shadow: 0px 0px 20px -18px white;position: relative;border-top-left-radius: 28px;border-top-right-radius: 28px;border-top: 1px solid #90E800;border-bottom: 1px solid #E1E1E1;background-color: #F9F9F9;}
div#loginwork_mmf:before{content: '';border:12px solid transparent;border-bottom-color:#90E800;position: absolute;top: -24px;left: calc(50% - 6px);float: left;}
span#title_loginworkmmf{float: left;width: 100%;padding:8px 0px 12px 0px;text-align: center;color:#31B700;font-size: 16pt;font-weight: bolder;}
span#note_loginworkmmf{float: left;width: calc(100% - 20px);text-indent: 2%;font-size: 10pt;color:#909090;line-height: 20px;font-style: italic;margin-left: 10px;text-align: center;margin-bottom: 5px;}
span.stil_loginworkmmf{float: left;width: 100%;height: 30px;display: flex;align-items: center;color:#6D6D6D;margin-top: 12px;font-style: italic;font-size: 11pt;}
div.liwork_loginworkmmf{float: left;width: calc(100% - 2px);border-radius: 4px;overflow: hidden;border:1px solid #E1E1E1;}
span.ico_liloginworkmmf,span#inright_liloginworkmmf{float: left;width: 50px;height: 50px;background-position: center center;background-size: 32px auto;background-image: url(Photos/Icon_32/phoneok.png);background-repeat: no-repeat;background-color: #F0F0F0;filter: grayscale(100%);}
span#inright_liloginworkmmf{background-image: url(Photos/Icon_32/hideeye.png);}
span#inright_liloginworkmmf:hover{filter: grayscale(0%);cursor: pointer;}
input.in_liloginworkmmf{float: left;width: calc(100% - 70px);height: 50px;padding: 0px 10px 0px 10px;border-radius: 2px;border:none;outline: none;background-color: white;font-size: 18pt;color: #00D000;font-weight: bolder;}
input.in_liloginworkmmf::placeholder{font-style: italic;color: #B5B5B5;font-weight: 100;font-size: 15pt;}
input#insw_liloginworkmmf{width: calc(100% - 120px);}
span#sub_inliloginworkmmf{float: left;width: 100%;height: 45px;display: flex;align-items: center;justify-content: center;background-color: #00CB00;margin-top: 18px;border-radius: 4px;color: white;}
span#sub_inliloginworkmmf:hover{background-color: #606060;cursor: pointer;}
a#regis_loginworkmmf,span#forgot_loginworkmmf{float: left;width: 47%;margin-left: 2%;padding:12px 0px 12px 0px;color: #00B3F2;font-size: 11pt;text-align: right;margin-top: 12px;text-decoration: none;}
span#forgot_loginworkmmf{font-weight: 100;color: #F60081;text-align: left;}
a#regis_loginworkmmf:hover,span#forgot_loginworkmmf:hover{cursor: pointer;color:#2E2E2E;}
div#waitingloginwork_mmf{float: left;width: 280px;background-color:white;margin-left: calc(50% - 140px);border-radius: 28px;overflow: hidden;border-bottom:1px solid #DDDFDD;box-shadow: 0px 0px 20px -22px white;display: none;position: relative;}
span#title_waitingloginworkmmf{float: left;width: 100%;padding:12px 0px 12px 0px;text-align: center;color:white;font-size: 14pt;font-weight: bolder;background-color:#55D600;border-bottom: 1px solid #92FF00;}
span#note_waitingloginworkmmf{float: left;width: calc(100% - 20px);font-size: 12pt;color:#02DC02;line-height: 20px;margin-left: 10px;text-align: center;margin-bottom: 5px;margin-top: 12px;}
span#click_waitingloginworkmmf{float: left;width: calc(100% - 20px);font-size: 10pt;color:#ABACAB;margin-left: 10px;text-align: center;margin-bottom: 20px;font-style: italic;}
img#img_waitingloginworkmmf{transition: .4s all;float: left;width: 140px;height: 140px;margin-top: 2px;object-position: center;object-fit: cover;border-radius: 100%;box-shadow: 0px 0px 20px -15px #333333;margin-left: calc(50% - 72px);margin-bottom: 20px;background-color: white;border:2px solid #BBFF61;}
img#img_waitingloginworkmmf:hover{transform: scale(1.1);}
span#home_waitingloginworkmmf{transition: .4s all;float: left;width:120px;margin-left: calc(50% - 60px);height: 35px;border-radius: 28px;margin-top: 15px;margin-bottom: 20px;color:#585858;display: flex;align-items: center;justify-content: center;font-size: 11pt;font-weight: bolder;background-color: #ECECEC;}
span#home_waitingloginworkmmf:hover{cursor: pointer;background-color: #282828;color: white;}
div#forgotwork_mmf{float: left;width: calc(100% - 20px);padding: 10px;display: none;border-radius: 14px;box-shadow: 0px 0px 20px -18px white;background-color:#F9F9F9;position: relative;border-top-left-radius: 28px;border-top-right-radius: 28px;border-top: 1px solid #90E800;border-bottom: 1px solid #E1E1E1;}
span#title_forgotworkmmf{float: left;width: 100%;padding:8px 0px 12px 0px;text-align: center;color:#31B700;font-size: 16pt;font-weight: bolder;}
span.stil_forgotworkmmf{float: left;width: 100%;height: 30px;display: flex;align-items: center;color:#6D6D6D;margin-top: 12px;font-style: italic;font-size: 11pt;}
div.liwork_forgotworkmmf{float: left;width: calc(100% - 2px);border-radius: 4px;overflow: hidden;border:1px solid #E1E1E1;}
span.ico_liforgotworkmmf,span#inright_liforgotworkmmf{float: left;width: 50px;height: 50px;background-position: center center;background-size: 32px auto;background-image: url(Photos/Icon_32/phoneok.png);background-repeat: no-repeat;background-color: #F0F0F0;filter: grayscale(100%);}
span#inright_liforgotworkmmf{background-image: url(Photos/Icon_32/hideeye.png);}
span#inright_liforgotworkmmf:hover{filter: grayscale(0%);cursor: pointer;}
input.in_liforgotworkmmf{float: left;width: calc(100% - 150px);height: 50px;padding: 0px 10px 0px 10px;border-radius: 2px;border:none;outline: none;background-color: white;font-size: 18pt;color: #00D000;font-weight: bolder;}
input.in_liforgotworkmmf::placeholder{font-style: italic;color: #B5B5B5;font-weight: 100;font-size: 12pt;}
input#otp_insliforgotworkmmf{width: calc(100% - 70px);}
span#otp_liforgotworkmmf{float: left;width: 80px;height: 50px;background-color: #7C00F2;color: white;font-weight: bolder;transition: .4s all;display: flex;align-items: center;justify-content: center;display: none;}
span#idwork_inliforgotworkmmf{float: left;width: 80px;height: 50px;background-color: #4CD800;color: white;font-weight: bolder;transition: .4s all;}
span#idwork_inliforgotworkmmf i{float: left;width: 100%;height: 25px;display: flex;align-items: flex-end;justify-content: center;}
span#idwork_inliforgotworkmmf b{float: left;width: 100%;height: 22px;display: flex;justify-content: center;color: #EDEEEE;margin-top: 3px;font-size: 10pt;}
span#otp_liforgotworkmmf:hover,span#idwork_inliforgotworkmmf:hover{cursor: pointer;filter: grayscale(100%);}
input.insw_liforgotworkmmf{width: calc(100% - 120px);}
span#sub_inliforgotworkmmf{float: left;width: 100%;height: 45px;display: flex;align-items: center;justify-content: center;background-color: #00CB00;margin-top: 18px;border-radius: 4px;color: white;}
span#sub_inliforgotworkmmf:hover{background-color: #606060;cursor: pointer;}
span#forgot_forgotworkmmf{float: left;width: 96%;margin-left: 2%;padding:12px 0px 12px 0px;color:#393938;font-size: 11pt;margin-top: 12px;text-align: center;font-weight: bolder;}
span#forgot_forgotworkmmf:hover{cursor: pointer;color:#F5004D;}
div#showforgot_forgotworkmmf{float: left;width: 100%;display: none;}
div#notificationconfirm{font-family: Roboto-Regular;float: left;position: fixed;top: 0px;left: 0px;right: 0px;bottom: 0px;width: 100%;min-height: 100%;display: none;z-index: 1000;}
div#content_notificationconfirm{float: left;width: 300px;margin-top:120px;margin-left: calc(50% - 150px);border-radius: 8px;overflow: hidden;border-top: 2px solid #D60245;}
span#title_notificationfirm{float: left;width: calc(100% - 20px);color: white;background-color:#F2004C;text-align: left;font-weight: bolder;line-height: 20px;box-shadow: 0px 0px 20px -8px #8E8E8E;min-height: 48px;display: flex;align-items: center;padding: 0px 10px 0px 10px;}
div#cc_notificationconfirm{float: left;width: 92%;position: relative;background-color: #f6f8f9;padding: 10px 4% 10px 4%;}
span#span_notificationfirm{float: left;font-size: 11pt;line-height: 22px;color: #333333;width: 100%;min-height: 60px;margin-bottom: 10px;max-height: 200px;overflow: hidden;}
span#oknotificationfirm,span#Nonotificationfirm{float: right;padding: 11px 20px 11px 20px;background-color: #424142;color: white; margin-left: 2%;border-radius: 4px;}
span#oknotificationfirm:hover,span#Nonotificationfirm:hover{background-color:#008EF7;color:white;cursor: pointer;}
@media screen and (max-width:400px){
div#main_mf{width:100%;margin-top: 40px;margin-left:0px;}
div#loginwork_mmf,div#forgotwork_mmf{background-color: transparent;border-width: 0px;border-radius: 0px;}
}
@media screen and (max-width: 450px){
div#content_notificationconfirm{width: 98%;margin-left: 1%;}
}