/* CUSTOM SKIN */

/* font awesome */
@font-face {
    font-family: 'FontAwesome';
    src: url('../fonts/fontawesome-webfont.eot?v=4.3.0');
    src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* modalni okna */
/* default modal */
.oxmodal {
  display: none; 
  position: fixed; 
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}

.oxmodal.open {
    display: block;
}

.oxmodal .close {
  color: #aaa;
  font-size: 28px;
  font-weight: bold;
  position:absolute;
  top: 3px;
  right: 15px;
}

.oxmodal .close:hover,
.oxmodal .close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
} 


.oxmodal .modal-wrapper {
    margin: 15% auto;
    padding: 0px 20px 0px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    outline: 0;
    width: 60%;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23) !important;
    border-radius: 3px;
    animation: fadein 500ms;
    -moz-animation: fadein 500ms;
    -webkit-animation: fadein 500ms;
    -o-animation: fadein 500ms;
}

.oxmodal .inner.with-spinner {
    display: flex;
    justify-content: center;
    padding: 50px 0px;
}

.oxmodal .modal-header {
    border-bottom: 1px solid #dee2e6;
    padding: 10px 0px;
    font-size: 1rem;
}

.oxmodal .modal-content {
    padding: 10px 0px;
}

.oxmodal .modal-footer {
    border-top: 1px solid #dee2e6;
    padding: 10px 0px;
}

/* modal sizes */
.oxmodal.modal-sm .modal-wrapper {
    width: 40%;
}

.oxmodal.modal-xl .modal-wrapper {
    width: 80%;
}

@media screen and (max-width:1200px) {
    .oxmodal.modal-sm .modal-wrapper {
        width: 60%;
    }
}

@media screen and (max-width:800px) {
    .oxmodal .modal-wrapper,
    .oxmodal.modal-sm .modal-wrapper {
        width: 80%;
    }
}

/* right modal */
.oxmodal.modal-right .modal-wrapper {
    height: 100%;
    overflow-y: auto;
    margin: 0px;
    position: absolute;
    right: 0px;
    top: 0px;
    width: 300px;
    border: none;
    border-radius: 0px;
}

/* left modal */
.oxmodal.modal-left .modal-wrapper {
    height: 100%;
    overflow-y: auto;
    margin: 0px;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 300px;
    border: none;
    border-radius: 0px;
}

/* spinner */
.oxspinner {
  display: inline-block;
  width: 64px;
  height: 64px;
}
.oxspinner:after {
  content: " ";
  display: block;
  width: 46px;
  height: 46px;
  margin: 1px;
  border-radius: 50%;
  border: 5px solid #aaa;
  border-color: #aaa transparent #aaa transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* fadein animation */
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}