@font-face{
	font-family: "MonHartig";
	font-style: normal;
	font-weight: 700;
	font-variant: normal;
	src: url('/themes/demo/assets/fonts/MonHartig-2.woff2') format('woff2');
	}

@font-face{
	font-family: "MongProof";
	font-style: normal;
	font-weight: 700;
	font-variant: normal;
	src: url('/themes/demo/assets/fonts/MongProofCyrillic.woff2') format('woff2');
	}
	
@font-face{
	font-family: "MongLatin";
	font-style: normal;
	font-weight: 700;
	font-variant: normal;
	src: url('/themes/demo/assets/fonts/MongolProofLatin.woff2') format('woff2');
	}
		


.list-group{
    max-height: 300px;
    margin-bottom: 10px;
    overflow: hidden;
    overflow-y:scroll;
    -webkit-overflow-scrolling: touch;
}

#myugs > .list-group-item {
   padding-top: 0;
   padding-bottom: 0;
    
}

#myugs > .list-group-item:hover {
   background-color: #f5f5f5;
    
}


.mymng {
	font-family: 'MonHartig', sans;
	font-size: 1.15em;
  width: 100%;
  height: 300px;
  padding: 12px;
  overflow-x: scroll;
  line-height: 1.6;
  -webkit-writing-mode: vertical-lr;
  -moz-writing-mode: vertical-lr;
  -ms-writing-mode: vertical-lr;
  -epub-writing-mode: vertical-lr;
  writing-mode: vertical-lr;
  -webkit-text-orientation: sideways-right;	
  
}

.myproof  {
  font-family: 'MongProof', sans;
  font-size: 18px;
  width: 100%;
  height: 300px;
  padding: 12px;
  overflow-x: scroll;
  line-height: 1.6;
  writing-mode: horizontal-tb;
    
}

.mylatin {
  font-family: 'MongLatin', sans;
  font-size: 18px;
  width: 100%;
  height: 300px;
  padding: 12px;
  overflow-x: scroll;
  line-height: 1.6;
  writing-mode: horizontal-tb;
    
}

.mnghuvir {
   padding: 10px 25px;   

}




#mngTextBox a {
	text-decoration: none;
}

#mngTextBox a:hover {
	text-decoration: overline;
}

a {
   color: #560591; 
}



.bg-crmn {
   background-color: white; 
    
}


.bg-nclp {
   background: linear-gradient(270deg, #330852 0%, #560591 100%); 
   padding: 34px 0 34px;
}

.mngrootug {
  font-family: 'MonHartig', sans;
  font-size: 22px;

}
.mnglistug {
  font-family: 'MonHartig', sans;
  font-size: 22px;

}
.cyrlistug {
  font-family: 'MongProof', sans;
  font-size: 18px;

}





#cyrTextBox::selection {
            background-color: #d3e3fd;
        }


.pre {
    white-space: pre;
}
.pre-wrap{
   white-space: pre-wrap;
}
.pre-line{
   white-space: pre-line;
}

.inline-block{
    display:inline-block;
}

.toli {
    
    font-size: 1.0rem;
}

.mngcyr {
     color: red;   
    
}

.cyrerr {
     border:1px solid lightgray;
     border-radius:50%;  

}


   /* unvisited link */
    a.cyrmng:link {
      color: gray;
    }
    
    a.cyrerr:link {
        color: lightgray;
    }
    
    /* visited link */
    a.cyrmng:visited {
      color: green;
    }
    
    /* mouse over link */
    a.cyrmng:hover {
      color: blue;
    }
    
    a.cyrerr:hover {
        color: red;
    }
    
    /* selected link */
    a.cyrmng:active {
      color: blue;
    }
    
        /* unvisited link */
    a.uginfo:link {
      color: gray;
    }
    
    /* visited link */
    a.uginfo:visited {
      color: green;
    }
    
    /* mouse over link */
    a.uginfo:hover {
      color: red;
    }
    
    /* selected link */
    a.uginfo:active {
      color: blue;
    }
    
   
    
    .menu-cyr {
      font-size: 0.8em;
    }
    
    
    .context-menu {
        display: none;
        position: absolute;
        z-index: 10;
    }
    
    .border-gray-300 {
        border-color: rgb(209 213 219);
    }
    .text-gray-500 {
        color: rgb(107 114 128);
    }
    .shadow-lg {
        box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    }
    
    .bg-gray-100:hover {
        background-color: rgb(243 244 246);
        
    }
    
    .text-sm-mnu {
         font-size: 0.8em;   
        
    }
    .w-160 {
       width: 300px;   
        
    }
    .bg-sanal {
      background-color:  #fef9e7;   
    }


