/* 
    Created on : 01 Nov, 2018, 1:16:06 PM
    Author     : safdar
*/

/*====START=====New button style ============*/
.eis-btn{
    min-height: 28px;
    border-radius: 3px;
    padding: 5px 10px 5px 10px;
    cursor: pointer;
    margin: 3px;
    white-space: nowrap;
    font-size: 14px;
}
.eis-btn:active {
    background-color: white!important;
    color: black!important;
    box-shadow: 0px 1px 5px -1px black;
}

.eis-btn:disabled{
    background-color: #e0e0e0!important;
    color: #9c9c9c!important;
    box-shadow: 0px 0px 0px 0px black !important;
}


.eis-btn.eis-btn-success{
    color: #008000;
    border: none;
    background-color: white;
    box-shadow: 0px 1px 5px -1px black;
}
.eis-btn.eis-btn-success:hover{
    color: #006b00;
    background-color: #ecffef;
    box-shadow: 1px 1px 6px -1px black;
}

.eis-btn.eis-btn-success-on-hover{
    color: #3a3a3a;
    border: none;
    background-color: white;
    box-shadow: 0px 1px 5px -1px black;
}
.eis-btn.eis-btn-success-on-hover:hover{
    background-color: #ccffd4;
    color: #005200;
    box-shadow: 1px 1px 6px -1px black;
}

.eis-btn.eis-btn-warning{
    color: #926e01;
    border: none;
    background-color: white;
    box-shadow: 0px 1px 5px -1px black;
}
.eis-btn.eis-btn-warning:hover{
    background-color:  #fff6da;
    color: #735700;
    box-shadow: 1px 1px 6px -1px black;
}

.eis-btn.eis-btn-warning-on-hover{
    color: #3a3a3a;
    border: none;
    background-color: white;
    box-shadow: 0px 1px 5px -1px black;
}
.eis-btn.eis-btn-warning-on-hover:hover{
    background-color: #f5dd94;
    color: #463500;
    box-shadow: 1px 1px 6px -1px black;
}

.eis-btn.eis-btn-danger{
    color: #e40000;
    border: none;
    background-color: white;
    box-shadow: 0px 1px 5px -1px black;
}
.eis-btn.eis-btn-danger:hover{
    background-color: #ffaeae;
    color: #c50000;
    box-shadow: 1px 1px 6px -1px black;
}


.eis-btn.eis-btn-danger-on-hover{
    color: #3a3a3a;
    border: none;
    background-color: white;
    box-shadow: 0px 1px 5px -1px black;
}
.eis-btn.eis-btn-danger-on-hover:hover{
    background-color: #ffaeae;
    color: #8a0000;
    box-shadow: 1px 1px 6px -1px black;
}

.eis-btn.eis-btn-gray{
    color: gray;
    border: none;
    background-color: white;
    box-shadow: 0px 1px 5px -1px black;
}
.eis-btn.eis-btn-gray:hover{
    background-color: #f4f4f4;
    color: #616161;
    box-shadow: 1px 1px 6px -1px black;
}

.eis-btn.success-btn:before{
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f00c";
    margin-right: 3px;
}
.eis-btn.cancel-btn:before{
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f00d";
    margin-right: 3px;
}
.eis-btn.back-btn:before{
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f060";
    margin-right: 3px;
}
.eis-btn.search-btn:before{
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f002";
}
.eis-btn.refresh-btn:before{
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f021";
}

.eis-btn-badge{
    padding: 1px 3px 1px 3px;
    margin-left: 5px;
    border-radius: 3px;
    box-shadow: -1px 0px 5px -1px black;
    color: #333;
}
/*====END=====New button style ============*/


