body {
  font-family: 'Lato', sans-serif;
}

/*************************
******* Header  CSS ******
**************************/

#header{
  background-color:#1b608c;
  border-bottom: 10px solid white;
  padding:30px 0px;
  height: 120px;
}

.profile{
  display: block;
}

.mobile-profile{
  display: none;
}

.profile .user-icon,
.mobile-profile .user-icon{
  font-size:45px;
  color:white;  
  margin-left:10px;
}

.profile .user-icon .user-info,
.mobile-profile .user-icon .user-info{
  font-size:15px;
  font-family: arial;
  float: right;
  margin-left: 10px;
  margin-top:5px
}

.profile .user-icon .user-name,
.mobile-profile .user-icon .user-name{
  margin:0;
}

.profile .user-icon .user-role,
.mobile-profile .user-icon .user-role{
  padding-top: 8px;
  font-size:11px;
}

#header .logo {
  text-align: center;
  position: absolute;
  margin-left: 30%;
  margin-top:30px;
}

.mobile_logo{
  display: none;
}

#header .logo img{
  height:110px;
}

#header .menu .navbar {
  display: block !important;
  padding: 0px !important;
}

#header .menu .menu-btn{
  float: right;
}

div#navbarSupportedContent20 {
  width: 100% !important;
}

#header .mr-auto{
  position: absolute;
  margin-top: 50px !important;
  z-index: 999;
  padding-top: 50px;
    width: 100%;
}
  
  /******************************
  ***** Content Section CSS *****
  ******************************/
  
  .contentbody{
    width:100%;
    margin-top:0px;
  }
  
  
  /**** CD HEADER ****/
  
  #cd-header-container{
    background-image: url(../images/cd-head-bg.jpg);
    background-size:cover;
    background-repeat: no-repeat;
    background-position: top center ;
    
  }
  
  .cd-header{
    display: block;
    margin: none;
    padding:none;
    padding:80px 60px 0px 60px;
  }
  
  .cd-header .page-heading{
    color:#d28302;
    text-align: center;
    text-transform: uppercase;
    font-size: 26px;
    font-weight:600;
    padding-bottom: 20px;
  } 
  
  #cd-main-block{
    background:#e5e9ed;
    padding-bottom: 70px;
  }
  
  .clients-details{
    background: white;
    padding:0px 0px;
    display:block;
  }
  
    
    #myTable {
        margin: 0px;
    }
  
    #myTable tbody+tbody{
        border:none;
    }

   #myTable .main-role th{
       border:none;
   }

  .expand-button {
    text-align: right;
  }
  
  .accordion-toggle .expand-button:after
  {
    background:#d28300;
    border-radius: 50px;
    padding: 5px 6px;
    cursor: pointer;
    padding: 6px 13px;
    font-size: 19px; 
    left:.75rem;
    top: 50%;
    color:white;
    transform: translate(0, -50%);
    content: '-';
    margin:0px;
  }
  .accordion-toggle.collapsed .expand-button:after
  {
    padding: 5.50px 10px;
    padding-bottom: 5px;
    content: '+';
    background: #1b608c;
  }


  /*************************************
  ****** Information Tables CSS ******
  ***********************************/

  .show-info{
    padding:0px !important;
  }

  .show-info .table td{
    width: 50%;
  }
  
  .show-info .table td:nth-of-type(1) {
    width: 30%;
}

  .show-info .form-data input{
    outline: none;
    border: 1px solid lightgray;
    float: right;
    width: 100%;
    font-size: 16px;
    padding: 4px 10px;
  }

  .show-info .form-data input::placeholder{
    font-weight:600;
  }

  .form-data .sc-btns {  
     text-align: right;
     width: 100%;
    margin: auto;
  }

  .form-data .sc-btns .btn-save{
    border: none;
    background: #1b608c;
    color: white;
    padding: 10px 18px;
    text-align: center;
    margin: 20px auto;
    outline: none;
    width: auto;
    float: inherit;
    margin-right: 5px;
  }

  .form-data .sc-btns .btn-cancel{
    border: none;
    background: #d28302;
    color: white;
    padding: 10px 18px;
    text-align: center;
    outline: none;
    text-decoration: none;
    float: right;
    width: 100px;
    cursor: pointer;
    margin-top:20px;
  }

  /***********************
********* CSS *********
***********************/
  
  .copyright{
    width:100%;
    height:100%;
    background-color:#1b608c;
    float:left;
  }
  
  /* Icon 1 */
  
  .animated-icon1, .animated-icon2, .animated-icon3 {
    width: 30px;
    height: 20px;
    position: relative;
    margin: 0px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
    margin-top: 9px;
    }
    
    .animated-icon1 span, .animated-icon2 span, .animated-icon3 span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
    }
    
    .animated-icon1 span {
    background: white;
    }
    
    .animated-icon2 span {
    background: #e3f2fd;
    }
    
    .animated-icon3 span {
    background: #f3e5f5;
    }
    
    .animated-icon1 span:nth-child(1) {
    top: 0px;
    }
    
    .animated-icon1 span:nth-child(2) {
    top: 10px;
    }
    
    .animated-icon1 span:nth-child(3) {
    top: 20px;
    }
    
    .animated-icon1.open span:nth-child(1) {
    top: 11px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
    }
    
    .animated-icon1.open span:nth-child(2) {
    opacity: 0;
    left: -60px;
    }
    
    .animated-icon1.open span:nth-child(3) {
    top: 11px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
    }
    
    /* Icon 3*/
    
    .animated-icon2 span:nth-child(1) {
    top: 0px;
    }
    
    .animated-icon2 span:nth-child(2), .animated-icon2 span:nth-child(3) {
    top: 10px;
    }
    
    .animated-icon2 span:nth-child(4) {
    top: 20px;
    }
    
    .animated-icon2.open span:nth-child(1) {
    top: 11px;
    width: 0%;
    left: 50%;
    }
    
    .animated-icon2.open span:nth-child(2) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    }
    
    .animated-icon2.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    }
    
    .animated-icon2.open span:nth-child(4) {
    top: 11px;
    width: 0%;
    left: 50%;
    }
    
    /* Icon 4 */
    
    .animated-icon3 span:nth-child(1) {
    top: 0px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
    }
    
    .animated-icon3 span:nth-child(2) {
    top: 10px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
    }
    
    .animated-icon3 span:nth-child(3) {
    top: 20px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
    }
    
    .animated-icon3.open span:nth-child(1) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 0px;
    left: 8px;
    }
    
    .animated-icon3.open span:nth-child(2) {
    width: 0%;
    opacity: 0;
    }
    
    .animated-icon3.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 21px;
    left: 8px;
    }
    
    
    .navbar-light .navbar-toggler {
        color: rgba(0,0,0,.5);
       border-color:#00000000; 
        outline: none;
    }
    
    
    .mr-auto, .mx-auto {
        margin-right: auto!important;
        background-color: #1b608c;
        padding: 10px 20px;
        margin-top: 14px;
        /* color: white; */
        
    }
        
       .navbar-light .navbar-nav .nav-link {
        color: rgb(255 255 255) !important;
    }
    
  
  .btn-group-lg>.btn, .btn-lg {
     
      font-size: 17px;
     
  }
  
  .mr-auto{
      
      
      font-size:13px;
  }

  
  
  @media only screen and (max-width: 1045px) {
    
    .contentbody{
      padding:0px;
      background: transparent;
    }
  
  }
  
  @media screen and  (max-width: 991px){   
   
    #header .logo {
      text-align: center;
      position: absolute;
      margin-left: 23%;
      margin-top:30px;
    }
     
    .cd-header{
      padding:80px 0px 0px 0px;
    }
    
}

