/**************************** HTML *****************************/
html {
  font-size: 16px;
}

@media only screen and (min-width: 1000px) {
  html {
    font-size: 18px;
  }
}

#page {
  padding: 20px;
}

/**************************** BANNER *****************************/
.banner img {
  height: 20%;
  width: 100%;
}

/**************************** BUTTON *****************************/
button.grey {
  border: 0px;
  color: #59250d;
  font-weight: 400;
  border: 1px solid #712e10;
  padding: 5px 50px;
  font-size: 15px;
  border-radius: 5px;
  box-shadow: 2px 3px 5px #a8a8a8;
}

@media only screen and (min-width: 1000px) {
  button.grey {
    padding-top: 7px;
    padding-bottom: 7px;
  }
}

button.grey:disabled {
  opacity: 0.5;
  box-shadow: none;
}

button.orange {
  border: 0px;
  background-color: #dca726;
  font-weight: 400;
  padding: 5px 15px;
  font-size: 15px;
  border-radius: 5px;
  box-shadow: 2px 3px 5px #a8a8a8;
  color: white;
}

button.round {
  border-radius: 15px;
}

@media only screen and (min-width: 1000px) {
  button {
    font-size: 16px;
  }
}

/**************************** FORM SHADOW *****************************/
#form-shadow>form {
  padding-top: 15px;
  display: grid;
  row-gap: 10px;
}

#form-shadow>form>.block {
  display: grid;
  grid-template-columns: 90px auto 1fr;
  box-shadow: 2px 2px 7px #888888;
  border-radius: 5px;
  border: 1px solid whitesmoke;
  padding: 5px 0px;
  column-gap: 20px;
  background-color: white;
}

@media only screen and (min-width: 1000px) {
  #form-shadow>form>.block {
    grid-template-columns: 100px auto 1fr;
  }
}

#form-shadow>form>.block-error {
  display: none;
  color: #d10000;
  font-size: 15px;
  padding-bottom: 5px;
  text-align: center;
}

#form-shadow>form>.block>.label {
  color: #59250d;
  font-size: 15px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-weight: bold;
}

@media only screen and (min-width: 1000px) {
  #form-shadow>form>.block>.label {
    font-size: 17px;
  }
}

#form-shadow>form>.block>.separator {
  border-right: 2px solid #d5d5d5;
}

#form-shadow>form>.block>.input>input {
  border: none;
  width: 100%;
  outline: none;
  height: 30px;
}
#form-shadow>form>.block>.input>#password {
  height: 40px;
}

#form-shadow>form>.block>.input>input::placeholder {
  color: lightgrey;
}

@media only screen and (min-width: 1000px) {
  #form-shadow>form>.block>.input>input {
    height: 35px;
  }
  #form-shadow>form>.block>.input>#password {
    height: 55px;
  }
}

/**************************** FORM *****************************/
#form {
  display: grid;
  row-gap: 10px;
}

#form>.block>.input>input {
  height: 40px;
  border: 1px solid lightgrey;
  width: 100%;
  border-radius: 5px;
  padding: 0px 10px;
  outline: none;
}

#form>.block>.input>input::placeholder {
  color: lightgrey;
}

#form>.block>.input.file>label {
  width: 100%;
  height: 40px;
  display: grid;
  align-items: center;
  padding: 5px;
  border: 1px solid lightgrey;
  border-radius: 5px;
  color: lightgrey;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

#form>.block>.input.file>label>.button {
  background-color: lightgrey;
  color: black;
  padding: 0px 15px;
  border-radius: 5px;
  font-size: 14px;
  height: 100%;
  display: grid;
  align-items: center;
  font-weight: 400;
}

/**************************** LUCAS *****************************/

/* BUTTON ACTION */
.btn-custom{
    padding: 0.275rem 0.5rem ;
	  color: black ;
	  background-color: #efefef ;
    border: 1px solid #712e10;
    border-radius: 5px;
    box-shadow: 2px 2px 2px 0px #8080805e;
    font-size: 0.8rem;
    line-height: 1;
    z-index: 2;
}

.btn-custom > i{
    padding-right:5px;
}

