/*.sidebar:before, .sidebar:after, .off-canvas-sidebar:before, .off-canvas-sidebar:after {*/
/*    opacity: 0.77 !important;*/
/*}*/

.alert.alert-with-icon{
    top: 20px !important;
}

.north {
    transform:rotate(0deg);
    -ms-transform:rotate(0deg); /* IE 9 */
    -webkit-transform:rotate(0deg); /* Safari and Chrome */
}
.west {
    transform:rotate(90deg);
    -ms-transform:rotate(90deg); /* IE 9 */
    -webkit-transform:rotate(90deg); /* Safari and Chrome */
    max-width: 100vh;
    max-height: 100vw;
}
.south {
    transform:rotate(180deg);
    -ms-transform:rotate(180deg); /* IE 9 */
    -webkit-transform:rotate(180deg); /* Safari and Chrome */

}
.east {
    transform:rotate(270deg);
    -ms-transform:rotate(270deg); /* IE 9 */
    -webkit-transform:rotate(270deg); /* Safari and Chrome */
    max-width: 100vh;
    max-height: 100vw;
}
.northwest {
    transform:rotate(45deg);
    -ms-transform:rotate(45deg); /* IE 9 */
    -webkit-transform:rotate(45deg); /* Safari and Chrome */
    max-width: 100vh;
    max-height: 100vw;
}
.southwest {
    transform:rotate(135deg);
    -ms-transform:rotate(135deg); /* IE 9 */
    -webkit-transform:rotate(135deg); /* Safari and Chrome */
    max-width: 100vh;
    max-height: 100vw;
}
.southeast {
    transform:rotate(225deg);
    -ms-transform:rotate(225deg); /* IE 9 */
    -webkit-transform:rotate(225deg); /* Safari and Chrome */
    max-width: 100vh;
    max-height: 100vw;
}
.northeast {
    transform:rotate(315deg);
    -ms-transform:rotate(315deg); /* IE 9 */
    -webkit-transform:rotate(315deg); /* Safari and Chrome */
    max-width: 100vh;
    max-height: 100vw;
}

/*.sidebar .nav, .off-canvas-sidebar .nav {*/
/*    margin-top: auto !important;*/
/*}*/

.user {
    margin-bottom: 20px;
}

/****************** Start loader *******************/
/* Center the loader */
.loader {
    z-index: 9999;
    width: 100%;
    height: 100%;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid blue;
    border-bottom: 16px solid red;
    -webkit-animation: spin 3s linear infinite; /* for safari */
    animation: spin 3s linear infinite;
}

.loader:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background-color: white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.loader-block {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -76px 0 0 -76px;
    width: 120px;
    height: 120px;
    z-index: 9999;
    display: none;
}

.dtloader-block {
    position: fixed;
    left: 50%;
    top: 50%;
    margin: -76px 0 0 -76px;
    width: 120px;
    height: 120px;
    z-index: 9999;
    display: none;
}

.dtloader-block {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -76px 0 0 -76px;
    width: 120px;
    height: 120px;
    z-index: 9999;
    display: none;
}

.stop{
    position: absolute;
    display: inline-block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    z-index: 9999;
    color: black;
    text-align: center;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* for safari */
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

/* for safari */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Add animation to "page content" */
.animate-bottom {
    position: relative;
    -webkit-animation-name: animatebottom;
    -webkit-animation-duration: 1s;
    animation-name: animatebottom;
    animation-duration: 1s
}

@-webkit-keyframes animatebottom {
    from { bottom:-100px; opacity:0 }
    to { bottom:0px; opacity:1 }
}

@keyframes animatebottom {
    from{ bottom:-100px; opacity:0 }
    to{ bottom:0; opacity:1 }
}
/****************** End loader *******************/

#overlay {
    background-color: rgb(0 0 0 / 40%);
    z-index: 9999;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
}

a {
    cursor: pointer;
}