input[type=text], textarea {
    outline: none!important;
}
/*definiion for font-family*/
@font-face {
    font-family: o-bold;
    src: url(../font/Oswald-Bold.ttf);
    font-weight: bold;
}
@font-face {
    font-family: o-bolditalc;
    src: url(../font/Oswald-BoldItalic.ttf);
    font-weight: bold;
}
@font-face {
    font-family: o-heavy;
    src: url(../font/Oswald-Heavy.ttf);
    font-weight: bold;
}
@font-face {
    font-family: o-normal;
    src: url(../font/Oswald-Regular.ttf);
}
@font-face {
    font-family: o-lightitalc;
    src: url(../font/Oswald-LightItalic.ttf);
}
@font-face {
    font-family: o-light;
    src: url(../font/Oswald-Light.ttf);
}
/* end of font family part*/
html {
    height: 100%;
}
html body {
    background-color: #0e0e0e;
    font-family: o-normal;
    color: #dedede;
    height: 100%;
}
/*make with media query*/
@media screen and (min-width: 1200px) {
    .prof-edt-center {
        padding:0.5rem  5rem 0.5rem 5rem!important;
    }
    .person1-list {
        padding: 0.5rem 8rem 0.5rem 8rem!important;
    }
}
@media screen and (min-width: 1024px){
    .prof-center2 {
        min-height: 800px;
    }
    .home-content {
        padding-top: 4rem!important;
    }
}
@media screen and (max-width: 576px) {
    .home-logo {
        width: 100%;
    }
    .prof-header>div>div>h3{
        font-size: 20px;
    }
    .prof-footer>div>div>h3{
        font-size: 20px;
    }
    .prof-footer>div>span {
        font-size: 22px!important;
    }
    .carousel-item>img {
        width: 100%;
    }
    img.carousel-control{
        width: 100%;
    }
}

/* start home */
.header-control>div>span {
    cursor: pointer;
}
.home-title {
    color: #dedede;
}
.home-textfield {
    width: 100%;
    background-color: #141414;
    border-color: #1a1a1a;
    border-radius: 2px;
    max-width: 800px;
}
.home-textfield:hover {
    background-color: #141414;
    border-color: #1a1a1a;
    border-radius: 2px;
}

input[type="password"], textarea {
    outline: none;
    box-shadow:none !important;
}
.home-btn {
    background-color: #373737;
    color: #dedede;
    font-weight: bold;
    width: 30%;
    cursor: pointer;
}
/*end home page*/

/*start vaelgkamera*/
.note-title {
    font-family: o-bolditalc;
    font-size: 26px;
}
span.sort {
    padding-top: 5px;
    display: inherit;
    max-height: 20px;
    max-width: 20px;
    width: 20px;
    height: 20px;
}
span.sort>img {
    width: 100%;
}
.note-item {
    border-radius: 0.25rem!important;
    height: 80px;
    width: 100%;
    max-width: 400px;
    background-color: #373737;
    border-right: solid 10px red;
}
.note-item.active {
    border-right: solid 10px green;
}

.note-item.note-btn {
    cursor: pointer;
    border: none!important;
    border-radius: 0.25rem!important;
}
 /*end note(second page )*/

/* start student page*/
.stud-title {
    font-family: o-normal;
    color: #ffffff;
    font-size: 26px;
}
.stud-item {
    height: 60px;
    width: 100%;
    max-width: 400px;
    border: none!important;
    border-radius: 0.25rem!important;
    box-shadow: none;
    cursor: pointer;
    background-color: #373737;
}	

.stud-item.deleted {
    opacity: 0.5;
}

.stud-item.offline {
    border-right: solid 10px red !important;
}

.stud-item.online {
    border-right: solid 10px green !important;
}

.stud-item>h3 {
    width: 100%;
    text-align: left;
    font-family: o-light;
    font-size: 22px;
}
.stud-item>h3>span {
    float: right;

}
.stud-item>h3>span.img {
    line-height: 34px;
    color: white;
}

.stud-active {
    color: limegreen;

}
.stud-non_active {
    color: red;

}
/*end student page */

