/* CSS Default */
@import "fonts.css?v2";
@import "animate.css?v2";

@font-face{
    font-family:estedad;
    font-style:normal;
    font-weight:300;
    font-display:fallback;
    src:url('https://validity.nsgkala.com/assets/fonts/estedad/estedad.woff2') format('woff2');font-stretch:normal;
}


* { margin:0;padding:0; box-sizing: border-box;}
a { color:orangered; text-decoration: none;}
a:hover { color: darkred;}
nav { font-size: 12px; color: #6d6c6c; font-family:estedad,Verdana; direction: rtl; }
.ic {  width:36px; height:36px;
    display:inline-block; background-image: url("../images/icons/ic_account_circle_black_24dp_2x.png");
    background-position: center; background-repeat: no-repeat; background-size: contain; }

.nav-head { height:40px; background:#eaeaea;}
.nav-head > div { position:relative; height:100%;float:right;margin-right:40px; padding:8px; padding-left:40px; }
.nav-head .ic { margin-top: -6px; float:left;}
/*.nav-head .mis { font-size:36px; margin:0;position:absolute;top:2px;left:2px;}*/
.nav-head .nav-head-login { padding-left:0; float:left; margin-left:20px; width:250px; text-align:right; }
.nav-head .nav-head-login > div { direction:ltr; margin-left:5px;float:left;display:inline-block; font-weight:600;  }
.nav-login-box  {
    direction:ltr;
    overflow: hidden;
    transition: all linear .2s;
}
.nav-login-box > div { padding:0px; border-bottom: 2px solid #f2f2f2;}
.nav-login-box .lbox { padding:10px;}
.nav-menu { height:80px; border-bottom: 2px solid #f2f2f2;}
.nav-menu a { color: #6d6c6c;}
.nav-menu span { font-size:12px;}
.nav-menu > div { text-align:center; padding-top:27px;width:120px; border-left:1px solid #f2f2f2; height:100%;float:right; }
.nav-menu .logo-tab , .nav-head .logo-tab  {
    width: 250px;
    padding-left: 15px;
    background-image: url("http://nsgkala.com/wp-content/uploads/2016/12/NSG-Logo.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.nav-head .logo-tab { display:none;}
.nav-hover {
    -webkit-transition: background 0.5s; /* Safari */
    transition: background 0.5s;
}
.nav-hover:hover {background:#EFEBE9;}

.container { height:100vh; }

.panel { }
.panel > div { float:left;}
.panel::after { content: " "; clear: both; display: table; margin-bottom:2px; }
.panel-tabs { width:100px; border-right:1px solid #f2f2f2;}

.panel-tabs > div { text-align:right; padding:5px; border-bottom:1px solid #f2f2f2;}
.panel-tabs > div:last-child { border:none;}
.panel-body { position:relative; min-height:400px; margin:10px; border:3px solid #90A4AE;; width:1200px; }
.panel-body .show { position:absolute; width:20%;top:55px;bottom:5px;right:5px;background:#7986CB; }
.show > div { color:white;text-align:center;}
.show .title { height:45%;padding-top:40px; background:#FF8F00; font-size:22px; font-weight: 600;}
.show .value { height:55%;padding:30px;font-size:48px; font-weight: 800;}
/*------------------*/
.ctrl { }
.ctrl .header { text-align:center; height:25px; padding:10px; font-size:14px; border-bottom:1px solid #f2f2f2; background:#EEEEEE;}
.ctrl .section { padding:10px; }

.ctrl h3 { background:#90A4AE; color:white; padding:10px;margin:0; text-align: center; }
.ctrl a { color:#00796B; font-style: oblique; text-decoration:underline;}

.ctrl > div { margin:10px 20px;border:0px solid #B0BEC5;}
.ctrl > div > .label { padding:5px;display:inline-block;width:15%; background:#757575; color:white;}
.ctrl > div > .label-tab { text-align:right;padding:5px; display:inline-block; width:60%; border:1px solid #757575; }
.label-tab > div { display: inline-block;}
.ctrl button { padding:2px 10px; background:#E6EE9C;}
.label-tab span { text-align:center;color:white; display:inline-block; width:35px; height:35px; padding:5px; border-radius:50%;}



.ic-login { background-image: url("../images/icons/ic_account_circle_black_24dp_2x.png");}
.ic-setting {background-image: url("../images/icons/ic_settings_black_24dp_2x.png"); }
.ic-search { background-image: url("../images/icons/ic_search_black_24dp_2x.png");}
.ic-phone { background-image: url("../images/icons/ic_phone_in_talk_black_24dp_2x.png"); }
.ic-check { background-image: url("../images/icons/ic_done_black_24dp_2x.png"); }
.ic-msg { background-image: url("../images/icons/ic_message_black_24dp_2x.png"); }
.ic-call { background-image: url("../images/icons/ic_phonelink_ring_black_24dp_1x.png"); }
.ic-telegram { background-image: url("../images/icons/telegramt.png"); }
.ic-arrow-left  { background-image: url("../images/icons/ic_keyboard_arrow_left_black_24dp_2x.png"); }

.wrapper { margin:5px auto; width:95%;  }
/*.wrapper::after { content:" "; clear:both;}*/
/*.wrapper > div { margin:5px auto; height:200px; }*/
.display-result {
    width:600px;
    margin:10px auto; }
.display-result > div
    {  margin:2px auto; padding:10px; }
.display-result .result-msg { font-family: wsans, Kufi, Verdana; text-align: center; }
.result-successed { background-color:green; color:white;}
.result-failed { background-color:red; color:white;}
.display-none { display:none;}
.display-block { display:block;}

.search-pane { margin:10px auto; width:90%; border:0px solid blue;  }
.result-pane { width:600px; margin:20px auto; border:0px solid transparent;}
.result-pane::after { content:" "; clear:both;}
.result-pane h3 {
    direction:rtl;
    padding:5px; font-family:estedad,Tahoma;
    text-align:center; font-weight:600; }
.result-body {
    overflow:hidden;
    position:relative;
    transition: all linear 0.2s;

}
.result-body img {
    width:150px; height:150px; position:absolute; border-radius:15px;
    border:3px solid #90A4AE; top:10px;left:10px; }
.result-body > div { border:0px solid red; position:relative;
    width:70%;margin-left:30%;margin-top:5px;
}
.result-body > div > * {
    padding:5px;
    display:inline-block;
    font-size:14px; }

.result-body > div > span { font-family:Kufi;
    position:absolute; direction:rtl;
    text-align:left; width:29%;top:0;right:0; background:#CFD8DC; }
.result-body > div > div { font-family:estedad;text-align:right; width:70%;
    border:1px solid #CFD8DC;
}

.checked, .invalid { background:#ffcdd2; color:#ff1744; }
.unchecked { background:#81C784; color:#2E7D32;  }

.terms { color:white;width:95%; padding:10px 10px; margin:10px auto;clear:both; border:0px solid grey; }
.terms h3 { font-family: estedad,wsans; background: #999A9C; font-size:24px; margin:0;padding:0px; text-align:center;}
.terms > div { font-family: estedad,Tahoma;font-size:12px;direction:rtl;
    position:relative; text-align:right;padding:5px 40px;
    color:#78909C;
    border:1px solid #78909C;
    border-top:none;
}
.terms > div .ic { position:absolute; width:35px; height:25px;right:0;top:0;border:0px solid green;}

.sbox {
    position:relative;
    margin:20px auto;
    /*margin-bottom:10px;*/
    width:600px; height:70px;
    padding:10px; border:5px solid #9E9E9E;
    border-radius:10px; }

.sbox .ic { text-align:center; width:15%; height:60px;
    float:right; position:absolute;right:0;top:0;bottom:0; }

.sbox .ic-email,
.sbox .ic-face,
.sbox .ic-msg,
.sbox .ic-search,
.sbox .ic-call {
    background:#9E9E9E;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.sbox .ic-email {background-image: url("../images/icons/ic_email_white_24dp_2x.png");}
.sbox .ic-face {background-image: url("../images/icons/ic_face_white_24dp_2x.png");}
.sbox .ic-search { background-image: url("../images/icons/ic_search_white_24dp_2x.png"); }
.sbox .ic-call { background-image: url("../images/icons/ic_phonelink_ring_white_24dp_2x.png"); }
.sbox .ic-msg { background-image: url("../images/icons/ic_message_white_24dp_2x.png");}

.sbox-none { border:none; padding:0px;}
button { font-family:estedad,wsans,Verdana; border:none;border-radius:10px; outline:0; cursor: pointer;}
button[disabled] { cursor: not-allowed; }

.submit-code {
    font-size:18px; font-weight:500; color:white; margin:auto; display:block;
    background:rgba(208,2,27,1); width:70%; height:60px; }
.submit-code:hover { background:grey;}
.submit-code:active { background: red;}
.submit-code:after { background: green;}
.submit-code:focus { background: #607D8B; outline:0;}




.sbox > div { font-family:estedad,Verdana; font-size:20px; width:85%; height:100%;  }
.sbox input[type='text'] { color:#616161; font-family:estedad,Verdana; font-size:20px; width:85%; height:100%; border:none;  }


.lbox input[type='text'],
.lbox input[type='password'] { color:#616161; font-family:estedad,Verdana; font-size:10px; width:150px; border:1px solid #9E9E9E;
    border-radius:5px; padding:5px; }
.lbox button { padding:5px; width:60px; height:35px; margin-top:5px;}

input::-moz-placeholder { color:#BDBDBD;  text-align:center; direction:rtl; }
input::-webkit-input-placeholder { color:#BDBDBD;  text-align:center; direction:rtl; }
.sbox input:focus { outline: none; }

.footer {
    width:80%;
    background:white;
    font-family: estedad,Kufi,Verdana;
    margin:10px auto;
    /*position:fixed;*/ bottom:0; height:150px;
}

.footer > div {
        position:relative; color:grey;
    box-shadow: 0 0 4px rgba(0,0,0,0.2);
        text-align:center;float:right; width:20%; height:90%;
        background:#ffffff; margin-right:4%;
        padding:5px; border-radius:10px;
}
.footer > div > h3 { margin-top:35px; font-size:20px;}
.footer > div > h4 { margin-top:5px; font-size:14px;}
.footer > div > .ic { width:25px; height:25px; border-radius:10%;}
.footer > div > p { direction:rtl; font-size:12px;}
.footer > div:first-child { font-family: Kufi; border-radius:15px; border:0px solid grey; background:white;}
.footer > div > i { display:inline-block; width:40px;height:40px; position:absolute;
                    top:40px;left:-50px;
}





@media screen and (max-height: 600px) {
    .container { background:white; height:auto;}
    .footer { position:static; height:auto;}
    .nav-menu { display:none;}
    .sbox:first-child { margin-top:20px;}
    .footer > div > h3 { margin-top:15px; font-size:24px;}
    .footer > div > h4 { margin-top:10px; font-size:18px;}


}
@media screen and (max-width: 1200px) {
    .container { /*background:green;*/}

}
@media screen and (max-width: 900px) {
    .container { /*background:blue;*/}
    .nav-head > div { margin-right:5px; padding-left:35px;}
    .nav-head-login { display:none;}
    .nav-head .call-us { display:none; }
    .nav-head .mis { font-size:16px;}
    .nav-head > div:nth-child(3) { margin:0px; float:left;}
    .sbox { margin:20px auto;width:500px;}
    .display-result { width:500px;}
    .wrapper > div { float:none; width:100%;  }
    .footer > div { height:auto;}
    .footer > div > i { left:-40px;}
    .result-pane { width:95%;}
    .result-body > div > * { font-size:8px; padding:3px;}
    .result-body > div { width:98%; margin:3px auto;}
    .result-body > img { position: static; margin:10px auto; margin-left:50px; }
    .nav-head-login { display:none;}
    .nav-login-box { display :none;}
}
@media screen and (max-width: 600px) {
    .container { height:auto;/*background:red;*/}
    .nav-head > div { margin-right:5px;}
    .nav-head .ic { margin-top:2px; margin-right:5px; width:20px; height:20px;}
    .number { font-size : 10px;}
    .nav-head > div:first-child { display:none;}
    .nav-head > div:nth-child(3) { padding-left:5px; display:block;}
    .nav-head .logo-tab { display:block; width:150px;}
    .nav-menu .logo-tab { display:none;}
    .wrapper > div { height:auto; }
    .sbox { width:330px;}
    .display-result { width:500px;}
    .footer { position: static; margin-bottom:20px;}
    .footer > div { float:none; width:90%; margin:10px auto;  padding:10px; height:auto;}
    .footer > div > h3 { margin:0;}
    .footer > div > h4 { margin:0;}
    .footer > div > i { display:none;}
}