:root {
    --main-body-color: #F2F7F9;    
  --primary-gradient: linear-gradient(to right, #296ef0, #2995f0);
  --primary-color:#308ef2;
  --heading-color:#5f5f5f;
  --stats-color:#3e4b5d;
  --darkblue-icon-color:#2B5884;
  --text-color:#383a40 !important;
  --white-color: #fff;
  --fadewhite-color: rgba(255,255,255,.5);
  --grey-color:#888888;
  --semi-dark-grey: #b6b5b5;
  --shadow-color: 0px 1px 2px 0px rgba(0,0,0,0.32);
  --blue-shadow: 0 5px 30px rgba(48,106,242,.3);
  --main-hover-color: #265eaf;
  --green-color: #1dc86f;
  --green-hover-color: #11840d;
  --light-blue-bg-color: #3575d31a;
  --light-blue-icon-color: #c6ddfe; 
  --main-border-color: #d7dbe0;
  --font-primary: 'HKGrotesk Regular', sans-serif;
  --font-heading-primary: 'HKGrotesk Bold', sans-serif;

}

/* --------------------------------------------
-------------------------------------------- */

h1,h2,h3,h4,h5, h6{
    font-family: var(--font-heading-primary);
    font-weight: bold;
}
h1 {font-size: 2rem;}
h2 {font-size: 1.5rem;}
h3 {font-size: 1.2rem;}
h4 {font-size: 1rem;}
a, p{
    font-family: var(--font-primary);
}
body{
    background-color: var(--main-body-color) !important;
}
.bg-body-light{
     background-color: var(--main-body-color) !important;
}

.form-control {
    background-color: #e2e2e23d;
    border: 1px solid var(--primary-color);
}
.form-control:disabled, .form-control[readonly]{
    background-color: #e2e2e23d!important;
}
.form-control:focus {
    box-shadow: none;
    border: 2px solid #308ef2;
}
.taskbots-nav{
    background: var(--primary-gradient)!important;
}
.navbar-dark .navbar-nav .nav-link {
    color: rgba(255,255,255,0.9);
    font-size: 14px;
    font-weight: 600;
}
.navbar-dark .navbar-nav .nav-link { 
    color: rgba(255,255,255,1);
}
.nav-icon {
    font-size: 15px;
    font-family: var(--font-primary);
    color:var(--heading-color);
    font-weight: 600;
    padding-right: 25px;
}
.navbar-dark .navbar-brand {
    letter-spacing: 2px;
    color: var(--white-color);
    font-size: 21px!important;
    font-weight: 600!important;
}
/*.nav-underline .active:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #00c853;
    height: 3!important;
    opacity: 1;
    -webkit-transition: all .3s;
    transition: all .3s;
}*/
 .megamenu-li {
    position: static;
}
.megamenu {
    position: absolute;
    width: 80%;
    left: 0;
    margin: 0 auto;
    right: 0;
    padding: 15px;
}
.nav-sub-heading{
    padding:.25rem 1.25rem!important;
}
.nav-sub-item{
    font-size: 14px;
    font-weight: 500;
}
.nav-sub-item i{
    font-size:13px;
    color: var(--grey-color);
}
.nav-sub-item:hover i{
    color: var(--primary-color);
}
.navigation{
  padding-top: 10px!important;
  padding-bottom: 10px!important;
}
.nav_categories::-webkit-scrollbar {
  height: 2px; 
  background-color: transparent;
}
.nav_categories::-webkit-scrollbar-thumb:horizontal{
    background-color: transparent;
    border-radius: 10px;
}
.nav_categories:hover::-webkit-scrollbar {
    height: 2px;  
    background-color:transparent
}
.nav_categories:hover::-webkit-scrollbar-thumb { 
    background-color:#999
}
.top-hom-header {
    background: linear-gradient(to bottom, #000000d1, #000c), url(../images/search_bots.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.main-search-box {
    position: relative;
    border-radius:0;
    height:48px;
    font-size: 1rem;
    line-height: 1;
    border:0;
}
.accordion{
  margin-top: 10px;
  margin-bottom: 10px;
}
.accordion:after {
    content: '';
    border-bottom: 3px double #ddd;
    display: block;
    position: relative;
    top: 0px;
}
.acordion_link {
    width: 100%;
    background: #fafafa;
    font-size: 20px!important;
    text-align: left!important;
    color: #222!important;
    text-decoration: none!important;
    text-transform: uppercase;
}

.textarea_box {
    background-color: var(--white-color);
    padding: 10px;
    margin-bottom: 10px;
    box-shadow:0 .125rem .25rem rgba(0,0,0,.075)!important;
    border-radius: .25rem!important;
}
.image-section{
  filter: grayscale(100%);;
}
.image-section:hover{
  filter: grayscale(0%);;
}

.list-group-item {
    font-size: .87rem!important;
    font-weight: 500!important;
    font-family: var(--font-primary);
    color: var(--text-color)!important;
    border:0;
}

/*--------------------------------------------------------------
# Services
--------------------------------------------------------------*/  

.services  .category_heading {
    font-family: var(--font-heading-primary);
    word-spacing: 5px;
    text-align: center;
    font-weight: 700;
    color: var(--heading-color);
}

.services  .category_heading span {
    color: var(--heading-color);
}

.services .description {
    line-height: 1.6;
    font-size: 14px;
    font-family: var(--font-primary);
    color: var(--text-color);
    padding: 0 40px;
    text-align: center;
    margin-bottom: 35px;
    font-weight: 400;
}

.services {
  padding-bottom: 30px;
}

.services .icon-box {
  margin-bottom: 0px;
  text-align: center;
}

.services .icon {
  display: flex;
  justify-content: center;
}

.services .icon i {
    width: 60px;
    height: 60px;
    margin-bottom: 10px;
    background: var(--white-color);
    border-radius: 20%;
    transition: 0.5s;
    color: var(--primary-color);
    font-size: 22px;
    overflow: hidden;
    line-height: 21px;
    padding-top: 20px;
    box-shadow: var(--shadow-color);
}

.icon-box:hover .icon i {
  box-shadow: var(--blue-shadow);
}
.icon i:hover{
  background: var(--primary-color);
  color: var(--white-color);
}
.services .title {
  font-weight: 500;
  margin-bottom: 15px;
  font-size: 12px;
  position: relative;
  text-align: center;
  padding-bottom: 15px;
  font-family: var(--font-primary);
}
.services .title a {
    color: var(--text-color);
    font-family: var(--font-primary);
    text-decoration: none;
    font-weight: 500;
    font-size: .87rem;
    cursor: pointer;
    transition: 0.3s;
}
.services .title:hover a {
  color: var(--primary-color)!important
}
.services .title::after {
  content: '';
  position: absolute;
  display: block;
  width: 50px;
  height: 2px;
  /*background: #428bca;*/
  bottom: 0;
  left: calc(50% - 25px);
}
.sidebar-title{
  font-weight: 500;
  font-size: 16px!important;
  position: relative;
  padding-bottom: 15px;
  text-align: center;
  /*background: #333!important;*/
  background: var(--primary-color)!important;
  color: var(--white-color)!important;
}
.list-des{
  padding:8px 10px!important;
}
.list-des i {
    color:var(--green-color);
    margin-right: 15px;
    font-size: 14px!important;
}




.list-des:hover{
    background: var(--light-blue-bg-color);
}
/*.list-des:hover i{
    color:#fe7096!important;
    background:#f8f8f8;
}*/
/*.list-group-item.active{
    background:rgba(17,100,102,.7)!important;
    border-color:  var(--primary-color)!important;
}*/
.dropdown-item:focus, .dropdown-item:hover{
    background: var(--light-blue-bg-color)!important;
}

/*bot Group*/
.card{
    margin-bottom:25px!important;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
    border: 0;
}
.card:hover img{
    opacity:1;
    /*margin-right:10px;*/
    transition: margin-right 0.5s ease;
}
.aside .card {
    padding-bottom: .25rem!important;
}
.card-header {
    background-color: #fff;
    border-bottom:0;
}
.aside .card-header h4 {
    position: relative;
}
.aside .card-header h4::before {
    position: absolute;
    z-index: 10;
    width: 30%;
    bottom: -4px;
    content: '';
    height: 2px;
    background: #308ef2;
}
.bot-group-name{
    font-family: var(--font-family);
    color: var(--primary-color);
    font-size: 15px;
    font-weight: 550;
    margin-bottom: 10px;
}
.bot-icon{
   /* font-size: 43px;*/
    color: var(--stats-color);
    text-align: center;
}
.bot-icon img{
    width: 100%!important;
    height: 76px;
    object-fit: contain;
    opacity: .7;
}
.bot-single-icon img {
    height: 60px;
    width:60px;
}
.bot-description{
    font-family: var(--font-family);
    color: var(--text-color);
    font-size: 14px;
    margin-bottom:0;
}
.bot-single-wrap h1 {
    font-size: 2rem;
}
.bot-single-wrap h2 {
    font-size: 1.5rem;
}
.small-card {
    min-height: 100px;
}
.counter-stats {
    font-size: 32px;
    font-weight: bold;
    line-height: 1;    
}
.tags-wrap li{
    height: 30px;
    line-height: 30px;
    text-align: center;
    border: 1px solid #f0f0f0;
    display: inline-block;
    color: #666;
    padding: 0 10px;
    font-size: 12px !important;
    margin-right: 1px;
    margin-bottom: 5px;
}
.tags-wrap li:hover{
    background-color: #eee;   
}
/*--------------------------------------------------------------
# footer
--------------------------------------------------------------*/


#footer {
  background: #2C3531;
  padding: 0 0 10px 0;
  color: var(--white-color);
  font-size: 14px;
}

#footer .footer-top {
  background:  var(--primary-gradient)!important;
 /* border-top: 1px solid #768fa6;
  border-bottom: 1px solid #67839c;*/
  padding: 60px 0 30px 0;
}

