:root{ --bg-color-fair:#f9f9fb; --bg-color-white:#fff; --txt-color-normal:#535151; --txt-color-dark:#070707; --color-main:rgb(31, 135, 164); --color-dim-white: #dedede; --color-main-sec: #f76ee4; --withubb-green: #2d5a47; --form-f-size:0.95rem; --page-max-width:1360px;} body { font-family: 'Fira Sans Condensed', sans-serif; margin: 0px; box-sizing: border-box; } .in_post_img{ width: 100%; height: auto; } .in_post_imgwrapper{ position: relative;  max-width: 550px; width: 100%;  box-sizing: border-box;  background-color: #f4f4f4; min-height: 80px; height: auto;  margin: 1rem auto; } .img_detail{ width: 100%; background-color: var(--txt-color-normal); font-size: small; text-align: left; } 
select, #cont_code{ border-radius: 0.3rem; padding: 0.4rem; border: 2px solid var(--color-dim-white); outline: none; font-size: var(--form-f-size); display: block; position: relative; max-width: 100% !important; } 
option{ font-size: var(--form-f-size); padding: calc(var(--form-f-size)+1rem); display: block; color: var(--txt-color-normal); border: 2px solid var(--color-dim-white); outline: none; background-color: var(--bg-color-white); position: relative; box-sizing: border-box !important; max-width: 90% !important; } #form-wrap{ width: 99%; max-width: 750px; padding: var(--form-f-size); height: auto; box-sizing: border-box; display: flex; min-height: 550px; margin: auto; border-radius: var(--form-f-size); flex-direction: column; gap: var(--form-f-size); }  #box_holder{display: flex; box-shadow: 0px 0px 5px #c3c2c2; margin:auto; border-radius: 0.5rem; padding: 0.5rem; width: 100%; flex-direction: column; max-width:750px; height: auto; justify-content: center; align-items: center; box-sizing: border-box;}
side_bar_content
#frm_btn{
    background-color: var(--bg-color-white);
    border: 2px solid var(--color-main);
    position: relative;
    margin: auto;
    height: fit-content;
    box-sizing: border-box;
    color: var(--txt-color-normal);
    cursor: pointer;
    padding: 5px 35px;
    transition: all 0.7s;
    font-size: 1rem; }
