@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Martian+Mono:wght@400;500;600;700;800&display=swap');

*{
    font-family: "Poppins",sans-serif;
    box-sizing: border-box;
}

body{
    background: url("../img/wave-haikei.svg") no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

.logo_container{
    position: fixed;
    top:10px;
    left:30px;
    width:100px;
    height:100px;
    text-align: center;
    border-radius:50%;
    background-color:rgba(255,255,255,0.3);
    padding:10px;
    border:3px solid rgba(0,0,0,0.6);
}

.logo_container img{
    height:100%;
}

.ownContainer{
    width:96%;
    max-width:1000px;
    border-radius:25px;
    padding:35px;
    margin:50px auto;
    background-color: rgba(0,0,0,0.2);
    box-shadow: 0px 0px 1px 10px rgba(255,255,255,0.12);
    position: relative;
}

.ownContainer textarea{
    border-radius:20px;
    height:calc(100vh - 450px);
    padding:20px;
    border:5px solid rgba(61, 78, 109, 0.4);
}

h1{
    color: #a0a9b4;
    font-weight:400;
    margin-bottom:2.5rem !important;
}

.button_container{
    margin-top:2rem;
    text-align: right;
}

.left{
    text-align: left !important;
}

button.ownbtn{
    width:auto;
    padding:20px 25px;
    border-radius:15px;
    border:0px;
    font-size:20px;
    white-space: nowrap;
}

button.ownbtn-sm{
    width:auto;
    padding:10px 15px;
    border-radius:15px;
    border:0px;
    font-size:18px;
}

button.primary{
    /*background-color: #7290b4;*/
    background-color: rgba(61, 78, 109, 0.2);
    color:rgba(255,255,255,0.7);
    border:5px solid rgba(255,255,255,0.2);
}

button.primary:hover{
    background-color: rgba(61, 78, 109, 0.6);
}

button.secondary{
    background-color: rgba(178, 187, 204, 0.28);
    color:rgba(30,30,30,0.7);
    border:5px solid rgba(255,255,255,0.2);
}

button.secondary:hover{
    background-color: rgba(117, 139, 171, 0.39);
}

button.danger{
    background-color: rgba(197, 27, 4, 0.8);
    color: rgba(255, 255, 255, 0.7);
    border:5px solid rgba(218, 176, 170, 0.38);
}

button.danger:hover{
    background-color: rgba(197, 27, 4, 0.4);
}

.footer_box{
    position: fixed;
    left:0;
    bottom:3px;
    width:100%;
    text-align: center;
    font-size:12px;
    color:rgba(255,255,255,0.6);
    background-color:#002233;
}

.footer_box img{
    height:20px;
}

.tipusvalasztas_container{
    margin:20px 0;

}

.tipusvalasztas_container a{
    display: inline-block;
    text-decoration: none;
    background: rgba(0,0,0,0.2);
    color: rgba(167, 180, 199,0.8);
    margin-right:30px;
    padding:15px 30px;
    border-bottom:3px solid rgba(167, 180, 199,0.4);
    border-radius: 15px;
    cursor: pointer;
}

.tipusvalasztas_container a:last-of-type{
    margin-right:0px;

}

.tipusvalasztas_container a:hover{
    background: rgba(0,0,0,0.4);
    color:rgba(255,255,255,0.8);
}

.tipusvalasztas_container a.selected{
    background: rgba(255,255,255,0.8);
    color:#333;
    border-bottom:3px solid rgba(0, 8, 19, 0.65);
}

.fileok_ablaka_fordrag{
    width:100%;
    padding:30px;
    background:transparent;
    height: 300px;
    border:5px solid rgba(61, 78, 109, 0.4);
    font-weight:bold;
    cursor:pointer;
    border-radius:20px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size:24px;
    color:rgba(255,255,255,0.6);
}

.fileok_ablaka_fordrag p{
    font-size:22px;
    color:#FFF;
}

.fileok_ablaka_fordrag2{
    width:100%;
    padding:20px;
    background-color:#FFFFFF;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    height: 100%;
    border:1px solid #AAAAAA;
    border-top:1px solid #AAAAAA !important;
    color:#000;
    overflow:hidden;
    cursor:pointer;
}

.fileDand_DragOver_CSS_style{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border-width: 2px;
    border-style: dashed;
    border-color: #EE0000;
}

p.secureTxt{
    color:rgba(255,255,255,0.5);
}

.full_page_cover_container{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color:rgba(0,0,0,0.95);
    color:#FFF;
    z-index:10;
}

.successfull_sharing_container{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color:#FFF;
    z-index:11;
}

.successfull_sharing_window{
    width:96%;
    max-width:600px;
    height:auto;
    min-height:80px;
    max-height:90%;
    background-color:#002233;
    border-radius:20px;
    padding:20px;
    box-shadow: 0px 0px 1px 10px rgba(255,255,255,0.32);
}

.link_sav{
    background-color:rgba(167, 180, 199,0.4);
    border:5px solid rgba(200, 200, 200,0.2);
    color:rgba(255,255,255,0.7);
    border-radius: 15px;
    padding:10px;
    font-size:28px;
    text-align: center;
    margin-bottom:20px;
    box-shadow: 2px 2px 5px #000;
    font-family: "Martian Mono", monospace;
    font-weight: 800;
    letter-spacing: 15px;
}

.fulllink_sav{
    padding-left:15px;
    font-size:16px;
    color:rgba(255,255,255,0.3);
    text-align: left;
    border-radius:15px;
}

.lejarat_ideje{
    text-align: right;
    font-size:14px;
    color:#FFF;
}

button.ownbtn .szoveges_elrejtes, button.ownbtn-sm .szoveges_elrejtes{
    margin-left:10px;
    display:none;
}

button.ownbtn:hover .szoveges_elrejtes, button.ownbtn-sm:hover .szoveges_elrejtes{
    display:inline-block;
}

.registration_link{
    color: rgba(106, 224, 218, 0.86);
    text-decoration: none;
    /*font-size:12px;*/
    cursor: pointer;
    padding:3px 6px;
    border-radius:10px;
    display:inline-block;
}

.registration_link:hover{
    background-color: rgba(106, 224, 218, 0.86);
    color:#FFF;
}

.mitkelltenni{
    margin-top:-45px !important;
    margin-bottom:25px;
    font-size:13px;
    color:rgba(255,255,255,0.3);
    text-align: left;
    border-radius:15px;
    background-color:rgba(0,0,0,0.2);
    padding:10px 20px;
}

.hibaszoveg{
    background-color:#E00;
    color:#FFF;
    padding:20px;
    border-radius:15px;
    border:5px solid rgba(255,255,255,0.3);
    text-align:center;
}

.vagolap_txt_show{
    font-family: monospace;
    background-color:rgba(255,255,255,0.2);
    color: rgba(131, 176, 241, 0.8);
    border-radius:20px;
    border: 5px solid rgba(0,0,0,0.4);
    padding:20px;
    max-height:400px;
    overflow-y: auto;
}

/* width */
.vagolap_txt_show::-webkit-scrollbar {
    width: 4px;
}

/* Track */
.vagolap_txt_show::-webkit-scrollbar-track {
    background: transparent;
}

/* Handle */
.vagolap_txt_show::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.6);
    border-radius:3px;
}

