/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */


.naslovstrane {
    padding-top:20px;
    color: darkred;
}

.redpanel {
    color: white;
    border-color: black;
    border-width: 5px;
    background-color: #f0003c;
    border-radius: 10px;
    height: 120px;
    width: 100%;
    text-align: center;
    font-size: larger;
    padding: 20px;
    cursor: pointer;
    align-content:center;   
}

.whitepanel {
    color: black;
    border:solid;
    border-color: gray;
    border-width: 1px;
    background-color: whitesmoke;
    border-radius: 10px;
    height: 200px;
    width: 100%;
    text-align: center;
    font-size: larger;
    padding: 20px;
    cursor: pointer;
    align-content: center;
}

.whitepanelnaslov {
    font-family: ddk;
    font-size: xx-large
}

.belidiv {
    background-color:white; 
    vertical-align:bottom;
    position:relative;
    
}

.redpanelnaslov {
    font-family: ddk;
    font-size: xx-large
}

.imgikona {
    /*  height: auto;*/
    width: 8%;
    position: absolute;
    top: 10px;
    left: 30px;
    /*   padding: 20px;*/
    /*  margin-left:0;*/
}

.parent {
    cursor: pointer;
    position: relative;
    color: black;
    border: solid;
    border-color: gray;
    border-width: 1px;
    background-color: whitesmoke;
    border-radius: 10px;
    height: 230px;
    width: 100%;
    display: flex;
    margin-bottom:15px;
    flex-direction: column;
}
.padding-column {
    padding-left: 0;
    padding-right: 0;
}
.footer-col-left {
    padding-left: 0;
}
.footer-col-right {
    padding-right: 0;
}
.top-left-img {
    position: absolute;
    top: 10px;
    left: 13px;
    width: 20px; /* po želji */
}
.title-space {
    padding-top:15px;
}
.content {
    
    flex: 1; /* zauzima sav preostali prostor između slike i donjeg diva */
    display: flex;
    align-items: center; /* vertikalno centriranje naslova */
    justify-content: center; /* horizontalno centriranje naslova */
}

.title {
    margin: 20px;
    font-family: ddk;
    font-size: xx-large
}

.bottom-box {
    background-color: white;
    color: black;
    text-align: center;
    padding: 5px;
    border-radius: 10px;
}

.long-box {
    background-color: white;
    color: black;
    text-align: center;
    padding:5px;
    margin-left:0;margin-right:0;
    border-radius: 10px;
}


.faq {
    justify-content:space-between;
}
.box {
    display: flex;
    flex-direction: column;
    align-items: center;
}
main{
    min-height:500px !important;
}
.main-grey {
    background: #ddd;
    padding:15px;
}

    @media screen and (min-width:768px) {

        .fullwidth-container {
            padding: 2px;
            background-color: white;
            border-color: navy;
            width: 100%;
            /*height: 775px;*/
            border-style: solid;
            border-radius: 5px;
        }
    }
  

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

        .fullwidth-container {
            padding: 2px;
            background-color: white;
            border-color: red;
            width: 100%;
            height: 800px;
            border-style: solid;
            border-radius: 5px;
        }
    }

    .pushable {
    background: hsl(340deg 100% 32%);
    border-radius: 12px;
    border: solid;
    border-color: red;
    border-width:thick ;
    padding: 0;
    cursor: pointer;
    outline-offset: 3px;
}

.front {
    display: block;
    padding: 12px 42px;
    border-radius: 12px;
    border-color: red;
    font-weight: 700;
    font-size: 3rem; /*    1.25rem;*/
    background: #ffffff; /* hsl(345deg 100% 47%);*/
    color: red;
    transform: translateY(-3px);
}

.pushable:active .front {
    transform: translateY(-2px);
}
.flip-box {
    margin-bottom:30px;
}

