/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 1 Jul 2020, 18:44:39
    Author     : enkhzolsanchir
*/


.blueButton{
    background-image: linear-gradient(-45deg, #1B75BA , #5EB7E7);
    color:white;
    height: 45px;
    line-height: 22.5px;
    padding: 4px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 0px solid #ed3e9e;
    border-radius: 22.5px;
    box-sizing: border-box;
    cursor:pointer;
}
.blueButton:focus{
    outline: none !important;
}
.blueButton:active{
    opacity: 0.8;
}
.blueButton:disabled {
  background: #dddddd;
   color:gray;
   cursor:not-allowed;
}





.redButton{
    background: red;
    color:white;
    height: 45px;
    line-height: 22.5px;
    padding: 4px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 0px solid #ed3e9e;
    border-radius: 22.5px;
    box-sizing: border-box;
    cursor:pointer;
}
.redButton:focus{
    outline: none !important;
}
.redButton:active{
    opacity: 0.8;
}
.redButton:disabled {
  background: #dddddd;
   color:gray;
   cursor:not-allowed;
}



.pinkButton{
    background-image: linear-gradient(to right, #ed3e9e , #ed3e9e);
    color:white;
    height: 45px;
    line-height: 22.5px;
    padding: 4px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 0px solid #ed3e9e;
    border-radius: 22.5px;
    box-sizing: border-box;
    cursor:pointer;
}
.pinkButton:focus{
    outline: none !important;
}
.pinkButton:active{
    opacity: 0.8;
}
.pinkButton:disabled {
    background: #dddddd;
   color:gray;
   cursor:not-allowed;
}


.pinkButtonShape{
    background-image: linear-gradient(to right, #ed3e9e , #ed3e9e);
    color:white;
    height: 45px;
    line-height: 22.5px;
    padding: 4px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 0px solid #ed3e9e;
    border-radius: 22.5px;
    box-sizing: border-box;
}

.pinkButtonShape:focus{
    outline: none !important;
}
.pinkButtonShape:active{
    opacity: 1;
}


.grayButton{
    background: lightgray;
    color:black;
    height: 45px;
    line-height: 22.5px;
    padding: 4px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 0px solid #ed3e9e;
    border-radius: 22.5px;
    box-sizing: border-box;
    cursor:pointer;
}
.grayButton:focus{
    outline: none !important;
}
.grayButton:active{
    opacity: 0.8;
}
.grayButton:disabled {
  background: #dddddd;
   color:gray;
   cursor:not-allowed;
}



.goldButton{
    background: linear-gradient(120deg, #bf953f , #fcf6ba, #b38728, #fbf5b7, #aa771c);
    color:black;
    font-weight: 500;
    height: 45px;
    line-height: 22.5px;
    padding: 4px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 0px solid #ed3e9e;
    border-radius: 22.5px;
    box-sizing: border-box;
    cursor:pointer;
}
.goldButton:focus{
    outline: none !important;
}
.goldButton:active{
    opacity: 0.8;
}
.goldButton:disabled {
  background: #dddddd;
  color:gray;
  cursor:not-allowed;
}



.specialButton{
    background: linear-gradient(120deg, #bf953f , #fcf6ba, #b38728, #fbf5b7, #aa771c);
    color:purple;
    font-weight: 700;
    height: 30px;
    line-height: 15px;
    padding: 2px 20px;
    margin: 4px 0;
    display: inline-block;
    border: 0px solid #ed3e9e;
    border-radius: 15px;
    box-sizing: border-box;
    cursor:pointer;
}
.specialButton:focus{
    outline: none !important;
}
.specialButton:active{
    opacity: 0.8;
}
.specialButton:disabled {
  background: #dddddd;
  color:gray;
  cursor:not-allowed;
}


.specialButtonSmall{
    background: linear-gradient(120deg, #bf953f , #fcf6ba, #b38728, #fbf5b7, #aa771c);
    color:black;
    font-size: 11px;
    font-weight: 700;
    height: 30px;
    line-height: 15px;
    padding: 2px 20px;
    margin: 4px 0;
    display: inline-block;
    border: 0px solid #ed3e9e;
    border-radius: 15px;
    box-sizing: border-box;
    cursor:pointer;
}
.specialButtonSmall:focus{
    outline: none !important;
}
.specialButtonSmall:active{
    opacity: 0.8;
}
.specialButtonSmall:disabled {
  background: #dddddd;
  color:gray;
  cursor:not-allowed;
}


.yellowButton{
    background: yellow;
    color:red;
    font-size: 11px;
    font-weight: 700;
    height: 30px;
    line-height: 15px;
    padding: 2px 20px;
    margin: 4px 0;
    display: inline-block;
    border: 0px solid #ed3e9e;
    border-radius: 15px;
    box-sizing: border-box;
    cursor:pointer;
}
.yellowButton:focus{
    outline: none !important;
}
.yellowButton:active{
    opacity: 0.8;
}
.yellowButton:disabled {
  background: yellow;
  color:red;
  cursor:not-allowed;
}


.leftNumShape{
    color:white;
    font-size: 20px;
    font-weight: 400;
    height: 45px;
    line-height: 22.5px;
    margin: 4px 0;
    display: inline-block;
    background:#ed3e9e;
    border: 1px solid #ed3e9e;
    border-radius: 22.5px;
    box-sizing: border-box;
    padding: 4px 20px;
}


@media (max-width:600px){
    .leftNumShape{
        font-size: 4vw;
        height:8vw;
        border-radius:4vw;
        line-height: 4vw;
    }
}


.purchaseButton{
    color:white;
    font-size: 20px;
    font-weight: 400;
    height: 45px;
    line-height: 22.5px;
    margin: 4px 0;
    display: inline-block;
    background:#116aa8;
    border: 0px solid #116aa8;
    border-radius: 22.5px;
    box-sizing: border-box;
    padding: 4px 20px;
}


.purchaseButton:hover{
    opacity: 0.8;
    outline: none !important;
}

.purchaseButton:focus{
    outline: none !important;
}
.purchaseButton:active{
    opacity: 0.8;
}
.purchaseButton:disabled {
  background: #dddddd;
  color:gray;
  cursor:not-allowed;
}

@media (max-width:600px){
    .purchaseButton{
        font-size: 5vw;
        height:10vw;
        border-radius:5vw;
        line-height: 5vw;
    }
}


.followButton{
    color:white;
    font-size: 20px;
    font-weight: 400;
    height: 45px;
    line-height: 22.5px;
    margin: 4px 0;
    display: inline-block;
    background:#116aa8;
    border: 1px solid #116aa8;
    border-radius: 22.5px;
    box-sizing: border-box;
    cursor:pointer;
    padding: 4px 20px;
}

.followButton:hover{
    opacity: 0.8;
    outline: none !important;
}

.followButton:focus{
    outline: none !important;
}
.followButton:active{
    opacity: 0.8;
}
.followButton:disabled {
  background: #dddddd;
  color:white;
  cursor:not-allowed;
}

@media (max-width:600px){
    .followButton{
        font-size: 3vw;
        height:7vw;
        border-radius:3.5vw;
        line-height: 3.5vw;
    }
}

.unfollowButton{
    color:gray;
    font-size: 20px;
    font-weight: 400;
    height: 45px;
    line-height: 22.5px;
    margin: 4px 0;
    display: inline-block;
    background:white;
    border: 1px solid gray;
    border-radius: 22.5px;
    box-sizing: border-box;
    cursor:pointer;
    padding: 4px 20px;
}

.unfollowButton:hover{
    opacity: 0.8;
    outline: none !important;
}

.unfollowButton:focus{
    outline: none !important;
}
.unfollowButton:active{
    opacity: 0.8;
}
.unfollowButton:disabled {
  background: #dddddd;
  color:white;
  cursor:not-allowed;
}

@media (max-width:600px){
    .unfollowButton{
        font-size: 3vw;
        height:7vw;
        border-radius:3.5vw;
        line-height: 3.5vw;
    }
}


.black-white-button{
    background: white;
    color:#116aa8;
    font-size: 20px;
    font-weight: 500;
    height: 30px;
    line-height: 15px;
    margin: 4px 0;
    display: inline-block;
    border: 1px solid #116aa8;
    border-radius: 15px;
    box-sizing: border-box;
    cursor:pointer;
    padding: 4px 20px;
}

.black-white-button:hover{
    background: #dddddd;
    outline: none !important;
}

.black-white-button:focus{
    outline: none !important;
}
.black-white-button:active{
    opacity: 0.8;
}
.black-white-button:disabled {
  background: #dddddd;
  color:white;
  cursor:not-allowed;
}

@media (max-width:600px){
    .black-white-button{
        font-size: 3vw;
        height:5vw;
        border-radius:2.5vw;
        line-height: 2.5vw;
    }
}





@media (min-width:601px){
    .specialButton{
        background: linear-gradient(120deg, #bf953f , #fcf6ba, #b38728, #fbf5b7, #aa771c);
        color:purple;
        font-weight: 700;
        height: 50px;
        line-height: 25px;
        padding: 4px 40px;
        margin: 0 0;
        display: inline-block;
        border: 0px solid #ed3e9e;
        border-radius: 25px;
        box-sizing: border-box;
        cursor:pointer;
        font-size: 22px;
    }
    .specialButton:focus{
        outline: none !important;
    }
    .specialButton:active{
        opacity: 0.8;
    }
    .specialButton:disabled {
      background: #dddddd;
      color:gray;
      cursor:not-allowed;
    }
    

    .specialButtonSmall{
        background: linear-gradient(120deg, #bf953f , #fcf6ba, #b38728, #fbf5b7, #aa771c);
        color:black;
        font-size: 18px;
        font-weight: 700;
        height: 40px;
        line-height: 20px;
        padding: 2px 20px;
        margin: 4px 0;
        display: inline-block;
        border: 0px solid #ed3e9e;
        border-radius: 20px;
        box-sizing: border-box;
        cursor:pointer;
    }
    .specialButtonSmall:focus{
        outline: none !important;
    }
    .specialButtonSmall:active{
        opacity: 0.8;
    }
    .specialButtonSmall:disabled {
      background: #dddddd;
      color:gray;
      cursor:not-allowed;
    }
    
    
    .yellowButton{
        background: yellow;
        color:red;
        font-size: 18px;
        font-weight: 700;
        height: 40px;
        line-height: 20px;
        padding: 2px 20px;
        margin: 4px 0;
        display: inline-block;
        border: 0px solid #ed3e9e;
        border-radius: 20px;
        box-sizing: border-box;
        cursor:pointer;
    }
    .yellowButton:focus{
        outline: none !important;
    }
    .yellowButton:active{
        opacity: 0.8;
    }
    .yellowButton:disabled {
      background: yellow;
      color:red;
      cursor:not-allowed;
    }
    
}