.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box;
}

/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
    width: 85%;
    padding: 0;
  }
}

/* For devices larger than 550px */
@media (min-width: 550px) {
 
  .column,
  .columns {
    margin-left: 4%;
  }
  .column:first-child,
  .columns:first-child {
    margin-left: 0;
  }

  .one.column,
  .one.columns {
    width: 4.66666666667%;
  }
  .two.columns {
    width: 13.3333333333%;
  }
  .three.columns {
    width: 22%;
  }
  .four.columns {
    width: 30.6666666667%;
  }
  .five.columns {
    width: 39.3333333333%;
  }
  .six.columns {
    width: 48%;
  }
  .seven.columns {
    width: 56.6666666667%;
  }
  .eight.columns {
    width: 65.3333333333%;
  }
  .nine.columns {
    width: 74%;
  }
  .ten.columns {
    width: 82.6666666667%;
  }
  .eleven.columns {
    width: 91.3333333333%;
  }
  .twelve.columns {
    width: 100%;
    margin-left: 0;
  }

  .one-third.column {
    width: 30.6666666667%;
  }
  .two-thirds.column {
    width: 65.3333333333%;
  }

  .one-half.column {
    width: 48%;
  }

  .first-col {
    margin-left: 0%;
  }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns {
    margin-left: 8.66666666667%;
  }
  .offset-by-two.column,
  .offset-by-two.columns {
    margin-left: 17.3333333333%;
  }
  .offset-by-three.column,
  .offset-by-three.columns {
    margin-left: 26%;
  }
  .offset-by-four.column,
  .offset-by-four.columns {
    margin-left: 34.6666666667%;
  }
  .offset-by-five.column,
  .offset-by-five.columns {
    margin-left: 43.3333333333%;
  }
  .offset-by-six.column,
  .offset-by-six.columns {
    margin-left: 52%;
  }
  .offset-by-seven.column,
  .offset-by-seven.columns {
    margin-left: 60.6666666667%;
  }
  .offset-by-eight.column,
  .offset-by-eight.columns {
    margin-left: 69.3333333333%;
  }
  .offset-by-nine.column,
  .offset-by-nine.columns {
    margin-left: 78%;
  }
  .offset-by-ten.column,
  .offset-by-ten.columns {
    margin-left: 86.6666666667%;
  }
  .offset-by-eleven.column,
  .offset-by-eleven.columns {
    margin-left: 95.3333333333%;
  }

  .offset-by-one-third.column,
  .offset-by-one-third.columns {
    margin-left: 34.6666666667%;
  }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns {
    margin-left: 69.3333333333%;
  }

  .offset-by-one-half.column,
  .offset-by-one-half.columns {
    margin-left: 52%;
  }

  .first-col {
    margin-left: 0%;
  }
}

/* Media Queries
*/
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/

/* Larger than mobile */
@media (min-width: 400px) {
}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {
}

/* Larger than tablet */
@media (min-width: 750px) {
}

/* Larger than desktop */
@media (min-width: 1000px) {
}

/* Larger than Desktop HD */
@media (min-width: 1200px) {
}

/* general */
.clear {
  clear: both;
}
td.shortcode.column-shortcode {
  vertical-align: middle;
}

span.col-shortcode {
  padding: 6px;
  border: 1px solid #eee;
  position: relative;
  cursor: pointer;
  float: left;
  width: 121px;
}
span.col-shortcode:after {
  font-family: dashicons;
  content: "\f105";
  position: absolute;
  right: 0;
  font-size: 18px;
  cursor: pointer;
}
span.text-copied {
  padding-left: 10px;
  float: left;
  padding: 6px;
  color: green;
  display: none;
}
.set-option-label-wrapper {
  margin-bottom: 0.5em;
}

.admin_section_title {
  margin-top: 23px;
  overflow: hidden;
  font-weight: normal;
}

.wp-admin .jOrgChart .node {
  position: relative;
  cursor: move;
}

.wp-admin .jOrgChart .actived.node {
  position: unset;
}

span.ocp-role {
  padding-left: 20px;
}
.ocp-filter-users,
.ocp-uncheck-users {
  padding: 10px 0px;
  border-bottom: 1px solid #dcdcdc;
}
.ocp-uncheck-users {
  margin-bottom: 20px;
}
.user_management > li {
  background: #fff;
  border: 1px solid #e4e4e4;
  text-align: center;
  margin-bottom: 10px;
}

.user_management > li > i.fa.fa-user {
  width: 150px;
  height: 80px;
  color: #505050;
  font-size: 80px;
}