.btn-custom:hover{
  box-shadow: 2px 2px 6px #712e10;
  color: #712e10;
}

#search .form-control:focus {
    border-color: #ced4da !important;
}

.form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
        opacity: 0.8; /* Firefox */
}

/* BACK && DOWNLOAD */
#back-download{
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0% 5%;
    padding-top:30px;
}

#back-download > .icon-button{
   text-align: right;

}

/**************************** SOCIAL WALL *****************************/

.social-wall{
  background-color: #dedede;
  min-height: calc(100% - 560px);
  padding: 30px 5%;
}

.social-wall #add-post-button{
  text-align: right;
  padding-bottom: 20px;
  padding-right: 4.5%;
}

.social-wall #add-post-button button{
  border-radius: 30px;
  color: #ea3433;
  font-weight: 600;
  border: none;
}

	/* OLD */
	.social-wall .list-image{
    column-width: 14vw;
		padding: 0px 5%;
		margin: 0px auto;
		background-color: #dedede;
	}


	.social-wall .list-image .block .social-image img{
		width: 15.6vw
;
		border-top-right-radius: 10px;
		border-top-left-radius: 10px;
    min-height:100px; 
    background: url('https://public.tableau.com/s/sites/default/files/media/spinning_wheel_2.gif');
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
	}

	.desc-box{
	  width: 15.6vw
;
		background-color: white;
		border-bottom-right-radius: 10px;
		border-bottom-left-radius: 10px;
		padding: 5px;
	} 


	/* .social-wall .list-image{
    margin: 0px auto;
    width: 100%;
		display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
		column-gap: 10px;
    row-gap: 25px;
	} */

	/* .social-wall .list-image > div {
    position: relative;
    cursor:pointer;
    border-radius: 10px;
    box-shadow: 2px 3px 5px #a8a8a8;
    background-color: #faf6f6c2;
	} */

  .social-wall .list-image .hover {
   margin-bottom:10px;
	}

  .social-wall .list-image .hover:hover {
    border-radius: 10px;
		box-shadow: 2px 2px 6px #712e10;
    cursor:pointer;
    width:15.6vw
;
	}

  .social-wall .list-image .hover .social-image:hover {
    position:relative;
}

	/* .social-wall .list-image .block .social-image{
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    height: 200px;
    margin: auto;
    display: grid;
    justify-content: center;
    align-items: center;
    background-color: white;
} */


	/* .social-wall .list-image .block .social-image img{
      max-width: 100%;
      max-height: 200px;
	} */

	.social-wall .list-image .block .desc-box{
    	background-color: #faf6f6c2;
    	padding: 5px;
		  width: 15.6vw
;
      cursor:pointer;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
	}


	.social-wall .list-image .block .desc-box > .desc{
	    display: -webkit-box;
	    -webkit-line-clamp: 2;
	    -webkit-box-orient: vertical;
	    text-overflow: ellipsis;
		  overflow: hidden;
	    line-height: 22px;
      cursor:pointer;
      font-size: 0.9rem;
	}

  .social-wall .delete-post{
		position: absolute;
    top: 10px;
    right: 10px;
		color: red;
	}

	@media only screen and (max-width: 1000px) {

    .social-wall {
      min-height: calc(100% - 70px) !important;
    }

    .social-wall .list-image{
      column-width: 36vw;
      column-gap: 10px;
    }

    .social-wall .list-image .hover:hover {
      width:38vw;
    }

    .social-wall .list-image .block .social-image{
      position:relative;
    }

    .social-wall .list-image .block .social-image img{
      width: 38vw;
      min-height: 50px;
    }

    .social-wall .list-image .block .desc-box{
			width:38vw
		}
    

		/* /.social-wall .list-image .block .desc-box{
			font-size:12px;
			height: 30%;
		}

		.social-wall .list-image .block .desc-box > .desc{
			line-height: 16px;
			overflow: hidden;
			width: 90%; 
		} */
	}

	.p-0{
    padding: 0;
}

.block-error {
  display: none;
  font-size: 15px;
  padding-bottom: 5px;
  text-align: center;
  background-color: #fef1f6;
  color: #8e0000;
}

/**************************** MODAL *****************************/