#footer .footer-top .footer-info {
  margin-bottom: 30px;
}

#footer .footer-top .footer-info h3 {
  font-size: 24px;
  margin: 0 0 20px 0;
  padding: 2px 0 2px 0;
  line-height: 1;
  font-weight: 500;
    letter-spacing: 2px;
    color: var(--white-color);
    font-size: 22px!important;
    font-weight: 600!important;
    font-family: 'Lobster', cursive;
}
#footer .footer-top .footer-info h3 span{
   color: var(--form-label2); 
}

#footer .footer-top .footer-info p {
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 0;
  font-family: var(--font-primary);
  color: var(--white-color);
}

#footer .footer-top .social-links a {
  font-size: 18px;
  display: inline-block;
  color: var(--white-color);
  line-height: 1;
  padding: 8px 0;
  margin-right: 4px;
  border-radius: 50%;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
}

#footer .footer-top .social-links a:hover {
  /*background: #428bca;*/
  color: var(--white-color);
  text-decoration: none;
}

#footer .footer-top h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--white-color);
  position: relative;
  padding-bottom: 12px;
}

#footer .footer-top .footer-links {
  margin-bottom: 30px;
}

#footer .footer-top .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#footer .footer-top .footer-links ul i {
  padding-right: 2px;
  /*color: #9eccf4;*/
  font-size: 18px;
  line-height: 1;
}

#footer .footer-top .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
  
}

#footer .footer-top .footer-links ul li:first-child {
  padding-top: 0;
}

#footer .footer-top .footer-links ul a {
  color: var(--white-color);
  transition: 0.3s;
  display: inline-block;
  line-height: 1;
  font-family: var(--font-primary);
}

#footer .footer-top .footer-links ul a:hover {
 /* color: #9eccf4;*/
}

#footer .footer-top .footer-newsletter form {
  margin-top: 30px;
  background: var(--white-color);
  padding: 6px 10px;
  position: relative;
  border-radius: 4;
  font-family: var(--font-primary);
}

#footer .footer-top .footer-newsletter form input[type="email"] {
  border: 0;
  padding: 4px;
  width: calc(100% - 110px);
  font-family: var(--font-primary);
}

#footer .footer-top .footer-newsletter form input[type="submit"] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border: 0;
  font-size: 16px;
  padding: 0 20px;
  background: var(--heading-color);
  color: var(--white-color);
  font-weight: 500;
  transition: 0.3s;
  border-radius: 4;
  font-family: var(--font-primary);
}

#footer .footer-top .footer-newsletter form input[type="submit"]:hover {
  background: #5295ce;
}

#footer .copyright {
  text-align: center;
  padding-top: 10px;
  font-family: var(--font-primary);
}
.__cf_email__{
   color: var(--white-color);
}
#footer .credits {
  padding-top: 10px;
  text-align: center;
  font-size: 13px;
  color: var(--white-color);
  font-family: var(--font-primary);
}

#footer .credits a {
  color: #9eccf4;
}

/*Word COunter*/
.btn-outline-primary{
    color: #495057!important;
    background-color: var(--white-color)!important;
    border: 1px solid #ced4da!important;
    border-radius: 44px!important;
    padding: .45rem 1rem!important;
    align-items: center;
    /*text-align: left!important;*/
    font-size: 14px!important;
    font-weight: 400!important;
}
.btn-icons{
    font-size:.90rem;
    color:#495057;
    padding:0 .50rem;
}
.result-section{
    padding:2rem;
}
.result-area{
    background:var(--white-color);
    padding:1.4rem 2rem;
    border-radius:4px;
     border: 1px solid #ced4da!important;
}
.result{
    font-size:18px;
    color:#424242;
    
}
.word-count{
    text-transform:capitalize;
    font-weight:500;
}
.btn-primary-result:hover{
   box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 5px 0 rgba(0,0,0,.1); 
}

