/*--for loading---*/
.no-js #loader {
	display: none;
}

.js #loader {
	display: block;
	position: absolute;
	left: 100px;
	top: 0;
}

.se-pre-con {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url(../img/Preloader_2.gif) center no-repeat; /*/prototype/globev2/img/Preloader_2.gif*/
}
/*------------------------*/

/*---globe container and list---*/
.js-globe {
	position: relative;
	margin: auto;
	height: inherit;
	z-index: 33;
}

#top-glow {
	position: absolute;
	top: calc(-4% - 10px);
	right: 0;
	top: 0;
	z-index: -1;
	background-size: 80%;
	/*background: url(../img/globe-topglow.png) no-repeat center -30px/cover;*/
}

.js-canvas {
	z-index: 0;
	cursor: move; /* fallback if grab cursor is unsupported */
  cursor: grab;
}

.js-list {
	list-style-type: none;
	margin: 0;
}

.js-list li:hover {
	/*background: #d5cccc !important;*/
	cursor: pointer;
}

.globe .globe-list > li {
	opacity: 1;
	/*border: 1px solid #383535;*/
	position: absolute;
	margin-left: -58px;
	margin-top: -30px;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	display: block;
	background: url('../img/location.png') center center/cover no-repeat;
	z-index: 51;
}

.globe .globe-list > li:before {
	content: "";
	opacity: 0.5;
	pointer-events: none;
	margin-left: -8px;
	margin-top: -8px;
	width: 16px;
	height: 16px;
	z-index: 52;
}

	/*country text*/
.globe .globe-list .text {
	position: absolute;
	opacity: 1;
	right: 37px;
	top: 50%;
	display: block;
	font-size: 1.1rem;
	line-height: 5px;
	font-weight: bold;
	text-align: right;
	/*text-shadow: -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, 1px 1px 0 #000000;*/
	color: #fff;
	white-space: nowrap;
	transform: translateY(-50%);
	width: auto;
	height: 20px;
	background-color: #045584;
	padding: 6px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

#continentName {
	color: #fff;
	letter-spacing: unset;
	font-size: 2em;
}

/*countries that have text-box on right side*/
.Ontario span, .California span, .Carolina span, .Jersey span, .Massachusetts span, .Germany span, .Austria span, .Delaware span, .Switzerland span, .Kingdoms span  {
	position: relative !important;
  right: -18px !important;
  text-align: left !important;
  float: left !important;
  top: -19px !important;
}

.Ontario {
  width: 26px !important;
  height: 26px !important;
  background: #FFF !important;
}

.Ontario span{
	font-size: 34px !important;
  height: 30px !important;
  line-height: 8px !important;
  padding: 9px !important;
  left: 27px !important;
  top: -13px !important;
  border-radius: 0px;
}
/*------------------------*/

/*!*---hide globe when screen is too small*!*/
@media screen and (max-width: 650px) {
    .globe {margin: 10vh auto 0 auto;}
}

/*This removes the blue border around focused items*/
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

/*---Hamburger Menu---*/
#closeContainer {
    position: fixed;
    min-width: 90px;
    width: 12%;
    height: 50px;
    max-width: 50px;
    transition: 0.5s ease-in-out;
    z-index: 60;
}

#closeButton {
    width: 39px;
    height: 45px;
    position: absolute;
    right: 0;
    top: 0;
    margin: 5px;
    -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;
    z-index: 4;
}

#closeButton span {
    display: block;
    position: absolute;
    height: 6px;
    width: 100%;
    background: #fff;
    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;
}

#closeButton 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;
}

#closeButton span:nth-child(2) {
    top: 12px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
}

#closeButton span:nth-child(3) {
    top: 24px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
}

#closeButton.open {
    transition: .5s ease-in-out;
}

#closeButton.open span:nth-child(1) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top: -3px;
    left: 8px;
}

#closeButton.open span:nth-child(1) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top: -3px;
    left: 8px;
}

#closeButton.open span:nth-child(2) {
    width: 0%;
    opacity: 0;
}

#closeButton.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 24px;
    left: 8px;
}