.video-wrapper{
  width: 100%;
  height: 0;
  position: relative;
  padding-bottom: 56.25%;
}

.video-wrapper >iframe{
  width: 100%;
    height: 100%;
}

.image-wrapper{
  width: 100.1%;
  height: 0;
  position: relative;
  padding-bottom: 47.1% !important;
  display: grid;
  justify-content: center;
  background-color: #000000fa;
}


.image-wrapper > img{
  width: 100%;
  max-height: 536px;
}

.image-wrapper > .description{
  position: absolute;
  bottom: -1;
  text-align: center;
  width: 100%;
  color: white;
  background: rgb(70 70 70 / 0.40);
  padding: 10px 40px 4px 40px;
}


@media only screen and (max-width: 1000px) {
  .image-wrapper{
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
    justify-content: center;
    background-color: #dedede;
    padding-bottom: 0% !important;
  }

  .image-wrapper > img{
    height: 100%;
    margin-top: 0px !important;
  }
}

/**************************** ACHIEVER PROFILE *****************************/

#achiever_profile_mdrt > #top {
  position: relative;
    height: 550px !important;
  overflow: hidden;
}

#achiever_profile_mdrt > #top > #bgvideo {
  position: absolute;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: 1;
    height: 550px;
    object-fit: fill;
    width: 100%;
}

#achiever_profile_mdrt > #top > .animation > #effect-video {

  display: block;
  position: absolute;
    z-index: 40;
    margin-left: auto;
    margin-right: auto;
    left: -0;
    right: 0;
    text-align: center;
    bottom: 0px;
    width: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

#achiever_profile_mdrt > #top > .animation > #effect-video-mobile {
  display: none;
}

#achiever_profile_mdrt > #top #personal {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#achiever_profile_mdrt > #top #personal #left-action-button {
  display:none;
  position: absolute;
  height: 100%;
  z-index: 50;
}

#achiever_profile_mdrt > #top #personal #left-action-button #left-button {
  position: absolute;
  padding: 20px;
  display:grid;
  grid-template-rows: 1fr auto;
  height: 100%;
  z-index: 50;
}

#achiever_profile_mdrt > #top #left-action-button #left-button .btn-custom{
  box-shadow: 2px 3px 5px #5b5959;
}

#achiever_profile_mdrt > #top #left-button .back-button img{
  cursor: pointer;
  width:100%
}

#achiever_profile_mdrt > #top #left-button #bottom-button{
  display: grid;
  row-gap:5px;
}

#achiever_profile_mdrt > #top #left-button #bottom-button .action-button{
  display: grid;
  width:60px;
  cursor: pointer;
}

#achiever_profile_mdrt > #top #left-button #bottom-button .action-button img{
  width:100%
}

#achiever_profile_mdrt > #top #personal #left-category-past-achievement-box {
  position: absolute;
  margin-right: auto;
  margin-left: auto;
  right: 60%;
  row-gap: 15%;
  text-align: left;
  z-index: 40;
  top: 8%;
  
}

#achiever_profile_mdrt > #top #personal #left-category-past-achievement-box #left-category {
  display:none;
  padding-bottom: 40px;
}

#achiever_profile_mdrt > #top #personal #left-category-past-achievement-box #past-achievement-box {
  background-color: rgb(255 254 254 / 25%);
  display: inline-block;
  box-shadow: -1px -4px 5px 8px rgb(10 9 9 / 25%);
  color: white;
  border-radius: 15px;
  padding: 15px 10px;
  text-transform: uppercase;
  display:none;
  position: relative;
  max-width: 300px;
}

#achiever_profile_mdrt > #top #personal #past-achievement-box #past_achievement_list{
    display: grid;
   row-gap:5px
}

#achiever_profile_mdrt > #top .close-achievement-box{
  position: absolute;
  border-radius: 15px;
  border: 1px solid;
  padding: 3px 6px;
  top: -30px;
  right: 5px;
  cursor: pointer;
}

@media only screen and (max-width: 1000px) {
  #achiever_profile_mdrt > #top .close-achievement-box{
    padding: 2px 4px;
    top: -20px;
  }
}