.btn-primary-result{
    color:var(--white-color)!important;
    background-color:#10ce6af0;
    font-size: .95rem!important;
    font-weight:500!important;
    padding: .65rem 2.00rem!important;
    margin: 6px!important;
    border-radius: 6px!important;
    border: 0!important;
    -webkit-transition: .2s ease-out!important;
    transition: .2s ease-out!important;
    white-space: normal!important;
    cursor: pointer!important;
    margin-bottom:3rem;
}
.btn-primary{
    color:var(--white-color)!important;
    background-color: var(--primary-color)!important;
    font-size: .95rem!important;
    font-weight:500!important;
    padding: .65rem 2.00rem!important;
    margin: 6px!important;
    border-radius: 6px!important;
    border: 0!important;
    -webkit-transition: .2s ease-out!important;
    transition: .2s ease-out!important;
    white-space: normal!important;
    cursor: pointer!important;
    margin-bottom:3rem;
}
.btn-outline-primary.focus, .btn-outline-primary:focus{
    box-shadow: none !important;
    background-color: var(--primary-color) !important;
    color: var(--white-color) !important;
    border-color: var(--primary-color) !important;
}
.btn-secondary-result:hover{
   box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 5px 0 rgba(0,0,0,.1); 
}

.btn-secondary-result{
    color:#777!important;
    background-color:var(--white-color)!important;
    font-size: .95rem!important;
    font-weight:500!important;
    padding: .65rem 2.00rem!important;
    margin: 6px!important;
    border-radius: 6px!important;
    border: 1px solid #777!important;
    -webkit-transition: .2s ease-out!important;
    transition: .2s ease-out!important;
    white-space: normal!important;
    cursor: pointer!important;
    margin-bottom:3rem!important;
}
.upload_dropzone{
  margin-bottom:1.6rem;
}
.dropzone{
    border:1px solid rgba(0,0,0,.1)!important;
    border-radius:5px!important;
}

/*LOGO MAKER*/

.bg-black{
    background:#000!important;
    height:600px;
}
.nav-pills .nav-link.active{
    color:var(--white-color)!important;
}
.nav-logo-link{
    background:transparent!important;
    color:#95959a!important;
    padding:1rem 0!important;
    /*padding-right:0!Important;*/
    text-align:center!important;
    font-size: .80rem!important;
    font-weight: 500;
}
.back-text {
    padding:8px 0;
}
.back-text a{
    font-size:.70rem;
    color:var(--white-color)!important;
}
.nav-right{
    background:#e5e5e5;
    padding: 1rem 0;
}
.nav-link-tab{
       padding: 6px 16px!important;
    font-size: 13px!important;
    width: 118.4px;
    align-items: center;
    justify-content: center;
    text-align: center;
    border:none!important;
        border-top-left-radius: 0!important;
    border-top-right-radius: 0!important;
}
.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover{
/*    border-color:transparent!important;
*/    background:#007bff!important;
    color:var(--white-color)important;
}
/*.canvas {
  background-color: blue; 
  width: 100%;
  height: auto;
}*/

.mid-section{
    background:#f8f8f8!important;
}
.canvas{
    padding:0!important;
    background:#eee;
    border:1px solid #f8f8f8;
    text-align:center;
    justify-content:center;
}
.canvas-box{
   margin:2rem 0; 
}
.canvas-header{
    background:#007bff!important;
    color:var(--white-color)!important;
}
.right-section{
    background:#e5e5e5; 
}
.tabs-bg{
    background:var(--white-color);
}
.img-overlay {
    width: 32%!important;
    border: 1px solid #ddd;
    margin: 0 auto;
    display: inline-flex;
    padding: 3px;
}
.img-overlay img{
     border: 1px solid #007bff;
}
.nav-bg-link-tab{
    width:177.5px!important;
}
.layer-item{
    margin:2px;
    padding: 8px!important;
}
.layer-item.active{
    border:1px solid #007bff!important;
}

/*LOGO MAKER*/
/*body, html{margin:0px; padding:0px;}
body{font-family: 'Source Code Pro', sans-serif;background:#222; padding:2%; color:#eee;}
*, *:after, *:before {  
  -webkit-box-sizing: border-box;  
  -moz-box-sizing: border-box;  
  box-sizing: border-box;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}*/


/** bots text-to-images css **/
.txt-img-btn {
    background: #deecf9;
}
.clud-img-div{
    background: #f4f4f4;
}

.clud-img-div-pbtn p button{
    padding: 2px 10px !important;
    font-size: 14px !important;    
}

.try-othr-cmprssr{
    border: 1px solid #0c5595;
    background-color: #1e70b9;   
    color:var(--white-color);
    font-weight: 600;    
}

.try-othr-cmprssr-rvrs a{
    background: #f2f2f2;
    color: #505050;
    font-weight: 500 !important;
    border-left: 4px solid #0c5595;
    padding: 3px 10px;
    font-size: 12px;    
}

.try-othr-cmprssr-rvrs a:hover{
    color:none !important;
    text-decoration:none !important;
}
/** bots text-to-images css **/

/** md5 generator css **/
.reslt-headng{
    border: 1px solid #b7b7b7;
    width: 45px;
    position: relative;
    display: inline-block;
}

.reslt-headng:before{
    position: absolute;
    top: -5px;
    content: '';
    border: 5px solid #b7b7b7;
    border-radius: 20px;
    right: -11px;
}

.reslt-headng:after{
    border: 5px solid #b7b7b7;f
    border-radius: 20px;
    left: -11px;
    position: absolute;
    top: -5px;
    content: '';        
}

.agn-nav-right{
    background: var(--white-color) !important;
}

.agn-nav-right-col{
    background: var(--semi-dark-grey)!important;
}

.agn-nav-right-col-nxt{
    background: #f5f5f5 !important;
}

.img-txt-fnd{
    font-weight: 600 !important;
}

.or-seprtr-gif {
    /* position: relative; */
    z-index: 1;
    display: initial;
    position: absolute;
    top: 115px;
    left: 48.25%;
    background: #1e70b9;
    color: var(--white-color);
    padding: 12px;
    border-radius: 64px;
}

.or-seprtr-gif-agn {
    top: 115px !important;
}

.gif-mkg-cmp {
    background: #1e70b9 !important;    
}

.wid-hei-inpt .form-control {
    border-radius: 8px !important;
}
/** md5 generator css **/

.custm-inpt-lbl label {
    border-radius: 8px !important;
}

.custm-inpt-lbl label::after {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 8px 0 0 8px !important;
    bottom: 0;
    z-index: 3;
    display: block;
    width: 120px !important;
    height: calc(1.5em + .75rem);
    padding: .375rem .75rem;
    line-height: 1.5;
    color: #495057;
    content: "Choose File";
    background-color: #e9ecef;
    border-left: inherit;
}

.custm-inpt-lbl-upd label::after {
    content: "Upload" !important;    
    display:none !important;
}

.txt-img-row-div button.btn:focus {
    box-shadow: none !important;
}

input:focus {
    box-shadow: none !important;
}

.txt-img-row-div select:focus {
    box-shadow: none !important;
}

/*  strt crop-image css */

/*  end crop-image css */


