/********** Template CSS **********/

:root {
    --primary: #5258c7;
    --secondary: #F6F6F6;
    --light: #FFFFFF;
    --dark: #152440;
}

h1,
h2,
.font-weight-bold {
    font-weight: 700 !important;
}

h3,
h4,
.font-weight-semi-bold {
    font-weight: 600 !important;
}

h5,
h6,
.font-weight-medium {
    font-weight: 500 !important;
}

.pt-6 {
    padding-top: 90px;
}

.pb-6 {
    padding-bottom: 90px;
}

.py-6 {
    padding-top: 90px;
    padding-bottom: 90px;
}

.btn {
    font-family: 'Barlow', sans-serif;
    font-weight: 600;
    transition: .5s;
}

.btn-primary {
    color: #FFFFFF;
}

.btn-square {
    width: 36px;
    height: 36px;
}

.btn-sm-square {
    width: 28px;
    height: 28px;
}

.btn-lg-square {
    width: 46px;
    height: 46px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

.back-to-top {
    position: fixed;
    display: none;
    right: 45px;
    bottom: 45px;
    z-index: 99;
}

.top-shape::before {
    position: absolute;
    content: "";
    width: 35px;
    height: 100%;
    top: 0;
    left: -17px;
    background: var(--primary);
    transform: skew(40deg);
}

.navbar-light .navbar-nav .nav-link {
    font-family: 'Barlow', sans-serif;
    padding: 35px 15px;
    font-size: 18px;
    text-transform: uppercase;
    color: var(--dark);
    outline: none;
    transition: .5s;
}

.sticky-top.navbar-light .navbar-nav .nav-link {
    padding: 20px 15px;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
    color: var(--primary);
}

@media (max-width: 991.98px) {
    .navbar-light .navbar-nav .nav-link {
        padding: 10px 0;
    }
}

.carousel-caption {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(21, 36, 64, .7);
    z-index: 1;
}

@media (max-width: 576px) {
    .carousel-caption h5 {
        font-size: 14px;
        font-weight: 500 !important;
    }

    .carousel-caption h1 {
        font-size: 30px;
        font-weight: 600 !important;
    }
    h4{
        font-size: 10px;
      }
}

@media (max-width: 320px) {
    h4 {
        font-size: 10px;
      }
    h5 {
      font-size: 10px;
    }
  }
.carousel-control-prev,
.carousel-control-next {
    width: 10%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 3rem;
    height: 3rem;
}

.service-item {
    position: relative;
    overflow: hidden;
    height: 350px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: .3s;
    cursor: pointer;
}

.service-item::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 50px;
    bottom: -50px;
    left: 0;
    background: var(--light);
    border-radius: 100% 100% 0 0;
    box-shadow: 0px -10px 5px #EEEEEE;
    transition: .5s;
}

.service-item:hover::after {
    bottom: -25px;
}

.service-item p {
    transition: .3s;
}

.service-item:hover p {
    margin-bottom: 25px !important;
}

.team-item img {
    transform: scale(1.15);
    margin-left: -30px;
    transition: .5s;
}

.team-item:hover img {
    margin-left: 0;
}

.team-item .team-text {
    left: -100%;
    transition: .5s;
}

.team-item .team-text::after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    top: 50%;
    right: -60px;
    margin-top: -30px;
    border: 30px solid;
    border-color: transparent transparent transparent var(--primary);
}

.team-item:hover .team-text {
    left: 0;
}

.testimonial-carousel .owl-nav {
    margin-top: 30px;
    display: flex;
    justify-content: start;
}

.testimonial-carousel .owl-nav .owl-prev,
.testimonial-carousel .owl-nav .owl-next {
    position: relative;
    margin: 0 5px;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background: var(--primary);
    font-size: 22px;
    border-radius: 45px;
    transition: .5s;
}

.testimonial-carousel .owl-nav .owl-prev:hover,
.testimonial-carousel .owl-nav .owl-next:hover {
    color: var(--dark);
}

.testimonial-carousel .owl-item img {
    width: 90px;
    height: 90px;
}

.blog-item img {
    transition: .5s;
}

.blog-item:hover img {
    transform: scale(1.1);
}

.loader {
    margin: auto;
    width: 50px;
    padding: 10px;
    display: none;
    height: 500px;
}

.loader img {
    text-align: center;

}