#achiever_profile_mdrt > #top #personal #past-achievement-box .achievement {
  border-bottom: 1px solid;
  padding-bottom: 5px; 
}

#achiever_profile_mdrt > #top #personal #past-achievement-box .achievement:last-child {
  border-bottom: none;
  padding-bottom: 0px; 
}

#achiever_profile_mdrt > #top #past-achievenment-mobile-view{
  display: none;
}

#achiever_profile_mdrt > #top #personal #left-category-past-achievement-box #video-comming-soon-box {
  background-color: rgb(255 254 254 / 25%);
  display: inline-block;
  box-shadow: -1px -4px 5px 8px rgb(10 9 9 / 25%);
  color: white;
  border-radius: 15px;
  padding: 30px 10px 15px 10px;
  display: none;
  position: relative;
}

#achiever_profile_mdrt > #top .close-comming-soon-box{
  position: absolute;
  border-radius: 15px;
  border: 1px solid;
  padding: 2px 4px;
  top: 7px;
  right: 10px;
  cursor: pointer;
  font-size: 12px;
  background: white;
  color: grey;
}


#achiever_profile_mdrt > #top #video-comming-soon-box-mobile-view{
  display: none;
  position: absolute;
  z-index: 55;
  font-size: 0.5rem;
  bottom: 0;
  width: 100%;
  text-align: center;
  bottom: 37%;
  left: -30%;
}

#achiever_profile_mdrt > #top #video-comming-soon-box-mobile-view #video-comming-soon-box{
  background-color: #878787;
  display: inline-block;
  box-shadow: -1px -4px 5px 8px rgb(10 9 9 / 25%);
  color: white;
  border-radius: 15px;
  padding: 20px 10px 10px 10px;
  position: relative;
  font-size: 9px;
  max-width: 120px;
}

#achiever_profile_mdrt > #top #video-comming-soon-box-mobile-view .close-video-box{
  position: absolute;
  border-radius: 15px;
  border: 1px solid;
  padding: 2px 4px;
  top: 3px;
  right: 10px;
  cursor: pointer;
  font-size: 7px;
}

#achiever_profile_mdrt > #top #personal #profile-detail {
    padding-top: 80px
}

#achiever_profile_mdrt > #top #personal #profile-detail #profile-pic {
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
    position: absolute;
  z-index: 30;
}

#achiever_profile_mdrt > #top #personal #profile-detail #profile-pic #profile-picture {
  display:none;
  width: 440px;
  margin-top:-10px;
}


#achiever_profile_mdrt > #top #personal #profile-detail #personal-detail {
  margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
    position: absolute;
    bottom: 0px;
  display:none;
  z-index:41;
}

#achiever_profile_mdrt > #top #personal #personal-detail #shadow-background {
  background-color: rgb(24 23 23 / 25%);
    display: inline-block;
  box-shadow: -1px -4px 5px 8px rgb(24 23 23 /25%);
  margin: 0 70px 20px 70px;
}

#achiever_profile_mdrt > #top #personal #personal-detail #name  {
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 0px;
  line-height: 1;
  color: white;
}

#achiever_profile_mdrt > #top #personal #profile-detail #personal-detail #company  {
  text-transform: uppercase;
  padding-bottom: 5PX;
  font-size: 1.2rem;
  color: white;
}

#achiever_profile_mdrt > #top #personal #profile-detail #wise-quoto  {
  font-weight: 600;
    padding-top: 5px;
    font-size: 2.3rem;
    position: relative;
    margin-left: 60%;
    margin-right: 10%;
    left: 0;
    right: 0;
    text-align: left;
    position: absolute;
    color: white;
    top: 240px;
    color: white;
  display:none;
  z-index: 43;
}

#achiever_profile_mdrt > #top #personal #profile-detail #wise-quoto label  {
  font-family: delight-creations;
  line-height: 1;
}

#achiever_profile_mdrt > #top #personal #profile-detail #wise-quoto #edit-message  {
  border-radius: 30px;
    color: #ea3433;
    text-align: right;
  font-weight:600;
  border:none;
  top: 10px;
  grid-template-columns: 1fr 1fr;
    right: -10%;
    position: absolute;
    top: 24px;
}

