@font-face {
    font-family: metropolis-bold;
    src: url(/fonts/metropolis/Metropolis-Bold.otf);
}

@font-face {
    font-family: metropolis-medium;
    src: url(/fonts/metropolis/Metropolis-Medium.otf);
}

@font-face {
    font-family: metropolis-regular;
    src: url(/fonts/metropolis/Metropolis-Regular.otf);
}

@font-face {
    font-family: metropolis-light;
    src: url(/fonts/metropolis/Metropolis-Light.otf);
}

@font-face {
    font-family: orange-juice;
    src: url(/fonts/orange_juice/orange_juice.ttf);
}

* {
    font-family: metropolis-light;
}

body {
    background-image: url("bg.jpg");
    /* background-repeat: no-repeat; */
    /* overflow: hidden!important; */
}

.metro-bold {
    font-family: metropolis-bold;
}

.metro-regular {
    font-family: metropolis-regular;
}

.header-text { text-align:center; margin-top:48px;margin-bottom:2px; }

.font-orange {
    color:#919191;
    font-family:orange-juice!important;
    font-size:45px;
}

.card {
    margin-top:-55px;
    background:#fafafa;
    border-radius:50px;
    border-color:#5c5c5c;
    border-width:1pt;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
    transform: scale(.82);
}

.card-body {
    background:#fafafa;
    border-radius:50px;
}

.btn-submit {
    border-radius:12px;
    width:200px;
    background:#ff4600!important;
    color:#fff;
    margin-top:11px;
}

.btn-submit:hover {
    background:#ff6a32!important;
    color:#fff;
}

.logo{
    width:72px!important;
}

textarea,
input {
    border-color:#c4c4c4;
    margin-top:9px;
    resize:none;
    border-radius:12px!important;
    padding:3px;
}

textarea::placeholder,
input::placeholder {
    color:#c4c4c4!important;
}

.drop-area {
    border-style:dashed;
    border-color:#a4b0be;
    width:85%!important;
    margin-top:12px;
    padding:12px;
    border-radius:12px;
    border-width:1.8px;
    position:relative;
}

.drop-area.is-invalid{
    border-color:red!important;
}

.drop-area p {
    margin:0px;
}

table td {
    color:#919191;
}

table img {
    width:18px;
    opacity:0.6;
    margin-right:3px;
}

#content {
    padding:0px!important;
    margin:0px!important;
}

#instagram {
    margin-top:-50px;
    opacity:0.5;
}

.slash {
    position:absolute;
    display:flex;
    align-items:center;
    height:100%;
    padding-left:7px;
    opacity: .5;
    font-size:18px;
}

.ig{
    position:relative;
}

#instagram_kullanici_adi {
    border-style:none;
    border-width: 0px 0px 1px 0px;
    border-color:rgba(145,145,145,.5);
    border-style:solid;
    border-radius:0px!important;
    padding-left:28px;
    background:transparent;
}

#instagram_kullanici_adi.is-invalid{
    border-color:#dc3545!important;
}

#overlay {
    top:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:#fe8de2;
    position:absolute;
    width:100%;
    height:100%!important;
    overflow:hidden;
    transition:all .5s;
    display:flex;
    z-index:-1;
}

#overlay.passive {
    opacity:0;
}

#overlay.active {
    z-index:999;
    opacity:1;
}

#loading {
    width:250px;
}

#yukleniyor {
    margin-top:18px;
    font-family : metropolis-medium;
    font-size:28px;
    color:#fff;
}

#basarili {
    width:550px;
}

.is-invalid{
    background-image : none!important;
}

.add {
    color:#ff4600;
    cursor:pointer;
}

td.space { width:90px; height:35px; }


@media all and (min-width:960px) and (max-width: 1024px) {
    body { overflow:scroll!important;background-image: url("mobile-bg.jpg");background-repeat: no-repeat; }
    #basarili { width:500px; }
    td.space { width:50px; height:25px; }
    .drop-area { width:100% }
    .header-text { margin-top:40px!important;font-size:25px!important;margin-bottom:3px;color:#2f3542!important; }
}

@media all and (min-width:801px) and (max-width: 959px) {
    body { overflow:scroll!important;background-image: url("mobile-bg.jpg");background-repeat: no-repeat; }
    #basarili { width:500px; }
    td.space { width:50px; height:25px; }
    .drop-area { width:100%!important;}
    .header-text { margin-top:40px!important;font-size:25px!important;margin-bottom:3px;color:#2f3542!important; }
}

@media all and (min-width:769px) and (max-width: 800px) {
    body { overflow:scroll!important;background-image: url("mobile-bg.jpg");background-repeat: no-repeat; }
    #basarili { width:500px; }
    td.space { width:50px; height:25px; }
    .drop-area { width:100%!important;}
    .header-text { margin-top:40px!important;font-size:25px!important;margin-bottom:3px;color:#2f3542!important; }
}

@media all and (min-width:569px) and (max-width: 768px) {
    body { overflow:scroll!important;background-image: url("mobile-bg.jpg");background-repeat: no-repeat; }
    #basarili { width:500px; }
    td.space { width:50px; height:25px; }
    .drop-area { width:100%!important;}
    .header-text { margin-top:40px!important;font-size:25px!important;margin-bottom:3px;color:#2f3542!important; }
}

@media all and (min-width:481px) and (max-width: 568px) {
    body { overflow:scroll!important;background-image: url("mobile-bg.jpg");background-repeat: no-repeat; }
    #basarili { width:300px; }
    td.space { width:50px; height:25px; }
    .drop-area { width:100%!important;}
    .header-text { margin-top:40px!important;font-size:25px!important;margin-bottom:3px;color:#2f3542!important; }
}

@media all and (min-width:321px) and (max-width: 480px) {
    body { overflow:scroll!important;background-image: url("mobile-bg.jpg");background-repeat: no-repeat; }
    #basarili { width:300px; }
    td.space { width:50px; height:25px; }
    .drop-area { width:100%!important;}
    .header-text { margin-top:40px!important;font-size:25px!important;margin-bottom:3px;color:#2f3542!important; }
}

@media all and (min-width:0px) and (max-width: 320px) {
    body { overflow:scroll!important;background-image: url("mobile-bg.jpg");background-repeat: no-repeat; }
    #basarili { width:200px; }
    td.space { width:50px; height:25px; }
    .drop-area { width:100%!important;}
    .header-text { margin-top:40px!important;font-size:25px!important;margin-bottom:3px;color:#2f3542!important; }
}