/*org chart css start */
.chart-bg {
    overflow: auto;
    width: 100%;
}

.chart-bgin {
    width: max-content;
    height: 170px;
}

.chart-bg-in {
    width: max-content;
    height: 510px;
}

.tree ul {
    margin: 0;
    padding: 0;
}

.list-one {
    margin-top: 250px;
}

.treea {
    overflow: auto;
    width: 100%;
}

.treeb {
    overflow: auto;
    height: 350px;
}

.treec {
    overflow: auto;
    height: 500px;
}

.tree {
    /* width: 1650px;  */
    width: 10500px;
}

.tree1 {
    /* width: 1650px;  */
    width: 1000px;
}

.tree ul {
    padding-top: 20px;
    position: relative;
}

.tree li {
    float: left;
    text-align: center;
    list-style-type: none;
    position: relative;
    padding: 20px 0px 0 5px;
}

/*We will use ::before and ::after to draw the connectors*/
.tree li::before,
.tree li::after {
    content: "";
    position: absolute;
    top: 0;
    right: 50%;
    border-top: 2px solid #ccc;
    width: 50%;
    height: 20px;
}

.tree li::after {
    right: auto;
    left: 50%;
    border-left: 2px solid #ccc;
}

/*We need to remove left-right connectors from elements withoutany siblings*/
.tree li:only-child::after,
.tree li:only-child::before {
    display: none;
}

/*Remove space from the top of single children*/
.tree li:only-child {
    padding-top: 0;
}

/*Remove left connector from first child andright connector from last child*/
.tree li:first-child::before,
.tree li:last-child::after {
    border: 0 none;
}

/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before {
    border-right: 2px solid #ccc;
    border-radius: 0 5px 0 0;
    -webkit-border-radius: 0 5px 0 0;
    -moz-border-radius: 0 5px 0 0;
}

.tree li:first-child::after {
    border-radius: 5px 0 0 0;
    -webkit-border-radius: 5px 0 0 0;
    -moz-border-radius: 5px 0 0 0;
}

/*Time to add downward connectors from parents*/
.tree ul ul::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    border-left: 2px solid #ccc;
    width: 0;
    height: 20px;
}

.tree li a {
    padding: 5px 4px;
    text-decoration: none;
    color: #666;
    /* font-family: arial, verdana, tahoma;font-size: 11px; */
    display: inline-block;
    border: 1px solid #63b2d2;
    /* -webkit-border-radius: 5px; */
    /*-moz-border-radius: 5px;*/
}

/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover,
.tree li a:hover+ul li a {
    background: #c8e4f8;
    color: #000;
}

/*Connector styles on hover*/
.tree li a:hover+ul li::after,
.tree li a:hover+ul li::before,
.tree li a:hover+ul::before,
.tree li a:hover+ul ul::before {
    border-color: #94a0b4;
}

/*org chart css end */

a.readmore {
    color: #fff;
    margin-top: 30px;
}

.footer-right {
    border-left: 1px solid #fff;
}

.content-news p {
    color: #fff;
    padding: 15px 40px;
}

.view_header {
    background: #033085;
    line-height: 35px;
    color: #fff;
    padding-left: 10px;
    padding-right: 10px;
}

.views-exposed-form select#edit-field-select-value {
    margin: 10px 0px 10px 0px;
}



.noticeboard_header {
    background: #033085;
    line-height: 35px;
    color: #fff;
    padding-left: 10px;
    padding-right: 10px;
}

.directors-page {
    display: flow-root
}

.directors-page .col-sm-4.views-row {
    float: left;
    text-align: center;
    margin-bottom: 20px;
    padding: 0 9px;
}

.directors-page img {
    width: 100%;
    /* border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 21px;
    border: 2px solid #ffffff; */
    border-radius: 10px;
    box-shadow: -2px 14px 7px -11px rgb(7 41 77 / 43%);
}

.directors-page .views-field-title a {
    background: #0858a7;
    width: 100%;
    display: block;
    color: #fff;
    padding: 10px 4px;
    box-shadow: -2px 14px 7px -10px rgb(7 41 77/45%);
    /* height: 80px; */
}

.views-field.views-field-field-designation {
    background: #0858a7;
    width: 100%;
    display: block;
    color: #fff;
    padding: 5px 4px;
    box-shadow: -2px 14px 7px -10px rgb(7 41 77/45%);
    height: 80px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px
}