input#save_team_memeber {
  float: right;
}

.user_management li {
  list-style-type: none;
  padding: 5px;
}
.user_management li span.enable_user,
.user_management li h3 {
  float: left;
  margin: 0 0 0 5px;
}
.user_management li h3 a {
  text-decoration: none;
  font-size: 14px;
  font-weight: normal;
}
.user_management img {
  border-radius: 50%;
  max-height: 75px;
}

li.seperator.clear {
  background: transparent;
  border: 0;
  text-align: left;
  padding-top: 10px !important;
}
/*
.user_management li {
    border: 5px solid;
    float: left;
    list-style-type: none;
    margin-left: 17px;
    margin-top: 15px;
    width: 28%;
}
.user_management img{ margin: 10px 0 0 106px;
    text-align: center;}
	.user_management p{text-align:center;}
.user_management a{  background: black none repeat scroll 0 0;
    border: 1px solid;
    color: white;
    padding: 5px;} */

.design_dep {
}

#adddep {
}

#department {
  height: 31px;
  width: 270px;
  margin-top: -1px;
}

.dep_table {
  max-width: 400px;
  padding: 10px 0;
  margin-top: 20px;
}
div#dep_table h3 {
  margin: 0 !important;
  font-size: 15px;
  display: inline-block;
}
div#dep_table > ul > li > span {
  float: right;
}
div#dep_table ul li {
  background: #fff;
  padding: 10px;
}
.current_dep {
  color: #fff;
  background: red;
  border: 0;
  font-size: 11px;
}

.chart-bottom {
  background: #eee;
  padding: 10px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.chart-bottom button {
  margin-left: 5px !important;
  margin-right: 5px !important;
}
.modify_nodes {
  float: left;
  text-align: left;
  padding-bottom: 0;
  margin-right: 25px;
}
.modify_sections {
  float: left;
  clear: left;
}
div#s2id_comboBox,
div#s2id_headBox,
div#s2id_user_dropdown {
  min-width: 150px;
  max-width: 180px;
}
.set_top_level {
  float: right;
  margin-top: -40px;
}
#org_chart-data .inside > h3 {
  text-align: right;
  margin: 0;
  padding-top: 20px;
  padding-right: 50px;
}

#org_chart-data .inside > h3 span.up-arrow.dashicons.dashicons-undo {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  margin-top: -9px;
  font-size: 1.5em;
  font-weight: 300;
  color: #aaa;
  margin-left: 10px;
}

#org_chart-data .inside {
  padding-bottom: 120px;
}
.dep_table table td {
}
/* Header */
.brand {
  color: #e05e00 !important;
  font-family: georgia;
  font-style: italic;
}

/* list stuff */
#org {
  background-color: white;
  margin: 10px;
  padding: 10px;
}

#show-list {
  cursor: pointer;
}

div#chart,
div.orgChart {
  padding-top: 40px;
  padding-bottom: 40px;
  margin-bottom: 80px;
  width: 100%;
}
div#chart {
  overflow-x: auto;
}
/* Custom chart styling */
.jOrgChart {
  /* margin                : 10px;
    padding               : 20px;*/
}

/* Custom node styling */
.jOrgChart .node {
  position: relative;
  box-shadow: 0 0px 1px 0px #aba7a7;
  font-size: 0.9em;
  background-color: rgba(253, 231, 231, 0);
  border: 0px solid white;
  color: #404040;
  padding: 0 0px 3px 0px;
}
.node p {
  font-family: tahoma;
  font-size: 10px;
  line-height: 11px;
  padding: 2px;
}

.jOrgChart small {
  font-style: italic;
  clear: both;
  display: block;
  font-size: 12px;
}

.jOrgChart .node a {
  text-decoration: none;
  color: #333;
  box-shadow: 0 0px 0 0 currentColor;
  border-bottom: 0px;
}

.popup1 h3 small {
  display: block;
  font-style: italic;
  font-size: 16px;
  color: #666;
  font-weight: 400;
  text-transform: capitalize;
}

button.mfp-close {
  font-weight: 100;
  opacity: 1;
}
.popup1 h3 {
  margin-top: 0;
  color: #333;
  font-size: 18px;
  text-transform: capitalize;
}
.popup1 .content1 {
  font-size: 14px;
}