.flip-card {
    background-color: transparent;
 width:350px;
    height: 400px;
    perspective: 1000px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flip-card-front {
    background-color: darkred;
    color:#fff;
    /* margin: auto;*/
    padding: 50px;
}

.flip-card-back {
    /*    background-color: #2980b9;*/
    background-color: #0a437d;
    color: white;
    transform: rotateY(180deg);
    margin: auto;
    padding: 20px;
    overflow-y: auto;
    text-align: left;
}
.flip-box1 {
    width: 730px;
    margin-left:0;
}
.flip-box2{
    width:550px;
}

ul {
    padding: 0;
    margin: 0;
}

.wrapper div {
    width: 100%;
}

.list li {
    width: 100%;
    max-width: 600px;
    display: flex;
    justify-content:flex-start;
    text-align:left;
    opacity: 0;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
}

@font-face {
    font-family: 'ddk';
    src: url('/css/ddk-Regular.woff2') format('woff2'), url('/css/ddk-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


.top-bar {
    height: 58px;
    background-color: white;
    width: 100%;
    border-bottom: 1px solid lightgray; /* debljina | stil | boja */
}

.site-topheader {
    background-color: white !important;
    color: black;
    font-weight: 500;
    text-align: right;
    padding-right: 30px;
    height: 20px;
    align-content: center;
}



.button-container {
    display: flex; /* Raspoređuje dugmiće horizontalno */
    justify-content: space-evenly;
    /*gap: 10px; /* Razmak između dugmića (po želji) */
    align-items: center;
}

.my-button1 {
    /* padding: 8px 16px; Unutrašnji razmak (proširuje dugme) */
    font-size: 14px;
    height: 30px;
    width: 90px;
    font-weight: 400;
    background-color: red;
    color: white;
    border: none;
    border-radius: 15px;
    text-align: center;
    /* align-content:normal;*/
    cursor: pointer;
    padding-top: 0;
    white-space: nowrap; /* Sprečava prelom teksta */
    /* margin-bottom: 10px;
        text-decoration: none;
    transition-duration: 0.5s;*/
   
}


.submit-btn {
    background-color: red;
    border: none;
    color: white;
    font-weight:500;
    width:90px;
    padding: 8px 12px 10px 12px;
    text-align: center;
    height: 30px;
    text-decoration: none;
    font-size: 14px;
    margin-left:15px;
    cursor: pointer;
    border-radius: 15px;
    display: flex;
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
}


    .my-buttonSV {
    /* padding: 8px 16px; Unutrašnji razmak (proširuje dugme) */
    font-size: 14px;
    height: 40px;
    width: 150px;
    font-family: Arial;
    font-weight: 800;
    background-color: white;
    color: red;
    border: solid;
    border-color: red;
    border-radius: 15px;
    text-align: center;
    align-content: center;
    cursor: pointer;
    white-space: nowrap;
    /* margin-bottom: 10px;
        text-decoration: none;
    transition-duration: 0.5s;*/
}




.top-bar {
    background-color: white;
    border-bottom: 1px solid #ccc;
    padding: 1px 0;
    height: 30px;
    
}

.imgnaslovna {
    height: auto;
    width: 100%;
    border-radius: 45px;
    padding: 20px;
}


.div-spasite {
    /* background-color: lightskyblue;*/
    padding: 5px;

  margin-top: 20px;

    background-color: #FFE5E5;
    border-radius: 10px; 
    border: none;
    border-color: red;
    border-width: 1px;
    height: 40px;
    width: 370px;
    display: flex;
    gap: 10px;
    align-content: safe center;
}

.h1naslovna {
    font-family: ddk;
    font-size: 90px;
    font-weight: 400;
    margin: 0;
    margin-left: 30px;
    padding: 0;
    line-height: 1;
}

    .h1naslovna + h1naslovna {
        margin-top: 40px; /* ili 0 ako želiš da budu spojeni */
    }



.top-item {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #333;
    flex-direction: row-reverse;
}

    .top-item img {
        height: 16px;
        width: auto;
    }

.icon {
    height: 16px;
    vertical-align: middle;
}

.iconfooter {
    width:1rem;
    vertical-align: middle;
}

.containerddk {  
    margin: 0 auto; 
    display: flex;
    justify-content: flex-end;
    align-items: center;
/*    flex-direction: row;*/
    gap: 25px;
    padding-right:25px;
}
.headlineSkew {
    transform: skewY(30deg);
    text-shadow:
    /*  #999999 4px 4px,
        #cccccc 8px 8px,*/
    #f2f2f2 12px 12px;
}

.headlineSenka {
    
    text-shadow:
    /*  #999999 4px 4px,
        #cccccc 8px 8px,*/
    #f2f2f2 4px 4px;
}

.pitanje {
    margin-left: 10px;
}

.objasnjenje {
    color: blue;
    margin-left: 27px;
}


a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

/* Provide sufficient contrast against white background */
a {
  color: #0366d6;
}

.btn-primary {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

.logo-ddk {
    color: crimson;
    font-size: 32px;
    font-weight: 500;
    font-family: ddk;
   margin-left:15px;
}
.logo-cks {
    width:200px;
}

.nav {
    display: flex;  
    min-height: 60px;
    padding-bottom:10px;
    padding-top:10px;
    margin-bottom:15px;
    line-height: 60px;
    background: #fff;
    text-align: left;
    flex-wrap: nowrap;
    align-items: stretch;
    overflow: hidden;
    gap:20px;
}

    .nav a {
        text-decoration: none;
        color: #fff;
        flex-grow: 1;
        white-space: nowrap;
        position: relative;
        flex-basis: 0;
    }
        .nav a:last-child {
            flex-grow:0;
        }

        .nav a:before, .nav a:after {
            content: " ";
            display: block;
            width: 1px;
            height: 60px;
            position: absolute;
            top: 0;
        }

span.button-nav1 {
    font-size:14px;
   /* width: 160px !important;*/
    height: 30px;
    margin-top: 8px;
    align-content: flex-start;
    white-space: none;
    vertical-align:top;
    padding: 6px 18px;
    border-radius: 15px;
    background: red;
    color: #fff;
    text-align: right;
    margin-right:10px;
    font-weight:500;
}




/* Sticky footer styles
-------------------------------------------------- */
html {
  font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.border-top {
  border-top: 1px solid #e5e5e5;
}
.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}

.p-20 {
    padding-left:5px;
}
.footer {
   /* position:absolute;*/
    display:flex;
    flex-direction:column;
    flex-grow:1;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    background-color: white;
    border: solid;
    border-top-color: grey;
    border-block-width: 1px;
    border-left-color: white;
    border-right-color: white;
    border-bottom-color: white;
    padding-top: 20px;
    margin-top:500px;
    /* line-height: 60px; /* Vertically center the text there */
}
.red-title {
    color: red;
    white-space: normal;
}
.grey-text {
    color:#9e9c9c;
    white-space: normal;
}
.grey-title {
    color: #2f2c2c;
    padding-bottom:10px;
}

ul.footerlinks {
    list-style-type: none;
    padding-left: 30px;
    padding-bottom: 30px;
}
.footerlinks li a {
    color: dimgray;
    font-size: medium;
}
.footer-text {
    color: dimgrey;
}

.footer-contact {
    display: flex;
    flex-direction: column;
}

.footer-inline {
    display: inline-flex;   
}
.footer-inline p{
    font-size:0.90rem;
}
.child-icon {
    padding-right:15px;
}
.thumbs-bottom {
    display:flex; 
    background:#fff;
    justify-content:center; 
    align-items: center;  
    gap: 40px;
    padding: 15px 0;
}
    .thumbs-bottom img {
        cursor: pointer;  
        height:auto;
    }

.footer-pl30 {
    padding-left: 30px;
}


@media (max-width:1100px) {

    .flip-card {
        width:290px;
    }
    .flip-box{
        margin-bottom:25px;
    }
    .flip-box1 {
        width:600px;
    }
    .foot-mob {
        margin-left: auto;
        margin-right: auto;
    }
    .p-20 {
        padding-left: 20px;
    }
}

@media screen and (max-width:991px) {
    .flip-card {
      width:310px;
    }
    flip-box {
        margin-bottom:10px;
    }
    .flip-box1 {
        width: 310px;
        margin-left: 0;
    }
    .nav {
        display:block;
        min-height:120px;
    }
    
}

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

    .flip-card {
        width: 260px;
    }

    flip-box {
        margin-bottom: 10px;
    }

    .flip-box1 {
        width: 260px;
        margin-left: 0;
    }
    footer{
        padding-bottom:30px;
    }
    .footer-col-left {
        padding-left:15px !important;
        padding-bottom:20px;

    }
    .nav {
        height:180px;
    }
   
}

@media(max-width:712px){

    .padding-column {
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media (max-width:650px) {

    .flip-card, .flip-box {
        width: 240px;
    }

    .padding-column {
        padding-left: 15px;
        padding-right: 15px;
    }

    .logo-cks {
        width: 220px;
    }
    .logo-ddk {
        font-size: 25px;
    }
}

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

    .footer-row {
        flex-direction: column;
    }

    ul.footerlinks {
        padding-left:20px !important;

    }

    .footer-pl30{
        padding-left:15px;
    }
    .pd20 {
        padding-left: 30px !important;
    }
    .footer-contact{
        padding-left:20px;
    }
    .flip-card, .flip-box1 {
        width: 340px;
    }
    .foot-mob {
        margin-left:auto;
        margin-right:auto;
    }
    .nav {
        
        height: 200px;
        flex-direction: column !important;
    }
}

@media (max-width:400px) {

    .flip-card, .flip-box1 {
        width: 310px;
    }
}
@media (max-width:360px) {
    .flip-card, .flip-box1 {
        width: 300px;
    }
    /*.containerddk {
        padding-right:30px;
        padding-left:30px;
    }*/
   
}


.div-1 {
    /* background-color: lightskyblue;*/
    padding: 5px;
    border-radius: 5px;
    border: solid;
    border-color: darkred;
    border-width: 2px;
}