/* Handle on hover */
.vagolap_txt_show::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,1);
}

.clipboardnoti{
    position: absolute;
    top:140px;
    right:55px;
    width:auto;
    height:40px;
    padding:5px 10px;
    color:rgba(255,255,255,0.4);
    font-weight:bold;
    background-color:#002233;
    border:3px solid rgba(255,255,255,0.3);
    border-radius:5px;
    text-align: center;
    display:block;
    z-index:101;
    cursor:pointer;
    box-shadow: 1px 1px 6px rgba(0,0,0,0.5);
    text-decoration: none;
}

.clipboardnoti:hover{
    color:rgba(255,255,255,0.8);
    border:3px solid rgba(255,255,255,0.6);
    box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}

.clipboard_ertesites{
    position: fixed;
    top:50%;
    left:50%;
    width:600px;
    margin-left:-300px;
    height:110px;
    margin-top:-70px;
    border-radius:20px;
    text-align: center;
    color:rgba(255,255,255,0.8);
    background-color:rgba(0,0,0,0.8);
    backdrop-filter:blur(5px);
    font-size:22px;
    padding:20px;
    z-index:103;
    box-shadow: 0px 0px 15px #000;
}

.clipboard_ertesites span{
    font-size:16px;
    color:rgba(255,255,255,0.4);
}

.code_container{
    margin-top:40px;
    color:#FFF;
    background-color:rgba(0,0,0,0.2);
    background-blend-mode: darken;
    padding:80px 25px;
    border-radius:15px;
    border:5px solid rgba(255,255,255,0.04);
    box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
}

.code_input_container{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3vw;
}

.code_input_container input{
    text-align: center;
    /*width:210px;
    height:110px;*/
    width:40%;
    min-width:200px;
    height:10vw;
    min-height:80px !important;
    color:#FFF;
    padding:15px;
    /*font-size:46px;*/
    font-size:50px;
    letter-spacing: 3vw;
    border:10px solid rgba(255,255,255,0.2);
    border-radius: 15px;
    background-color: transparent;
    font-family: "Martian Mono", monospace;
    text-transform: uppercase ;
    font-weight:bold;
    margin:5px;
}

.code_input_container input:hover, .code_input_container input:focus{
    border:10px solid rgba(255,255,255,0.4);
    background-color: rgba(255,255,255,0.1);
}

.separator{
    background-color: transparent;
    font-family: "Martian Mono", monospace;
    font-weight:bold;
    text-align:center;
}

.code_input_container .separator{
    display: inline-block;
    text-align: center;
    width:80px;
    height:110px;
    color:rgba(255,255,255,0.4);
    font-size:50px;
    padding:5px;
    padding-top:20px;
    margin:5px;
}

menu{
    width:100%;
    margin:0px;
    padding:0px;
}

