* {
    box-sizing: border-box;
}


header,
.admin-panel {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    background-color: #36393E;
    align-items: center;
    font-size: 1.5vw;
}

.wrap-logo {
    display: flex;
    align-items: center;
    justify-content: center;

    /*flex: none;*/

}

.image {
    /*width: 5vw;  Adjust the percentage value as needed */
    width: 5vw;
    height: 5vw;
}

header a,
.admin-panel a {
    color: #fff;
    padding: 0.5vw;
    text-decoration: none;
    border-radius: 0.2vw;
}


header a:hover,
.admin-panel a:hover {
    background-color: #2F3136;
    color: #fff;
}

header a.active,
.admin-panel a.active {
    background-color: #2F3136;
}

.profile a:hover {
    background-color: #36393E;
!important;
}

.admin-panel {
    border-top: 0.3vw solid black;
    font-size: 1.2vw;
    justify-content: center;
    margin-bottom: 0.5vw;
}

nav {
    display: flex;
    align-items: center;
}

.logo:hover {
    background-color: #36393E;
}


.profile {
    position: relative;
    margin-right: 2vw;

}

.profile img {
    width: 4vw;
    height: 4vw;
    border-radius: 50%;
    cursor: pointer;
}

img.notice {
    margin-right: 0.3vw;
    width: 2vw;
    height: 2vw;
    border-radius: 50%;
    cursor: pointer;
}

#dropdown {
    position: absolute;
    top: 4vw;
    height: auto;
    width: 9vw;
    margin-right: 0.1vw;
    background-color: #36393E;
}

#admin {

}

.dropdown {
    display: none !important;
}
.profile-dropdown{
    display: none;
    z-index: 9999;
    text-align: center;
    overflow: hidden;
}

.show {
    display: block !important;
}


body {
    font-family: "Barlow", sans-serif;
!important
}


div.right {
    margin-right: 20px;
    margin-top: 10px;
}

.nickname {
    font-family: 'Montserrat', sans-serif;
    color: #fe6637;
    margin-right: 20px;
}

.funct-btn,
.save-btn,
.discard-btn,
.submit-button,
.maxheight{
    text-decoration: none;
    display: inline-block;
    position: relative;
    overflow: hidden;
    border: 0.14706vw solid #1D1D1B;
    border-radius: 0.58824vw;
    background: #545454;
    font-family: 'montserrat', sans-serif;
    font-size: 1vw;
    text-align: center !important;
    vertical-align: middle;
    color: white;
    transition: .2s ease-in-out;
    width: 6vw; /* Adjust the width as per your design */
    height: 2vw; /* Adjust the height as per your design */
}
.maxheight{
    width: 8vw;
    height: 5vw !important;
    display: flex !important;
    justify-content: center !important;
    border-color: #2F3136!important;
    align-items: center !important;
}
.funct-btn{
    background: white;
    color: #1D1D1B;
}
.funct-btn a,
.funct-btn a:hover{
    text-decoration: none;
    color: #1D1D1B;
}
.save-btn a,
.save-btn a:hover{
    text-decoration: none;
    color: white;
    display: block;
    width: 100%;
    height: 100%;
    text-align: inherit;
    padding: inherit;
}
.green{
    font-size: 1vw;
    color: #3aaa35;
}

.funct-btn:before,
.save-btn:before,
.discard-btn:before,
.submit-button:before {
    content: "";
    background: linear-gradient(90deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .5));
    height: 4vw;
    width: 3vw;
    position: absolute;
    top: -0.5vw;
    left: -5.5vw;
    transform: skewx(-45deg);
}
.funct-btn:hover,
.save-btn:hover,
.submit-button:hover,
.maxheight:hover{
    background: #3aaa35;
    color: #fff;
}
.funct-btn:hover{
    color: #1D1D1B;
}