.jOrgChart .popup1 .close1 {
  line-height: 1;
  position: absolute;
  top: -5px;
  right: 3px;
  transition: all 2ms;
  font-size: 29px;
  font-weight: 100;
  text-decoration: none !important;
  color: #000000;
  box-shadow: 0 0 0;
}
.jOrgChart .popup1 .close1:hover {
  color: #e64d4d;
}
.jOrgChart .popup1 .content1 {
  max-height: 30%;
  overflow: auto;
  color: #333;
}
.white-popup {
  position: relative;
  background: #fff;
  padding: 20px;
  width: auto;
  max-width: 500px;
  margin: 20px auto;
}

#print_canvas {
  max-height: 100px !important;
  bottom: 0;
  position: absolute;
  z-index: -1;
}

a.print_chart_front {
  float: right;
}

.chart_saved {
  z-index: 9999;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7);
}

.chart_saved span {
  border-radius: 4px;
  background: #fff;
  width: 200px;
  text-align: center;
  margin: 50vh auto;
  position: relative;
  display: block;
  padding: 10px;
  font-size: 17px;
}

span.oblock {
  font-weight: normal;
  font-size: 13px;
}

.jOrgChart .close {
  position: absolute;
  right: -30px;
  top: 0;
  width: 32px;
  height: 32px;
  opacity: 0.3;
  text-indent: -9999px;
}
.jOrgChart .close:hover {
  opacity: 1;
}
.jOrgChart .close:before,
.close:after {
  position: absolute;
  left: 15px;
  content: " ";
  height: 15px;
  width: 2px;
  background-color: #333;
}
.jOrgChart .close:before {
  transform: rotate(45deg);
}
.jOrgChart .close:after {
  transform: rotate(-45deg);
}

.popup1 .content1 h3 {
  margin: 0 0 10px 0;
  text-transform: capitalize;
}

.popup1 .content1 h3 small {
  font-size: 12px;
  font-style: normal;
  clear: both;
  display: block;
  font-weight: normal;
  margin-top: 5px;
  border-bottom: 1px solid #eee;
  padding-bottom: 3px;
}

.jOrgChart .drop-hover .org_dept {
  line-height: 40px !important;
  border: 2px solid green;
}

tr.draw_lines.user1.level0 {
  display: none !important;
}

.jOrgChart .node {
  max-width: 85px;
}

body.page .node > a:last-child,
body.single .node > a:last-child {
  padding: 0;
  display: block;
}

/* Responsive CSS */

@media all and (max-width: 767px) {
  .jOrgChart .popup1 {
    width: 80%;
  }
  .downarrow.fa.active-child.fa-arrow-up {
    color: #ffaa3a;
  }
  a.print_chart_front {
    margin-bottom: 10px;
  }

  .content a:not(.button) {
    border-bottom: 0px solid #dbdbdb;
  }
  .content table td,
  .content table th {
    border-width: 0 0 0px 0;
    padding: 0;
  }

  .jOrgChart .line {
    height: 15px;
    width: 1px;
  }
  .jOrgChart .node {
    max-width: 85px;
    width: 100%;
  }
  .jOrgChart .node-cell {
    padding: 0;
    border-width: 0 0 0px 0;
  }

  .jOrgChart .downarrow {
    /*background-image: url(../img/down_arrow.png);*/
    height: 30px;
    width: 100%;
    background-repeat: no-repeat;
    background-position: top;
    cursor: pointer !important;
  }

  td.node-container.show_children {
    display: block !important;
    width: 100% !important;
    text-align: left;
    border-top: 1px solid #0000000a;
    padding-top: 5px !important;
  }
  .jOrgChart > table > tbody > tr.org-row > td.node-container.show_children {
    border: 1px solid #f1f1f1;
  }
  .jOrgChart td.node-container {
    display: inline-block;
    padding: 0;
    width: 22%;
    margin-right: 2%;
    margin-bottom: 8px;
  }

  .jOrgChart img {
    height: auto;
  }

  .jOrgChart table tr.draw_lines {
    display: none !important;
  }

  td.node-cell small {
    display: none;
  }

  .jOrgChart table tr.child_box {
    display: block;
    position: relative;
    border: 0px solid #ccc !important;
  }

  .jOrgChart table tr.child_box tr.child_box.showing {
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 11;

    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-row-gap: 10px;
    justify-content: center;
  }

  .jOrgChart table tr.child_box.level-even {
    padding: 10px;
    box-shadow: 0px 0px 0px 1px #00000008;
  }

  .jOrgChart table tr.child_box.level-odd {
  }

  tr.child_box,
  .jOrgChart table tr.child_box tr.child_box_copy.showing {
    display: none !important;
  }
  .jOrgChart > table > tbody > tr.child_box {
    display: block !important;
  }

  .jOrgChart .downarrow {
    cursor: pointer !important;
    z-index: 9999999999999 !important;
  }
}