html, body { font-family: 'Varela Round', sans-serif !important; overflow-x: hidden;    font-size: 14px;}
body {margin: 0px; line-height: 1.42857143; color: #333; background-color: #fff;}

header {background-color: rgb(15, 20, 25); color: white; display: flex; justify-content: space-between; align-items: center; padding: 10px 20px;  }
#logo {font-size: 24px; font-weight: bold;}
#logo a {color: #ffffff; text-decoration: none;}

/* Dark Theme */
        body.dark {background-color: #1a1a1a; color: #ffffff;}
        .switch {position: relative; display: inline-block; width: 40px; height: 20px;}
        .slider {position: absolute;cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius: 20px; transition: 0.4s;}
        .slider:before {position: absolute; content: ""; height: 16px; width: 16px; left: 2px; bottom: 2px; background-color: white; border-radius: 50%; transition: 0.4s; }
        input[type="checkbox"] {display: none; }
        input[type="checkbox"]:checked + .slider { background-color: #2196F3;}
        input[type="checkbox"]:checked + .slider:before { transform: translateX(20px);}


 /* font + icon */

@font-face {
  font-family: 'FontAwesome';
  src: url('font/fontawesome-webfont.woff2') format('woff2'),
       url('font/fontawesome-webfont.woff') format('woff');
  font-weight: normal;  font-style: normal;  font-display: swap;}

.fa { display: inline-block;
  font-family: FontAwesome; font-style: normal;  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;}

.fa-search::before {content: "\f002";}
.fa-eye::before {content: "\f06e"; }
.fa-map-marker::before { content: "\f041";}
.fa-arrow-up::before { content: "\f062";}
.fa-comment::before {content: "\f075";}
.fa-thumbs-up::before {content: "\f087";}
.fa-copy::before {content: "\f0c5";}

/* @font-face rule for main text font (e.g., Varela Round) */

@font-face {
  font-family: 'Varela Round';
  src: url('font/varela-round.ttf') format('truetype');
  font-weight: normal;  font-style: normal; font-display: swap;}

 /* menu */

#menu {display: flex; gap: 20px; align-items: center;}
#menu ul {margin: 0; padding: 0; list-style: none;}
#menu ul li {padding: 0; margin: 0; display: inline;}
#menu ul li a { float: left; display: block; height: 35px; width: 115px; margin: 0; padding: 8px 0 0 0; text-align: center; font-size: 14px; text-decoration: none; color: #fff;  font-weight: bold; outline: none;}
#menu li a:hover,#menu li .current {color: #333333; background: url(../images/menu_hover.png) no-repeat top;}
#menu-toggle {  display: none;  font-size: 24px;  cursor: pointer;}

.dropdown {  float: left;  overflow: hidden;}
.dropdown-content {  display: none; position: absolute;  background-color: rgb(15, 20, 25); min-width: 160px;  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);  z-index: 1;}
.dropdown:hover .dropdown-content {  display: block;}

/* end of menu */

.btn-copy { background-color: #eeeee; color: rgb(15, 20, 25); padding: 5px 10px; font-size: 15px; border-radius: 12px; border: 1px rgb(15, 20, 25); cursor: pointer;}
.btn-copy:hover { background-color: rgb(29, 155, 240);}

.btn-close { background-color: #dc3545; border-color: #d43f3a; color: #fff; padding: 18px 15px; font-size: 18px; font-weight: 600; border-radius: 4px; border: 1px solid transparent; cursor: pointer;}
.btn-close:hover { background-color: rgb(15, 20, 25);}

.btn-one { background-color: #5cb85c; border-color: #4cae4c; color: #fff; padding: 18px 15px; font-size: 18px; font-weight: 600; border-radius: 4px; border: 1px solid transparent; cursor: pointer;}
.btn-one:hover { background-color: rgb(29, 155, 240);}
.btn-one a {color: inherit; text-decoration: none;}
.btn-one a:hover {color: inherit;}

.btn-two { background-color: #f0ad4e; border-color: #eea236; color: #fff; padding: 18px 15px; font-size: 18px; font-weight: 600; border-radius: 4px; border: 1px solid transparent; cursor: pointer;}
.btn-two:hover { background-color: rgb(29, 155, 240);}
.btn-two a {color: inherit; text-decoration: none;}
.btn-two a:hover {color: inherit;}


.breadcrumb-wrap {margin-left: 40px; margin-top: 0px; margin-bottom: -10px}
.breadcrumb-wrap>ul {list-style-type: none; padding: 0; overflow: auto}
.breadcrumb-wrap>ul>li {padding-left: 30px; position: relative; float: left; height: 28px; line-height: 28px; transition: all ease .2s; background-color: #f6f6f6}
.breadcrumb-wrap>ul>li:not(:last-child) { padding-left: 25px}
.breadcrumb-wrap>ul>li>a {color: #005882;    display: block;    position: relative;    text-align: center;    padding: 0;    text-decoration: none;    transition: all ease .2s}
.breadcrumb-wrap>ul>li.current,.breadcrumb-wrap>ul>li.current:after {background-color: rgb(15, 20, 25)}
.breadcrumb-wrap>ul>li.current>a {cursor: default;    color: #fff}
.breadcrumb-wrap>ul>li:after {    content: '';    display: inline-block;    width: 17px;    height: 100%;    background-color: #f6f6f6; border-top-right-radius: 15px; border-bottom-right-radius: 15px; position: absolute;    top: 0;    right: -20px;    z-index: 110;    border-right: 3px solid #f6f6f6;    overflow: hidden;    transition: all ease .2s}
.breadcrumb-wrap>ul>li>a>svg {fill: rgb(15, 20, 25); vertical-align: middle; margin-right: 5px;margin-bottom: 4px;display: inline-block}
.breadcrumb-wrap>ul>li:hover,.breadcrumb-wrap>ul>li:hover:after {background-color: #d9534f}
.breadcrumb-wrap>ul>li:hover a {color: #fff}
.breadcrumb-wrap>ul>li:hover>a>svg {fill: #fff}


/* content */

   .container { box-sizing: border-box;}
   .sidebar { width: 27%; padding: 10px; float: left; box-sizing: border-box;}
   .content { width: 70%; padding: 0px; float: left; box-sizing: border-box;}

.generat-btn {background-color: #fff; font-weight: 600; font-size: 14px; color: rgb(29, 155, 240);  padding: 8px 0px;  width: 25%;  float: left;  text-overflow: ellipsis;  overflow: hidden;  -webkit-line-clamp: 1;  display: block;  position: relative;  white-space: nowrap;  border-bottom: 1px solid #dddddd5e;  transition: .6s;}
.generat-btn:hover {background-color: rgb(29, 155, 240); color: #fff;}
.generat-btn i,ul > li > a > i {  margin-left: 10px;  margin-right: 10px;  font-size: 16px;  color: rgb(29, 155, 240); transition: .5s; }
a.generat-btn {text-decoration: none !important;}
.generat-btn:hover i { color: #fff}

h2 {	color: #3a5909;	font-size: 20px; padding: 0 0 60px 20px;	background: url(../images/header_bg.png) no-repeat bottom center;}
.text-center { text-align: center;}


#search-tools {padding: 8px 12px; border: 1px solid #d9534f6b; width: 100%}
#search-tools i {position: absolute}
.search-box {position: relative}
.search-box i {position: absolute; right: 15px; color: rgb(15, 20, 25); outline: 0;font-size: 16px; top: 8px; transition: .3s}
input#search-tools:focus + .fa.fa-search {color: #d9534f}

.search-tools-wrap {margin-left: 30px; margin-top: 0px; width: 80%;}
.search-tools-wrap > ul {padding: 0; border-top: 0; max-height: 1260px; overflow: auto; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-direction: column; box-shadow: 0 0 14px rgba(0, 0, 0, .1)}
.search-tools-wrap > ul > li:not(:last-child) { border-bottom: 1px solid #e5e5e580}
.search-tools-wrap > ul > li > a {padding: 6px 10px; display: inline-block; font-size: 16px; width: 100%; line-height: 20px; color: #000; background-color: #fff;  position: relative; transition: .5s;  text-decoration: none;}
.search-tools-wrap > ul > li > a > i { margin-right: 10px;  font-weight: bold; font-size: 20px; color: rgb(15, 20, 25); transition: .5s}
.search-tools-wrap > ul > li.active > a > i {color: #fff}
.search-tools-wrap > ul > li > a:hover, li.cardsideber.active > a  {text-decoration: none; color: #fff; background-color: rgb(15, 20, 25)}

li.cardsideber.active { order: -1}
::-webkit-scrollbar { width: 6px; height: 5px}
::-webkit-scrollbar-thumb { background: rgb(15, 20, 25)}
::-webkit-scrollbar-thumb:hover { background: #555}



.kallal-sticky-container { height: 2600px; position: absolute; top: 600px;}
.Desktop-Sticky { height: 700px;  background-color: #f5f5f5;  position: sticky;}


/* Main content */

.modal {display: none;outline: 0; position: fixed; top: 0; right: 0; bottom: 0;left: 0; z-index: 1050;overflow: auto; width: 100%; height: 100%;background-color: rgba(0, 0, 0, 0.8);}
.modal-content {background-color: #fefefe; text-align: center; margin: 2% auto; padding: 20px; border: 1px solid #888; width: 60%;}
.modal-close {color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer;}
.modal-close:hover,
.modal-close:focus {color: #000; text-decoration: none; cursor: pointer;}
.rank {display: inline-block; min-width: 10px;padding: 3px 7px; font-size: 16px; font-weight: 700; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: middle;  background-color: #777; border-radius: 10px;}


table {border-collapse: collapse; width: 100%; border: 1px solid #777; box-shadow: 3px 6px 9px 0px #777; border-radius: 5px;}
        th, td {text-decoration: none; border: 0.5px solid rgb(15, 20, 25); padding: 6px; text-align: center; font-weight: bold;}
        th {border: 0px solid rgb(15, 20, 25); text-align: center; font-size: 16px;  
        padding: 9px; background-color: rgb(15, 20, 25); color: white;}
        tr:nth-child(even) {background-color: #F9F6F4;}
        .highlight {background-color: #ffeeba !important; transition: background-color 0.9s ease; }

        a {text-decoration: none;color: rgb(29, 155, 240);}
        a:hover { color: rgb(15, 20, 25); }



/* end of content */

/* footer */

#footer { background-color: #333; color: white; text-align: center; padding: 30px 85px; clear: both; }
#toTop {position: fixed;  bottom: 20px;  right: 5px;  width: 30px;  height: 30px; background-color: rgb(15, 20, 25);  color: #fff;  text-align: center;  line-height: 30px;  cursor: pointer;  display: none; /* initially hide the button */}
#toTop.show {display: block; /* show the button when scrolled */}
#toTop i {font-size: 20px; text-align: center; }
			
/* end of footer */

 /* Media query for mobile devices */

@media (max-width: 768px) {
    header {flex-direction: column; text-align: center; }
    #menu {display: none; flex-direction: column; align-items: center; gap:10px; margin-top: 10px;}
    #menu-toggle { display: block; }
    #menu-toggle.clicked + #menu {display: flex; flex-direction: column; }
    .container, .sidebar, .content {width: 100%;} }