:root {
  --main-width: 900px;
}

::-webkit-scrollbar{
    width:10px;
    background:transparent;
    z-index:5;
    
}

::-webkit-scrollbar-thumb{
    background:gray; 
    cursor:pointer;
}

::-webkit-scrollbar-thumb:hover{
    background:darkgray; 
}

body{
    margin:0;
    padding:0;
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: 200;
    font-size:14pt;
    letter-spacing: .01em;
    line-height:20pt;
    background-color:white;
    box-shadow: -.5px -5px 12px lightgray inset;
    width:100%;
}

button,select{
    cursor:pointer;
    outline:none;
}

button:hover,
select:hover,
a:hover{
    opacity:.7;
}

a{
    text-decoration:none;
}

.header,
.header-content,
.main-page,
.search-conditions .btns,
.conditions-container,
.conditions-container .thema-condition,
.modal-hdr,
.modal-hdr .close,
.themata-container .order-nav,
.themata-container .order,
.themata-container .footer-nav,
.footer,
.footer-content,
.footer .col-1,
.footer .contact,
.footer .contact .contact-content
{
    display:flex;
}
.header,
.main-page,
.search-conditions .btns,
.conditions-container,
.conditions-container .thema-condition,
.modal-hdr .close,
.footer{
    align-items:center;
}

.header,
.main-page,
.conditions-container,
.conditions-container .thema-condition,
.themata-container .order-nav,
.themata-container .footer-nav,
.footer{
    justify-content:center;
}

.main-page{
    flex-direction:column;
    width:100%;
}

.header{    
    padding:10px;
}

.header-content{
    width:calc(var(--main-width) + 80px);
}

.header-content .col{
    width:50%;
}

.header-content .ds-header{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    font-weight:bold;
    color:#224a5c;
    letter-spacing: .02em;
}

.search-conditions{
    height:calc(100% - 55px);
    position:relative;
}

.search-conditions .content{
    width:100%;
    overflow-y:scroll;
    height:calc(100% - 60px);
}
.search-conditions table {
    border-collapse: separate;
    border-spacing: 15px;
}
.search-conditions th{
    text-align:left;
    padding-right:10px;
    font-size:12pt;
    color:#202022;
}
.search-conditions input[type="text"],
.search-conditions input[type="number"]{
    padding:12px 14px;
     font-size:12pt;
    outline:none;
    border:1px solid gray;
    border-radius:4px;
    width:350px;
}
.search-conditions .btns{
    width:100%;
    position:absolute; 
    bottom:0;
    height:50px;
    justify-content:flex-end;
    border-top:1px solid lightgray;
    padding-top:9px;
}

.search-conditions .btns button{
    border:none;
    padding:9px 12px;
    font-size:14pt;
    border-radius:5px;
    margin-left:10px;
}

.search-conditions .btns .btn-srch{
    background:#869898;
    color:white;
}

.search-conditions .btns .secondary-btn{
    color:#224a5c;
    background:transparent;
}

.conditions-container{
    width:100%;
    background-color:#ebf1f4;
    height:150px;
    flex-direction:column;
    padding:20px 0;
}
.conditions-container .thema-condition{
    background-color:white;
    border:1px solid gray;
    color:gray;
    width:500px;
    margin:10px;
    padding:0 5px;
    height:40px;
}

.conditions-container .thema-condition button{
    border:none;
    font-size:20px;
    background:transparent;
    color:gray;
}

.conditions-container .thema-condition input[type="text"]{
    width:82%;
    height:100%;
    margin:0 10px;
    border:none;
    outline:none;
    padding:0;
    font-size:14pt;
    color:gray;
}

.conditions-container .condition-bts button{
    border:none;
    border-radius:5px;
    padding:12px 16px;
    font-size:16px;
    letter-spacing:.04em;
    background-color:#869898;
    color:white;
}

.search-conditions-btns{
    width:calc(var(--main-width));
    display:flex;
    margin-top:10px;
    gap:10px;
}

.black-panel{
    position:fixed; 
    top:0; 
    left:0; 
    background:black;
    opacity:.7;
    width:100%;
    height:100%;
    
}

.conditions-modal-panel{
    display:block;
    width:700px;
    height:400px;
    position:fixed; 
    top:0; 
    left:0; 
    background:white;
    padding:20px;
    border-radius:15px;
    transform:translate(calc(50vw - 350px),calc(50vh - 200px));
}

