@font-face {
    font-family: Roboto;
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: local("Roboto Light"), local("Roboto-Light"), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5vAw.ttf) format("truetype");
}
@font-face {
    font-family: dc;
    src: url(webfont.woff2) format("woff2"), url(webfont.woff) format("woff");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: Mylo;
    src: url(Hello.otf);
}
@font-face {
    font-family: Mylo1;
    src: url(georgia.ttf);
}
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
command,
datalist,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
font,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
keygen,
label,
legend,
li,
meter,
nav,
object,
ol,
output,
p,
pre,
progress,
q,
s,
samp,
section,
small,
source,
span,
strike,
strong,
sub,
sup,
table,
tbody,
tdvideo,
tfoot,
th,
thead,
tr,
tt,
u,
ul,
var {
    background: 0 0;
    border: 0 none;
    outline: 0;
}
input:focus {
    outline: 0;
}
ol,
ul {
    list-style: none;
}
blockquote,
q {
    quotes: none;
}
html{
     --main-background-color:#DCDCDC;
     --beta-background-color:#D3D3D3; 
}
::-moz-selection {
    color: #fff;
    background: var( --main-background-color);
}
::selection {
    color: #fff;
    background: #2d75bb;
}
body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    background-color: #fff;
}
body::-webkit-scrollbar {
    width: 7px;
    background-color: #000;
}
body::-webkit-scrollbar-thumb {
    border-radius: 4px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: var( --main-background-color);
}