#achiever_profile_mdrt > #top #personal #profile-detail > #personal-detail{
  width: 50%;
  padding-bottom: 20px;
}

#achiever_profile_mdrt > #top #personal #profile-detail .past-achievement-heart{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  padding-left: 60px;
}

#achiever_profile_mdrt > #top #personal #profile-detail .past-achievement-heart .action-button-heart {
  padding: 2px 15px;
  border-radius: 15px;
  color: red;
  font-size: 15px;
  display: grid;
  grid-template-columns: 0px 72px;
  position: relative;
  margin-left: 15px;
}

#achiever_profile_mdrt > #top #personal #profile-detail .past-achievement-heart .action-button-heart > #number {
  border-right: none;
    background-color: white;
    border-radius: 30px;
    padding: 5px 3px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    column-gap: 8px;
    font-weight: 500;
    position: absolute;
    z-index: 4;
}

#achiever_profile_mdrt > #top #personal #profile-detail .past-achievement-heart .action-button-heart > #number > #number-support {
  font-size: 0.9rem;
}

#achiever_profile_mdrt > #top #personal #profile-detail .past-achievement-heart .action-button-heart > #number > a > i{
  font-size: 18px;
  margin: 3px 5px 3px -4px;
  cursor: pointer;
}

#achiever_profile_mdrt > #top #personal #profile-detail .past-achievement-heart .action-button-heart #support-button {
  background-color: #e92d2df7;
  color: white;
  border-radius: 15px;
  margin-top: 2px;
  box-shadow: 2px 3px 5px #322f2f;
  padding: 2px 20px 0px 20px;
  font-size: 0.9rem;
}

#achiever_profile_mdrt > #top #personal #profile-detail #past-achievement img{
  width:170px;
  cursor:pointer;
}

@media only screen and (max-width: 1000px) {

  #achiever_profile_mdrt > #top {
      height: 350px !important;
  }

  #achiever_profile_mdrt > #top > #bgvideo {
      height: 350px;
  }

  #achiever_profile_mdrt > #top > .animation > #effect-video {
      display: none;
  }

  #achiever_profile_mdrt > #top > .animation > #effect-video-mobile {
    display: block;
    height: 350px;
    position: absolute;
    z-index: 40;
    margin-left: auto;
    margin-right: auto;
    left: -0;
    right: 0;
    text-align: center;
    bottom: 0px;
    width: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }

  #achiever_profile_mdrt > #top #left-button .back-button img{
    width:80%
  }

  #achiever_profile_mdrt > #top #left-button #bottom-button .action-button img{
    width:80%
  }

  #achiever_profile_mdrt > #top #personal #left-category-past-achievement-box {
    z-index: 40;
    font-size:0.6rem;
    margin-right: auto;
    margin-left: auto;
    left: -25px;
    right: 50%;
    display: block;
    text-align: center;
    top: 16%;
  }

  #achiever_profile_mdrt > #top #personal #left-category-past-achievement-box #left-category {
    top: -29px;
  }

  #achiever_profile_mdrt > #top #left-category-past-achievement-box #past-achievement-box{
			display:none;
		}

		#achiever_profile_mdrt > #top #past-achievenment-mobile-view{
			position: absolute;
    		z-index: 54;
    		font-size: 0.5rem;
    		bottom: 0;
    		width: 100%;
    		text-align: center;
    		bottom: 20%;
        bottom: 37%;
        left: -30%;
		}

		#achiever_profile_mdrt > #top #past-achievenment-mobile-view #past-achievement-box-mobile{
			background-color: #878787;
    	display: inline-block;
    	box-shadow: -1px -4px 5px 8px rgb(10 9 9 / 25%);
    	color: white;
    	border-radius: 15px;
    	padding: 10px;
			text-transform: uppercase;
      position: relative;
      max-width: 140px;
		}

		#achiever_profile_mdrt > #top #past-achievenment-mobile-view #past-achievement-box-mobile #past_achievement_list_mobile{
    		display: grid;
			row-gap:5px
		}

		#achiever_profile_mdrt > #top #past-achievenment-mobile-view #past-achievement-box-mobile .achievement {
			border-bottom: 1px solid;
			padding-bottom: 5px; 
		}

		#achiever_profile_mdrt > #top #past-achievenment-mobile-view #past-achievement-box-mobile .achievement:last-child {
			border-bottom: none;
			padding-bottom: 0px; 
		}

		#achiever_profile_mdrt > #top #personal #profile-detail #wise-quoto  {
      font-size: 1rem;
      left: 20;
    top: 120;
    z-index: 43;
  }

  #achiever_profile_mdrt > #top #personal #profile-detail #wise-quoto #edit-message  {
      top: -20px;
  }

  #achiever_profile_mdrt > #top #personal #profile-detail #profile-pic #profile-picture {
    width: 260px;
  }

  #achiever_profile_mdrt > #top #personal #profile-detail #profile-pic {
    padding-right: 0%;
  }

  #achiever_profile_mdrt > #top #personal #profile-detail #personal-detail {
    margin-right: 0%;
  }

  #achiever_profile_mdrt > #top #personal #personal-detail #name  {
    font-size:1rem
  }

  #achiever_profile_mdrt > #top #personal #profile-detail #personal-detail #company  {
    font-size:0.8rem
  }

  #achiever_profile_mdrt > #top #personal #profile-detail #past-achievement img{
    width:120px;
  }

  #achiever_profile_mdrt > #top #personal #profile-detail .past-achievement-heart .action-button-heart {
    padding: 1px 0px;
  }
  
  #support-icon-red > i{
    font-size: 15px;
  }

  #achiever_profile_mdrt > #top #personal #profile-detail .past-achievement-heart .action-button-heart > #number > a > i{
    margin: 2px 4px 2px -4px;
    font-size: 15px;
  }

  #achiever_profile_mdrt > #top #personal #profile-detail > .right> .right-content #support #support-button {
    font-size: 0.8rem;
  }

  #achiever_profile_mdrt > #top #personal #profile-detail .past-achievement-heart .action-button-heart #support-button {
    padding: 2px 0px 0px 20px;
  }
}