/* start profile empty page*/
.prof-header {
    height: 60px;
    background-color: #373737;
    font-family: o-light;
}
.prof-edt-center {
    padding-bottom: 100%!important;
}
.action-icons {
    position: absolute;
    right: 20px;
}
.editable {
    cursor: pointer;
}
.action-icons>span {
    display: inline-block;
}
.prof-footer {
    position: fixed;
    cursor: pointer;
    background-color: #373737;
    bottom: 0;
    width: 100%;
    font-family: o-light;
}
.prof-footer>div>span {
    font-size: 22px;
    font-weight: 100;
}
.prof-footer>div>h3 {
    font-size: 22px;
}
/*end profile empty page*/

/*start profile edit page*/
.prof-edt-btn {
    cursor: pointer;
    border: solid 3px #373737!important;
    border-radius: 0.25rem!important;
    background-color: #373737;
}
.prof-edt-note-list {
    width: 100%;
    font-size: 20px;
}
.prof-edt-note-list>li>span{
    float: right;
    line-height: 30px;
    cursor: pointer;
}
.prof-edt-btn:hover,.prof-edt-btn.active {
    border: solid 3px #30e230!important;
}
.prof-edt-center {
    padding-bottom: 100px!important;
}
/*end profile edit page*/

/*start personal profile page*/
.person-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1001;
}
.person1-list {
    padding-bottom: 100px!important;
}
.person1-item {
    background-color: #d8d8d8;
    position: relative;
    width: 98%;
    margin: 5px;
}

.person1-item > span.like {
    position: absolute;
    top:15px;
    left: 15px;
    max-height: 50px;
    max-width: 50px;
}

.person1-item > span.print {
    position: absolute;
    top:15px;
    left: 15px;
    max-height: 50px;
    max-width: 50px;
}

.person1-item > span.ok {
    position: absolute;
    top:15px;
    left: 15px;
    max-height: 50px;
    max-width: 50px;
}

.person1-item > span.dislike {
    position: absolute;
    top:15px;
    right: 15px;
    max-height: 50px;
    max-width: 50px;
}

.person1-item > span.love {
    position: absolute;
    bottom:15px;
    left: 15px;
    max-height: 50px;
    max-width: 50px;
}

.person1-item > span.passport {
    position: absolute;
    bottom:15px;
    right: 15px;
    max-height: 50px;
    max-width: 50px;
}

.person1-item > span.download {
    position: absolute;
    bottom:15px;
    right: 15px;
    max-height: 50px;
    max-width: 50px;
}

.person1-item > span.move {
    position: absolute;
    bottom:15px;
    left: 50%;
    margin-left: -25px;
    max-height: 50px;
    max-width: 50px;
}

.person1-item > span>i.fa {
    color: grey;
    cursor: pointer;
}
/*end profile photo page*/

.photo-error {
	position: absolute;
	top: 0px;
	color: red;
}

/*start photo sequence page*/
.profile-icon>span {
    display: inline-block;
    padding: 10px;
    margin: 5px;
    cursor: pointer;
    max-height: 50px;
    max-width: 50px;
}
.profile-icon>span>i.fa-thumbs-up.active,.person1-item > span>i.fa-thumbs-up.active{
    color: #43cf32;
}
.profile-icon>span>i.fa-thumbs-down.active,.person1-item > span>i.fa-thumbs-down.active{
    color: #cf221b;
}
.profile-icon>span>i.fa-star.active,.person1-item > span>i.fa-star.active{
    color: #d6c811;
}
.mycarousel >.carousel-control-next {
    position: relative!important;
}
.carousel-control-next, .carousel-control-prev {
    position: relative!important;
}
.carousel-item>img,.carousel-item>div>img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    margin: auto;
}
.carousel-item{
    height: 100%;
 }