/**** START **** span button with hover effect*/
.eis-span-btn{
    white-space: nowrap;
    border-radius: 3px;
    padding: 4px 5px;
    margin: 0px 3px;
    cursor: pointer;
    font-size: 13.9px;
}
.eis-span-btn.span-warning{
    color: white;;
    background-color:  #ec971f;    
}
.eis-span-btn.span-warning:hover{
    background-color:  #d58512;    
}
.eis-span-btn.span-danger{
    color: white;
    background-color: #c9302c;    
}
.eis-span-btn.span-danger:hover{
    background-color: #ac2925;    
}
.eis-span-btn.span-info{
    color: white;
    background-color: #5bc0de;    
}
.eis-span-btn.span-info:hover{
    background-color: #269abc;    
}
.eis-span-btn.span-success{
    color: white;
    background-color: #449d44;    
}
.eis-span-btn.span-success:hover{
    background-color: #398439;    
}
.eis-span-btn.span-primary{
    color: white;
    background-color: #337ab7;    
}
.eis-span-btn.span-primary:hover{
    background-color: #2e6da4;
}
.eis-span-btn.span-disabled{
    color: gray;
    background-color: #cecece;    
}
.eis-span-btn.span-disabled:hover{
    cursor: not-allowed;
}
.eis-span-btn.span-gray{
    border: 1px solid #80808030;
    color: #585656;
    background-color: #f5f5f5;  
}
.eis-span-btn.span-gray:hover{
    color: #3a3a3a;
    background-color: #f2f0ee; 
    border: 1px solid #80808078;
}
/**** END **** span button with hover effect*/


/**** START **** span status without hover effect*/
.eis-span-bg{
    white-space: nowrap;
    border-radius: 4px;
    margin: 0px 3px;
    padding: 1px 5px;
    font-size: 13px;
}
.eis-span-bg.span-warning{
    color: #c77500;
    background-color: transparent;
    border: 1px solid #c77500;
}
.eis-span-bg.span-danger{
    color: #c9302c;
    background-color: transparent;
    border: 1px solid #c9302c;  
}
.eis-span-bg.span-info{
    color: #0090bb;
    background-color: transparent;
    border: 1px solid #0090bb;   
}
.eis-span-bg.span-success{
    color: #008000;
    background-color: transparent;
    border: 1px solid #008000;     
}
.eis-span-bg.span-primary{
    color: #024b8a;
    background-color: transparent;
    border: 1px solid #024b8a;   
}
.eis-span-bg.span-gray{
    color: gray;
    background-color: transparent;
    border: 1px solid gray;  
}
/**** END **** span status without hover effect*/


.btn-template-download{
    cursor: pointer;
    border: 1px solid #e8d197;
    border-radius: 5px;
    padding: 7px 10px 7px 10px;
    background-color: #fff9ea;
    color: #0070a1;
    font-size: 17px;
    width: 250px;
}
.btn-template-choose{
    border: 1px solid #abe5ff;
    border-radius: 5px;
    padding: 7px 10px 7px 10px;
    background-color: #ddf4ff;
    color: #0270a1;
    font-size: 17px;
    width: 250px;
}
label.error+.btn-template-choose{
    border: 1px solid #d03f3e;
    color:#d03f3e;
}

.ot-btn-next{
    background-color: #009add;
    color: #FFF;
    border: 1px solid gray;
    border-radius: 5px;
    padding: 5px;
    min-width: 80px;
    margin: 2px;
    cursor: pointer;
    cursor: pointer;
}
.ot-btn-next:hover{
    background-color: #0080b7;
}

.ot-btn-prev{
    background-color: #e4f7ff;
    color: #3c3c3c;
    border: 1px solid gray;
    border-radius: 5px;
    padding: 5px;
    min-width: 80px;
    margin: 2px;
    cursor: pointer;
}
.ot-btn-prev:hover{
    background-color: #c7f0ff;
}

.ot-btn-marked-for-review{
    background-color: #f5edff;
    color: #3c3c3c;
    border: 1px solid gray;
    border-radius: 5px;
    padding: 5px;
    margin: 2px;
    cursor: pointer;
}
.ot-btn-marked-for-review:hover{
    background-color: #ebdefb;
}

