/*

Color palette

Blue : #092c5c
Gray: #6a7e9a
Yellow: #fff952

Text color

gray: #707477

*/

body {
    font-family: 'Bree Serif', sans-serif!important;
    color: #707477;
    font-size: 1.2em;
    height: 100%;
    width: 100%;
    overflow: auto;
    padding-top: constant(safe-area-inset-top); /* iOS 11.0 */
    padding-top: env(safe-area-inset-top); /* iOS 11.2 */
    background-image: url(../img/bg/bg-06.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative; 
}

html, body {
    -webkit-overflow-scrolling: touch!important;
    padding: 0px!important;
    margin: 0px!important;
}

body * {    
    outline: none!important;
    position: relative;
}

* {
    -webkit-tap-highlight-color: rgba(0,0,0,0)!important;
}
* {
    -ms-overflow-style: -ms-autohiding-scrollbar!important; /* Microsoft Edge */
    -ms-overflow-style: none!important; /* Internet Explorer */
}
::-webkit-scrollbar {display:none!important;}
::selection {
    background: #E86850!important; /* WebKit/Blink Browsers */
    color: #ffffff!important;
}
::-moz-selection {
    background: #E86850!important; /* Gecko Browsers */
    color: #ffffff!important;
}

h1 {
    font-family: 'Bree Serif', sans-serif!important;
    color: #707477!important;
    font-weight: 700!important;
    font-size: 21.5pt;
}


h2 {
    font-family: 'Bree Serif', sans-serif!important;
    color: #707477!important;
    font-weight: 700!important;
    font-size: 18pt;
}


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

.bolder {
    font-weight: 900!important;
}

.pointer {
    cursor: pointer;
}

/*_________ fullscreen styles _______*/


.fullscreen {
    position: absolute;
    z-index: 1000;
    left: 0px;
    right: 0px;
    top:0px;
    bottom:0px;

    width: 100vw;
    height: 100vh;
    overflow: hidden;
    padding: 0px!important;
    margin: 0px!important;
    
    background-color: #ededed!important;
    
    border: 0px;
}

.fullscreen .header {
    width: 100%;
    height: 70px!important;
    border-bottom: 1px solid #ccc!important;
    padding: 10px;
    text-align: center;
    background-color: #6a7e9a;
    color: #fff!important;
}

.fullscreen .content {
    padding: 10px;
    width: 100vw;
    height: calc( 100vh - 72px)!important;
    background-color: #fff!important; /* #efefef!important; */
    overflow-x: hidden!important;
    overflow-y: auto!important;
    -webkit-overflow-scrolling: touch!important;
}

.fullscreen .panel {
    background-color: #fff!important;
    padding: 2em 1em!important;
    margin: 0.5em 0em!important;
    white-space: normal;
    overflow-wrap: break-word;
}

.tile {
    background-color: #6a7e9a;
    color: #fff;
}

/*_________ clickable effect _______*/

.clickable {
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    overflow: hidden;
}
.clickable:after {
  content: "";
  background: #fff;
  display: block;
  position: absolute;
  padding-top: 300%;
  padding-left: 350%;
  margin-left: -20px!important;
  margin-top: -120%;
  opacity: 0;
  transition: all 0.8s
}

.clickable:active:after {
  padding: 0;
  margin: 0;
  opacity: 1;
  transition: 0s
}

/*_________ Horizontal scroll items */

.scrolling-wrapper {
    width: calc(100vw - 30px)!important;

    -webkit-overflow-scrolling: touch!important;
    overflow-x: auto!important;
    overflow-y: hidden!important;
    white-space: nowrap;
    border: 0px solid black;
}

.scrolling-wrapper > .card {
    display: inline-block!important;
    border-radius: 8px;
    overflow: hidden;
}

.scrolling-wrapper-flexbox {
    border: 2px solid black;
    width: calc(100vw - 30px)!important;
    height: 120px!important;
    
    display: flex!important;
    flex-wrap: nowrap!important;
    overflow-x: auto!important;
}

.scrolling-wrapper-flexbox .card {
    flex: 0 0 auto!important;
}

/*_________ Loading effect on buttons _______*/

.loading-bg {
    position:relative;
    animation: 20s infinite linear;
    animation-name: placeHolderShimmer;

    color: #000!important;

    background: repeating-linear-gradient(
        45deg,
        #dddddd, /* #606dbc, */
        #dddddd 10px, /* #606dbc 10px, */
        #eeeeee 10px, /* #465298 10px, */
        #eeeeee 20px /* #465298 20px */
        );

    /*  background: linear-gradient(45deg, #eeeeee 8%, #dddddd 18%, transparent 33%); */
    position: relative;
    -webkit-backface-visibility: hidden;
}


@keyframes placeHolderShimmer {
    0% {
        background-position: -30vw 0
    }
    100% {
        background-position: 70vw 0
    }
}



/*_________ 3D spin effect ________________*/

.w3-spin-3d {
    -webkit-animation-name: spinner3D; 
    -webkit-animation-timing-function: linear; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-duration: 2s; 
    animation-name: spinner3D; 
    animation-timing-function: linear; 
    animation-iteration-count: infinite; 
    animation-duration: 2s; 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    -ms-transform-style: preserve-3d; 
    transform-style: preserve-3d;
}


/* WebKit and Opera browsers */ 
@-webkit-keyframes spinner3D { 
    from 
    { 
        -webkit-transform: rotateY(0deg); 
    } 
    to { 
        -webkit-transform: rotateY(-360deg); 
    } 
} 
/* all other browsers */ 
@keyframes spinner3D { 
    from { 
        -moz-transform: rotateY(0deg); 
        -ms-transform: rotateY(0deg); 
        transform: rotateY(0deg); 
    } 
    to 
    { 
        -moz-transform: rotateY(-360deg); 
        -ms-transform: rotateY(-360deg); 
        transform: rotateY(-360deg); 

    } 
}


/*_________ Shake Effect ________________*/

.shake_effect {
    animation: shake 1s ;
    border: 3px solid orangered!important;
    outline: none!important;
}
@keyframes shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% {transform: translate3d(2px, 0, 0);}
    30%, 50%, 70% {transform: translate3d(-4px, 0, 0);}
    40%, 60% {transform: translate3d(4px, 0, 0);}
}