body {
    margin: 0;
    padding: 0;
    font-family: Roboto, sans-serif;
    line-height: 18px;
    text-align: justify;
    font-size: 13px !important;
    color: #000 !important;
    background: #fff;
    overflow-x: hidden;
}
td,
tr {
    vertical-align: top;
    overflow: hidden;
}
li,
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
a {
    text-decoration: none;
    outline: 0;
}
a,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span {
    font-family: Roboto, sans-serif !important;
}
header {
    background: url(../IMAGES/banner.jpg) no-repeat center;
    background-size: cover;
    min-height: 477px;
    padding: 20px 15px;
}
header .container-fluid {
    background: rgba(0, 0, 0, 0.4);
}
header .container .col-xl-6 {
    padding: 150px 15px;
}
header .container .col-xl-6:nth-of-type(1) {
    border-right: 5px #fff solid;
}
header .container .col-xl-6:nth-of-type(1) h1 {
    color: #fff;
    font-weight: 700;
    font-size: 30px;
    margin: 0;
}
header .container .col-xl-6:nth-of-type(1) h2 {
    color: #fff;
    font-weight: 100;
    font-size: 20px;
    margin: 0;
}
header .container .col-xl-6:nth-of-type(1) h3 {
    margin: 0;
    padding-top: 10px;
    color: #fff;
    margin-bottom: 20px;
}
header .container .col-xl-6:nth-of-type(1) h3 span:first-child {
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    margin-right: 4px;
}
header .container .col-xl-6:nth-of-type(1) h3 span:last-child {
    font-weight: 100;
    font-size: 18px;
    color: #fff;
    margin-left: 4px;
}
header .container .col-xl-6:nth-of-type(1) a:nth-of-type(1) {
    background: var( --main-background-color);
    padding: 6px 10px;
    font-size: 13px;
    color: #fff;
    text-decoration: none;
}
header .container .col-xl-6:nth-of-type(1) a:nth-of-type(2) {
    background: var( --main-background-color);
    padding: 6px 10px;
    font-size: 13px;
    color: #fff;
    text-decoration: none;
    margin-left: 15px;
}
header .container .col-xl-6:nth-of-type(1) a:nth-of-type(1):hover{
    background: var( --beta-background-color);
}
header .container .col-xl-6:nth-of-type(1) a:nth-of-type(2):hover{
    background: var( --beta-background-color);
}
header .container .col-xl-6 .cli {
    padding: 7px 7px;
    background: #fff;
    width: auto;
    max-width: none;
    flex: 0 0 auto;
}
header .container .col-xl-6 .cli img {
    border: 1px var( --main-background-color) solid;
    padding: 10px; width:300px; height:100px
}
header .container .col-xl-6 .position-absolute {
    top: 20px;
    right: -60px;
    text-decoration: none;
}
header .container .col-xl-6 .position-absolute a {
    border-radius: 25px;
    border: 2px #fff solid;
    padding: 10px 17px;
    color: #fff;
}
.data {
    background: #fafafa;
    position: relative;
}
.data .bg01 {
    background: var( --main-background-color);
    padding: 17px 30px;
    color: #fff;
    border-radius: 7px;
    border: 4px #fff solid;
    position: absolute;
    width: 100%;
    top: -50px;
}
.data .bg01 h1 {
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    color: #000;
}
.data .bg01 h1 i {
    color: #000;
    font-size: 13px;
    padding-right: 7px;
}
.data .bg01 .pl-4 {
    padding-left: 80px !important;
}
.data .bg01 .pl-5 {
    padding-left: 80px !important;
}
.data .bg01 h2 {
    font-size: 14px;
    text-transform: uppercase;
    color: #fff;
}
.data .job-search {
    margin-top: 145px;
    margin-bottom: 40px;
}
.data .job-search h1 {
    font-size: 20px;
    font-weight: 700;
    line-height: 20px;
    color: var( --main-background-color);
}
.data .job-search h2 {
    font-size: 15px;
    font-weight: 100;
    line-height: 20px;
    color: #000;
    margin-top: 19px;
}
.data .job-search input[type="text"] {
    background: #fff;
    border: 0;
    border-radius: 15px;
    height: 42px;
    padding: 0 15px 0 35px; border:01px var( --main-background-color) solid;
}
.data .job-search input[type="text"] + i {
    position: absolute;
    top: 62px;
    left: 30px;
}
.data .job-search .btn {
    background: var( --main-background-color);
    //background: linear-gradient(356deg, var( --main-background-color) 0, var( --beta-background-color) 100%);
    border: 0;
    border-radius: 15px;
    width: 100%;
    height: 42px;
}
.data .job-search .btn:hover{    background: var( --beta-background-color);}
.data .job-list {
    margin-bottom: 40px;
}
.data .job-list .bg {
    background: #fff;
    border-radius: 7px;
    padding: 20px 22px;
    border-left: 2px #1c1b1b solid;
    margin-bottom: 30px;
}
.data .job-list .bg h1 {
    font-size: 17px;
    font-weight: 700;
    line-height: 20px;
    color: #101010;
}
.data .job-list .bg p {
    font-size: 13px;
    color: #919191;
    line-height: 20px;
    margin-bottom: 0;
    padding-bottom: 10px;
}
.data .job-list .bg .off {
    color: #101010;
    font-size: 12px;
    font-weight: 700;
    margin-left: 5px;
}
.data .job-list .bg .on {
    color: #000;
    font-size: 12px;
    font-weight: 700;
    margin-left: 5px;
}
.data .job-list .bg .btn {
   background: var( --main-background-color);
       //background: linear-gradient(356deg, var( --main-background-color) 0, var( --beta-background-color) 100%);
    border: 0;
    border-radius: 7px;
    font-size: 14px;
    color: #fff; margin-right:08px
}
.data .job-list .bg .btn i {
    padding-right: 5px;
}
.data .job-list .bg .btn:hover {
    background: var( --beta-background-color);
    //background: linear-gradient(356deg, var( --main-background-color) 0, var( --beta-background-color) 100%) !important;
    color: #fff;
}
.data .job-list .bg:hover {
    border-left: 2px var( --main-background-color) solid;
    border-radius: 7px;
}
.data .job-list .bg:hover h1 {
    color: var( --main-background-color);
}
footer {
    background: #f5f5f5;
    padding: 19px 12px;
}
#pagination ul>li:first-child .prev{border:0px !important; background:transparent !important; box-shadow:none !important; color:#000 !important; font-weight:700}
#pagination ul>li:first-child span{border:0px !important; background:transparent !important; box-shadow:none !important; color:#000 !important; font-weight:700}
#pagination ul>li:last-child a{border:0px !important; background:transparent !important; box-shadow:none !important; color:#000 !important; font-weight:700}
#pagination ul>li:last-child .active>.prev{border:0px !important; background:transparent !important; box-shadow:none !important; color:#000 !important; font-weight:700}
#pagination ul>li:nth-last-of-type(1) .next{border:0px !important; background:transparent !important; box-shadow:none !important; color:#000 !important; font-weight:700}
#pagination ul .active span{background: var( --beta-background-color) !important; border-color: var( --main-background-color) !important; color:#fff !important}
.soci i{margin: 0px 04px;
    background: #797a7e;
    color: #fff;
    padding: 2px 05px;
    border-radius: 51px;
    height: 24px;
    width: 26px;
    line-height: 21px;
    text-align: center; }