.ot-btn-clear-answer{
    background-color: #ffe4e2;
    color: #3c3c3c;
    border: 1px solid gray;
    border-radius: 5px;
    padding: 5px;
    min-width: 80px;
    margin: 2px;
    cursor: pointer;
}
.ot-btn-clear-answer:hover{
    background-color: #ffcac7;
}

.ot-btn-finish-test{
    border: 1px solid gray;
    background-color: #005c84;
    color: #FFF;
    border-radius: 5px;
    padding: 5px;
    min-width: 110px;
    margin: 2px;
    cursor: pointer;
}
.ot-btn-finish-test:hover{
    background-color: #03405a;
}

.btn-not-visited{
    border: 1px solid gray;
    height: 30px;
    width: 30px;
    min-height: 30px;
    min-width: 30px;
    border-radius: 5px;
    margin: 2px;
    background-color: #dedede;
    color: #4a4a4a;
    font-size: 11px;
    cursor: pointer;
}
.btn-not-visited:disabled{
    cursor: auto;
}
.btn-not-visited:hover{
    background-color: #b1b1b1;
}


.btn-not-answered{
    border: 1px solid gray;
    height: 30px;
    width: 30px;
    min-height: 30px;
    min-width: 30px;
    border-radius: 0px 0px 20px 20px;
    margin: 2px;
    background-color: #93001C;
    color: #FFF;
    font-size: 11px;
    cursor: pointer;
}
.btn-not-answered:disabled{
    cursor: auto;
}
.btn-not-answered:hover{
    background-color: #820019;
}

.btn-answered{
    border: 1px solid gray;
    height: 30px;
    width: 30px;
    min-height: 30px;
    min-width: 30px;
    border-radius: 20px 20px 0px 0px;
    margin: 2px;
    background-color: #50a819;
    color: #FFF;
    font-size: 11px;
    cursor: pointer;
}
.btn-answered:disabled{
    cursor: auto;
}
.btn-answered:hover{
    background-color: #3e8611;
}

.btn-marked-for-review{
    border: 1px solid transparent;
    height: 30px;
    width: 30px;
    min-height: 30px;
    min-width: 30px;
    border-radius: 50px;
    margin: 2px;
    background-color: #684888;
    color: #FFF;
    font-size: 11px;
    cursor: pointer;
}
.btn-marked-for-review:disabled{
    cursor: auto;
}
.btn-marked-for-review:hover{
    background-color: #51346f;
}

.btn-answered-and-marked-for-review{
    border: 1px solid transparent;
    height: 30px;
    width: 30px;
    min-height: 30px;
    min-width: 30px;
    border-radius: 50px;
    margin: 2px;
    background-color: #4e2e73;
    color: #FFF;
    font-size: 11px;
    cursor: pointer;
    background-image: url(../../static/images/icons/marked-for-review-small-icon.png);
    background-position: 15px 18px;
    background-size: 9px;
    background-repeat: no-repeat;
}
.btn-answered-and-marked-for-review:disabled{
    cursor: auto;
}
.btn-answered-and-marked-for-review:hover{
    background-color: #280e46;
}

.btn-current-question{
    box-shadow: 0px 0px 15px 2px black;
    border: 1px solid white;
}

.btn-correct-answer{
    box-shadow: inset 0px 0px 0px 1px #00ff00;
    border: 1px solid #00ff00 !important;
}
.btn-correct-answer.btn-current-question{
    box-shadow: inset 0px 0px 0px 1px #00ff00, 0px 0px 15px 2px black !important;
    border: 1px solid #00ff00 !important;
}

.btn-wrong-answer{
    box-shadow: inset 0px 0px 0px 1px #ff0000;
    border: 1px solid #ff0000 !important;
}
.btn-wrong-answer.btn-current-question{
    box-shadow: inset 0px 0px 0px 1px #ff0000, 0px 0px 15px 2px black !important;
    border: 1px solid #ff0000 !important;
}