/*  strt @media css */
@media only screen and (max-width: 576px){
    .txt-mdia-btn .text-left {
        text-align: right !important;
    }
    
    .txt-img-btn {
        padding: 10px 0px !important;
    }
    
    .txt-img-row-div .text-right button {
        margin: 5px 0px !important;
    }
    
    /*  strt convert to png @media css */
    .clud-img-div {
        padding: 30px 0px !important;
    }
    
    .clud-img-div button {
        margin: 5px !important;
        width: 100%;
    }
    
    .textarea_box {
    /* margin-bottom: 0px; */
        padding-bottom: 0px !important;
    }
    
    .textarea_box .text-left .d-flex {
        display: inline !important;
    }
    
    .textarea_box .text-left .d-flex button {
        margin: 5px 0px !important;
        width: 100% !important;
    }
    
    .textarea_box .clud-img-div {
        margin: 0px !important;
        padding: 30px 0px !important;
    }
    
    .textarea_box .clud-img-div .text-center {
        padding: 0px 5px 0 1px !important;
    }
    /*  end convert to png @media css */
    
    /*  strt jpg-to-png @media css */
    .textarea_box .row.p-4.mx-1 {
        padding: 0px !important;
        margin: 0px !important;
    }
    
    .textarea_box .clud-img-div .custm-inpt-lbl label:after {
        width: 100% !important;
        border-radius: 30px !important;
    }
    
    .textarea_box .clud-img-div .custm-inpt-lbl {
        /* padding: 5px !important; */
        margin: 2px !important;
    }
    
    .textarea_box .clud-img-div .text-center .text-right.mt-2 {
        text-align: center !important;
        padding-bottom: 20px !important;    
    }
    
    .or-seprtr-gif-agn {
        top: 168px !important;
        left: 45.25%;
    }
    
    .textarea_box .text-center .justify-content-center button {
        width: 100% !important;
    }
    
    .textarea_box .col-lg-6.col-md-6.col-12.text-center.clud-img-div {
        margin: 10px 0px !important;
    }
    
    .textarea_box .col-lg-6.col-md-6.text-center.clud-img-div {
        margin: 10px 0px 12px !important;
    }
    /*  end jpg-to-png @media css */
    
    /*  strt image-resizer @media css */
    .textarea_box .clud-img-div .text-center .mx-auto .d-flex {
        display: inline !important;
    }
    
    .textarea_box .clud-img-div .text-center .mx-auto .d-flex button {
        width: 100% !important;
        margin: 0px 0px 16px 0px !important;
    }
    
    .textarea_box .justify-content-center.align-items-center {
        display: inline !important;
    }
    
    .textarea_box .justify-content-center.align-items-center .form-check {
        padding-top: 15px !important;
    }
    
    .textarea_box .row .text-center button {
        width: 100% !important;
        margin: 0px !important;    
    }
    
    .textarea_box .justify-content-center.align-items-center .col-sm-8 {
        padding: 0px !important;
    }
    
    .textarea_box .justify-content-center.align-items-center input {
        text-align: center !important;
    }
    
    .textarea_box .row .text-center .gnrt-mdia-cc{
        margin: 10px 0px !important;    
    }
    /*  end image-resizer @media css */
    
    /*  strt video-to-gif @media css */
    .textarea_box .clud-img-div .text-left {
        padding: 0px !important;
    }
    
    .textarea_box .clud-img-div .upload_dropzone {
    /* border: 0px !important; */
        margin: 0px !important;
    }
    
    .textarea_box .clud-img-div {
        padding: 0px !important;
        /* background: var(--white-color) !important; */
        border: 0px !important;
    }
    
    .textarea_box .clud-img-div .upload_dropzone #dropzone form {
        margin: 0px !important;
        background: #f4f4f4;
        border: 0px !important;
    }
    
    .or-seprtr-gif {
        top: 168px !important;
        left: 46% !important;
    }
    
    .textarea_box .text-center.clud-img-div.border .row.clud-img-div button {
        margin: 10px 0px !important;
    }
    
    .textarea_box .agn-nav-right .row .text-center .rounded-right {
        margin-bottom: 20px !important;
    }
    
    .textarea_box .agn-nav-right .row .text-center .bg-white.text-center {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    /*  end video-to-gif @media css */
    
    /*  strt favicon-generator-tool @media css */
    .textarea_box .row.mx-2.border.pb-3.px-2 {
        margin-bottom: 15px;
    }
    
    .textarea_box .row.mx-2.border.pb-3.px-2 .col-12.text-left.mt-4.pt-2 {
        padding: 0px !important;
    }
    
    .textarea_box .nav-right.agn-nav-right .row .col-lg-6.text-center {
        margin: 10px 0px !important;
    }
    
    .textarea_box .row.mx-2.border.pb-3.px-2 {
        margin: 15px 0px !important;
    }
    /*  end favicon-generator-tool @media css */
    
    /*  strt image-compressor @media css */
    .textarea_box .row.border.mx-2.clud-img-div .text-center p {
        padding: 4px 10px;
        font-size: 15px;
        margin: 0px !important;
    }
    
    .textarea_box .row.border.mx-2.clud-img-div .text-center .mdia-btn-nd{
        margin-bottom: 25px !important;    
    }
    
    .textarea_box .row .col-12.text-left.ml-2.mt-3 {
        margin: 15px 0px !important;
    }
    
    .textarea_box .row.px-2.border.py-3.mx-2 {
        margin: 0px 0px 15px !important;
    }
    
    .textarea_box .row.px-2.border.py-3.mx-2 .try-othr-cmprssr-rvrs {
        padding: 0px 0px !important;
    }
    
    .textarea_box .nav-right.agn-nav-right {
    /* margin: 0px !important; */
        padding: 0px !important;
    }
    
    .textarea_box .nav-right.agn-nav-right ul li {
        margin: 0px !important;
    }
    
    .textarea_box .nav-right.agn-nav-right ul li .align-items-center .border-right {
        padding: 0px 12px 0px 0px !important;
        margin: 7px 0px !important;
        border: 0px !important;
    }
    
    .textarea_box .row .text-center .d-flex.text-center.justify-content-center {
        display: inline !important;
    }
    
    .textarea_box .row .text-center .d-flex.text-center.justify-content-center button {
        margin: 10px 0px 10px !important;
    }
    
    .textarea_box .row .text-center {
        margin: 0px 0px 30px 0px !important;
    }
    
    .textarea_box .row.px-3.py-3 .text-left {
        text-align: center !important;
    }
    
    .textarea_box .row.px-3.py-3 .text-right {
        text-align: center !important;
    }
    /*  end image-compressor @media css */
    
    /*  strt md5-generator @media css */
    .textarea_box .form-group {
        padding: 10px 0px !important;
    }
    /*  end md5-generator @media css */
    
    /*  strt image-to-text-convertor @media css */
    .textarea_box .row {
        padding: 0px !important;
    }
    
    .textarea_box .row .col-lg-6.col-md-6 .d-flex {
        display: inline !important;
    }
    
    .textarea_box .row .col-lg-6.col-md-6 .d-flex button {
        margin: 10px 0px !important;
    }
    /*  end image-to-text-convertor @media css */
    
    /*  strt crop-image css */
    .textarea_box .crp-img-lbl {
        border: 0px !important;
    }
    
    .textarea_box .crp-img-lbl-reslt {
        margin: 0px !important;
    }
    
    .textarea_box .crp-img-lbl-reslt .text-center {
        padding: 0px !important;
    }
    
    .textarea_box .crp-img-lbl-reslt .text-center button {
        margin: 6px 0px !important;
    }
    /*  end crop-image css */
    
    /*  strt url-encoder-decoder css */
    .textarea_box .url-end-mdia {
        margin: 0px !important;
    }
    
    .textarea_box .url-end-mdia .text-left {
        padding: 0px !important;
    }
    
    .textarea_box ul.try-othr-cmprssr-rvrs {
        margin: 15px 0px !important;
        display: block !important;    
    }
    
    .textarea_box ul.try-othr-cmprssr-rvrs a {
        border-left: 4px solid #0c5595 !important;
        margin: 0px 0px 7px 0px;
    }
    
    .textarea_box .url-end-mdia-btn .text-center button {
        margin: 5px 0px !important;
    }
    /*  end url-encoder-decoder css */
}
/*  strt @media css */