.mymng .wrong {
      text-decoration: solid #FFA38F underline;
      /* will apply underline in safari */
      -webkit-text-decoration: solid #FFA38F underline;
      text-underline-offset: -0.9em; 
}

.mymng .movog {
      text-decoration: solid green underline;
      -webkit-text-decoration: solid green underline;
      text-underline-offset: -0.9em;
}

.mymng .olan {
  text-decoration: none;
  color: #0052cc;
  cursor: pointer;
}

.myproof .olan {
  text-decoration: none;
  color: #0052cc;
  cursor: pointer;
}

.myproof .wrong {
  text-decoration: solid #FFA38F underline;
  text-underline-offset: 0.2em; 
}

.mylatin .wrong {
  text-decoration: solid #FFA38F underline;
  /* will apply underline in safari */
  -webkit-text-decoration: solid #FFA38F underline;
  text-underline-offset: 0.2em; 
}

.latlet {
  color: red;   
  background-color: #F5EFFF;
}

#cyrTextBox {
  font-family: 'Arial', sans;
  width: 100%;
  padding: 12px;
  overflow-y: scroll;
  white-space: pre-wrap;
}

#cyrTextBox .abdag, .movog {
  text-decoration: solid green underline;
  text-underline-offset: 0.2em;
}

#mngProof {
  font-family: 'MongProof', sans;
  color: #00008B; 
  font-size: 16px;
}

#glgfrgn {
  font-family: 'MongProof', sans;
  color: #00008B; 
  font-size: 16px;
  padding-left: 200px;
}

#sp-erem {
  padding-left: 150px;  
}

#wrdDividedMng {
   font-family: MonHartig,sans-serif;
   font-size: 24px;
}
.lblDividedMng {
    font-family: MonHartig,sans-serif;
    font-size: 24px;
}

#cyrTextBox .wrong {
  text-decoration: solid red underline;
  /* will apply underline in safari */
  -webkit-text-decoration: solid red underline;
  text-underline-offset: 0.2em;
}

.chartoo {
    color: gray;
    margin-left: 10px;
    
}
#temdegt {
    float: right;

}
.wrongtoo {
    color: red;
    margin-left: 10px;
    
}


#radMng {
   font-family: MonHartig,sans-serif;
    font-size: 18px;
   transform: rotate(90deg);
}


.s-radio  {
    cursor: pointer;
}

.mngrad {
   padding-left: 1rem; 
   border: var(--bs-border-width) solid var(--bs-border-color); 
   border-radius: var(--bs-border-radius);
}
.mngbash {
   height: 36px;
   padding-left: 1rem; 
   border: var(--bs-border-width) solid var(--bs-border-color); 
   border-radius: var(--bs-border-radius);
}

#wp_apps button {
   margin-left: 10px;    
}

.btn-circle {
			width: 28px;
			height: 28px;
			padding: 0px;
			border-radius: 50%;
			font-size: 8px;
			text-align: center;
		}


#context-menu {
    background-color: #ffffff;
    box-shadow: 0 0 20px rgba(37, 40, 42, 0.22);
    color: #1f194c;
    width: 13em;
    padding: 0.8em 0.6em;
    font-size: 1rem;
    position: fixed;
    visibility: hidden;
}


#context-menu .item {
    padding: 0.3em 1.2em;
}
#context-menu .item:hover {
    background-color: rgba(44, 141, 247, 0.2);
    cursor: pointer;
}