.soci{text-align:right}
.heady h1{color: #fff;
    font-weight: 700;
    font-size: 30px;    
    margin-top: 10px;   
}
.scroll{
    overflow-y:scroll;
    height:60px;
}
@media only screen and (max-width:1200px) {
    .data .bg01 .pl-4,.data .bg01 .pl-5{padding-left:15px !important}
    .data .bg01 .mb-4{margin-bottom:0px !important}
    #btnSearch i {display:none}
     footer .col-xl-10{text-align:center !important}
}
@media only screen and (max-width:768px){
    header{min-height:initial}
    header .container .col-xl-6:nth-of-type(1){border:0px;}
    header .container .col-xl-6{text-align:center}
    header .container .col-xl-6:nth-of-type(1) h2{margin:0; padding:0; }
    header .container .col-xl-6:nth-of-type(1) h3{margin:0px 0; padding-top:0px;margin-bottom:10px}    
    header .container .col-xl-6:nth-of-type(1) {order:2; padding: 28px 15px 40px 15px;}
     header .container .col-xl-6:nth-of-type(2) {order:1; justify-content:center; padding: 64px 15px 0 15px;}
     header .container .col-xl-6:nth-of-type(2){padding-left:15px !important;display: block !important;width: auto;    margin: 0px auto;}
     header .container .col-xl-6:nth-of-type(2) .heady{width:auto; max-width:none; flex:0 0 auto; display:block !important}
      header .container .col-xl-6:nth-of-type(2) .heady h1{display:none}
      .btnLogin{position:relative !important; top:11px;}
     header .container .col-xl-6 .position-absolute a{padding: 7px 12px;}
     header .container .col-xl-6 .position-absolute{right:auto; margin-bottom:15px;}
     header .container .col-xl-6:nth-of-type(2) .col-xl-5{margin-top:15px;}
     header .container .col-xl-6 .cli img{margin-left:08px;}
     .data .bg01{top:-21px; position:relative}
     .data .bg01 .col-xl-4{text-align:center; margin-bottom:10px;}
     .data .job-search{margin-top:15px; text-align:center}
       #btnSearch i {display:inherit}
       #tbl2 .col-xl-12{text-align:center}
       #tbl2 .col-xl-3{margin-bottom:04px;}
        #tbl2 .mt-3{margin-top:4px !important; margin-bottom:08px}
       .soci{text-align:center !important}
       footer .col-xl-10{text-align:center !important}
       .light-theme a, .light-theme span {    padding: 0px 4px !important;    margin: 0 3px 0 0 !important;}
}
#lblSpecialities a{color:white;text-decoration:none;}

.btnLogin{
        border-radius: 25px;
    border: 2px #fff solid;
    padding: 10px 17px;
    color: #fff;
    position: absolute;
    text-transform:uppercase;
}
.btnLogin:hover{color:white;text-decoration:underline;}