/*
Template Name: Enamul.ORG - a Freelance job portal.
    Template URI: https://enamul.org
    Description: This is BEnamul.ORG custom style sheet.
    Author : Md. Enamul Hoque
    Version: 1.0

*/
/* Responsive starts */
/* admin dashboard */
@media only screen and (max-width:768px){
  .login-area{ margin:0px!important; padding:0px!important;}
  .logincontainer{ margin:0px!important; padding:0px!important;}
  .loginindex{ margin:0px!important; padding:0px!important;}
}
@media only screen and (max-width:768px){
  .admincontent{ margin-top:110px!important; padding:0px!important;}
}
/* index */
@media only screen and (max-width:450px){
  /* .login_row{ margin:0px!important; padding-top:5px!important;} */
}
@media only screen and (max-width:600px){
  .counters{ margin:0px!important; padding:10px!important;}
}
@media only screen and (max-width:600px){
  .serviceitems{ margin:0px!important; padding:0px!important;}
}
@media only screen and (max-width:400px){
  .servicecard{ margin:0px!important; padding:0px!important;}
}
@media only screen and (max-width:600px){
  .orderprocess{ margin:0px!important; padding:0px!important;}
}
@media only screen and (max-width:300px){
  /* .stepone.steptwo.stepthree.stepfour{ margin:0px!important; padding:0px!important;} */
}
@media only screen and (max-width:450px){
  .customerscomment{ margin:0px!important; padding:0px!important;}
}
@media only screen and (max-width:450px){
  .customer_comment{ margin:5px!important; padding:2px!important;}
}
@media only screen and (max-width:400px){
  .faq_container{ margin:0px!important; padding:30px!important;}
}
@media only screen and (max-width:400px){
  .accordion-item{ margin:5px!important; padding:5px!important;}
}
@media only screen and (max-width:768px){
  .blogs{ margin:0px!important; padding:5px!important;}
}
@media only screen and (max-width:768px){
  .blogpost{ margin:0px!important; padding:0px!important;}
}

/* user dashboard */
/* @media only screen and (max-width:400px){
  .leftside{ margin:0px!important; padding:0px!important;}
} */
@media (max-width: 576px) {
.leftside{display:none!important;}
}

@media only screen and (max-width:768px){
  .leftside{display:none!important;}
  .rightside{ margin:10px!important; padding:10px!important;}
}


@media only screen and (max-width:600px){
  .pagecontent{ margin-top:60px!important; padding:0px!important;}
}
@media only screen and (max-width:576px){
  .dashitems{ margin:0px!important; padding-top:10px!important;}
}
@media only screen and (max-width:576px){
  .dashitem{ margin:0px!important; padding-top:0px!important;min-width:180px!important;}
}
@media (min-width: 768px) {
  #sidenavbarNav {display: block !important;}
}
@media only screen and (max-width:400px){
  .icontoggler2 {margin:0px!important; padding: 0px!important;}
}

@media (max-width: 575px) {
  .brand {display: none !important;}
  .icontoggler1 {display: none !important;}
}
@media (max-width: 576px) {
  .top-menu {left:0!important;width: 100%!important;
    /* position: fixed!important;
    display: block!important; */
  }

@media (max-width: 450px) {
  .top-menu.toggler {display:flex!important; justify-content: flex-end!important;}
}
@media (min-width: 768px) {
  #topheader {display: block !important;}
}
@media (max-width: 446px) {
  /* .notifications_list {text-align:right !important; width:00px !important;} */
}
@media (max-width: 768px) {
  .addfundform {margin:0px!important; padding: 0px!important;}
}
@media (max-width: 768px) {
  .ticketindex {margin:0px!important; padding: 0px!important;}
}
@media (max-width: 768px) {
  .edit_profile {margin:0px!important; padding: 0px!important;}
}
@media (max-width: 768px) {
  .verify_profile {margin:0px!important; padding: 0px!important;}
}
@media (max-width: 768px) {
  .withdrawalindex {margin:0px!important; padding: 0px!important;}
}






/* CSS starts */
#scrollingitems{
  max-height: 600px;overflow-y: auto;margin:20px;padding:10px;
}
 .leftside{height: 100%;
            /* width: 250px; */
            position: fixed;
            top: 0;
            left: 0;
            background-color: #198754;
            padding: 10px;
            color: white;
            overflow-y: scroll; /* Enable vertical scrolling */
          }


    .rightside{
      margin-left: 230px;
      margin-top:10px;
      padding: 50px;
			background-color: ;
    }

    .top-menu{
      position: fixed;
      display: block;
      margin:0;
      top: 0;
      right: 0;
      left:18.3%;
    background-color: #198754;
      padding: 20px;
      z-index: 999;
    /*color: #fff;*/
    }

    .pagecontent{

    }



    #headline {
      font-size: 2em;
      text-align: center;
      margin-top: 50px;
      background-color: #FF014F;
    }


   .Teamskills {
     display: block;
     height: 100%;
     color: white;
     text-align: right;
     padding-right: 10px;
     line-height: 30px;
     font-weight: bold;
     width: 0%;
     background-color: #FF014F; /* default green */
     transition: width 1s ease-in-out;
   }


    .dashitem{
      padding:10px;
    }
    .servicepagecategories{
      z-index: 999;
    }
  /* .rightside{
	  padding:50px;
	  right:0;
	    display: flex;
    justify-content: space-between;
  } */

  /*------------------New order page-------------------*/
   .service-package {
            display: none;
            margin-top: 10px;
        }

        .service-package label {
            font-weight: normal;
        }

        .category-select:focus + .service-package {
            display: block;
        }

   /*style="min-width: 360px;max-height: 600px;overflow-y: auto;"*/