/* start QR code generator */
    .nav-item-qr{
        border:1px solid #ddd!important;
        border-radius:4px 4px!important;
        margin:3px!important;
        background: var(--white-color)!important;
        
    }
    .nav-tabs .nav-item.nav-item-qr.show .nav-link, .nav-tabs .nav-link.active {
        border-color: transparent!important;
        background:var(--primary-color)!important;
        color:var(--white-color)!important;
    }
    .nav-tabs .nav-link.nav-item-qr:focus, .nav-tabs .nav-link.nav-item-qr:hover{
        background:#ddd!important;
    }
    .qr-code-tab{
        color:#333!important;
    }
    /*.url-input-addon{
        border-radius: 3rem 0 0 3rem!important;  
    }*/
    .url-input{
       border-radius:0 3rem 3rem 0!important; 
    }
    .qr-label{
        font-weight:600;
        color:#333!important;
    }
    .form-radius{
       /* border-radius:3rem!important;
        height:calc(1.5em + 1rem + 2px)!important;*/
    }

/* End QR code generator */

/* Start Internet speed */

.internet-speed h1{
    color:red;
    font-weight:400;
    font-size:8rem;
    text-align:center;
    margin-bottom:0!important;
}

.internet-speed p{
    color:#777;
    font-weight:400;
    font-size:1.8rem;
    text-align:center;
    margin-bottom:0!important;
}
.is-right {
    border:2px solid #c1bfbf;
    border-radius:12px;
}
.is-right .ping, .is-right .upload {
    padding:20px;
}
.is-right p{
    color:#777;
     text-transform:capitalize;
    font-weight:600;
    font-size:13px;
}
.s-details{
    color:#777;
    font-weight:bold!important;
    font-size:18px!important;
}

/* End Internet speed */

.device-option i{
   padding: 0 7px;
    color: #777;
    font-size: 17px;
}
.desktop-img{
    background:url(./assets/images/desktop.png);
}
.tab-img{
    background:url(./assets/images/tab.png);
}
.mob-img{
    background:url(./assets/images/mob.png);
}

/* Instant Search Suggestion */
#instant_search a {
    color: var(--text-color)!important;
}
#instant_search a:hover {
    color: var(--primary-color)!important;
}


/* Related Keyword Search*/
#result_box {
	overflow: auto;
	max-height: 350px;
	padding: 0;
	margin-bottom: 15px;
	border-bottom: 1px solid #e9e9e9
}

.res_title {
	background: #333 !important;
	color: #fff;
	font-size: 14px;
	text-align: center;
	padding: 12px;
	margin-top: 10px
}

.title_desc {
	border: 1px solid #e9e9e9;
	padding: 15px;
	border-bottom: none
}

.title_desc:nth-child(odd) {
	background-color: #e9e9e9
}
.nav-tabs {
    border-bottom: none!important;
}


/*by sailu*/
body .py-2 img{max-width:100%;}
.unit{
    font-size: 11px;
    color: #F00;
    font-weight:600;
}

 .alignment-22 .MathJax{text-align:left!important;
     width:100%;
     line-height:1.8em;
     border:solid 1px #ececec;
     overflow:auto;
     border: solid 1px #ececec;
 }
  
 
 /*@media only screen and (min-width: 1007px) {.alignment-22 .MJX-TEX{font-size:14px!important;}}
 
  @media only screen and (max-width: 987px) {.alignment-22 .MJX-TEX{font-size: 2vw;}} */
 
.border{
  width: auto;
  height: auto;
  padding: 6px;
  border-radius: 3px;
  background-color: #F8F8F8;
  /*box-shadow: 2px 2px 1px hsl(214deg 100% 25%);*/
}

     .icon.box {
    width: 60px;
    height: 60px;
    margin-bottom: 15px!important;
    margin: auto;
    background: var(--white-color);
    border-radius: 20%;
    transition: 0.5s;
    color: var(--primary-color);
    font-size: 22px;
    overflow: hidden;
    line-height: 21px;
    box-shadow: var(--shadow-color);
    display: flex;
    align-items: center;
    justify-content: center;
}
      .icon.box:hover{
      background: var(--primary-color);
      
      }
      .icon.box svg{
      fill: var(--primary-color);
      }
      .icon.box:hover svg{
      fill: var(--white-color);
      }
      /*	svg:hover path {
      fill: #296ef0;
      } */
      .bot-icon img{
       height:25px;   
      }
.col-md-3 .list-group-item.list-des{
        display: flex;
}