.carousel-item.active{
    margin: auto;
}
/*image zoom point*/
.image-viewing {
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background-color: #595c5fde;
}
.image-viewing>h3{

}
.animate-zoom {animation:animatezoom 0.6s}
@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
.hidden {
    display: none!important;
}
.image-viewing>div>div{
    background-color: whitesmoke;
    border-radius: 5px;
    box-shadow: 0 0 2px;
    max-height: 75%;
}
.image-close {
    position: absolute;
    top: 5px;
    right: -5px;
    max-width: 68px;
    min-width: 68px;
    width: 46px;
    height: 52px;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-image: url(../images/close_2w.png);
    background-size: 94%;
}
/* ratio divs start*/

.ratio{
    width: 100%;
    position: relative;
    max-width: 280px;
}

.ratio:after{
    content: " ";
    display: block;
    pointer-events: none;
}

.ratio.ratio-4-3:after {
    padding-top: calc( 100% / 4 * 3);
}

.ratio.ratio-3-4:after {
    padding-top: calc( 100% / 3 * 4);
}

.ratio.ratio-16-9:after {
    padding-top: calc( 100% / 4 * 3);
}

.ratio.ratio-7-4:after {
    padding-top: calc( 100% / 7 * 4);
}

.ratio.ratio-1-1:after {
    padding-top: calc( 100% );
}

