MasterClass/resources/styles/app.css

.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* general */
.no_margin{
    margin-bottom:0!important;
    margin-top:0!important;
    margin-right:0!important;
}
.no_margin_top{
    margin-top:0!important;
}
.no_margin_left{
    margin-left:0!important;
}
.no_margin_bottom{
    margin-bottom:0!important;
}
.no_margin_right{
    margin-right:0!important;
}

.no_padding{
    padding-bottom:0!important;
    padding-top:0!important;
    padding-right:0!important;
    padding-left:0!important;
}
.no_padding_top{
    padding-top:0!important;
}
.no_padding_left{
    padding-left:0!important;
}
.no_padding_bottom{
    padding-bottom:0!important;
}
.no_padding_right{
    padding-right:0!important;
}
/* /general */


.my-modal-with-medium .modal-dialog{
    width:65%;
}
.my-modal-with-xmedium .modal-dialog{
    width:55%;
}
.my-modal-with-sm .modal-dialog{
    width:40%;
}
.my-modal-with-xsm .modal-dialog{
    width:25%;
}
.alert {
	border-radius: none;
}
/*[data-notify = "message"] {
	margin-left: 8px;
}*/
li.custom-active-link{
    color: white !important;
    background: #000 !important;
}
li.custom-active-link > a,
li.custom-active-link > a:hover,
li.custom-active-link > a:focus {
    color: #ffffff !important;
    background: #000 !important;
}
.truncate-content-text{
    overflow:hidden;
    word-break: break-all;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

    .my-modal-with-sm .modal-dialog {
     width: 90%;
    }
    
}

td.details-control {
    background: url('https://datatables.net/examples/resources/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('https://datatables.net/examples/resources/details_close.png') no-repeat center center;
}
.divider p{
    border-top: solid 1px #ccc;
    margin: 15px 15px 0;
}

.action-btn{
    border: none;
    background: #fff;
    color: #219ff0;
}
.div-space{
    margin: 20px;
}
.fade.in {
   background: rgba(0, 0, 0, 0.14);
}
.faq{
    overflow-x: hidden;
    margin: 18px;
}
#required-identifier{
    color: red;
}
#edit-answer{
    height: 100px;
}

.page-loader{ 
    /* background: #ffffff none repeat scroll 0 0; */
    height: 100%;
    right: 0;
    position: absolute;
    /* top: 0; */
    width: 100%;
    z-index: 1020;}
.loader {
    height: 8px;
    margin: 0 auto;
    position: relative;
    text-align: center;
    top: 57px;
    width: 44px;
}
.page-loader2{ 
    background: #ffffff none repeat scroll 0 0;
    height: 100%;
    right: 0;
    position: absolute;
    /* top: 0; */
    width: 100%;
    z-index: 1020;}
.loader2 {
    height: 8px;
    margin: 0 auto;
    position: relative;
    text-align: center;
    top: 57px;
    width: 44px;
}
.export-text {
    position: relative;
    right: 5px;
    top: 41px;
}
.dot {
    background: #ccc none repeat scroll 0 0;
    border-radius: 50%;
    display: inline-block;
    height: 10px;
    position: absolute;
    width: 10px;
}
.dot_1 {
    animation: 1.5s linear 0s normal none infinite running animateDot1;
    background: #f26f29 none repeat scroll 0 0;
    left: 12px;
}.dot_2 {
    animation: 1.5s linear 0.5s normal none infinite running animateDot2;
    left: 24px;
}.dot_3 {
    animation: 1.5s linear 0s normal none infinite running animateDot3;
    left: 12px;
}.dot_4 {
    animation: 1.5s linear 0.5s normal none infinite running animateDot4;
    left: 24px;
}
 @keyframes animateDot1 {
0% {
    transform: rotate(0deg) translateX(-12px);
}
25% {
    transform: rotate(180deg) translateX(-12px);
}
75% {
    transform: rotate(180deg) translateX(-12px);
}
100% {
    transform: rotate(360deg) translateX(-12px);
}
}
@keyframes animateDot2 {
0% {
    transform: rotate(0deg) translateX(-12px);
}
25% {
    transform: rotate(-180deg) translateX(-12px);
}
75% {
    transform: rotate(-180deg) translateX(-12px);
}
100% {
    transform: rotate(-360deg) translateX(-12px);
}
}
@keyframes animateDot3 {
0% {
    transform: rotate(0deg) translateX(12px);
}
25% {
    transform: rotate(180deg) translateX(12px);
}
75% {
    transform: rotate(180deg) translateX(12px);
}
100% {
    transform: rotate(360deg) translateX(12px);
}
}
@keyframes animateDot4 {
0% {
    transform: rotate(0deg) translateX(12px);
}
25% {
    transform: rotate(-180deg) translateX(12px);
}
75% {
    transform: rotate(-180deg) translateX(12px);
}
100% {
    transform: rotate(-360deg) translateX(12px);
}
}