.box_container {
    display: none;
    text-align: center;
    margin-left: 2.5%;
    margin-top: 15px;
    margin-bottom: 15px;
    width: 95%;
    padding: 2%;
    -moz-box-shadow: 3px 3px 5px #535353;
    -webkit-box-shadow: 3px 3px 5px #535353;
    box-shadow: 9px 10px 3px 0px #535353;
    -moz-border-radius: 6px 6px 6px 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px 6px 6px 6px;
    border: solid black 2px;
}

.forum_container {
    min-height: 40px;
    min-width: 300px;
    margin-left: 18px;
    margin-right: 10px;
    float: left;
    position: sticky;
    max-width: 400px;
    max-height: 150px;
    text-align: center;
    margin-bottom: 15px;
    width: 95%;
    -moz-box-shadow: 3px 3px 5px #5983de;
    -webkit-box-shadow: 3px 3px 5px #5983de;
    box-shadow: 9px 10px 3px 0px #5983de;
    -moz-border-radius: 6px 6px 6px 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px 6px 6px 6px;
    border: solid rgb(37, 52, 222) 2px;
}

.forum_container .forum_txt {
    position: absolute;
    text-align: center;
    width: 100%;
    font-size: medium;
    cursor: pointer;
}

.title_container {
    cursor: pointer;
    min-width: 300px;
    margin-left: 18px;
    margin-right: 10px;
    float: right;
    position: sticky;
    max-width: 400px;
    max-height: 150px;
    text-align: center;
    margin-bottom: 15px;
    width: 95%;
    -moz-box-shadow: 3px 3px 5px #5983de;
    -webkit-box-shadow: 3px 3px 5px #5983de;
    box-shadow: 9px 10px 3px 0px #5983de;
    -moz-border-radius: 6px 6px 6px 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px 6px 6px 6px;
    border: solid rgb(37, 52, 222) 2px;
}

.title_container img {
    width: 100px;
    height: 100px;
    margin-left: 4px;
}

.title_container .title_txt {
    font-size: medium;
}

.title_container .body_txt {
    font-size: smaller;

}

.title_container .date_txt {
    font-size: xx-small;

}

.container_topbar {
    /*min-width: 400px;*/
    background-color: #6596ff;
    display: none;
    text-align: center;
    margin-left: 2.5%;
    margin-top: 15px;
    margin-bottom: 15px;
    width: 95%;
    -moz-box-shadow: 3px 3px 5px #535353;
    -webkit-box-shadow: 3px 3px 5px #535353;
    box-shadow: 9px 10px 3px 0px #535353;
    -moz-border-radius: 6px 6px 6px 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px 6px 6px 6px;
    border: solid black 2px;
}



#container_body {
    margin: auto;
    flex-wrap: wrap;
    width: 100%;
}

.form-body {
    background-color: #6596ff;
}

.form-holder {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    }

.form-holder .form-content {
    position: relative;
    text-align: center;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 60px;
}

.form-content .form-items {
    border: 3px solid #fff;
    padding: 4px;
    display: inline-block;
    width: 100%;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    text-align: left;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.form-content h3 {
    color: #fff;
    text-align: left;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 5px;
}

.form-content h3.form-title {
    margin-bottom: 30px;
}

.form-content p {
    color: #fff;
    text-align: left;
    font-size: 17px;
    font-weight: 300;
    line-height: 20px;
    margin-bottom: 30px;
}


.form-content label,
.was-validated .form-check-input:invalid~.form-check-label,
.was-validated .form-check-input:valid~.form-check-label {
    color: #fff;
}

.form-content input[type=text],
.form-content input[type=password],
.form-content input[type=email],
.form-content select {
    width: 100%;
    padding: 9px 20px;
    text-align: left;
    border: 0;
    outline: 0;
    border-radius: 6px;
    background-color: #fff;
    font-size: 15px;
    font-weight: 300;
    color: #8D8D8D;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    margin-top: 16px;
}


.btn-primary {
    background-color: #6C757D;
    outline: none;
    border: 0px;
    box-shadow: none;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #495056;
    outline: none !important;
    border: none !important;
    box-shadow: none;
}

.form-content textarea {
    position: static !important;
    width: 100%;
    padding: 8px 20px;
    border-radius: 6px;
    text-align: left;
    background-color: #fff;
    border: 0;
    font-size: 15px;
    font-weight: 300;
    color: #8D8D8D;
    outline: none;
    resize: none;
    height: 120px;
    -webkit-transition: none;
    transition: none;
    margin-bottom: 14px;
}

.form-content textarea:hover,
.form-content textarea:focus {
    border: 0;
    background-color: #ebeff8;
    color: #8D8D8D;
}

.mv-up {
    margin-top: -9px !important;
    margin-bottom: 8px !important;
}

.invalid-feedback {
    color: #ff606e;
}

.valid-feedback {
    color: #2acc80;
}

#donate_form {
    cursor: pointer;
}