#main {
    transition: margin-left .5s;
    padding: 20px;
}

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

/*---sidenav container---*/
.sidenav {
    height: 100%;
    min-width: 0px;
    width: 12%;
    max-width: 0px;
    position: fixed;
    z-index: 3;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);;
    overflow-x: hidden;
    padding-top: 60px;
    transition: 0.5s;
}

.show {
    min-width: 250px !important;
    max-width: 307px !important;
}

.sidenav::-webkit-scrollbar {
    display: none;
}

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

/*---sidenav search bar---*/
#searchContainer {
    width: 80%;
    margin: 45px auto 0 auto;
    position: relative;
}

#myInput {
    background-color: rgba(0, 0, 0, 0);
    width: 100%;
    font-size: 1rem;
    color: white;
    padding: 8px 20px 8px 40px;
    border: none;
    border-bottom: 2px solid #ffffffab;
    -webkit-transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

#searchicon {
    position: absolute;
    left: 0;
    top: 11px;
    transition: 0.5s ease-in-out;
}

#clearicon {
    position: absolute;
    left: 0;
    top: 11px;
    display: none;
    transition: 0.5s ease-in-out;
}

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

/*-----country list-----*/
.countryContainer {
    margin-top: 10px;
    height: 72%;
}

.countryList {
    color: white;
    list-style-type: none;
    font-size: 1.3rem;
    overflow: auto;
    height: 100%;
    width: 80%;
    margin: 0 auto;
    padding: 0;
}

.countryList::-webkit-scrollbar {
    display: none;
}

.countryList li {
    border-bottom: 1px solid #ffffff36;
    padding-bottom: 5px;
}

.countryList li:hover {
    cursor: pointer;
    color: #948888 !important;
}

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

/*---bottom control buttons---*/
#devider {
    width: 80%;
    margin: 30px auto 0;
    border-bottom: 2px solid white;
}

#functions {
    width: 80%;
    margin: 0 auto;
}

#functions button {
    width: 200px;
    background-color: transparent;
    color: #fff;
    margin: auto;
}

#functions button:focus {
    outline: 0;
}

#functions .wtwig-button-new {
    position: relative;
    border-top: 0;
    margin-top: 10px;
}

.wtwig-button-new a, .wtwig-button-new button {
    display: block;
    text-align: center;
    border: none;
    cursor: pointer;
}

.wtwig-button-new a::before, .wtwig-button-new button::before {
    content: "";
    background: url(../img/wtwig-button-top.svg) no-repeat right -5px;
    height: 5px;
    display: inline-block;
    position: absolute;
    top: -2px;
    left: 0;
    width: 100%;
}

.wtwig-button-new.light-grey {
    border: 1px solid #eeeeee;
    border-top: 0;
}

.wtwig-button-new.light-grey a, .wtwig-button-new.light-grey button {
    color: #eeeeee !important;
}

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

/*change sidenav style and hide logo in bottom right*/
@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }

    .sidenav a {
        font-size: 18px;
    }

    /*#logoBottomRight {display: none;}*/
}

/*remove sidenav elements when window is very small*/
@media screen and (max-height: 280px) {
    /*.countryContainer {display: none;}*/
    /*#searchContainer {display: none;}*/
    #devider {
        margin: 70px auto 0px;
    }
}

/*remove elements to display unsuitable device message*/
@media screen and (max-width: 650px) {
    #closeContainer {display: none;}
    #mySidenav {display: none;}
    /*#logoBottomRight {display: none;}*/
}

/*---initial styling---*/

body {
  background: #002245 url(../img/bg-space.jpg) repeat top center/cover fixed;
  max-height:100vh;
  font-family: 'Cairo', sans-serif;
  font-weight: bold;
  letter-spacing: -1px;
  text-align: right;
}

html {
  font-family: 'Cairo', sans-serif;
  font-weight: bold;
  letter-spacing: -1px;
  overflow-x: hidden;
  margin-top: 0;
}

h2 {
  font-weight: 100;
  letter-spacing: -1px;
  font-size: 1.9rem;
}

.col-lg-4{
  z-index: 104;
}