.directors-page .views-field-field-image {
    padding: 30px;
    background: #1098d3;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.col-md-4.about-us-01 {
    text-align: justify;
}

.media-relases-page img {
    width: 100%;
    margin: 0px 0px 10px 0px;
}

.career_image {
    margin-bottom: 20px;
}

.new-gif {
    padding-right: 10px;
}

.apprentice_image {
    display: block;
    margin: 0 auto 0;
}

#block-custom-theme-homevideo {
    margin-top: 0;
    display: block;
    height: 320px;
    background: #0858a7;
}

video.video1 {
    margin-top: 0px;
}

/* .submenu {
    display: none;
} */

.submenu .link {
    background-color: #1098d3;
}

table {
    caption-side: top !important;
}

#cboxTitle {
    text-align: center !important;
    margin-bottom: 24px !important;
    padding: 5px !important;
    background-color: #333 !important;
    opacity: 0.75 !important;
    filter: alpha(opacity=75) !important;
    color: #fff !important;
    padding-bottom: 50px;
    min-height: 80px;
}

.photogallery-img {
    display: grid;
}

#nav_accordion {
    width: 100%;
    margin: 0px auto 15px;
    background: rgb(8, 88, 167);
    border-radius: 5px;
    list-style: none;
    padding: 0px;
}

#nav_accordion .nav-link {
    cursor: pointer;
    display: block;
    font-size: 14px;
    color: rgb(255, 255, 255);
    position: relative;
    padding: 15px 8px 15px 45px;
    border-bottom: 1px dashed rgba(214, 239, 252, 0.38);
    transition: 0.4s;
}

#main-menu-state {
	display:none;
}

#nav_accordion a::before {
    content: "\EEAF";
    font-family: remixicon;
    position: absolute;
    left: 18px;
    color: #c2f0ff;
    font-size: 15px;
    line-height: 1.6;
    font-weight: 400;
}

.submenu {
	background-color: #1098d3;
}

.cssvalid a,.qr-code a,.topbar a, .topbar span {
	color: #fff;
}

a.facebook {
color: #fff;
padding-right: 10px;
}

.container_org {
  max-width: 3000px;
  padding: 0 10px;
  margin: 0 auto;
  overflow: auto;
}

.rectangle {
  position: relative;
  padding: 20px;
  
text-decoration: none;
color: rgb(102, 102, 102);
border: 1px solid rgb(99, 178, 210);
border-radius: 5px;
}


/* LEVEL-1 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.level-1 {
  width: 50%;
  margin: 0 auto 40px;
  background: var(--level-1);
}

.level-1::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 25%;
  transform: translateX(-50%);
  width: 2px;
  height: 20px;
  background: var(--black);
}


/* LEVEL-2 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.level-2-wrapper {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.level-2-wrapper:before {
    content: "";
    position: absolute;
    top: -21px;
    left: 7.2%;
    width: 84.3%;
    height: 2px;
    background: var(--black);
}

.level-2-wrapper::after {
  display: none;
  content: "";
  position: absolute;
  left: -20px;
  bottom: -20px;
  width: calc(100% + 20px);
  height: 2px;
  background: var(--black);
}

.level-2-wrapper li {
  position: relative;
}

.level-2-wrapper > li::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 20px;
  background: var(--black);
}



.level-2 {
  width: 70%;
  margin: 0 auto 40px;
  background: var(--level-2);
}

.level-2::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 20px;
  background: var(--black);
}

.level-2::after {
  display: none;
  content: "";
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-100%, -50%);
  width: 20px;
  height: 2px;
  background: var(--black);
}


/* LEVEL-3 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.level-3-wrapper {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 20px;
  width: 90%;
  margin: 0 auto;
}

.level-3-wrapper::before {
  content: "";
  position: absolute;
  top: -20px;
  left: calc(25% - 5px);
  width: calc(50% + 10px);
  height: 2px;
  background: var(--black);
}

.level-3-wrapper > li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -100%);
  width: 2px;
  height: 20px;
  background: var(--black);
}



.level-3 {
  margin: 0 auto 40px;
    background: var(--level-3);
    width: 70%;
	/* margin-bottom: 20px; */
}

.level-3::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 20px;
  background: var(--black);
}

.level-3::after {
  display: none;
  content: "";
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-100%, -50%);
  width: 20px;
  height: 2px;
  background: var(--black);
}