.image_thump {
    float: left;
    width: 100px;
}

.photos_container {
    display: flex;
    height: 100%;
    background-color: rgb(201, 201, 237);
    flex-wrap: wrap;
}

.ms-auto {
    margin-right: auto !important;
}

/* Style the tab */
.wrapperx {
    max-width: 50rem;
    width: 100%;
    margin: 0 auto;
}

.tabxs {
    position: relative;
    margin: 3rem 0;
    background: #ffffff;
    height: 14.75rem;
}

.tabxs::before,
.tabxs::after {
    content: "";
    display: table;
}

.tabxs::after {
    clear: both;
}

.tabx {
    float: left;
}

.tabx-switch {
    display: none;
}

.tabx-label {
    position: relative;
    display: block;
    line-height: 2.75em;
    height: 3em;
    padding: 0 1.618em;
    background: #3687ca;
    border-right: 0.125rem solid #1654a0;
    color: #fff;
    cursor: pointer;
    top: 0;
    transition: all 0.25s;
}

.tabx-label:hover {
    top: -0.25rem;
    transition: top 0.25s;
}

.tabx-content {
    width: 100%;
    height: 12rem;
    position: absolute;
    z-index: 1;
    top: 2.75em;
    left: 0;
    background: #fff;
    color: #2c3e50;
    border-bottom: 0.25rem solid #bdc3c7;
    opacity: 0;
    transition: all 0.35s;
    overflow-x: hidden;
    overflow-y: auto;
    text-align: justify;
    display: flex;
    flex-wrap: wrap
}

.tabx-switch:checked+.tabx-label {
    background: rgb(187, 207, 249);
    color: #2c3e50;
    border-bottom: 0;
    border-right: 0.125rem solid #fff;
    transition: all 0.35s;
    z-index: 1;
    top: -0.0625rem;
}

.tabx-switch:checked+label+.tabx-content {
    z-index: 2;
    opacity: 1;
    transition: all 0.35s;
}

.badgex
{
    border-radius: 10px;
    background: #88afed;
    padding: 4px;
    display: -webkit-inline-box; 
    flex-direction: row;
    max-height: 20px;
    margin-left: 5px;
    margin-top: 2px;
    font-size: x-small;
  }

.badgex.green
{
    background: #66c95f;

}


.rate {
    height: 35px;
    padding: 0 10px;
    width: 100%;
    margin: auto;
    max-width: 225px;
}
.rate:not(:checked) > input {
    position:absolute;
    top:-9999px;
}
.rate:not(:checked) > label {
    float:right;
    width:1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:20px;
    color:#ccc;
}
.rate:not(:checked) > label:before {
    content: '★ ';
}
.rate > input:checked ~ label {
    color: #ffc700;    
}
.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
    color: #deb217;  
}
.rate > input:checked + label:hover,
.rate > input:checked + label:hover ~ label,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > label:hover ~ input:checked ~ label {
    color: #c59b08;
}

.xbox{
    max-width: 300px;
    margin: auto;
    padding: 6px;
    padding: auto;
    border-radius: 150px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
}

.xbox2{
    max-width: 95%;
    margin: auto;
    padding: 6px;
    padding: auto;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    box-shadow: 0 0 8px rgba(25, 29, 255, 0.8);
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    margin-bottom: 15px;
}

.xbox2.slider{
    overflow-y: scroll;
    height: 300px;
}
.xbox2.red{
    background-color: rgb(202, 101, 101);
}
.xbox2.green{
    background-color: rgb(118, 202, 101);
}
.xbox2.blue{
    background-color: rgb(84, 81, 184);
}

.comment_header
{
    min-width: 98%;
    background-color: #428bd2;
    min-height: 30px;
    border-radius: 10px;
    box-shadow: 0 0 8px rgb(0 0 0 / 80%);
}