.ratio .ratio-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.ratio .ratio-container .image-wrapper{
    position: relative;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.ratio .ratio-container .image-wrapper img {
    padding: 0;
    margin: 0;
    max-width: 100%;
    max-height: 100%;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* ratio divs end*/

.drop-down {
			position: absolute;
			top: 40px;
			left: 20px;
			background-color: #222;
			border: 1px solid #777;login
			border-radius: 10px;
			width: 200px;
			margin-left: -12px;
			padding: 15px 0;
//			font-family: o-normal;
			display: none;
			z-index: 1000;
}

.drop-down li {
	cursor: pointer;
}

.modal-content {
	background-color: #222; 
}

.btn-primary {
	background-color: rgb(52, 58, 64);
	border-color: #777;
}

#error {
	margin: 10px;
	color: red;
	font-size: 20px;
}

input:read-only {
	color: #aaa;
}

.loader_container {
	background-color: black;
	opacity: 0.5;
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
}

.loader {
  border: 8px solid #f3f3f3; /* Light grey */
  border-top: 8px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite;
  position: absolute;

  margin: 0;
  top: 50%;
  left: 45%;
  transform: translate(-100%, -50%);
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.filter_preview {
	margin: 2px;
	border: 2px;
}

.filter_preview_active {
	margin: 2px;
	border: 2px solid red;
}

.background_preview, .foreground_preview, .overlay_preview {
	margin: 2px;
	border: 2px;
    background-image: url('data:image/png;base64,R0lGODlhEAAQAIAAAP///8zMzCH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNyAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OEQwRjBFNkJBOTEyMTFFNzhGNTlEMTE3MTYyQzM2Q0UiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OEQwRjBFNkNBOTEyMTFFNzhGNTlEMTE3MTYyQzM2Q0UiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4RDBGMEU2OUE5MTIxMUU3OEY1OUQxMTcxNjJDMzZDRSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4RDBGMEU2QUE5MTIxMUU3OEY1OUQxMTcxNjJDMzZDRSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgH//v38+/r5+Pf29fTz8vHw7+7t7Ovq6ejn5uXk4+Lh4N/e3dzb2tnY19bV1NPS0dDPzs3My8rJyMfGxcTDwsHAv769vLu6ubi3trW0s7KxsK+urayrqqmop6alpKOioaCfnp2cm5qZmJeWlZSTkpGQj46NjIuKiYiHhoWEg4KBgH9+fXx7enl4d3Z1dHNycXBvbm1sa2ppaGdmZWRjYmFgX15dXFtaWVhXVlVUU1JRUE9OTUxLSklIR0ZFRENCQUA/Pj08Ozo5ODc2NTQzMjEwLy4tLCsqKSgnJiUkIyIhIB8eHRwbGhkYFxYVFBMSERAPDg0MCwoJCAcGBQQDAgEAACH5BAAAAAAALAAAAAAQABAAAAIfjG+gq4jM3IFLJgpswNly/XkcBpIiVaInlLJr9FZWAQA7');
}

.background_preview_active, .foreground_preview_active {
	margin: 2px;
	border: 2px solid red;
    background-image: url('data:image/png;base64,R0lGODlhEAAQAIAAAP///8zMzCH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNyAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OEQwRjBFNkJBOTEyMTFFNzhGNTlEMTE3MTYyQzM2Q0UiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OEQwRjBFNkNBOTEyMTFFNzhGNTlEMTE3MTYyQzM2Q0UiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4RDBGMEU2OUE5MTIxMUU3OEY1OUQxMTcxNjJDMzZDRSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4RDBGMEU2QUE5MTIxMUU3OEY1OUQxMTcxNjJDMzZDRSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgH//v38+/r5+Pf29fTz8vHw7+7t7Ovq6ejn5uXk4+Lh4N/e3dzb2tnY19bV1NPS0dDPzs3My8rJyMfGxcTDwsHAv769vLu6ubi3trW0s7KxsK+urayrqqmop6alpKOioaCfnp2cm5qZmJeWlZSTkpGQj46NjIuKiYiHhoWEg4KBgH9+fXx7enl4d3Z1dHNycXBvbm1sa2ppaGdmZWRjYmFgX15dXFtaWVhXVlVUU1JRUE9OTUxLSklIR0ZFRENCQUA/Pj08Ozo5ODc2NTQzMjEwLy4tLCsqKSgnJiUkIyIhIB8eHRwbGhkYFxYVFBMSERAPDg0MCwoJCAcGBQQDAgEAACH5BAAAAAAALAAAAAAQABAAAAIfjG+gq4jM3IFLJgpswNly/XkcBpIiVaInlLJr9FZWAQA7');
}

textarea {
    white-space: pre;
    font-family: monospace;
    overflow-wrap: normal;
    overflow-x: scroll;
    font-size: .75em;
    -moz-tab-size: 4;
    tab-size: 4;
}

.shooter_up {
    color:#30e230;
}

.shooter_down {
    color:#cf221b;
}

.searchbox {
    position: absolute;
    top: 40px;
    right: 20px;
    background-color: #222;
    border: 1px solid #777;
    width: 250px;
    margin-left: -12px;
    padding: 15px 15px;
    display: none;
    z-index: 1000;
}

.searchbox input {
width: 100%;
}

.searchbox i {
font-weight: bold;
}

.ellipsis {
cursor:pointer;
}

td, th {
    padding: .5rem!important;
}

.modal-substitle {
    margin-top: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #e9ecef71;
}

.picture-type>h3 {
    width: 100%;
    text-align: left;
    font-family: o-light;
    font-size: 18px;
}
.picture-type>h3>span {
    float: right;
    margin-left: 10px;
}

.slider_value {
    margin-left: 20px;
}

.loadingOverlay {
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-color: #1a1d21;
    z-index: 999999;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.loadingOverlay--quote {
    text-align: center;
    margin: 0 auto;
    width: max(50vw, 40rem)
}

.loadingOverlay--spinner {
    background-image: url(../images/cam_spinner.svg);
    background-repeat: no-repeat;
    background-position: center;
    -moz-background-size: 140px;
    background-size: 140px;
    display: block;
    width: 100vw;
    height: 200px
}

.loadingOverlay--progress {
    border: 1px solid #5a6571;
    width: max(33vw, 40rem);
    height: 3.2rem;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#5ae6aa), to(#5ae6aa));
    background-image: -webkit-linear-gradient(#5ae6aa, #5ae6aa);
    background-image: -moz-linear-gradient(#5ae6aa, #5ae6aa);
    background-image: -o-linear-gradient(#5ae6aa, #5ae6aa);
    background-image: linear-gradient(#5ae6aa, #5ae6aa);
    -moz-background-size: var(--progress) 60%;
    background-size: var(--progress) 60%;
    background-repeat: no-repeat;
    background-position: center left;
    margin: 0 auto
}

.palette {
    width: 20px;
    height: 20px;
    margin-left: 10px;
    cursor: pointer;
    color:white;
}