/* Used the right css property since BS4 spacing/position were not
working with position-fixed */
#fixedExploreIcon.explore-toggle {
    right: 20px;
    bottom: 20px;
}
/* For Image sizing  IMPORTANT */
.side-images img{
    width: 100%; /* width of container */
    height: 50vh; /* height of container */
    object-fit: cover;
    object-position: 20% 10%; /* try 20px 10px */
}





/* SMARTPHONE CONTAINER */

/* The device with borders */
  .smartphone {
    position: relative;
    width: 342px !important;
    height: 500px !important; /* 640, changed to 500 for advance view of button in smartphone */
    margin: auto;
    border: 16px black solid;
    border-top-width: 60px;
    border-bottom-width: 60px;
    border-radius: 36px;
    transition: 0.4s;
  }
  
  /* The horizontal line on the top of the device */
  .smartphone:before {
    content: '';
    display: block;
    width: 60px;
    height: 5px;
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #333;
    border-radius: 10px;
  }
  
  /* The circle on the bottom of the device */
  .smartphone:after {
    content: '';
    display: block;
    width: 35px;
    height: 35px;
    position: absolute;
    left: 50%;
    bottom: -65px;
    transform: translate(-50%, -50%);
    background: #333;
    border-radius: 50%;
  }
  
 /* The screen (or content) of the device */
 .smartphone .content {
   width: 310px;
   height: 520px;
   background: white;
 }
 
.rotate-text {
    transform: rotate(-90deg);
    /* Legacy vendor prefixes that you probably don't need... */
  
    /* Safari */
    -webkit-transform: rotate(-90deg);
  
    /* Firefox */
    -moz-transform: rotate(-90deg);
  
    /* IE */
    -ms-transform: rotate(-90deg);
  
    /* Opera */
    -o-transform: rotate(-90deg);
  
    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
 
.rotate-content {
    transform: rotate(90deg);
    /* Legacy vendor prefixes that you probably don't need... */
  
    /* Safari */
    -webkit-transform: rotate(90deg);
  
    /* Firefox */
    -moz-transform: rotate(90deg);
  
    /* IE */
    -ms-transform: rotate(90deg);
  
    /* Opera */
    -o-transform: rotate(90deg);
  
    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    
    height: 310px !important;
    width: 520px !important;
    margin-left: -105px !important;
    margin-top: 105px !important;
}
/* SMARTPHONE CONTAINER */

/* Vue Draggable */
.draggable-block>span {
  min-height: 50vh;
}
body>.tooltip {
  opacity: 1;;
}
.bootstrap-tagsinput>.tag{
    background-color: #9c27b0  !important;
}
/* ckeditor height*/
#idPageEditorModal .ck-editor__editable{
    min-height: 70vh !important;
}

.custom-sidebar-overlflow{
    overflow: hidden !important;
}
/* used for dashbaord cards, keep the font size little bigger for counts */
#idInReleaseApp,#idInDevelopmentApp,#idTotalUsers{
    font-size: 24px;
}
/* used for dashbaord cards, where we kept the height of the cards same */
.card-content{
    min-height: 6vh;
}
/* used for app icons on card to display rounded and little up to the card */
.app-icon-oncard{
    margin-top: -25px;
    border-radius: 50%;
    border: 1px solid #eee;
    background-color: white;
}
/* used in app to color the heading of info boxes */
.title-anchor{
    color: #e91e63 !important;
}
/* CKEditor caption for figure default height was too huge */
figcaption.ck-editor__editable {
    min-height: auto !important;
}
.color-box {
     width: 10px;
    height: 10px;
    display: inline-block;
    background-color: #ccc;
    position: absolute;
    margin-left: 5px;
    top: 5px;
}
.center{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.sidebarSubMenu{
    margin-left: 5px;
}

.classSortMenuOption{
    cursor: pointer;
}

.classRowStyyling{
    font-size: 12px !important;
}

.table > tbody >tr {
 font-size: 12px !important;   
}


tr.classRowScreen{
    font-weight: 400;
}

/*
    css on hover in sidebar, display bottom info
*/
.sidebar-mini .sidebar:hover #idSidebarBottomInfoBlock{
    display: block !important;
  }