/* LEVEL-4 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.level-4-wrapper {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 20px;
  width: 90%;
  margin: 0 auto;
}

.level-4-wrapper::before {
  content: "";
  position: absolute;
  top: -20px;
  left: calc(25% - 5px);
  width: calc(50% + 10px);
  height: 2px;
  background: var(--black);
}

.level-4-wrapper > li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -100%);
  width: 2px;
  height: 20px;
  background: var(--black);
}

.level-4 {
  margin-bottom: 20px;
  background: var(--level-4);
}


/* LEVEL-5 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.level-5-wrapper {
  position: relative;
  width: 80%;
  margin-left: auto;
}

.level-5-wrapper::before {
  content: "";
  position: absolute;
  top: -20px;
  left: -20px;
  width: 2px;
  height: calc(100% + 20px);
  background: var(--black);
}

.level-5-wrapper li + li {
  margin-top: 20px;
}

.level-5 {
  font-weight: normal;
  background: var(--level-5);
}

.level-5::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-100%, -50%);
  width: 20px;
  height: 2px;
  background: var(--black);
}


/* MQ STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 700px) {
  .rectangle {
    padding: 20px 10px;
  }

  .level-1,
  .level-2 {
    width: 100%;
  }

  .level-1 {
    margin-bottom: 20px;
  }

  .level-1::before,
  .level-2-wrapper > li::before {
    display: none;
  }
  
  .level-2-wrapper,
  .level-2-wrapper::after,
  .level-2::after {
    display: block;
  }

  .level-2-wrapper {
    width: 90%;
    margin-left: 10%;
  }

  .level-2-wrapper::before {
    left: -20px;
    width: 2px;
    height: calc(100% + 40px);
  }

  .level-2-wrapper > li:not(:first-child) {
    margin-top: 50px;
  }
}


/*org chart new css end */


    ol.organizational-chart,
ol.organizational-chart ol,
ol.organizational-chart li,
ol.organizational-chart li>div {
  position: relative
}

ol.organizational-chart,
ol.organizational-chart ol {
  list-style: none;
  margin: 0;
  padding: 0
}

ol.organizational-chart {
  text-align: center
}

ol.organizational-chart ol {
  padding-top: 1em
}

ol.organizational-chart ol:before,
ol.organizational-chart ol:after,
ol.organizational-chart li:before,
ol.organizational-chart li:after,
ol.organizational-chart>li>div:before,
ol.organizational-chart>li>div:after {
  background-color: #b7a6aa;
  content: '';
  position: absolute
}

ol.organizational-chart ol>li {
  padding: 1em 0 0 1em
}

ol.organizational-chart>li ol:before {
  height: 1em;
  left: 50%;
  top: 0;
  width: 3px
}

ol.organizational-chart>li ol:after {
  height: 3px;
  left: 3px;
  top: 1em;
  width: 50%
}

ol.organizational-chart>li ol>li:not(:last-of-type):before {
  height: 3px;
  left: 0;
  top: 2em;
  width: 1em
}

ol.organizational-chart>li ol>li:not(:last-of-type):after {
  height: 100%;
  left: 0;
  top: 0;
  width: 3px
}

ol.organizational-chart>li ol>li:last-of-type:before {
  height: 3px;
  left: 0;
  top: 2em;
  width: 1em
}

ol.organizational-chart>li ol>li:last-of-type:after {
  height: 2em;
  left: 0;
  top: 0;
  width: 3px
}

ol.organizational-chart li>div {
  background-color: #f1f8ff;
  border-radius: 3px;
  min-height: 2em;
  padding: .5em;
  border-radius: 8px;
}

ol.organizational-chart>li>div {
  background-color: #a2ed56;
  margin-right: 1em
}

ol.organizational-chart>li>div:before {
  bottom: 2em;
  height: 3px;
  right: -1em;
  width: 1em
}

ol.organizational-chart>li>div:first-of-type:after {
  bottom: 0;
  height: 2em;
  right: -1em;
  width: 3px
}

ol.organizational-chart>li>div+div {
  margin-top: 1em
}

ol.organizational-chart>li>div+div:after {
  height: calc(100% + 1em);
  right: -1em;
  top: -1em;
  width: 3px
}

ol.organizational-chart>li>ol:before {
  left: inherit;
  right: 0
}

ol.organizational-chart>li>ol:after {
  left: 0;
  width: 100%
}

ol.organizational-chart>li>ol>li>div {
  background-color: #033085;
  color: #fff;
  border-radius: 8px;
  font-size: 14px !important;
}