.buttonx
{
    max-width: 120px;
    background-color: #649ed8;
    min-height: 30px;
    border-radius: 10px;
    box-shadow: 0 0 8px rgb(0 0 0 / 80%);
    border: #111 solid 1px;
    cursor: pointer;
    min-width: 100px;
    text-align: center;
}

.buttonx.center
{
    margin: auto;
}

.buttonx.right
{
    float: right;
    margin-left: 10px;
}

.buttonx.left
{
    float: left;
    margin-right: 10px;
}

.buttonx:hover
{
    background-color: #89b2db;
}

.buttonx.red
{
    background-color: #cd5454;
}

.buttonx.red:hover 
{
    background-color: #db8989;
}

.buttonx.yellow
{
    background-color: #cdc954; 
}

.buttonx.yellow:hover 
{
    background-color: #fdf9c5;
}

.buttonx.orange
{
    background-color: #cdb154; 
}

.buttonx.orange:hover 
{
    background-color: #fde8c5;
}

.buttonx.purple
{
    background-color: #9d54cd;
}

.buttonx.purple:hover 
{
    background-color: #c089db;
}


.buttonx.green
{
    background-color: #54cd5e;
}

.buttonx.green:hover 
{
    background-color: #a5d9a4;
}



.small_txt{
    font-size: 8px;
}
.xsmall_txt{
    font-size: 7px;
}

.xxsmall_txt{
    font-size: 6px;
}

.xxxsmall_txt{
    font-size: 5px;
}

.seperatorx{
    width: 98%; 
    text-align: center; 
    border-bottom: 1px solid rgb(56, 68, 198); 
    line-height: 0.1em;
    margin: 10px 0 20px; 
 } 

.bg-primary {
    --bs-bg-opacity: 1;
    background-color: #428bd2!important;
}
.text-primary {
    --bs-text-opacity: 1;
    color: #7c7cd8!important;
}

.bg-secondary {
    --bs-bg-opacity: 1;
    background-color: #d7d7d7!important;
}


.text-secondary {
    --bs-text-opacity: 1;
    color: white!important;
}

.text-secondary a {
    --bs-text-opacity: 1;
    color: #b5b5dc!important;
    text-decoration: none;
}
.text-body{
  background-color: #428bd2!important;
  color: white!important;
  padding: 7px 5px!important;
  text-decoration: none!important;
  text-transform: uppercase!important;
  font-weight: 500;
}
.text-body:hover {
    background-color: #555!important;
  }
.text-body:active {
    background-color: black!important;
  }

.h4 {
    color: #6363ba!important;
    text-decoration: none!important;
}

html::-webkit-scrollbar-track {
    background: linear-gradient(90deg,#434343,#434343 1px,#111 0,#111);
}

html::-webkit-scrollbar-thumb {
    background: #434343;
    border-radius: 16px;
    box-shadow: inset 2px 2px 2px hsl(0deg 0% 100% / 25%), inset -2px -2px 2px rgb(0 0 0 / 25%);
}


#editor {
    resize:vertical;
    overflow:auto;
    border:1px solid silver;
    border-radius:5px;
    min-height:100px;
    box-shadow: inset 0 0 10px silver;
    padding:1em;
    background: white;
    margin: 0 auto;
    width: 90%;
  }

#modalx_body
{
    min-height: 350px;
    max-height: 350px;
    overflow-y: scroll;
    width: 100%;
}

.statistic_container
{
    flex-direction: column;
}

.dropdown-menu.trans{
    background-color: transparent;
    border: 0px;
}

#container_title
{
    padding: 4px;
    font-size: 24px;
    margin: auto;
    width: 200px;
    margin-top: 10px;
    border: black 2px solid;
    text-align: center;
    border-radius: 10px;
    background-color: #758fff;
    display: none;
}

.img_group_x
{
    max-width: 400px;
    max-height: 400px;
    width: 400px;
    height: 400px;
    margin-bottom: 50px;
}

.fa-arrow-right{
    cursor: pointer;
}

.fa-arrow-left{
    cursor: pointer;
}

.tbx {
    border-collapse: collapse;
    width: 100%;
    overflow-x:auto;
  }
  
  .tbx.th,.tbx.td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #DDD;
  }
  
  .tbx.tr:hover {background-color: #D6EEEE;}