.modal-hdr{
    font-size:16pt;
    margin-bottom:20px;
}

.modal-hdr .title{
    width:80%;
}

.modal-hdr .close{
    width:20%;
    justify-content:flex-end;
}

.modal-hdr .close button{
    border:none;
    font-size:20pt;
    background:transparent;
}

.themata-container{
    margin:60px 0 0 0;
    width:var(--main-width);
}
.themata-container .order-nav{
    padding:10px 0 0 0;
    font-size:12pt;
}

.themata-container .order{
    width:50%;
    justify-content:flex-end;
}

.themata-container .results{
    width:50%;
}
.themata-container .footer-nav button,
.themata-container .order-nav select{
    border:none;
    padding:5px 10px;
    background:#224a5c;
    color:white;
    border-radius:7px;
    letter-spacing:.02em
}
.themata-container .order-nav select option{
    background:white;
    color:#202022;
}

.condition-box{
    background-color:#869898;
    color:white;
    font-size:11pt;
    padding:2px 7px;
    border-radius:5px;
    
}
.condition-box input[type="number"],
.condition-box input[type="text"]{
    background-color:#869898;
    color:white;
    border:none;
    outline:none;
}

.condition-box input[type="number"]{
    width:50px;
}


.condition-box input[type="text"]{
    width:120px;
}

.condition-box .clr-btn{
    background-color:#869898;
    color:white;
    font-size:11pt;  
    border:none;             
}

.themata-container .footer-nav{
    margin-bottom:80px;
}

.themata-container .footer-nav button{
    width:80%;
    font-size:14pt;
}

.main-page .table-body{
        margin:0;
        min-height:100px
    }

.footer{
    background:#869898;
    padding: 50px 0;
    color:#ebf1f4;
}

.footer-content{
    width:calc(var(--main-width) + 120px);
}

.footer .col-1{ 
    flex-direction:column;
    justify-content:flex-start;
    align-items:flex-start;
    width:40%;
    font-size:10pt;
}
.footer .col-2{ 
    width:60%;
    font-size:12pt; 
}
.footer .contact{
    gap:30px;
}
.footer .contact .contact-content .icon{
    display:block;
    margin-right:10px;
}

.footer a{
    color:#ebf1f4;
    
}
.footer .contact .title{
    display:block;
}
.footer .contact .socials a{
    font-size:22pt; 
    text-decoration:none;
    margin-right:10px;
}

@media (max-width: 1900px) {
  :root {
    --main-width: 900px;
    }  
    
}

@media (max-width: 580px) {
    :root {
    --main-width: 100%;
    }

    body{
        box-shadow: none;
    }
    
    .header-content,
    .order-nav,
    .footer-content,
    .footer .contact{
        flex-direction:column;
    }

    .header{    
        padding:0;
    }

    .header-content{
        width:calc(var(--main-width));
    }

    .header-content .col{
        width:90%;
    }

    .header-content .ds-header{
        justify-content:flex-start;
        margin-bottom:20px;
    }

    
    .search-conditions .content{
        height:calc(90%);
    }

    .conditions-container .thema-condition{
        width:250px;
    }

    .conditions-modal-panel{
        width:90%;
        height:70%;
        padding:20px;
        transform:translate(calc(50vw - 45% - 20px),calc(50vh - 45% - 20px));
        border-radius:0px;
    }

    .search-conditions th{
        display:none;
    }

    .search-conditions table{
       width:100%;
       border-collapse: collapse;
       
    }

    .search-conditions input[type="text"],
    .search-conditions input[type="number"]{
        padding:12px 14px;
        font-size:12pt;
        width:calc(100% - 30px);
        margin-bottom:20px;
    }

    .themata-container .order,
    .themata-container .results{
        display:none;
    }

    .main-page .table-body{
        margin:10px;
    }

    .footer{
        padding: 50px 10PX;
    }

    .footer-content{
        width:calc(var(--main-width));
    }

    .footer .col-1{ 
        flex-direction:column;
        justify-content:flex-start;
        align-items:flex-start;
        width:100%;
        font-size:10pt;
    }
    .footer .col-2{ 
        width:100%;
        font-size:12pt; 
    }
    
}