/******* Min Width Screens ******/
@media (min-width: 992px){

    .container, .container-lg, .container-md, .container-sm {
       max-width: 950px !important;
       min-width: 950px !important;
   }
}
   
   @media (min-width: 768px){
     .container {
       max-width: 720px !important;
     }
   }
   
   @media (min-width: 280px){
  
    #header .container,
    #cd-header-container .container,
    #cd-main-block .container{
      max-width: 100%;
      padding-left: 0px;
      padding-right:0px;
    }
   }

   @media screen and  (max-width: 768px){
 
    #header {
      padding: 30px 30px;
    }
  
    .header-content .col-sm-4 {
      padding: 0px;
    }
  
    .profile {
      display: none;
    }
  
    .mobile-profile{
      display: inline-block;
    }
  
    #header .logo {
      display: none;
    }
  
    .mobile_logo{
      display: block;
      width: 100%;
      margin: auto;
      margin-top: -53px;
      position: absolute;
      z-index: 99999;
    }
  
    #header .mr-auto {
      padding-top: 50px;
      width: 100%;
      margin-top:10px !important;
    }
  
  }

  @media  screen and  (max-width: 575px){

    .profile .user-icon,
    .mobile-profile .user-icon {
      font-size: 45px;
      color: white;
      margin-left: 0px;
    }
  }

  @media  screen and  (max-width: 510px){

    .profile .user-icon,
    .mobile-profile .user-icon{
      font-size: 35px;
      color: white;
      margin-left: 0px;
      padding-top: 7px;
  }
  
    .profile .user-icon .user-info {
      font-size: 15px;
      font-family: arial;
      float: right;
      margin-left: 5px;
      margin-top: 2px;
    }
  
    .profile .user-icon .user-name {
      margin: 0;
      font-size: 14px;
    }
  
    .profile .user-icon .user-role {
      padding-top: 6px;
      font-size: 10px;
  }
  
  }

  @media  screen and  (max-width: 400px){

  .show-info .table{
    font-size:16px;
  }

  .show-info .form-data input{
    font-size: 15px;
  }

  .form-data .sc-btns .btn-save{
    padding: 8px 16px;
    margin-right: 5px;
  }

  .form-data .sc-btns .btn-cancel{
    font-size: 15px;
    padding: 8px 15px;
    width: 85px;
    margin-top:20px;
  }

  }
   
@media screen and (max-height: 450px) {

    #header {
      padding: 30px 15px 30px 15px;
    } 

    .overlay a {font-size: 20px}
    .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
    }
  }
  
  
  
  @media only screen and (min-width: 600px) {
    
    .userselect{
        display:none;
    }
    
  }