.green-back{
    background-color: #3aaa35 !important;
    color: white !important;
    text-align: center !important;
}
.green-back:hover{
    background-color: darkgreen !important;
}
.center{
    margin-left: auto;
    margin-right: auto;
}
.notice-center{
    align-items: center;
    text-align: center;
}
.funct-btn:hover:before,
.save-btn:hover:before,
.discard-btn:hover:before,
.submit-button:hover:before {
    left: 11vw;
    transition: .5s ease-in-out;
}

.save-btn:disabled {
    background: grey;
    border-color: grey;
}

.btn-long {
    width: 11vw;
!important;
}

.discard-btn {
    border: 0.14706vw solid red;
!important;
    background: darksalmon;
!important;
}

.discard-btn:hover {
    background: red;
!important;
}

input[type="email"],
input[type="password"],
input[type="number"],
input[type="text"],
textarea,
select {
    /* Add your desired styles here */
    box-shadow: 0 0 0.3vw 0 grey;
    border: 1px solid grey;
    border-radius: 0.58824vw;
    width: 5vw;
    min-height: 2vw;
    font-size: 1vw;
    color: grey;
    background-color: #2F3136;
}

input[type="email"],
input[type="password"],
input[type="text"] {
    width: 15vw;
    min-height: 2vw;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

select {
    width: 25vw;
    min-height: 2vw;
}
.select-short{
    width: 5vw !important;
}

.file-input {

    color: grey;
    font-size: 1vw;
    cursor: pointer;
}


/*select:hover, */
.file-input:focus,
.file-input:hover,
option:focus,
option:hover {
    color: #3aaa35;
    outline: none;
}

textarea:hover,
textarea:focus,
input[type="number"]:hover,
input[type="number"]:focus,
input[type="password"]:hover,
input[type="password"]:focus,
input[type="text"]:hover,
input[type="text"]:focus,
input[type="email"]:hover,
input[type="email"]:focus {
    /* Add your desired styles here */
    box-shadow: 0 0 1vw 0 #3aaa35;
    border: 0.1vw solid #3aaa35;
    border-radius: 0.58824vw;
    background-color: #2F3136;
    color: grey;
}


.account span {
    font-size: 1vw;
}
.session-change{
    font-size: 1.2vw;
}

#message-popup-success,
#message-popup-error,
#message-popup-warning {
    position: fixed;
    bottom: 0vw;
    right: 0vw;
    background-color: #3aaa35;
    color: white;
    min-width: 10vw;
    min-height: 4vw;
    font-size: 1.5vw;
    padding: 1vw;

    opacity: 1;
    animation: popupAnimation 10s;
    animation-fill-mode: forwards;
}

#message-popup-error {
    background-color: #FF0000;
}

#message-popup-warning {
    background-color: orange;
}

@keyframes popupAnimation {
    0% {
        display: block;
    }
    95% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        display: none;
    }
}

.section {
    alignment: center;
    font-size: 2vw;
}
.tooltipImg{
    z-index: 9999 !important;
    display: flex;
    flex-direction: column;
}
.tooltipImg span {
    visibility: hidden;
    position: fixed;
    left: 15%;
    top: 35%;
    max-width: 50vw;
    max-height: 25vw;
    background: #2F3136;
    color: grey;
    font-size: 1.5vw;
    box-shadow: 0 0 1vw 0 #3aaa35;
    border: 0.5vw solid #3aaa35;
    border-radius: 0.58824vw;
    z-index: 9999 !important;
    align-items: center;
}
.tooltipImg img {
    max-width: 30vw;
    max-height: 17vw;
    z-index: 9999 !important;
    margin-left: auto;
    margin-right: auto;
}
.tooltipImg:hover span {
    visibility: visible;
}
.tooltipImg a {
    z-index: 2!important;
}

.usd-transact,
.eur-transact {
    display: none;
}

.total-transact {
    display: inline-block;
}
.sect {
    font-size: 2vw;
    align-items: center;
    text-align: center;
}
.sect span{
    font-size: 1vw;
}
.copyrights{
    font-size: 1vw;
}

body {
    /* background-image: url("/images/bg-image-main.jpg") !important;
     background-repeat: space;
     background-color: grey !important; */
    background-color: #1D1D1B !important;
    color: grey !important;

}