#contentWrapper{
  height: 100vh;
  transition: 0.5s;
}
/*------------------------*/

/*---logo manipulation---*/
.logo {
  width: 25vw;
  height: auto;
  display: block;
  float: right;
}

.logoFixed img{
  width: 200px;
  float: none;
}

#logoBottomRight {
  position: relative;
  /*bottom: 70px;*/
  /*left: 0;*/
  padding: 25px;
}
/*------------------------*/

/*---content container---*/
#sidebar{
  margin: auto;
}

#contentContainer{
  color: white;
  padding: 0 35px;
  width: 30vw;
  float: right;
}

#contentContainer svg{
  display: none;
}

.container-fluid{
  min-height: calc(100% - 100px);
  position: relative;
}

#countryName{
  font-family: Cairo, Arial;
  color: #d43b2f;
  text-align: center;
  font-size: 32px;
  margin-bottom: -25px;
}
/*------------------------*/

/*---company list---*/
#countryListAME{
  max-height: 60vh;
  overflow: scroll;
  list-style-type: none;
  padding: 20px 10px;
  background: rgba(255,255,255,0.90);
  border: 1px solid #0A246A;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

#countryListAME::-webkit-scrollbar {
    display: none;
}

#countryListAME li h2 {
  color: #0A246A;
  font-family: 'Cairo', Arial;
  text-align: right;
  border-bottom: 1px solid #ffffff36;
  padding-bottom: 5px;
  position: relative;
  margin-right: 24px;
}

#countryListAME li h2:hover{
  cursor: pointer;
  color: #0e3cbd;
}

#countryListAME li div > div{
  padding: 10px;
  font-size: 20px;
  margin-bottom: 5px;
}

/*.row{*/
  /*height: 100vh;*/
/*}*/

.accordion-toggle {
  cursor: pointer;
}

.accordion-content {
  display: none;
  font-weight: 100;
}
.accordion-content.default {
  display: block;
}

h2.accordion-toggle:after {
  content: attr(data-sign);
  position: absolute;
  right: -22px;
  opacity: 0.5;
}
/*------------------------*/

/*---scrolling arrows---*/
#scrollArrows i{
  display: block;
}

#scrollArrows i:hover {
  cursor: pointer;
}

#scrollArrows {
  display: none;
  opacity: 0.7;
  color: white;
  position: absolute;
  right: 0px;
  top: 47%;
  font-size: 49px;
}
/*------------------------*/

/*---when screen becomes too small to display--*/
/*#screenSizeMessage {*/
  /*position: absolute;*/
  /*color: white;*/
  /*top: 30%;*/
  /*text-align: center;*/
  /*display: none;*/
/*}*/

/*#phoneText {*/
  /*font-size: 2em;*/
  /*padding: 25px;*/
/*}*/

/*#phoneLogo {*/
  /*width: 260px;*/
/*}*/
/*------------------------*/

/*---change font-size for better responsiveness---*/
@media only screen and (max-height: 1000px) {
  h2 {
    font-size: 1.2rem;
  }
}

/*---add responsiveness---*/
@media only screen and (max-width: 1199px) {
  body{
    background-size: 460%;
    background: #002245 url(../img/bg-space.jpg) repeat top center/cover fixed;
  }

  #contentContainer {
    width: 110%;
  }

  #contentWrapper {
    height: auto;
  }

  #scrollArrows {
    right: 20px;
  }

  .logo {
    float: none;
    margin: 0 auto;
  }

  #logoBottomRight {
    /*width: 5vw;*/
    position: relative;
    /*float: left;*/
    /*padding: 25px 49px 25px 0;*/
  }
}

/*---hide elements when screen is too small to display globe---*/
@media screen and (max-width: 650px) {
    #sidebar {display: none;}
    /*#logoContainer {display: none;}*/
    /*#screenSizeMessage {display: block;}*/
}

.lds-facebook {
    display: inline-block;
    position: relative;
    width: 35px;
    height: 35px;
}
.lds-facebook div {
    display: inline-block;
    position: absolute;
    left: 6px;
    width: 13px;
    background: #fff;
    animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}
