@font-face {
    font-family: 'nirmala';
    src: url('../fonts/nirmala.ttf') format('truetype');
}


body {
    font-family: 'Segoe UI';
    background: #ECF0F5;
    overflow:hidden;
}

.BlockHighlight{
    color:whitesmoke;
    padding: 10px;
}

.BlockHighlight:hover {
    color: white;
    background-color: #146891;
}

.HeaderContainer {
    width: 20vw;
    background: #1BA1E2;
    color: white;
    font-size: large;
    font-weight: bold;
    text-align: center;
}

.TopBar {
    width: 80vw;
    background: #13709E;
    text-align: right;
}

.SitemapContainer {
    width: 20vw;
    height: 70vh;
    color: white;
    overflow-y: auto;
    overflow-x:hidden;
    position: absolute;
    top: 12vh;
    scrollbar-color: #1BA1E2;
    scrollbar-width: thin;
}

.DeveloperContainer {
    width: 20vw;
    color: white;
    font-size: smaller;
    text-align: center;
    position: absolute;
    bottom: 0vw;
}

.ChildPageContainer {
    height: 90vh;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 10px;
    scrollbar-color: #1BA1E2;
}

h2{
    color: black;
    margin: 5px;
}

h3 {
    color: gray;
    font-weight: lighter;
    margin: 5px;
}

h4 {
    color: gray;
    font-weight: lighter;
    margin: 5px;
}

li{
    font-size:small;
}

li:nth-child(odd) {
    color: blue;
}

/*Navigation Panel*/

.TreeView {
    font-size: medium;
}

.TreeView > table{
    padding-left: 5px;
    font-weight:bold;
}

.TreeView div table{
    display: block;
    width: 100%;
    text-align:left;
    text-indent: 10px;
    margin-bottom: 5px;
}

.TreeView table tr{
    height: 40px;
    align-items: stretch;
    vertical-align:middle;
}

.TreeView table tr td:nth-of-type(2){
   padding-left: 5px;
}

.TreeView table tr td:last-of-type{
   width: 100%;
   padding-left: 10px;
}

.TreeView a{
    display: block;
    text-decoration: none;
    color: whitesmoke;    
    width: 100%;
    padding: 0;
}

.TreeView table:hover{
    background-color: #1E282C;
}

.TreeView table:hover a{
    color: white;
}

.TreeView img{
    height: 20px;
    width: 20px;
}


/*Button*/

.Button {
    border-color: #0366d6;
    background-color: white;
    color: #0366d6;
    font-weight: 500;
    border-width: 1px;
    height: 30px;
    width: 150px;
    border-radius: 3px;
}

.Button:hover {
    outline-color: #0366d6;
    background-color: #0366d6;
    border-width: 1px;
    color: white;
}

.Button:active {
    box-shadow: 0 2px #666;
    transform: translateY(1px);
}

.Button:disabled{
    background-color:lightgray;
    color:black;
}

/*Textbox*/

.Textbox{
    width: 200px;
    height: 25px;
}

.Textarea {
    width: 200px;
    height: 100px;
    scroll-behavior: auto;
}

/*Listbox*/
.Listbox {
    width: 250px;
}

/*Dropdown List*/

.DropDownList {
    width: 200px;
    height: 25px;
}

/*Gridview*/

.GridViewEmptyData {
    background-color: whitesmoke;
    color: red;
    font-size: medium;
    text-align: center;
}

.GridView {
    background-color: white;
    color: black;
    border:none;
}

.GridView tr td {
    border:solid 1px;
    border-color: lightgray;
}

.GridViewHeader {
    font-weight: bolder;
    border: solid 1px;
    border-color: lightgray;
    border-bottom: solid 2px;
    border-bottom-color: lightgray;
}

.GridViewRows {
    background-color: whitesmoke;
}

.GridViewAlternateRows {
    background-color: white;
}

.GridViewPager {
    background-color: dodgerblue;
    color: white;
    font-size: large;
    padding: 10px 5px 10px 5px;
}

.GridViewPager a {
    color: white;
}



.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 30px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #2196F3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 30px;
}

.slider.round:before {
    border-radius: 50%;
}

/*Collapsible Panel*/
.CollapsiblePanelHeader {
    background-color: #f8f8f8;
    cursor: pointer;
    padding: 5px;
}

.CollapsiblePanelHeader h4 {
    font-weight: bold;
}

.CollapsiblePanel {
    background-color: white;
    border-bottom: solid 1px;
    border-bottom-color: lightgray;
    padding: 5px;
    margin-bottom: 5px;
}

/*Accordion*/
.AccordionHeader {
    color: white;
    margin-top: 5px;
    cursor: pointer;
}

.AccordionPanel {
    border-bottom: 5px solid transparent;
    border-left: 5px solid #13709E;
    border-right: 5px solid #1BA1E2;
    padding: 10px;
    background: white;
    border-image: linear-gradient(to right, #13709E, #1BA1E2);
    border-image-slice: 1;
}

/* Login and ForgotPassword Page Styles */

.LoginPageBody {
    height: 100vh;
    background-color: #ECF0F5;
    opacity: 1;
    display: flex;
    margin: 0;
    font-family: 'Segoe UI';
}

.LoginPageForm {
    background-color: white;
    margin: auto;
}

.LoginPageForm h1{
    font-weight: 400;
    margin: 5px;
}

.LoginPageForm h4{
    margin: 5px;
    padding: 5px;
}

.LoginPageTextBox {
    width: 90%;
    height: 25px;
    margin: 5px;
    outline: none;
}

.LoginPageTextBox:focus {
    border: 2px dashed blue;
    box-shadow: 0 0 10px lightblue;
    
}

.LoginPageButton {
    background-color: #0366d6;
    border-color: #0366d6;
    color: white;
    font-weight: 500;
    border-width: 1px;
    height: 30px;
    width: 90%;
}

.LoginPageButton:hover {
    border-color: black;
    background-color: #146891;
    border-width: 2px;
}

.LoginPageButton:active {
    box-shadow: 0 2px #666;
    transform: translateY(1px);
}

/*Shapes*/
.triangle-up {
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 30px solid #555;
    cursor: pointer;
}

.triangle-up:hover {
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 30px solid #146891;
    cursor: pointer;
}

.triangle-up:active {
    box-shadow: 0 2px #555;
    transform: translateY(1px);
}

.triangle-down {
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 30px solid #555;
    cursor: pointer;
}

.triangle-down:hover {
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 30px solid #146891;
    cursor: pointer;
}

.triangle-down:active {
    box-shadow: 0 -2px #555;
    transform: translateY(1px);
}

/*Resizable Handle*/
.handlecss {
    width: 20px;
    height: 20px;
    background-color: Red;
}

.containerClass .ajax__html_editor_extender_container {
    width: 100% !important; /*important is really important at here*/
}

.MCQ {
    list-style-type: lower-latin;    
}

/* Rating */
.ratingBox {
    font-size: 0pt;
    width: 100px;
    height: 32px;
    margin: 1px;
    padding: 1px;
    cursor: pointer;
    display: block;
    background-repeat: no-repeat;
}

.filledRatingBox {
    background-image: url(../Icons/FilledBox.png);
}

.emptyRatingBox {
    background-image: url(../Icons/EmptyBox.png);
}

.savedRatingBox {
    background-image: url(../Icons/SavedBox.png);
}