hr.solid {
  border-top: 1px solid #bbb;
  margin: 0.5rem 0 !important;
}

#context-menu .ugus {
    text-align: center;
}


.running {
    position: absolute; 
    background-color: rgba(0, 0, 0, 0.2); 
    border: 1px solid green; 
    top: 0px;
    left: 0px;
    height: 100vh; 
    width: 100vw;
    z-index: 10;
    display: none;
}

.running img {
    width: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.running a > img {
    width: 32px;
    position: relative;
    top: 20px;
    left: 30px;
}

.running .divprog {
    width: 200px;
    position: absolute;
    top: calc(50% + 70px);
    left: 50%;
    transform: translate(-50%, -50%);

}

#mngProof .glgcyr {
    color: red;
    
}

#normUgTailbar  {
    border: 1px solid #fff7e6;
    border-radius: 5px;
    background-color: #fff7e6;
}

.noInfo {
    font-style: italic;
    color: #922b21;
}

#normMngUg {
   -ms-writing-mode: tb-lr;
  -webkit-writing-mode: vertical-lr;
  -webkit-text-orientation: sideways vertical-lr: 
  -moz-writing-mode: vertical-lr;
  -ms-writing-mode: vertical-lr;
  writing-mode: vertical-lr;
  -webkit-text-orientation: sideways-right;	
  background-color: #fff7e6;
    
}
.normMngUgGalig {
    font-family: 'MongProof', sans;
    color: #00008B;
    font-size: 16px;
}
.mngUg-1 {
  font-family: MonHartig;
  font-size: 18px; 
}


.huvis {
  font-family: MonHartig;
  font-size: 16px;
  padding-right: 10px;  
}
.huviscyr {
  font-family: MongProof;
  font-size: 15px;
  padding-right: 10px;  
}
.cyrhuvis {
  font-size: 16px;
  padding-right: 10px;  
}
.sparts {
  font-size: 16px;
  display: inline-block;
  color: green; 
  cursor: default;
  width: 80px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; 
  vertical-align: middle;
}

.mngrow input, label {
    cursor: pointer;
    
}

.draggable{
  position: relative;
  z-index: 100
}

#draggable-handler {
  cursor:move;
  position:relative; /* important (all position that's not `static`) */
}

.dragging{
  cursor: move;
  z-index: 200 !important
}

#mngProof .glgcyr {
    color: red;
    
}

#crdRes  {
    margin: 15px;
    border: 1px solid lightgray;
    padding: 5px 10px;
    border-radius: 5px;
    background-color: #fff7e6;
}

#crdWrdRes {
    margin: 15px;
    border: 1px solid lightgray;
    padding: 5px 10px;
    border-radius: 5px;
    background-color: #fff7e6;    
    font-size: 0.9rem;
}

#crdWrdRes .spUgs { 
    color: blue;
    font-size: 1rem;
}
.jrmug {
    font-weight: bold;
    color: #000066;
    
}

.jrmzerg {
    font-family: Arial, Helvetica, sans-serif;
    color: red;
    
}

@media (min-width: 1025px){
#layout-footer {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
 
}
}

@media (min-width: 768px) and (max-width: 1024px){
  /* For mobile phones: */
  #layout-footer {
    bottom: 0px;
  }
}

html, 
body {
    height: 100%;
    font-family: "PT Sans Narrow", sans-serif;
    color: #6B778B;
    font-size: 16px;
    line-height: 27px;
    font-weight: 400;
    background-color: #F4F5FF;   
}

.accordion-header h1, h2 {
    padding-top: 0px;
    padding-bottom: 0px;
}

#bdTailbar {
  background-color: #fff3f3;  
  max-height: 75vh;
  overflow: scroll;
  overflow-x: hidden;
}


.accordion-button {
  padding-top: 2px;   
  padding-bottom: 2px;  
}

.tlbrItem {
   padding-left: 20px; 
   font-weight: bold;
}

.modal.fade.show {
    backdrop-filter: blur(5px);
}

.tlbr {
  margin-bottom: 10px;   
}