ol.organizational-chart>li>ol>li>ol>li>div {
  background-color: #2081e1;
  color: #fff;
  border-radius: 8px;
}

ol.organizational-chart>li>ol>li>ol>li>ol>li>div {
  background-color: #73baff;
  border-radius: 8px;
}

ol.organizational-chart>li>ol>li>ol>li>ol>li>ol>li>div {
  background-color: #cce6ff;
  border-radius: 8px;
}


ol.organizational-chart>li>div>span,
ol.organizational-chart>li>ol>li>div>span{
    color: #fff;
}

@media only screen and (min-width:64em) {
  ol.organizational-chart {
    margin-left: -1em;
    margin-right: -1em
  }

  ol.organizational-chart>li>div {
    display: inline-block;
    float: none;
    margin: 0 1em 1em;
    vertical-align: bottom
  }

  ol.organizational-chart>li>div:only-of-type {
    margin-bottom: 0;
    width: calc((100%/1) - 2em - 4px);
    background: #0858a7;
    color: #fff;
    border-radius: 8px;
  }

  ol.organizational-chart>li>div:first-of-type:nth-last-of-type(2),
  ol.organizational-chart>li>div:first-of-type:nth-last-of-type(2)~div {
    width: calc((100%/2) - 2em - 4px)
  }

  ol.organizational-chart>li>div:first-of-type:nth-last-of-type(3),
  ol.organizational-chart>li>div:first-of-type:nth-last-of-type(3)~div {
    width: calc((100%/3) - 2em - 4px)
  }

  ol.organizational-chart>li>div:first-of-type:nth-last-of-type(4),
  ol.organizational-chart>li>div:first-of-type:nth-last-of-type(4)~div {
    width: calc((100%/4) - 2em - 4px)
  }

  ol.organizational-chart>li>div:first-of-type:nth-last-of-type(5),
  ol.organizational-chart>li>div:first-of-type:nth-last-of-type(5)~div {
    width: calc((100%/5) - 2em - 4px)
  }

  ol.organizational-chart>li>div:before,
  ol.organizational-chart>li>div:after {
    bottom: -1em !important;
    top: inherit !important
  }

  ol.organizational-chart>li>div:before {
    height: 1em !important;
    left: 50% !important;
    width: 3px !important
  }

  ol.organizational-chart>li>div:only-of-type:after {
    display: none
  }

  ol.organizational-chart>li>div:first-of-type:not(:only-of-type):after,
  ol.organizational-chart>li>div:last-of-type:not(:only-of-type):after {
    bottom: -1em;
    height: 3px;
    width: calc(50% + 1em + 3px)
  }

  ol.organizational-chart>li>div:first-of-type:not(:only-of-type):after {
    left: calc(50% + 3px)
  }

  ol.organizational-chart>li>div:last-of-type:not(:only-of-type):after {
    left: calc(-1em - 3px)
  }

  ol.organizational-chart>li>div+div:not(:last-of-type):after {
    height: 3px;
    left: -2em;
    width: calc(100% + 4em)
  }

  ol.organizational-chart>li>ol {
    display: flex;
    flex-wrap: nowrap
  }

  ol.organizational-chart>li>ol:before,
  ol.organizational-chart>li>ol>li:before {
    height: 1em !important;
    left: 50% !important;
    top: 0 !important;
    width: 3px !important
  }

  ol.organizational-chart>li>ol:after {
    display: none
  }

  ol.organizational-chart>li>ol>li {
    flex-grow: 1;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 1em
  }

  ol.organizational-chart>li>ol>li:only-of-type {
    padding-top: 0
  }

  ol.organizational-chart>li>ol>li:only-of-type:before,
  ol.organizational-chart>li>ol>li:only-of-type:after {
    display: none
  }

  ol.organizational-chart>li>ol>li:first-of-type:not(:only-of-type):after,
  ol.organizational-chart>li>ol>li:last-of-type:not(:only-of-type):after {
    height: 3px;
    top: 0;
    width: 50%
  }

  ol.organizational-chart>li>ol>li:first-of-type:not(:only-of-type):after {
    left: 50%
  }

  ol.organizational-chart>li>ol>li:last-of-type:not(:only-of-type):after {
    left: 0
  }

  ol.organizational-chart>li>ol>li+li:not(:last-of-type):after {
    height: 3px;
    left: 0;
    top: 0;
    width: 100%
  }
}
.og-div {
	overflow-x: auto;
}

a.facebook,
a.Twitter-new
 {
    font-size: 20px !important;
}