/**************************** LOADING *****************************/
#uploading, #deleting{
  position: fixed;
  opacity: 1;
  z-index: 100;
  display: flex;
  top: 41%;
  margin: auto;
  left: 44%;
  justify-content: center;
  align-items: center;
  background-color: white;
  padding: 10px;
  column-gap: 20px;
  box-shadow: 2px 3px 5px #a8a8a8;
  height: auto;
  width: auto;
}


/**************************** VOLUME *****************************/

.icon-volume > #mute{
  display:none;
}

.icon-button-v > i {
padding: 5px;
border: 1px solid #85888b;
background-color: white;
border-radius: 5px;
font-size: 1.1rem;
background-color: white;
box-shadow: 1px 1px 1px 1px #8080805e !important;
position: fixed;
right: 20px;
bottom: 20px;
z-index: 2;
cursor: pointer;
}

@media only screen and (max-width: 1000px) {
  .icon-button-v > i {
  padding: 3px;
  font-size: 0.8rem;
  right: 20px;
  top: 65px;
  bottom: unset;
  z-index: 999;
  }
} 

audio{
  top: 20px;
  position: absolute;
  z-index: 12;
}

#downloadoption {
  position: absolute;
  left: 89px;
  background-color: white;
  border: 1px solid lightgrey;
  box-shadow: 0 11px 15px -7px rgb(0 0 0 / 20%), 0 10px 38px 3px rgb(0 0 0 / 14%), 0 9px 46px 8px rgb(0 0 0 / 0%);
  bottom: 30px;
  display: none;
}

#downloadoption ul{
  list-style: none;
  margin: 0px;
  padding: 0px;
  height: auto;
  max-height: 90vh;
}

#downloadoption ul a{
  text-decoration: none;
  color: black;
  display: grid;
  padding: 20px 30px;
  white-space: nowrap;
  grid-template-columns: 1fr auto;
  align-items: center;
}

@media only screen and (max-width: 1000px) {
  #downloadoption {
    left: 60px;
  }
  #downloadoption ul a{
    padding: 10px;
  }
}