.lds-facebook div:nth-child(1) {
    left: 6px;
    animation-delay: -0.24s;
}
.lds-facebook div:nth-child(2) {
    left: 26px;
    animation-delay: -0.12s;
}
.lds-facebook div:nth-child(3) {
    left: 45px;
    animation-delay: 0;
}
@keyframes lds-facebook {
    0% {
        top: 6px;
        height: 51px;
    }
    50%, 100% {
        top: 19px;
        height: 26px;
    }
}


@tailwind base;
@tailwind components;
@tailwind utilities;

.logo-container-ame {
    display: none;
}


.footer {
    position: relative;
    bottom: 0;
    padding: 10px 0;
    margin: 10px auto 0 auto;
    width: 95%;
    color: #333333;
    background: #fff;
    font-family: Cairo,Arial;
    font-weight: bold;
    border: 1px solid #e1e1e1;
    -webkit-border-radius: 20px 20px 0 0;
    -moz-border-radius: 20px 20px 0 0;
    border-radius: 20px 20px 0 0;
    z-index: 2;
}

.footer-ul {
    direction: rtl;
    display: inline-flex;
}

.footer-ul li {
    display: inline-flex;
    padding: 5px;
    text-align: center;
    font-family: Cairo, Arial;
    font-size: 1rem;
}

.footer-ul li a {
    color: #fff;
}

.footer-ul li a:hover {
    color: #fff;
}

.counts {
    width: 100%;
    /*background: #fff;*/
    padding: 2px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    font-weight: bold;
    font-size: 1.3em;

}

.countsF {
    color: #0A246A;
    /*color: #7f3767;*/
}

.countsM {
    color: #0A246A;
    /*color: #30497d;*/
}


.mainStatisticsContainer {
    width: 100%;
    padding: 10px;
    margin: auto;
    //display: flex;
    //flex-direction: row;
    //flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    color: #0A246A;
    font-weight: bolder;
    font-size: 1rem;
}

@media(max-width: 767px) {
    .mainStatisticsContainer {
        //flex-direction: column;
        margin: 10px auto 0 auto;
    }

    .logo-container-ame {
        display: block;
    }

    .logo-container-ame img {
        width: 100%;
        height: auto;
    }
}

.mainStatisticsChild {
    //flex: 1;
    padding: 10px;
    text-align: center;
    border: 1px solid #0A246A;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background-color: rgba(255,255,255,0.90);
    margin: 2px;
    color: #1a559d;
    font-weight: bolder;
    letter-spacing: unset;
    vertical-align: middle;
}

#totalMale, #totalFemale, #toalCountries, #currentMonthTotal, #todayTotal, #totals {
    display: block;
    color: #d14a15;
    /*-webkit-text-stroke-width: 1px;*/
    /*-webkit-text-stroke-color: #0A246A;*/
    font-weight: bold;
    padding: 10px;
    font-size: 2.4em;
}

.iconsame {
    display: block;
    color: gray;
    font-weight: bold;
    padding: 10px;
    font-size: 2.4em;
}

.totals {
    border: 1px solid #e2e2e7;
    background: #00112d;
}

#currentTime , #currentJDate, #currentHijriDate{
    color: white;
    font-weight: bold;
}

#currentJDate {
    padding: 10px;
    text-align: center;
    border: 1px solid #0A246A;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    margin: 10px;
    vertical-align: middle;
    color: #279d99;
    background: #cef9ff;
}

.timeContainer {
    width: 100%;
    display: flex;
    flex-direction: row;
    float: right;
}

.jdate, .ctime, .hijri_date {
    margin: 0 5px;
    padding: 2px;
}

.ctime {
    color: yellow;
}

#particles-js {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.container-fluid, .addthis_inline_share_toolbox {
    z-index: 2;
}

p {
    margin: 0;
}

.group_title {
    color: white;
    font-size: 1.5em;
    width: 100%;
    text-align: center;
    margin-top: 10px;
    background-color: rgba(0, 9, 65, 0.6);
    border-radius: 10px;
}

.group_title:hover, .group_title:hover {
    text-decoration: none;
}

.show {
    max-width: 100% !important;
}