/************************* public section *************************/

* {
    touch-action: manipulation;
}

body {
    /* font-family: -apple-system, "Roboto", sans-serif; */
    font-family: "Roboto", sans-serif;
    font-style: normal;
    
}

html, body {
  user-select: none;
  -webkit-user-select: none; /* Chrome Safari */        
  -moz-user-select: none;    /* Firefox */
}

.form-control:focus {
  box-shadow: none!important;
}

img {
    background-color: #eee;
    /* background: linear-gradient(-45deg, #262522, #262625, #595958, #9e9e9b); */
    /* animation: gradient 2s ease infinite; */
    /* background-size: 400% 400%; */
}

/* @keyframes gradient { */
	/* 0% { */
		/* background-position: 0% 50%; */
	/* } */
	/* 50% { */
		/* background-position: 100% 50%; */
	/* } */
	/* 100% { */
		/* background-position: 0% 50%; */
	/* } */
/* } */

.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

.footer-onselect {
    filter: opacity(100%) !important;
}

.hide-scroll {
    -ms-overflow-style: none;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.show-onselect {
    display: block !important;
}

.flex-onselect {
    display: block !important;
}

.rotate_onselect {
    transform:rotate(180deg) translate(0vw, 0vh);
}


.hide-scroll::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

.sub-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: #fff;
    padding: 0 0 1vh 1vw ;
    /* text-shadow: 4px 1px 5px rgba(0,0,0,0.4); */
}



.click-transition:hover {
    opacity: 0.5;
}

.input-click-transition {
    transition: 0.2s all; 
}

.input-click-transition:active {
    transition: 0.2s all; 
    transform: scale(0.98); 
}

.loader-shadow {
    display:none;
    background-color: #fff;
    opacity: 0.9;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    z-index: 98;
}

.loader {
    display:none;
    position: fixed;
    top: 45vh;
    left: 40vw;
    width: 45px;
    aspect-ratio: 1;
    --c: no-repeat linear-gradient(#000 0 0);
    background: 
    var(--c) 0%   50%,
    var(--c) 50%  50%,
    var(--c) 100% 50%;
    background-size: 20% 100%;
    animation: l1 1s infinite linear;
    z-index: 99;
}

@keyframes l1 {
  0%  {background-size: 20% 100%,20% 100%,20% 100%}
  33% {background-size: 20% 10% ,20% 100%,20% 100%}
  50% {background-size: 20% 100%,20% 10% ,20% 100%}
  66% {background-size: 20% 100%,20% 100%,20% 10% }
  100%{background-size: 20% 100%,20% 100%,20% 100%}
}

/************************* helper section *************************/

.helper-div 
{
    top: 20vh;
    left: 0;
    position:fixed;
    display:flex;
    flex-direction: column;
    
    z-index:99;
}

.helper-div div 
{
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 5vw;
    background-color:#000;
    color: #fff;
    opacity: 0.6;
    padding: 1vh 0 1vh 1vw;
    
}

.helper-div div:hover 
{
    opacity: 1;
    cursor: pointer;
}

.helper-div div:nth-child(1)
{
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom: 1px solid;
}

.helper-div div:nth-child()
{
    border-top: 1px solid;
    border-bottom: 1px solid;
}
.helper-div div:nth-child(3)
{
    border-top: 1px solid;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    
}
/************************* header section *************************/

.header-navigation {
        padding:2vh 0 0 0;
        position: fixed;
        top: 0;
        width: 100vw;
        height: 6vh;
        /* max-height: 49px; */
        background-color: #0e8345;
        display: flex;
        flex-direction: row;
        z-index:99;
        -webkit-box-shadow: 0px 0px 2px rgba(30, 30, 30, 0.3);
        -moz-box-shadow: 0px 0px 2px rgba(30, 30, 30, 0.3);
        box-shadow: 0px 0px 1px 2gba(30, 30, 30, 0.3);
        margin-left:-2vw;
        /* justify-content: space-between; */
    }
        .header-left {
            width: 70%;
        }
        
        .header-left select {
            margin-top: 1vh;
            border:none;
            border-radius: 3px;
            background-color: #0e8345;
            color: #fff;
        }
        
        .header-right {
            width: 20%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
        .header-right div img{
            width: 30px;
            height: 30px;
        } 
        
        .header-right div svg{
            width: 33px;
            height: 33px;
            color: white;
        }
        
        .header-right div:nth-child(1) img{
            border-radius: 20px;
        } 

/************************* page-content section *************************/

.page-content {
    top: 7vh;
    position:relative;
    left: -2vw;
    width: 100vw;
    height:80vh;
    /* background-color: yellow; */
    overflow-y: auto;
    padding: 3vh 0 1vh 0;
    
    display:flex;
    flex-direction: column;
    align-items: center;
}

/************************* footer section *************************/

.footer-navigation {
        padding:1vh 2.5vw 1vh 1vw;
        position: fixed;
        bottom: 0;
        
        width: 98vw;
        /* height: 1vh; */
        max-height: 56px;
        margin-left: -2vw;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        background-color: #fff;
        z-index: 99;
        -webkit-box-shadow: 0px -4px 1px rgba(30, 30, 30, 0.3);
        -moz-box-shadow: 0px -4px 1px rgba(30, 30, 30, 0.3);
        box-shadow: 0px -4px 1px rgba(30, 30, 30, 0.3);
        
    }
    
    .footer-button {
        width:20%;
        height: 20%;
        
        display: flex;
        flex-direction: column;
        filter: opacity(50%);
        
    }

    .footer-button  div {
        display: flex;
        flex-direction: row;
        justify-content: center;
        cursor: pointer;
        
    }

    .footer-button > div > img, .footer-button > div > svg {
        width:40px;
        height: 40px;
        
        /* background-color:orange; */
    }