.notifications {
			margin:10px;
            padding:10px;
            background-color: #D8EEDD;
            min-width: 360px;
            max-height: 400px;
            overflow-y: auto; /* Enable scrolling for the dropdown */
            border: 1px solid #;
            z-index: 1;

        }

/*----Dropdown menu scrolling----*/
     /* Style for the dropdown container for categories*/
        .dropdown-categories {
            position: relative;
            display: inline-block;
        }

        /* Style for the button that triggers the dropdown */
        .dropbtn {
            background-color: #;
            color: white;
            padding: 10px;
            border: none;
            cursor: pointer;
        }

        /* Style for the dropdown content */
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #;
            min-width: 360px;
            max-height: 200px;
            overflow-y: auto; /* Enable scrolling for the dropdown */
            border: 1px solid #;
            z-index: 1;
        }

        /* Style for each dropdown item */
        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        /* Change the color of dropdown items on hover */
        .dropdown-content a:hover {
            background-color: #;
        }

        /* Show the dropdown when hovering over the dropdown container */
        .dropdown-categories:hover .dropdown-content {
            display: block;
        }
		/*End of Categories dropdown menu scrolling */


/*Start Rating Review showing*/
.heading {
  font-size: 25px;
  font-weight:bold;
  margin-right: 25px;
}

.fa {
  font-size: 25px;
}

.checked {
  color: orange;
}

/* Three column layout */
.side {
  float: left;
  width: 15%;
  margin-top:10px;
}

.middle {
  margin-top:10px;
  float: left;
  width: 70%;
}

/* Place text to the right */
.right {
  text-align: right;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* The bar container */
.bar-container {
  width: 100%;
  background-color: #f1f1f1;
  text-align: center;
  color: white;
}

/* Individual bars */
.bar-5 {width: 60%; height: 18px; background-color: #04AA6D;}
.bar-4 {width: 30%; height: 18px; background-color: #2196F3;}
.bar-3 {width: 10%; height: 18px; background-color: #00bcd4;}
.bar-2 {width: 4%; height: 18px; background-color: #ff9800;}
.bar-1 {width: 15%; height: 18px; background-color: #f44336;}

/* Responsive layout - make the columns stack on top of each other instead of next to each other */
@media (max-width: 400px) {
  .side, .middle {
    width: 100%;
  }
  .right {
    display: none;
  }
}
/*End Rating Review showing*/

 /*start add skills on profile*/
   .skill-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
        }
        .skill-tag {
            background-color: #007BFF;
            color: #fff;
            padding: 5px 10px;
            border-radius: 5px;
            cursor: pointer;
        }
        .skill-tag:hover {
            background-color: #0056b3;
        }
		 .skill-tag .close-button {
            margin-left: 5px;
            background-color: #f00;
            color: #fff;
            padding: 2px 5px;
            border-radius: 50%;
            cursor: pointer;
        }


/* Target the datalist */
#datalistOptions {
  background-color: #f2f2f2;
}

#datalistOptions option {
  /* Set the text color */
  color: blue; /* You can change 'blue' to your desired color */
}

 /*End add skills on profile*/

 /*Verify my account page*/
 /* table header fixed
.table {
            max-height: 300px;
            overflow-y: scroll;
        }
.table tr th {
            top: 0;
            background-color: red;
        }

.service-index{ position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;}	*/