menu ul {
    margin:0px;
    padding:10px 0;
    list-style-type: none;
    width:100%;
    display:flex;
    align-items: flex-start;
    justify-content: flex-start;
    border-radius:15px;
}

menu ul li{
    max-width: 200px;
    display:block;
}

menu ul li:hover{

}

menu ul li a{
    width: 100%;
    display:block;
    background-color:rgba(255,255,255,0.8);
    border:2px solid rgba(255,255,255,0.6);
    border-radius:10px;
    color:#333;
    padding:10px 25px;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
}

menu ul li a:hover{
    background-color:transparent !important;
    border:2px solid rgba(255,255,255,0.6);
    color:rgba(255,255,255,0.8) !important;
}


.om_filedragger{
    height:250px;
    transition: height 0.3s;
}

.om_filedragger:hover{
    height: 260px;
}

.om_filedraggerOver{
    box-sizing: border-box;
    border-width: 2px;
    border-style: dashed;
    border-color: #EE0000;
    height:260px;
}

h6{
    color:rgba(255,255,255,0.8);
}

.eddig_hozzadaadott_fajlok_container{
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    color:#FFF;
    max-height:400px;
    overflow-y: auto;
}

.oriasfajl_melleklet{
    position: relative;
    display: inline-block;
    border:1px solid #DDD;
    border-radius:10px;
    width:auto;
    overflow: hidden;
    background-color:#FFF;
    padding:10px 20px;
    font-size:14px;
    margin:5px;
    transition: padding-right 0.3s, padding-left 0.3s;
    cursor:pointer;
    color:#333;
}

.oriasfajl_melleklet:hover{
    padding-right:35px;
    padding-left:5px;
    background-color: #EEE;
}

.oriasfajl_melleklet a{
    position: absolute;
    top:50%;
    margin-top:-12px;
    height:24px;
    right:-35px;
    width:25px;
    display:block;
    align-items: center;

    background-color:#E00;
    color:#FFF !important;
    padding:3px;
    text-align: center;
    border-radius:5px;
    transition: right 0.3s;
    cursor:pointer;
    font-size:13px;
}

.oriasfajl_melleklet:hover a{
    right:5px;
}

.progressbar_container{
    display: block;
    width:100%;
    height:30px;
    background-color:#FFF;
    border:1px solid #DDD;
    position: relative;
    border-radius:5px;
}

.progressbar_inner_colored{
    position: absolute;
    top:0;
    left:0;
    background-color:#0a9ebb;
    height:28px;
    border-radius: 5px;
}

.progressbar_value{
    position: absolute;
    top:5px;
    left:50%;
    margin-left:-130px;
    font-size:14px;
    width:260px;
    color:#FFF;
    text-align: center;
    text-shadow: 1px 1px 1px #111;
}

.fajllista_container{
    width:100%;
    min-height:100px;
    max-height:300px;
    overflow: auto;
}

.fajllista_container::-webkit-scrollbar {
    width: 6px;
}

/* Track */
.fajllista_container::-webkit-scrollbar-track {
    background: transparent;
}

/* Handle */
.fajllista_container::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.3);
    border-radius:3px;
}

/* Handle on hover */
.fajllista_container::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.8);
}





@media screen and (max-width: 1280px){
    .logo_container{
        top:60px;
        left: unset;
        right:10%;
        width:80px;
        height:80px;
        padding:5px;
        border:2px solid rgba(0,0,0,0.6);
    }
}

@media screen and (max-width: 1070px){
    .logo_container{
        top:60px;
        left: unset;
        right:40px;
        width:80px;
        height:80px;
        padding:5px;
        border:2px solid rgba(0,0,0,0.6);
    }
}

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

    .code_input_container{
        flex-wrap: wrap;
    }

    .separator{
        display:none !important;
    }

    .code_input_container input{
        width:80%;
        font-size:46px;
        letter-spacing: 20px;
        height:100px;
    }


}


@media screen and (max-width:500px){
    .code_input_container input{
        width:80%;
        font-size:30px;
        letter-spacing: 20px;
    }

    .separator{
        display:none !important;
    }

    .logo_container{
        top:60px;
        left: unset;
        right:20px;
        width:40px;
        height:40px;
        padding:3px;
        border:1px solid rgba(0,0,0,0.6);
    }

    .mobilon_elrejtes{
        display:none;
    }

    .clipboardnoti {
        position: absolute;
        top: 110px;
        right: 40px;
    }

    button.ownbtn:hover .szoveges_elrejtes, button.ownbtn-sm:hover .szoveges_elrejtes{
        display:none;
    }

    .tipusvalasztas_container{
        text-align: center;
    }

    .tipusvalasztas_container a{
        margin-right:10px;
        padding:10px 15px;
    }

    .ownContainer{
        padding:15px;
    }

    .button_container{
        text-align: center;
    }

    .button_container button{
        padding:15px 20px;
        font-size:18px;
    }

    .fileok_ablaka_fordrag{
        font-size:18px;
    }
}

@media screen and (max-width:360px){
    .mobilon_elrejtes{
        display:none;
    }

    .clipboardnoti {
        top: 130px;
        right: 30px;
    }
}