.font-size {
    font-size: xx-large;
    font-family: math;
}
/*editor str*/
 .cke_editor_editor .cke_contents.cke_reset{
                height: 450px!important; 
         }
       .word-count.text-center  .cke_contents.cke_reset{
                height: 450px!important; 
         }
     /*editor end*/    
 .margin {
      margin-top: 0%;
  }   
  .converter-side-a span{
    margin-top: 20px;  
  }  
  .converter-side-b span{
    margin-top: 20px;  
  }
      /* 格式化 */
   

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    span,
    p,
    ul,
    li,
    table,
    tr,
    td,
    input,
    a,
    dl,
    dt,
    dd {
        margin: 0;
        padding: 0;
        text-decoration: none;
        list-style: none;
        
    }

    img {
        vertical-align: top;
        border: none
    }

    #jg {
        font-size: 16px;
        line-height: 30px;
        text-align: center;
    }

    .drag {
        width: 90%;
        padding: 30px 0;
        background-color: rgb(255, 255, 255);
        border: 2px solid rgb(0, 0, 0, .3);
        border-radius: 10px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        flex-direction: column;
    }

    .img_box {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;

    }

    .img_box img {
        max-width: 210px;
        max-height: 180px;
        min-width: 80px;

    }

    .img_one {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 2px;
        min-width: 80px;
    }

    .img_one .type {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        border-radius: 0 0 20px 0;
        display: inline;
        min-width: 20px;
        padding: 0 10px;
        text-align: center;
        backdrop-filter: saturate(180%) blur(3px);
        background-color: rgba(255, 255, 255, 0.6);
        font-weight: 900;
    }

    .img_one .type.jpeg,
    .img_one .type.jpg {
        color: rgb(77, 77, 255);
    }

    .img_one .type.gif {
        color: rgb(77, 208, 255);
    }

    .img_one .type.png {
        color: rgb(77, 255, 148);
    }

    .img_one .type.webp {
        color: rgb(160, 255, 77);
    }

    .img_one .type.svg {
        color: rgb(246, 255, 77);
    }

    .img_one .type.ico {
        color: rgb(255, 130, 77);
    }

    .img_one .type.bmp {
        color: rgb(255, 89, 77);
    }

    .img_one .size {
        position: absolute;
        z-index: 1;
    
        backdrop-filter: saturate(180%) blur(10px);
        background-color: rgba(0, 0, 0, 0.38);
        color: #fff;
        bottom: 0;
        left: 0
    }


    .download_but {
        width: 90%;
        padding: 14px;
        margin: 20px auto;
        background-color: rgb(55, 78, 255);
        color: #fff;
        font-weight: bold;
        font-size: 18px;
        border-radius: 100px;
        text-align: center;
        cursor: pointer;
    }

    .download_but:hover {
        opacity: .9;
    }

    .drag:hover {
        opacity: .8;
    }

    .con {}

    .p1 {
        font-size: 100px;
        line-height: 100px;
        height: 100px;
        font-weight: 900;
        opacity: .3;
    }

    .d {
        font-size: 30px;
        line-height: 38px;
        padding: 25px 0;
        text-align: center;
        font-weight: 900;
    }
    .p2 h1, .p2 h2{
        font-size: 30px;
        line-height: 38px;
    }
   

    .p2 label {
        font-size: 14px;
    }

    #files {
        display: none;
        visibility: hidden;
    }

    @keyframes ggg {
        100% {
            background-position: 100%;
        }
    }

    body.ondragover .ready {
        display: flex
    }

    .ready {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
        width: 100vw;
        height: 100vh;
        backdrop-filter: saturate(180%) blur(10px);
        color: #fff;
        font-size: 22px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 10px solid transparent;
        box-sizing: border-box;
        background:
            linear-gradient(rgb(55, 78, 255),
                rgba(55, 78, 255, 1)) padding-box,
            repeating-linear-gradient(-45deg,
                black 0, rgba(55, 78, 255, .8) 25%,
                white 0, white 50%) 0/1em 1em;
        animation: ggg 12s linear infinite;
        opacity: .8;
        display: none;
    }

    .ready p {
        font-size: 80px;
        text-align: center;
        line-height: 100px;
    }

    #can {
        display: none;
    }


    /* --------------------------------------------- */
    #loading {
        display: none;
        zoom: 6;
    }

    select {
        height: 30px;
        font-size: 15px;
        background-color: #fff;
        border: 2px solid rgb(55, 78, 255);
        border-left: 5px solid rgb(55, 78, 255);
        padding: 0 10px;

    }
    [type=checkbox] {
        zoom:2;
        position: relative;
        top: 2px;
    }
    .viewInGithub {
        position: fixed;
        right: 0;
        bottom: 0;
        z-index: 100;
    }

    /* --------------------------------------------- */
    /* 烟花 - from https://codepen.io/yshlin/pen/ylDEk */
    .pyro>.before,
    .pyro>.after {
        position: absolute;
        width: 8px;
        height: 8px;
        border-radius: 4px;
        box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
       
        animation: 1s bang ease-out 3 backwards, 1s gravity ease-in 3 backwards, 5s position linear 3 backwards;

        /* animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards; */
        }

    .pyro>.after {
        -moz-animation-delay: 1.25s, 1.25s, 1.25s;
        -webkit-animation-delay: 1.25s, 1.25s, 1.25s;
        -o-animation-delay: 1.25s, 1.25s, 1.25s;
        -ms-animation-delay: 1.25s, 1.25s, 1.25s;
        animation-delay: 1.25s, 1.25s, 1.25s;
        -moz-animation-duration: 1.25s, 1.25s, 6.25s;
        -webkit-animation-duration: 1.25s, 1.25s, 6.25s;
        -o-animation-duration: 1.25s, 1.25s, 6.25s;
        -ms-animation-duration: 1.25s, 1.25s, 6.25s;
        animation-duration: 1.25s, 1.25s, 6.25s;
    }

    @-webkit-keyframes bang {
        to {
            box-shadow: -234px -283.6666666667px #ff0900, 21px -260.6666666667px #5eff00, -203px -141.6666666667px #ff00bf, 120px -228.6666666667px #ff00b7, 103px 11.3333333333px #ff9900, -14px -414.6666666667px #ff009d, -186px -1.6666666667px #00eaff, 217px -114.6666666667px #ff0095, 111px -407.6666666667px #bf00ff, 71px 42.3333333333px #d5ff00, -189px 37.3333333333px #ff00e1, 185px -301.6666666667px #1eff00, 141px -400.6666666667px #ff8400, 129px -290.6666666667px #ffc800, 92px 45.3333333333px #ff0077, -137px -72.6666666667px #fff700, 171px -383.6666666667px #e6ff00, -238px -1.6666666667px #00ffaa, -8px -99.6666666667px #4dff00, -37px -329.6666666667px #ff6f00, 208px -221.6666666667px #00fffb, -75px -209.6666666667px #007bff, -140px -45.6666666667px #09ff00, 85px -125.6666666667px #0d00ff, 234px -238.6666666667px #09ff00, 104px -156.6666666667px #ff00d5, 213px -225.6666666667px #ff0055, -8px -360.6666666667px #00ffbf, -71px 75.3333333333px #ff0062, -129px -124.6666666667px #ff0033, 212px 47.3333333333px #d000ff, 19px -248.6666666667px #ff00ae, 72px -293.6666666667px #ff0080, -91px -28.6666666667px #00ffb3, 132px -258.6666666667px #0044ff, 7px -72.6666666667px #00ffe6, -179px -346.6666666667px #4800ff, 200px -351.6666666667px #4d00ff, -183px -228.6666666667px #aa00ff, -80px -211.6666666667px #ff9900, 70px -91.6666666667px #006aff, -243px -163.6666666667px #ff00a6, 76px -135.6666666667px #ff0084, -212px -297.6666666667px #00ffbb, 128px 46.3333333333px #95ff00, -113px 79.3333333333px #00ffbb, -157px -34.6666666667px #ff00c8, -160px -74.6666666667px #9500ff, 228px 48.3333333333px #00ff62, -235px -57.6666666667px #ff00b3, 185px -149.6666666667px #b300ff;
        }
    }

    @-moz-keyframes bang {
        to {
            box-shadow: -234px -283.6666666667px #ff0900, 21px -260.6666666667px #5eff00, -203px -141.6666666667px #ff00bf, 120px -228.6666666667px #ff00b7, 103px 11.3333333333px #ff9900, -14px -414.6666666667px #ff009d, -186px -1.6666666667px #00eaff, 217px -114.6666666667px #ff0095, 111px -407.6666666667px #bf00ff, 71px 42.3333333333px #d5ff00, -189px 37.3333333333px #ff00e1, 185px -301.6666666667px #1eff00, 141px -400.6666666667px #ff8400, 129px -290.6666666667px #ffc800, 92px 45.3333333333px #ff0077, -137px -72.6666666667px #fff700, 171px -383.6666666667px #e6ff00, -238px -1.6666666667px #00ffaa, -8px -99.6666666667px #4dff00, -37px -329.6666666667px #ff6f00, 208px -221.6666666667px #00fffb, -75px -209.6666666667px #007bff, -140px -45.6666666667px #09ff00, 85px -125.6666666667px #0d00ff, 234px -238.6666666667px #09ff00, 104px -156.6666666667px #ff00d5, 213px -225.6666666667px #ff0055, -8px -360.6666666667px #00ffbf, -71px 75.3333333333px #ff0062, -129px -124.6666666667px #ff0033, 212px 47.3333333333px #d000ff, 19px -248.6666666667px #ff00ae, 72px -293.6666666667px #ff0080, -91px -28.6666666667px #00ffb3, 132px -258.6666666667px #0044ff, 7px -72.6666666667px #00ffe6, -179px -346.6666666667px #4800ff, 200px -351.6666666667px #4d00ff, -183px -228.6666666667px #aa00ff, -80px -211.6666666667px #ff9900, 70px -91.6666666667px #006aff, -243px -163.6666666667px #ff00a6, 76px -135.6666666667px #ff0084, -212px -297.6666666667px #00ffbb, 128px 46.3333333333px #95ff00, -113px 79.3333333333px #00ffbb, -157px -34.6666666667px #ff00c8, -160px -74.6666666667px #9500ff, 228px 48.3333333333px #00ff62, -235px -57.6666666667px #ff00b3, 185px -149.6666666667px #b300ff;
        }
    }

    @-o-keyframes bang {
        to {
            box-shadow: -234px -283.6666666667px #ff0900, 21px -260.6666666667px #5eff00, -203px -141.6666666667px #ff00bf, 120px -228.6666666667px #ff00b7, 103px 11.3333333333px #ff9900, -14px -414.6666666667px #ff009d, -186px -1.6666666667px #00eaff, 217px -114.6666666667px #ff0095, 111px -407.6666666667px #bf00ff, 71px 42.3333333333px #d5ff00, -189px 37.3333333333px #ff00e1, 185px -301.6666666667px #1eff00, 141px -400.6666666667px #ff8400, 129px -290.6666666667px #ffc800, 92px 45.3333333333px #ff0077, -137px -72.6666666667px #fff700, 171px -383.6666666667px #e6ff00, -238px -1.6666666667px #00ffaa, -8px -99.6666666667px #4dff00, -37px -329.6666666667px #ff6f00, 208px -221.6666666667px #00fffb, -75px -209.6666666667px #007bff, -140px -45.6666666667px #09ff00, 85px -125.6666666667px #0d00ff, 234px -238.6666666667px #09ff00, 104px -156.6666666667px #ff00d5, 213px -225.6666666667px #ff0055, -8px -360.6666666667px #00ffbf, -71px 75.3333333333px #ff0062, -129px -124.6666666667px #ff0033, 212px 47.3333333333px #d000ff, 19px -248.6666666667px #ff00ae, 72px -293.6666666667px #ff0080, -91px -28.6666666667px #00ffb3, 132px -258.6666666667px #0044ff, 7px -72.6666666667px #00ffe6, -179px -346.6666666667px #4800ff, 200px -351.6666666667px #4d00ff, -183px -228.6666666667px #aa00ff, -80px -211.6666666667px #ff9900, 70px -91.6666666667px #006aff, -243px -163.6666666667px #ff00a6, 76px -135.6666666667px #ff0084, -212px -297.6666666667px #00ffbb, 128px 46.3333333333px #95ff00, -113px 79.3333333333px #00ffbb, -157px -34.6666666667px #ff00c8, -160px -74.6666666667px #9500ff, 228px 48.3333333333px #00ff62, -235px -57.6666666667px #ff00b3, 185px -149.6666666667px #b300ff;
        }
    }

    @-ms-keyframes bang {
        to {
            box-shadow: -234px -283.6666666667px #ff0900, 21px -260.6666666667px #5eff00, -203px -141.6666666667px #ff00bf, 120px -228.6666666667px #ff00b7, 103px 11.3333333333px #ff9900, -14px -414.6666666667px #ff009d, -186px -1.6666666667px #00eaff, 217px -114.6666666667px #ff0095, 111px -407.6666666667px #bf00ff, 71px 42.3333333333px #d5ff00, -189px 37.3333333333px #ff00e1, 185px -301.6666666667px #1eff00, 141px -400.6666666667px #ff8400, 129px -290.6666666667px #ffc800, 92px 45.3333333333px #ff0077, -137px -72.6666666667px #fff700, 171px -383.6666666667px #e6ff00, -238px -1.6666666667px #00ffaa, -8px -99.6666666667px #4dff00, -37px -329.6666666667px #ff6f00, 208px -221.6666666667px #00fffb, -75px -209.6666666667px #007bff, -140px -45.6666666667px #09ff00, 85px -125.6666666667px #0d00ff, 234px -238.6666666667px #09ff00, 104px -156.6666666667px #ff00d5, 213px -225.6666666667px #ff0055, -8px -360.6666666667px #00ffbf, -71px 75.3333333333px #ff0062, -129px -124.6666666667px #ff0033, 212px 47.3333333333px #d000ff, 19px -248.6666666667px #ff00ae, 72px -293.6666666667px #ff0080, -91px -28.6666666667px #00ffb3, 132px -258.6666666667px #0044ff, 7px -72.6666666667px #00ffe6, -179px -346.6666666667px #4800ff, 200px -351.6666666667px #4d00ff, -183px -228.6666666667px #aa00ff, -80px -211.6666666667px #ff9900, 70px -91.6666666667px #006aff, -243px -163.6666666667px #ff00a6, 76px -135.6666666667px #ff0084, -212px -297.6666666667px #00ffbb, 128px 46.3333333333px #95ff00, -113px 79.3333333333px #00ffbb, -157px -34.6666666667px #ff00c8, -160px -74.6666666667px #9500ff, 228px 48.3333333333px #00ff62, -235px -57.6666666667px #ff00b3, 185px -149.6666666667px #b300ff;
        }
    }

    @keyframes bang {
        to {
            box-shadow: -234px -283.6666666667px #ff0900, 21px -260.6666666667px #5eff00, -203px -141.6666666667px #ff00bf, 120px -228.6666666667px #ff00b7, 103px 11.3333333333px #ff9900, -14px -414.6666666667px #ff009d, -186px -1.6666666667px #00eaff, 217px -114.6666666667px #ff0095, 111px -407.6666666667px #bf00ff, 71px 42.3333333333px #d5ff00, -189px 37.3333333333px #ff00e1, 185px -301.6666666667px #1eff00, 141px -400.6666666667px #ff8400, 129px -290.6666666667px #ffc800, 92px 45.3333333333px #ff0077, -137px -72.6666666667px #fff700, 171px -383.6666666667px #e6ff00, -238px -1.6666666667px #00ffaa, -8px -99.6666666667px #4dff00, -37px -329.6666666667px #ff6f00, 208px -221.6666666667px #00fffb, -75px -209.6666666667px #007bff, -140px -45.6666666667px #09ff00, 85px -125.6666666667px #0d00ff, 234px -238.6666666667px #09ff00, 104px -156.6666666667px #ff00d5, 213px -225.6666666667px #ff0055, -8px -360.6666666667px #00ffbf, -71px 75.3333333333px #ff0062, -129px -124.6666666667px #ff0033, 212px 47.3333333333px #d000ff, 19px -248.6666666667px #ff00ae, 72px -293.6666666667px #ff0080, -91px -28.6666666667px #00ffb3, 132px -258.6666666667px #0044ff, 7px -72.6666666667px #00ffe6, -179px -346.6666666667px #4800ff, 200px -351.6666666667px #4d00ff, -183px -228.6666666667px #aa00ff, -80px -211.6666666667px #ff9900, 70px -91.6666666667px #006aff, -243px -163.6666666667px #ff00a6, 76px -135.6666666667px #ff0084, -212px -297.6666666667px #00ffbb, 128px 46.3333333333px #95ff00, -113px 79.3333333333px #00ffbb, -157px -34.6666666667px #ff00c8, -160px -74.6666666667px #9500ff, 228px 48.3333333333px #00ff62, -235px -57.6666666667px #ff00b3, 185px -149.6666666667px #b300ff;
        }
    }

    @-webkit-keyframes gravity {
        to {
            transform: translateY(200px);
            -moz-transform: translateY(200px);
            -webkit-transform: translateY(200px);
            -o-transform: translateY(200px);
            -ms-transform: translateY(200px);
            opacity: 0;
        }
    }

    @-moz-keyframes gravity {
        to {
            transform: translateY(200px);
            -moz-transform: translateY(200px);
            -webkit-transform: translateY(200px);
            -o-transform: translateY(200px);
            -ms-transform: translateY(200px);
            opacity: 0;
        }
    }

    @-o-keyframes gravity {
        to {
            transform: translateY(200px);
            -moz-transform: translateY(200px);
            -webkit-transform: translateY(200px);
            -o-transform: translateY(200px);
            -ms-transform: translateY(200px);
            opacity: 0;
        }
    }

    @-ms-keyframes gravity {
        to {
            transform: translateY(200px);
            -moz-transform: translateY(200px);
            -webkit-transform: translateY(200px);
            -o-transform: translateY(200px);
            -ms-transform: translateY(200px);
            opacity: 0;
        }
    }

    @keyframes gravity {
        to {
            transform: translateY(200px);
            -moz-transform: translateY(200px);
            -webkit-transform: translateY(200px);
            -o-transform: translateY(200px);
            -ms-transform: translateY(200px);
            opacity: 0;
        }
    }

    @-webkit-keyframes position {

        0%,
        19.9% {
            margin-top: 10%;
            margin-left: 40%;
        }

        20%,
        39.9% {
            margin-top: 40%;
            margin-left: 30%;
        }

        40%,
        59.9% {
            margin-top: 20%;
            margin-left: 70%;
        }

        60%,
        79.9% {
            margin-top: 30%;
            margin-left: 20%;
        }

        80%,
        99.9% {
            margin-top: 30%;
            margin-left: 80%;
        }
    }

    @-moz-keyframes position {

        0%,
        19.9% {
            margin-top: 10%;
            margin-left: 40%;
        }

        20%,
        39.9% {
            margin-top: 40%;
            margin-left: 30%;
        }

        40%,
        59.9% {
            margin-top: 20%;
            margin-left: 70%;
        }

        60%,
        79.9% {
            margin-top: 30%;
            margin-left: 20%;
        }

        80%,
        99.9% {
            margin-top: 30%;
            margin-left: 80%;
        }
    }

    @-o-keyframes position {

        0%,
        19.9% {
            margin-top: 10%;
            margin-left: 40%;
        }

        20%,
        39.9% {
            margin-top: 40%;
            margin-left: 30%;
        }

        40%,
        59.9% {
            margin-top: 20%;
            margin-left: 70%;
        }

        60%,
        79.9% {
            margin-top: 30%;
            margin-left: 20%;
        }

        80%,
        99.9% {
            margin-top: 30%;
            margin-left: 80%;
        }
    }

    @-ms-keyframes position {

        0%,
        19.9% {
            margin-top: 10%;
            margin-left: 40%;
        }

        20%,
        39.9% {
            margin-top: 40%;
            margin-left: 30%;
        }

        40%,
        59.9% {
            margin-top: 20%;
            margin-left: 70%;
        }

        60%,
        79.9% {
            margin-top: 30%;
            margin-left: 20%;
        }

        80%,
        99.9% {
            margin-top: 30%;
            margin-left: 80%;
        }
    }

    @keyframes position {

        0%,
        19.9% {
            margin-top: 10%;
            margin-left: 40%;
        }

        20%,
        39.9% {
            margin-top: 40%;
            margin-left: 30%;
        }

        40%,
        59.9% {
            margin-top: 20%;
            margin-left: 70%;
        }

        60%,
        79.9% {
            margin-top: 30%;
            margin-left: 20%;
        }

        80%,
        99.9% {
            margin-top: 30%;
            margin-left: 80%;
        }
    }
    select {
        
        width: auto;
        border: 2px solid var(--primary-color);
        height: auto;
        border-radius: .25rem;
        padding: .375rem .75rem;
    }
    /*Custom CSS*/
  /* .remove_img {
        color: var(--white-color)!important;
    background-color: var(--primary-color)!important;
    font-size: .95rem!important;
    font-weight: 500!important;
    padding: .65rem 2.00rem!important;
    margin: 6px!important;
    border-radius: 6px!important;
    border: 0!important;
    -webkit-transition: .2s ease-out!important;
    transition: .2s ease-out!important;
    white-space: normal!important;
    cursor: pointer!important;
    margin-bottom: 3rem;
} */  
.img_one{
    margin: 0 !important;
}

.img_one .size {
    position: static;
    z-index: 0;
    backdrop-filter: saturate(180%) blur(10px);
    background-color: rgb(172 212 255);
    color: black;
    bottom: 0;
    left: 0;
    width: 54px;
    text-align: center;
    font-size: 12px;
    border-radius: 4px;
    margin-right: 2px;
}

.img_one .type {
    position: static;
    z-index: 0;
    top: 0;
    left: 0;
    border-radius: 0;
    display: block;
    min-width: 0;
    padding: 0;
    text-align: left;
    backdrop-filter: saturate(180%) blur(3px);
    background-color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
}

.img_one a{
    background: #f1f6ff;
    border-radius: 4px;
    color: rgb(42 125 240);
}

.img_one a i{
    padding: 7px 8px;
}
 #tooltip538040{
     top:0px;
 }