#frm_btn:hover, #frm_btn:active, #frm_btn:focus{
    background-color: var(--color-main);
    color: var(--color-dim-white); }
    input{border: 2px solid #c3c2c2 !important;}
.warn_highlight{ border: 2px solid #be5b36 !important; color: #be5b36 !important; } 
.frm_inner_wrap{ width: 100%; overflow-x: auto !important; } 
.edit_box, .txt_box{
    min-height: 38px;
    height: auto;
    width: 100%;
    display: block;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    box-sizing: border-box;
    background-color: #fcfcfc;
    border-radius: 5px;
    text-align: left !important;
    /* border: 2px solid #c3c2c2 !important; */
    outline: none;
    overflow-y: auto;
    color: var(--txt-color-normal); } 
/* .txt_box{ border: 2px solid var(--color-dim-white); } */
.frm_inner_wrap span{ text-align: left; font-weight: bolder; color: var(--txt-color-normal); }
.frm_inner_wrap span{ text-align: left; font-weight: bolder; color: var(--txt-color-normal); } 
#form-wrap{ width: 100%; padding: var(--form-f-size); height: auto; box-sizing: border-box; display: flex; margin: auto; border-radius: var(--form-f-size); gap: var(--form-f-size);
flex-direction: column; } /* form styling end.. */
.s-res-links{ text-decoration: none; display: block; width: auto; max-width: 90%; padding: 0.4rem; position: relative; box-sizing: border-box; margin: 0.5rem auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .s-res-links:active, .s-res-links:hover, .s-res-links:focus{ color: var(--color-main); } #s-result-box{ display: block;  position: relative;  background-color: var(--bg-color-white);  word-break: break-all; height: auto; width: 80%;  max-width: 400px;  padding: 0rem;  top: -10px;  z-index: 200;  margin: auto;  box-sizing: border-box;  font-size: 1.1rem; color: var(--txt-color-normal); border-radius: 10px; box-shadow: 0px 10px 10px rgb(158, 158, 158); transition: .3s; } .all_ico{ width: 20px; height: 20px; display: inline-block; box-sizing: border-box; color: inherit; } #notif_box { position: fixed; height: auto; background-color: #ced2d3; color: var(--txt-color-normal); z-index: 300; display: none; left: 0px; width: 100%; min-width: 200px; padding-bottom: 50px; bottom: 1px; box-sizing: border-box; padding-top: 7px; text-align: center;}  #cancl:hover, #cancl:focus, #cancl:active{background-color:whitesmoke;}  #ok{ height: auto; width: 100px; border-radius: 4px; padding: 10px; left: 20px; position: relative; margin:auto; bottom: 4px; cursor: pointer; font-weight: bold; font-size: 14px; color: #ddccff; background-color: var(--color-main); box-sizing: border-box; border: none; outline: none; } h1{ position: relative; font-family: 'Acme', sans-serif; } .page-text{ color: var(--txt-color-normal); box-sizing: border-box; text-align: left; font-family: 'Roboto Condensed', sans-serif;  font-size: 1.2rem; line-height: 2; max-width: 99%;  padding: 10px; } .data_info_wrapper{ display: flex;  flex-wrap: wrap;  position: relative;  box-sizing: border-box;  width: 100%;  max-height: 450px;  height: auto;  justify-content: center; align-items: center;  margin-bottom: 2rem; } .data_info_img_wrap{ height: 450px;  overflow: hidden;  box-sizing: border-box;  width: 50%;  display: flex; justify-content: center; align-items: center; } .data_info_box{ display: flex; align-items: flex-start; width: 50%;  left: -40px; flex-direction: column; position: relative; background-color: var(--bg-color-white); border-radius: 1rem; box-shadow: 0px 0px 20px rgb(186, 185, 185); box-sizing: border-box; padding: 2rem; overflow: hidden; max-width: 90%; cursor: default; } .data_info_header{ font-weight: 600;line-height: 1.1; font-size: 1.6rem; } .n-letter-btn{ font-size: large;  font-weight: bolder;  margin-top: 1rem; background-color: var(--color-main);  color: var(--bg-color-white);  padding: 7px 1.4rem;  border-radius: 5px; cursor: pointer; transition: all .5s; }.n-letter-btn:active, .n-letter-btn:hover, .n-letter-btn:focus{ background-color: #08a9d6; } .news-letter-form{ display: block;text-align: left; position: relative;  min-width: 70%;  width:280px;  padding: 10px;  border-radius: 10px;  box-sizing: border-box;  align-self: flex-start; height: 40px;  border: 2px solid #868585; cursor: text; } #search_box_wrap{ display: flex;  background-color: transparent;  z-index: 200;  max-width: 550px;  right: 1rem;  width: 0px; height: 40px;  position: absolute;  justify-content: center;  align-items: center; box-sizing: border-box; overflow: hidden; transition: all .5s; } #search_field{ height:32px; width: 100%; min-width: 100%; overflow: hidden; color: var(--color-main3); box-sizing: border-box; background-color: rgb(224, 224, 224); Padding-left: 0.5rem; padding-right: calc(0.5rem + 60px); font-size: 18px; z-index: 140; border-radius: 8px; outline: none; border: none; transition: .5s; } #submit{ height:28px; width: 60px; position: absolute; box-sizing:border-box; display:block; border: none; cursor: pointer; border: 1px solid var(--color-main3); right: 2px; top: 2px; z-index: 150; border-radius: 6px; outline: none; } 

#search{ display: flex; justify-content: center; align-items: center; position: relative; background-color: transparent; width: calc(100% - 1rem); box-sizing: border-box; margin-right: 0rem; }  #search_icon_holder{ height:30px; width: 30px; overflow: hidden; box-sizing:border-box; display:block; background-color: var(--bg-color-fair); border-radius: 15px; transition: .3s; z-index: 201; cursor: pointer; } #search_icon_holder:hover, #search_icon_holder:active, #search_icon_holder:focus{ background-color: var(--white-hovercl); } #src-holder{ height: 100%;  padding: 3px;  box-sizing: border-box;  color: var(--txt-color-dark); width: 100%;  background-color: inherit;  display: inline-block;  box-sizing: border-box; } #src-and-sd-holder{  display: flex;  height: 40px;box-sizing: border-box;  position: absolute;  right: calc(1rem + 8px);background-color: inherit;justify-content: center;align-items: center  } #s_line{ display: none; position: absolute; width: 300px; height: 1px; background-color: var(--lighter-black); bottom: 2px; right: 7px; } #s_cover{ position: fixed; height: 100%; width: 100%; background-color: #f9f4f44d; left: 0px; display: none; top: 0px; opacity: 0.9; z-index: 100; } #side_bar_content{ position: fixed; height: 100%; width: 300px; box-sizing: border-box; max-width: 80%; background-color: var(--color-main); left: -110vw; top: 0px; padding: 0px; font-size: x-large; padding-left: 1rem; font-weight: bolder; text-transform: capitalize; box-sizing: border-box; overflow: hidden; display: block;  z-index: 200; transition: .36s; } .side_bar_article{ text-decoration: none; color: #e4fafa; height: 50px; margin-bottom: 300px; width: 100%; z-index:100; box-sizing: border-box;  text-decoration: none; } .side_bar_he{ margin: 18px; box-sizing: border-box; font-size: 1.1rem; height: fit-content; padding-top: 4px; overflow: hidden; color: #e4fafa; transition: .3s; } .side_bar_he:hover, .side_bar_he:active, .side_bar_he:focus{ color: #b4f8f8; transform: scale(0.9); } #side_bar{ height: 40px; display: none; width: 40px; outline: none; border-radius: 20px; background-color: var(--bg-color-fair); box-sizing: border-box; transition: .3s; z-index: 205; cursor: pointer; } #side_bar:hover, #side_bar:active, #side_bar:focus{ background-color: #e6e3e3; } #sb_icon1{ position: relative; display: block; height: 4px; width: 25px; background-color: #888686; margin: 10px auto 2px auto; border-radius: 2px; transition: .3s; } #sb_icon2{ position: relative; display: block; height: 4px; width: 25px; background-color: #888686; margin: 4px auto 2px auto; border-radius: 2px; transition: .3s; } #sb_icon3{ position: relative; display: block; height: 4px; width: 25px; background-color: #888686; margin: 4px auto 10px auto; border-radius: 2px; transition: .3s; } #cover{ position: fixed; height: 100%; width: 100%; background-color: #2b2b692f; left: 0px; display: none; top: 0px; opacity: 0.9; z-index: 80;} #sidebar_cont{ position: absolute; width: 100%; height: auto; bottom: 70px; font-size: medium; font-weight: 50px; text-align: center; background-color: transparent; left: 0px; } .sidebar_icons{ position: relative; display: inline-block; background-color: transparent; width: 30px; padding-top: 5px; height: 25px; margin: 5px 7px 5px 7px; } 


#base_header { position: fixed; width: 100%; height: 70px; z-index: 100; background-color: var(--bg-color-white); right: 0px; left: 0px; top: 0px; transition: .3s; } #pg-top-img{ width: 100%; height: auto; } #site_name{ height: 50px; width: auto;  display: flex;  justify-content: center;  align-items: center; font-size: 1.7rem !important; font-style: italic; font-family: 'Gill Sans', 'Akronim', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; margin-left: 0rem; font-weight: bold; color: var(--color-main); transition: .3s; } #st_icon{ height: 50px;  width: 50px; display: inline-block; background-color: transparent; width: auto; } #sb-sn-box{ display: flex; box-sizing: border-box; height: 100%; justify-content: center; align-items: center; margin-left: 1rem; background-color: transparent; } .my_nav_links {text-transform: capitalize; position: relative; width: fit-content; display: inherit; font-size: 1.1rem; font-weight: lighter; height: 100%; overflow: hidden; padding: 10px; white-space: nowrap; text-overflow: ellipsis; z-index: 31; margin: 0px 5px 0px 5px; color: var(--txt-color-normal); background-color: transparent; border: none; outline: none; box-sizing: border-box; cursor: pointer; } .nav_a_tag { text-decoration: none; color: #555555; } .my_nav_links:hover, .my_nav_links:active, .my_nav_links:focus{ color: var(--color-main); } #my-nav-hug{ position: relative;  width: 100%;  display: flex; align-items: center; justify-content: flex-start; background-color: transparent;  height: 70px; box-sizing: border-box; margin: auto;  max-width: var(--page-max-width); } #my-navbar { z-index: 30; background-color: transparent; top: 0px;  display: flex; justify-content: space-evenly; height: 70px; margin-left: 1rem; gap: 1rem; padding: 0px 1rem; width: auto; box-sizing: border-box; }  

#my_sect_body{ margin: auto; display: block; position: relative; width: 100%; height: auto; text-align: center; background-color: var(--bg-color-white); left: 0px; padding: 0px; box-sizing: border-box;} 

#page-wrap{ width: 100%; box-sizing: border-box; display: flex;  gap: 2rem; max-width: var(--page-max-width); padding: 0px 1rem; flex-direction: column; align-items: center; margin: auto; position: relative; } article{ background-color: inherit; } a{ text-decoration: none; color: inherit; } 

#page-header{ position: relative; width: 100%; left: 0px; height: auto; box-sizing: border-box; text-align: left; font-size: xx-large; margin: 1rem auto; color: #535151; padding: 1rem 0rem 0rem 1rem; display: block; } i{ color: #5f5f5f; font-size: smaller;  font-weight: bolder; display: block; text-align: left; padding: 0px 0px 0.4rem 1.2rem; position: relative; } h2{ box-sizing: border-box; margin: 2.4rem auto 0.3rem auto; } #direction-wrap{ position: relative; display: flex; background-color: var(--bg-color-white); font-weight: bolder; font-size: 13px; box-sizing: border-box; gap: 0.6rem; flex-wrap: wrap; justify-content: left; align-items: center; margin: 1rem; color: var(--color-main); }  #dir-wrap-cnt{ position: relative; display: flex; background-color: transparent; font-weight: bolder; font-size: 13px; box-sizing: border-box; gap: 0.6rem; justify-content: center; align-items: center; color: var(--color-main);} .hidden-line{ visibility: hidden; }.line{ width: 95%; height: 2px; box-sizing: border-box; display: block; margin: 1rem auto; background-color: #d6d5d5; } .stk_box{ position: sticky; top: 80px; width: 100%; box-sizing: border-box; height: auto; display: block; background-color: inherit; } #direction-wrap{position: relative; display: flex; font-weight: bolder; font-size: 13px; box-sizing: border-box; width: 100%; max-width: var(--page-max-width); margin: 1rem auto 0px auto; gap: 0.6rem; flex-wrap: wrap; justify-content: left; align-items: center; color: var(--color-main); } .cont-hd{ position: relative; width: 100%; left: 0px; line-height: 1.2; height: auto; box-sizing: border-box; text-align: left; font-size: 1.6rem; margin: 2rem auto 0.5rem 0rem; color: #666464; padding: 0rem; display: block; } .txt{ max-width: var(--page-max-width); margin-top: 0px; color: #535151; line-height: 1.6; font-size: 1rem;  } #page-txt{ padding: 0rem;  line-height: 1.6;  text-align: left;  font-family: 'Roboto Condensed', sans-serif;  font-size: 1rem;  max-width: 100%;  box-sizing: border-box; color: #535151; } #page-hd{ position: relative; width: 100%; left: 0px; height: auto; box-sizing: border-box; max-width: 600px; text-align: left; font-size: 2.3rem; line-height: 1.2; margin-top: 0px; color: #535151; display: block; } #page-top-wrap{ position: relative; display: flex; width: 100%; height: 300px; max-height: 300px !important; justify-content: center; align-items: center; background-color: saddlebrown; left: 0px; margin: auto; flex-direction: column; gap: 1rem; } #page-content{ display: block; box-sizing: border-box; position: relative; margin: auto; width: 100%; max-width: var(--page-max-width); height: auto;} .bg-page-hd{ position: relative; width: 100%; left: 0px; height: auto; box-sizing: border-box; font-weight: 900; width: 100%; margin: auto; text-align: center; background-color:transparent; font-size: xxx-large; margin: 1rem auto; color: #e1e1e1; padding: 1rem 0rem 0rem 1rem; display: block; } 

#pg-tp-img{ width: 100%; height: auto; } #page-top-imghug{display: flex;position: absolute;overflow: hidden;height: 100%;width: 100%; left: 0px;top: 0px;box-sizing: border-box;justify-content: center;align-items: center; background-color: #2c2c2c;  } #page-top-imghug::after{ content: ''; position: absolute; display: block; top: 0px; left: 0px; background-color: #000000; width: 100%; height: 100%; opacity: .7; } .st_btn{ width: auto; background-color: #31859c; color: var(--bg-color-white);  font-size: 1.1rem;  font-weight: bolder; padding: 0.4rem 3.5rem; border-radius: 5px; box-sizing: border-box; height: auto; transition: .4s; display: flex; justify-content: center; align-items: center; align-self: center; margin: auto; cursor: pointer; } .st_btn:active, .st_btn:hover, .st_btn:focus{ background-color: #3ba1bdf3; } @media screen and (max-width: 950px){#my-navbar{display: none; } #side_bar{ display: block;} } @media screen and (max-width: 680px) { #pg-top-img{ width: auto; height: 100%; } } @media screen and (max-width:550px){ #direction-wrap{ padding-left: 1rem;} .bg-page-hd{ font-size: xx-large; padding: 0.5rem 1.5rem; line-height: 1.2; } .data_info_wrapper{ width: 100%;  max-width: 100% !important; max-height: none;  justify-content: center; align-items: center;  flex-direction: column; box-sizing: border-box; } .data_info_img_wrap{ width: 100%; } .data_info_box{ align-items: center; width: 88%;  max-width: none; left: auto; top: -60px; padding: 1rem; }.news-letter-form{ margin: auto;  width: 80%;  align-self: center; } .data_info_header{ font-weight: 700; font-size: 1.4rem; }  } @media screen and (max-width:450px){ #pg-tp-img{ width: auto; height: 100%; } .njiko-box-title{ -webkit-line-clamp: 2; -webkit-box-orient: vertical; height: 65px; font-size: 1.05rem; margin: 3px auto 0px 0px; } #search_field{ max-width: 82%; } } @media screen and (max-width:282px){ body{ word-break: break-all; } .hidden-line{  display: none !important; } #page-header{  margin: 0px !important; } .bg-page-hd{ font-size: 1.2rem; padding: 1rem; word-wrap: normal;  word-break: keep-all; box-sizing: border-box; } i{ font-size: 12px !important; padding-left: 0px !important; } #_nm{font-size: 1.3rem;} } @media screen and (max-width:225px){ #_nm{display: none;} } @media screen and (max-width:150px){ .bg-page-hd{ word-break: break-all; } } @media screen and (max-width:570px){ option{ font-size: 0.8rem;} } @media screen and (max-width:290px){ :root{ --form-f-size:0.6rem; } .frm_inner_wrap span{ font-size: 0.7rem;} .edit_box { min-height: 0px; } #form-wrap{ width: 100%;} #frm_btn{ padding: 0.1rem 1rem; font-size: var(--form-f-size); }}