@font-face {
    font-family: fatemi;
    src: url(/css/AlFatemi14241.ttf);
}

@font-face {
    font-family: fatemi152;
    src: url(/css/alfatemi152.TTF);
}

@font-face {
    font-family: al_kanz;
    src: url(/css/AL-KANZ.ttf);
}

@font-face {
    font-family: kanz_al_marjaan;
    src: url(/css/Kanz-al-Marjaan.ttf);
}

@font-face {
    font-family: 'Aldrich';
    font-style: normal;
    font-weight: 400;
    src: local('Aldrich Regular'), local('Aldrich-Regular'), url(https://fonts.gstatic.com/s/aldrich/v8/MCoTzAn-1s3IGyJMVacY3w.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Charm';
    font-style: normal;
    font-weight: 400;
    src: local('Charm Regular'), local('Charm-Regular'), url(https://fonts.gstatic.com/s/charm/v3/7cHmv4oii5K0MdYoK-4.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Charm';
    font-style: normal;
    font-weight: 400;
    src: local('Charm Regular'), local('Charm-Regular'), url(https://fonts.gstatic.com/s/charm/v3/7cHmv4oii5K0MdYoK-4.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


@media print {
    .no-print, .no-print * {
        display: none !important;
    }
}

.brushScriptFont {
    font-family: 'Brush Script MT';
    color: firebrick;
    font-size: 25pt;
}

.aldrichFont {
    font-family: 'Aldrich';
    font-size: 11pt;
}

.charmFont {
    font-family: 'Charm';
    font-size: 11pt;
}

body {
    font-family: "Times New Roman", Times, serif;
}

    body::-webkit-scrollbar {
        width: 5px;
    }

    body::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    }

    body::-webkit-scrollbar-thumb {
        background-color: #527a7a;
        outline: 1px solid #334d4d;
    }

html {
    overflow: scroll;
    overflow-x: auto;
}

div.loader_progress {
    background-image: url('/img/progressbar_long_green.gif');
    min-height: 50px;
    background-position: center center;
    background-repeat: no-repeat;
    text-align: center;
}



div.loader_balls {
    background-image: url('/img/balls_loading.gif');
    min-height: 100px;
    background-position: center center;
    background-repeat: no-repeat;
}

div.loader_giffy {
    background-image: url('/img/giphy.gif');
    min-height: 100px;
    background-position: center center;
    background-repeat: no-repeat;
}

div.loader {
    background-image: url('/img/loader.gif');
    min-height: 100px;
    background-position: center center;
    background-repeat: no-repeat;
}

    div.loader.inline {
        display: inline-block;
        background-image: url('/img/dots-white.gif');
        min-width: 30px;
        min-height: 10px;
    }

.no-wrap {
    white-space: nowrap;
}

.no-pad {
    padding: 0px;
}

.no-pad-left {
    padding-left: 0px;
}

.no-pad-right {
    padding-right: 0px;
}

.tab-content {
    margin-top: 30px;
}

.hover {
    background-color: #eee;
}

.pointer {
    cursor: pointer;
}

.text-arabic {
    direction: rtl;
    text-align: left;
    font-family: kanz_al_marjaan;
    letter-spacing: 1px;
    font-weight: 600;
    font-size: 17px;
}

.yellowbutton{
     background-color:#ffc857;
            color:#1576a8;
            font-weight:bold;
            border-color:#1576a8;
            border:thin;


}

.text-arabic-right {
    text-align: right;
}

.audioPlayer {
    position: absolute;
    left: -1000px;
}

audioplayer .audioplayer-load {
    background-color: #424242;
    line-height: 30px;
    max-width: 300px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    border-radius: 5px 5px;
    cursor: pointer;
}

@media (max-width: 500px) {
    audio {
        width: 100%;
    }
}

@media (min-width: 320px) {
    .pull-right-xs {
        float: right;
    }
}

@media (min-width: 720px) {
    .pull-right-sm {
        float: right;
    }
}

@media (min-width: 1200px) {
    .pull-right-lg {
        float: right;
    }
}


/*********************** Bootstrap override ***********************/
.alert.alert-success {
    border: 0px;
    background: #dff0d8;
    border-radius: 0px 0px;
    border-top: 1px solid #5ECC00;
    border-bottom: 1px solid #5ECC00;
    box-shadow: none;
}

.alert.alert-info {
    border: 0px;
    background: #d9edf7;
    border-radius: 0px 0px;
    border-top: 1px solid #42BFFF;
    border-bottom: 1px solid #42BFFF;
    box-shadow: none;
}

.alert.alert-warning {
    border: 0px;
    background: #fcf8e3;
    border-radius: 0px 0px;
    border-top: 1px solid #F9E57B;
    border-bottom: 1px solid #F9E57B;
    box-shadow: none;
}

.alert.alert-danger {
    border: 0px;
    background: #f2dede;
    border-radius: 0px 0px;
    border-top: 1px solid #B76E6E;
    border-bottom: 1px solid #B76E6E;
    box-shadow: none;
}

.alert.alert-mainTheme {
    border: 0px;
    background: #c2d6d6;
    border-radius: 0px 0px;
    border-top: 1px solid #527a7a;
    border-bottom: 1px solid #527a7a;
    box-shadow: none;
}

/*w3-School style sheet*/

/* Colors */
.w3-amber, .w3-hover-amber:hover {
    color: #000 !important;
    background-color: #ffc107 !important;
}

.w3-aqua, .w3-hover-aqua:hover {
    color: #000 !important;
    background-color: #00ffff !important;
}

.w3-blue, .w3-hover-blue:hover {
    color: #fff !important;
    background-color: #2196F3 !important;
}

.w3-light-blue, .w3-hover-light-blue:hover {
    color: #000 !important;
    background-color: #87CEEB !important;
}

.w3-brown, .w3-hover-brown:hover {
    color: #fff !important;
    background-color: #795548 !important;
}

.w3-cyan, .w3-hover-cyan:hover {
    color: #000 !important;
    background-color: #00bcd4 !important;
}

.w3-blue-grey, .w3-hover-blue-grey:hover, .w3-blue-gray, .w3-hover-blue-gray:hover {
    color: #fff !important;
    background-color: #607d8b !important;
}

.w3-green, .w3-hover-green:hover {
    color: #fff !important;
    background-color: #4CAF50 !important;
}

.w3-light-green, .w3-hover-light-green:hover {
    color: #000 !important;
    background-color: #8bc34a !important;
}

.w3-indigo, .w3-hover-indigo:hover {
    color: #fff !important;
    background-color: #3f51b5 !important;
}

.w3-khaki, .w3-hover-khaki:hover {
    color: #000 !important;
    background-color: #f0e68c !important;
}

.w3-lime, .w3-hover-lime:hover {
    color: #000 !important;
    background-color: #cddc39 !important;
}

.w3-orange, .w3-hover-orange:hover {
    color: #000 !important;
    background-color: #ff9800 !important;
}

.w3-deep-orange, .w3-hover-deep-orange:hover {
    color: #fff !important;
    background-color: #ff5722 !important;
}

.w3-pink, .w3-hover-pink:hover {
    color: #fff !important;
    background-color: #e91e63 !important;
}

.w3-purple, .w3-hover-purple:hover {
    color: #fff !important;
    background-color: #9c27b0 !important;
}

.w3-deep-purple, .w3-hover-deep-purple:hover {
    color: #fff !important;
    background-color: #673ab7 !important;
}

.w3-red, .w3-hover-red:hover {
    color: #fff !important;
    background-color: #f44336 !important;
}

.w3-sand, .w3-hover-sand:hover {
    color: #000 !important;
    background-color: #fdf5e6 !important;
}

.w3-teal, .w3-hover-teal:hover {
    color: #fff !important;
    background-color: #009688 !important;
}

.w3-yellow, .w3-hover-yellow:hover {
    color: #000 !important;
    background-color: #ffeb3b !important;
}

.w3-white, .w3-hover-white:hover {
    color: #000 !important;
    background-color: #fff !important;
}

.w3-black, .w3-hover-black:hover {
    color: #fff !important;
    background-color: #000 !important;
}

.w3-grey, .w3-hover-grey:hover, .w3-gray, .w3-hover-gray:hover {
    color: #000 !important;
    background-color: #9e9e9e !important;
}

.w3-light-grey, .w3-hover-light-grey:hover, .w3-light-gray, .w3-hover-light-gray:hover {
    color: #000 !important;
    background-color: #f1f1f1 !important;
}

.w3-dark-grey, .w3-hover-dark-grey:hover, .w3-dark-gray, .w3-hover-dark-gray:hover {
    color: #fff !important;
    background-color: #616161 !important;
}

.w3-pale-red, .w3-hover-pale-red:hover {
    color: #000 !important;
    background-color: #ffdddd !important;
}

.w3-pale-green, .w3-hover-pale-green:hover {
    color: #000 !important;
    background-color: #ddffdd !important;
}

.w3-pale-yellow, .w3-hover-pale-yellow:hover {
    color: #000 !important;
    background-color: #ffffcc !important;
}

.w3-pale-blue, .w3-hover-pale-blue:hover {
    color: #000 !important;
    background-color: #ddffff !important;
}

.w3-text-amber, .w3-hover-text-amber:hover {
    color: #ffc107 !important;
}

.w3-text-aqua, .w3-hover-text-aqua:hover {
    color: #00ffff !important;
}

.w3-text-blue, .w3-hover-text-blue:hover {
    color: #2196F3 !important;
}

.w3-text-light-blue, .w3-hover-text-light-blue:hover {
    color: #87CEEB !important;
}

.w3-text-brown, .w3-hover-text-brown:hover {
    color: #795548 !important;
}

.w3-text-cyan, .w3-hover-text-cyan:hover {
    color: #00bcd4 !important;
}

.w3-text-blue-grey, .w3-hover-text-blue-grey:hover, .w3-text-blue-gray, .w3-hover-text-blue-gray:hover {
    color: #607d8b !important;
}

.w3-text-green, .w3-hover-text-green:hover {
    color: #4CAF50 !important;
}

.w3-text-light-green, .w3-hover-text-light-green:hover {
    color: #8bc34a !important;
}

.w3-text-indigo, .w3-hover-text-indigo:hover {
    color: #3f51b5 !important;
}

.w3-text-khaki, .w3-hover-text-khaki:hover {
    color: #b4aa50 !important;
}

.w3-text-lime, .w3-hover-text-lime:hover {
    color: #cddc39 !important;
}

.w3-text-orange, .w3-hover-text-orange:hover {
    color: #ff9800 !important;
}

.w3-text-deep-orange, .w3-hover-text-deep-orange:hover {
    color: #ff5722 !important;
}

.w3-text-pink, .w3-hover-text-pink:hover {
    color: #e91e63 !important;
}

.w3-text-purple, .w3-hover-text-purple:hover {
    color: #9c27b0 !important;
}

.w3-text-deep-purple, .w3-hover-text-deep-purple:hover {
    color: #673ab7 !important;
}

.w3-text-red, .w3-hover-text-red:hover {
    color: #f44336 !important;
}

.w3-text-sand, .w3-hover-text-sand:hover {
    color: #fdf5e6 !important;
}

.w3-text-teal, .w3-hover-text-teal:hover {
    color: #009688 !important;
}

.w3-text-yellow, .w3-hover-text-yellow:hover {
    color: #d2be0e !important;
}

.w3-text-white, .w3-hover-text-white:hover {
    color: #fff !important;
}

.w3-text-black, .w3-hover-text-black:hover {
    color: #000 !important;
}

.w3-text-grey, .w3-hover-text-grey:hover, .w3-text-gray, .w3-hover-text-gray:hover {
    color: #757575 !important;
}

.w3-text-light-grey, .w3-hover-text-light-grey:hover, .w3-text-light-gray, .w3-hover-text-light-gray:hover {
    color: #f1f1f1 !important;
}

.w3-text-dark-grey, .w3-hover-text-dark-grey:hover, .w3-text-dark-gray, .w3-hover-text-dark-gray:hover {
    color: #3a3a3a !important;
}

.w3-border-amber, .w3-hover-border-amber:hover {
    border-color: #ffc107 !important;
}

.w3-border-aqua, .w3-hover-border-aqua:hover {
    border-color: #00ffff !important;
}

.w3-border-blue, .w3-hover-border-blue:hover {
    border-color: #2196F3 !important;
}

.w3-border-light-blue, .w3-hover-border-light-blue:hover {
    border-color: #87CEEB !important;
}

.w3-border-brown, .w3-hover-border-brown:hover {
    border-color: #795548 !important;
}

.w3-border-cyan, .w3-hover-border-cyan:hover {
    border-color: #00bcd4 !important;
}

.w3-border-blue-grey, .w3-hover-border-blue-grey:hover, .w3-border-blue-gray, .w3-hover-border-blue-gray:hover {
    border-color: #607d8b !important;
}

.w3-border-green, .w3-hover-border-green:hover {
    border-color: #4CAF50 !important;
}

.w3-border-light-green, .w3-hover-border-light-green:hover {
    border-color: #8bc34a !important;
}

.w3-border-indigo, .w3-hover-border-indigo:hover {
    border-color: #3f51b5 !important;
}

.w3-border-khaki, .w3-hover-border-khaki:hover {
    border-color: #f0e68c !important;
}

.w3-border-lime, .w3-hover-border-lime:hover {
    border-color: #cddc39 !important;
}

.w3-border-orange, .w3-hover-border-orange:hover {
    border-color: #ff9800 !important;
}

.w3-border-deep-orange, .w3-hover-border-deep-orange:hover {
    border-color: #ff5722 !important;
}

.w3-border-pink, .w3-hover-border-pink:hover {
    border-color: #e91e63 !important;
}

.w3-border-purple, .w3-hover-border-purple:hover {
    border-color: #9c27b0 !important;
}

.w3-border-deep-purple, .w3-hover-border-deep-purple:hover {
    border-color: #673ab7 !important;
}

.w3-border-red, .w3-hover-border-red:hover {
    border-color: #f44336 !important;
}

.w3-border-sand, .w3-hover-border-sand:hover {
    border-color: #fdf5e6 !important;
}

.w3-border-teal, .w3-hover-border-teal:hover {
    border-color: #009688 !important;
}

.w3-border-yellow, .w3-hover-border-yellow:hover {
    border-color: #ffeb3b !important;
}

.w3-border-white, .w3-hover-border-white:hover {
    border-color: #fff !important;
}

.w3-border-black, .w3-hover-border-black:hover {
    border-color: #000 !important;
}

.w3-border-grey, .w3-hover-border-grey:hover, .w3-border-gray, .w3-hover-border-gray:hover {
    border-color: #9e9e9e !important;
}

.w3-border-light-grey, .w3-hover-border-light-grey:hover, .w3-border-light-gray, .w3-hover-border-light-gray:hover {
    border-color: #f1f1f1 !important;
}

.w3-border-dark-grey, .w3-hover-border-dark-grey:hover, .w3-border-dark-gray, .w3-hover-border-dark-gray:hover {
    border-color: #616161 !important;
}

.w3-border-pale-red, .w3-hover-border-pale-red:hover {
    border-color: #ffe7e7 !important;
}

.w3-border-pale-green, .w3-hover-border-pale-green:hover {
    border-color: #e7ffe7 !important;
}

.w3-border-pale-yellow, .w3-hover-border-pale-yellow:hover {
    border-color: #ffffcc !important;
}

.w3-border-pale-blue, .w3-hover-border-pale-blue:hover {
    border-color: #e7ffff !important;
}


/*text sizes*/
.w3-tiny {
    font-size: 10px !important;
}

.w3-xsmall {
    font-size: 12px !important;
}
.w3-small {
    font-size: 13px !important;
}

.w3-medium {
    font-size: 15px !important;
}

.w3-large {
    font-size: 18px !important;
}

.w3-xlarge {
    font-size: 24px !important;
}

.w3-xxlarge {
    font-size: 36px !important;
}

.w3-xxxlarge {
    font-size: 48px !important;
}

.w3-jumbo {
    font-size: 64px !important;
}

.w3-left-align {
    text-align: left;
}

.w3-right-align {
    text-align: right;
}

.w3-justify {
    text-align: justify;
}

.w3-center {
    text-align: center;
}

.w3-container {
    content: "";
    display: table;
    clear: both;
}

.w3-grey, .w3-hover-grey:hover, .w3-gray, .w3-hover-gray:hover {
    color: #000;
    background-color: #9e9e9e;
}

.w3-light-grey, .w3-hover-light-grey:hover, .w3-light-gray, .w3-hover-light-gray:hover {
    color: #000;
    background-color: #f1f1f1;
}

.w3-btn, .w3-button {
    border: none;
    display: inline-block;
    outline: 0;
    padding: 8px 16px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background-color: inherit;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
}

    .w3-btn:hover {
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    }

    .w3-disabled, .w3-btn:disabled, .w3-button:disabled {
        cursor: not-allowed;
        opacity: 0.3;
    }

/* w3-Animations */
.w3-card, .w3-card-2 {
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}

.w3-card-4, .w3-hover-shadow:hover {
    box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19);
}

.w3-spin {
    animation: w3-spin 2s infinite linear;
}

@keyframes w3-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(359deg);
    }
}

.w3-animate-fading {
    animation: fading 10s infinite;
}

@keyframes fading {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.w3-animate-opacity {
    animation: opac 0.8s;
}

@keyframes opac {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.w3-animate-top {
    position: relative;
    animation: animatetop 0.4s;
}

@keyframes animatetop {
    from {
        top: -300px;
        opacity: 0;
    }

    to {
        top: 0;
        opacity: 1;
    }
}

.w3-animate-left {
    position: relative;
    animation: animateleft 0.4s;
}

@keyframes animateleft {
    from {
        left: -300px;
        opacity: 0;
    }

    to {
        left: 0;
        opacity: 1;
    }
}

.w3-animate-right {
    position: relative;
    animation: animateright 0.4s;
}

@keyframes animateright {
    from {
        right: -300px;
        opacity: 0;
    }

    to {
        right: 0;
        opacity: 1;
    }
}

.w3-animate-bottom {
    position: relative;
    animation: animatebottom 0.4s;
}

@keyframes animatebottom {
    from {
        bottom: -300px;
        opacity: 0;
    }

    to {
        bottom: 0;
        opacity: 1;
    }
}

.w3-animate-zoom {
    animation: animatezoom 0.6s;
}

@keyframes animatezoom {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

.w3-animate-input {
    transition: width 0.4s ease-in-out;
}

    .w3-animate-input:focus {
        width: 100% !important;
    }


/*Entras*/
.w3-select {
    padding: 9px 0;
    width: 100%;
    border: none;
    border-bottom: 1px solid #ccc;
}

.w3-dropdown-click, .w3-dropdown-hover {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

    .w3-dropdown-hover:hover .w3-dropdown-content {
        display: block;
        z-index: 1;
    }

    .w3-dropdown-hover:first-child, .w3-dropdown-click:hover {
        background-color: #ccc;
        color: #000;
    }

        .w3-dropdown-hover:hover > .w3-button:first-child, .w3-dropdown-click:hover > .w3-button:first-child {
            background-color: #ccc;
            color: #000;
        }

.w3-dropdown-content {
    cursor: auto;
    color: #000;
    background-color: #fff;
    display: none;
    position: absolute;
    min-width: 160px;
    margin: 0;
    padding: 0;
}

.w3-check, .w3-radio {
    width: 24px;
    height: 24px;
    position: relative;
    top: 6px;
}

.w3-modal {
    z-index: 3;
    display: none;
    padding-top: 100px;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}

.w3-modal-content {
    margin: auto;
    background-color: #fff;
    position: relative;
    padding: 0;
    outline: 0;
    width: 600px;
}

/* Model Boxes */
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;
}

.modal-content_2 {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 50%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;
}
/* Add Animation */
@-webkit-keyframes animatetop {
    from {
        top: -300px;
        opacity: 0;
    }

    to {
        top: 0;
        opacity: 1;
    }
}

@keyframes animatetop {
    from {
        top: -300px;
        opacity: 0;
    }

    to {
        top: 0;
        opacity: 1;
    }
}

/* The Close Button */
.modal-close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

    .modal-close:hover,
    .modal-close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }

.modal-header {
    padding: 2px 16px;
    background-color: #75a3a3;
    color: white;
    box-shadow: none;
}

.modal-body {
    padding: 2px 16px;
}

.modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}



.btn-round {
    border-radius: 20px;
    -webkit-border-radius: 20px;
}

.accordion-heading .accordion-toggle {
    display: block;
    cursor: pointer;
    border-top: 1px solid #F5F5F5;
    padding: 5px 0px;
    line-height: 28.75px;
    text-transform: uppercase;
    color: #1a1a1a;
    background-color: #ffffff;
    outline: none !important;
    text-decoration: none;
}

.wrapper {
    display: inline-block;
    margin-top: 60px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    padding-top: 0px;
    width: 100%;
}

/*Theme Backgrounds*/
.bg-theme {
    background-color: #68dff0;
}

.bg-theme02 {
    background-color: #ac92ec;
}

.bg-theme03 {
    background-color: #48cfad;
}

.bg-theme04 {
    background-color: #ed5565;
}

.bg-theme-main {
    background-color: #6e9f9d;
}


/*Theme Buttons*/
.btn-theme-main {
    color: #000;
    background-color: white;
    border-color: #334d4d;
}

    .btn-theme-main:hover,
    .btn-theme-main:focus,
    .btn-theme-main:active,
    .btn-theme-main.active,
    .open > .dropdown-toggle.btn-theme-main {
        color: #fff;
        background-color: #476b6b;
        border-color: #334d4d;
    }

.btn-theme03 {
    color: #000;
    background-color: #c4eee3;
    border-color: #37bc9b;
}

    .btn-theme03:hover,
    .btn-theme03:focus,
    .btn-theme03:active,
    .btn-theme03.active,
    .open .dropdown-toggle.btn-theme03 {
        color: #fff;
        background-color: #37bc9b;
        border-color: #37bc9b;
    }

.btn-theme-primary {
    color: #000;
    background-color: white;
    border-color: #428bca;
}

    .btn-theme-primary:hover,
    .btn-theme-primary:focus,
    .btn-theme-primary:active,
    .btn-theme-primary.active,
    .open .dropdown-toggle.btn-theme-primary {
        color: #fff;
        background-color: #428bca;
        border-color: #428bca;
    }

.btn-theme-success {
    color: #000;
    background-color: white;
    border-color: #55aa57;
}

    .btn-theme-success:hover,
    .btn-theme-success:focus,
    .btn-theme-success:active,
    .btn-theme-success.active,
    .open .dropdown-toggle.btn-theme-success {
        color: #fff;
        background-color: #55aa57;
        border-color: #55aa57;
    }

.btn-theme-info {
    color: #000;
    background-color: white;
    border-color: #7db3cf;
}

    .btn-theme-info:hover,
    .btn-theme-info:focus,
    .btn-theme-info:active,
    .btn-theme-info.active,
    .open .dropdown-toggle.btn-theme-info {
        color: #fff;
        background-color: #7db3cf;
        border-color: #7db3cf;
    }

.btn-theme-danger {
    color: #000;
    background-color: white;
    border: 1px solid #da4453;
    border-color: #da4453;
}

    .btn-theme-danger:hover,
    .btn-theme-danger:focus,
    .btn-theme-danger:active,
    .btn-theme-danger.active,
    .open .dropdown-toggle.btn-theme-danger {
        color: #fff;
        background-color: #da4453;
        border-color: #da4453;
    }

.btn-clear-g {
    color: Maroon;
    background: transparent;
    border-color: Maroon;
}

    .btn-clear-g:hover {
        background: #FCFDB8;
    }

/*notification*/
#top_menu .nav > li, ul.top-menu > li {
    float: left;
}

.notify-row {
    float: left;
    margin-top: 15px;
    margin-left: 92px;
}

    .notify-row .notification span.label {
        display: inline-block;
        height: 18px;
        width: 20px;
        padding: 5px;
    }

    .notify-row .badge {
        position: absolute;
        right: -10px;
        top: -10px;
        z-index: 100;
    }

.notify-arrow {
    border-style: solid;
    border-width: 0 9px 9px;
    height: 0;
    margin-top: 0;
    opacity: 0;
    position: absolute;
    left: 7px;
    top: -18px;
    transition: all 0.25s ease 0s;
    width: 0;
    z-index: 10;
    margin-top: 10px;
    opacity: 1;
}

.notify-arrow-yellow {
    border-color: transparent transparent #FCB322;
    border-bottom-color: #FCB322 !important;
    border-top-color: #FCB322 !important;
}

.notify-arrow-green {
    border-color: transparent transparent #68dff0;
    border-bottom-color: #68dff0 !important;
    border-top-color: #68dff0 !important;
}


/* *************************************************************************************
PANELS CONFIGURATIONS
*************************************************************************************** */

/*Panel Size*/

/*.pn {
	height: 250px;
	box-shadow: 0 2px 1px rgba(0, 0, 0, 0.2);
}

.pn:hover {
	box-shadow: 2px 3px 2px rgba(0, 0, 0, 0.3);
	
}*/

/*Grey Panel*/

.grey-panel {
    text-align: center;
    background: #dfdfe1;
}

    .grey-panel .grey-header {
        background: #ccd1d9;
        padding: 3px;
        margin-bottom: 15px;
    }

    .grey-panel h5 {
        font-weight: 200;
        margin-top: 10px;
    }

    .grey-panel p {
        margin-left: 5px;
    }

/* Specific Conf for Donut Charts*/
.donut-chart p {
    margin-top: 5px;
    font-weight: 700;
    margin-left: 15px;
}

.donut-chart h2 {
    font-weight: 900;
    color: #FF6B6B;
    font-size: 38px;
}

/* Dark Blue*/
.darkblue-panel {
    text-align: center;
    background: #F5F6CE;
}

    .darkblue-panel .darkblue-header {
        background: #BCBD93;
        color: #fff;
        padding: 3px;
        margin-bottom: 15px;
    }

    .darkblue-panel h1 {
        color: #f2f2f2;
    }

    .darkblue-panel h5 {
        font-weight: 200;
        margin-top: 10px;
        color: Maroon;
    }

    .darkblue-panel p {
        margin-top: 10px;
        font-weight: normal;
        color: Maroon;
        padding: 10px 30px 10px 10px;
    }

    .darkblue-panel footer {
        color: white;
    }

        .darkblue-panel footer h5 {
            margin-left: 10px;
            margin-right: 10px;
            font-weight: 700;
        }

/*Green Panel*/
.green-panel {
    text-align: center;
    background: #68dff0;
}

    .green-panel .green-header {
        background: #43b1a9;
        padding: 3px;
        margin-bottom: 15px;
    }

    .green-panel h5 {
        color: white;
        font-weight: 200;
        margin-top: 10px;
    }

    .green-panel h3 {
        color: white;
        font-weight: 100;
    }

    .green-panel p {
        color: white;
    }

/*White Panel */
.white-panel {
    text-align: center;
    background: #ffffff;
    color: #ccd1d9;
}

    .white-panel p {
        margin-top: 5px;
        font-weight: 700;
        margin-left: 15px;
    }

    .white-panel .white-header {
        background: #f4f4f4;
        padding: 3px;
        margin-bottom: 15px;
        color: #c6c6c6;
    }

    .white-panel .small {
        font-size: 10px;
        color: #ccd1d9;
    }

    .white-panel i {
        color: #68dff0;
        padding-right: 4px;
        font-size: 14px;
    }

.btn-facebook {
    color: #fff;
    background-color: #5193ea;
    border-color: #2775e2;
}

    .btn-facebook:hover,
    .btn-facebook:focus,
    .btn-facebook:active,
    .btn-facebook.active,
    .open .dropdown-toggle.btn-facebook {
        color: #fff;
        background-color: #2775e2;
        border-color: #2775e2;
    }

.btn-twitter {
    color: #fff;
    background-color: #44ccfe;
    border-color: #2bb4e8;
}

    .btn-twitter:hover,
    .btn-twitter:focus,
    .btn-twitter:active,
    .btn-twitter.active,
    .open .dropdown-toggle.btn-twitter {
        color: #fff;
        background-color: #2bb4e8;
        border-color: #2bb4e8;
    }


/* Class = btnactive when using with links */
a.btnactive {
    padding-top: 5px;
    padding-bottom: 5px;
    color: #8a2900;
}

a.btnactive {
    color: #fff;
    background-color: rgba(0,0,0,0);
    max-width: 100%;
    border: 1px solid #fff;
    border-radius: 5px;
}

    a.btnactive:hover {
        color: #fff !important;
        background-color: rgba(0,0,0,1) !important;
    }

    a.btnactive:link {
        text-decoration: none;
        color: #8A2900;
        padding-right: 25px;
        padding-left: 25px;
    }

    a.btnactive:hover {
        color: #fff;
    }


/* class= btnactive when using with button */
.btnactive {
    max-width: 400px;
    margin: 0px;
    padding: 5px 10px;
    cursor: pointer;
    font-weight: 500;
    background-color: #a3c2c2;
    border: 1px solid #669999;
    color: #1f2e2e !important;
    transition: all 0s ease-in;
}

    .btnactive:hover,
    .btnactive:focus,
    .btnactive:active,
    .btnactive.active,
    .open > .dropdown-toggle.btnactive {
        color: #fff;
        background-color: #669999;
        border: 1px solid black;
    }

    .btnactive:hover {
        border: 1px solid black;
        background-color: #669999;
    }

.btninactive {
    max-width: 400px;
    margin: 0px;
    padding: 5px 10px;
    cursor: pointer;
    font-weight: 500;
    background-color: #ffb3b3;
    border: 1px solid #ff6666;
    transition: all 0s ease-in;
}

    .btninactive:hover {
        border: 1px solid black;
        background-color: #ff6666;
    }

.btnactive-peach-orange {
    max-width: 400px;
    margin: 0px;
    padding: 5px 10px;
    cursor: pointer;
    font-weight: 500;
    background-color: #ffe6cc;
    border: 1px solid #ff9933;
    transition: all 0s ease-in;
}

    .btnactive-peach-orange:hover {
        border: 1px solid black;
        background-color: #ffb366;
    }

.btnactive-grey {
    max-width: 400px;
    margin: 0px;
    padding: 5px 10px;
    cursor: pointer;
    font-weight: 500;
    background-color: #d9d9d9;
    border: 1px solid #a6a6a6;
    transition: all 0s ease-in;
}

    .btnactive-grey:hover {
        border: 1px solid black;
        background-color: #a6a6a6;
    }


.btnactive-maroon {
    max-width: 400px;
    margin: 0px;
    padding: 5px 10px;
    cursor: pointer;
    font-weight: 500;
    background-color: rgba(138, 0, 0,0.9); /*#8a2900;*/
    border: 1px solid #000;
    color: #fff !important;
    transition: all 0s ease-in;
}

    .btnactive-maroon:hover,
    .btnactive-maroon:focus,
    .btnactive-maroon:active,
    .btnactive-maroon.active,
    .open > .dropdown-toggle.btnactive-maroon {
        color: #8a2900 !important;
        background-color: #f5dba5;
        border: 1px solid #8a2900;
    }

    .btnactive-maroon:hover {
        border: 1px solid #8a2900;
        background-color: #f5dba5;
        color: #8a2900 !important;
    }

.btnactive-marine {
    max-width: 400px;
    margin: 0px 0px;
    padding: 5px;
    cursor: pointer;
    background: linear-gradient(to bottom, #28b1bd, #1b767e);
    border: 1px solid #124f54;
    color: #fff !important;
    transition: all 0s ease-in;
}

    .btnactive-marine:hover {
        border: 1px solid #81dce4;
        background: linear-gradient(to bottom, #1b767e, #28b1bd);
        color: #0d3b3f !important;
    }

/* Custom panels */
div.panelbox, div.boxalert {
    padding: 0px 2px 15px;
    margin-bottom: 16px;
    margin-right: 8px;
    border: 1px solid #8a2900;
    background-color: #faedd3; /*#ffe6cc*/
    border-top: 10px solid #8a2900;
    border-radius: 20px 20px;
}

.panelbox > .panelbox-heading {
    color: #8a2900;
    font-size: 18px;
    text-align: center;
    background-color: #f2d08c;
    padding: 10px;
    margin-top: 1px;
    border-radius: 10px 10px;
    border-color: #ddd;
}

div.mainThemePanelBox, div.mainThemeBoxAlert {
    padding: 0px 2px 15px;
    margin-bottom: 16px;
    margin-right: 8px;
    border: 1px solid #334d4d;
    background-color: #f0f5f5;
    border-top: 10px solid #334d4d;
    border-radius: 15px 15px;
}

.mainThemePanelBox > .mainThemePanelBox-heading {
    color: #334d4d;
    font-size: 18px;
    text-align: center;
    background-color: #c2d6d6;
    padding: 10px;
    margin-top: 1px;
    border-radius: 10px 10px;
    border-color: #ddd;
}

div.panel-mainTheme {
    padding: 0px 2px;
    margin-bottom: 16px;
    margin-right: 8px;
    border: 1px solid #334d4d;
    background-color: white;
    border-top: 10px solid #334d4d;
    border-radius: 15px 15px;
}

.panel-mainTheme > .panel-mainTheme-heading {
    color: #334d4d;
    font-size: 18px;
    text-align: center;
    background-color: #c2d6d6;
    padding: 10px;
    margin: 5px 0px;
    margin-top: 1px;
    border-radius: 10px 10px;
    border-color: #ddd;
}

.smallBox {
    display: inline-block;
    border: 1px solid #c0a169;
    border-radius: 10px;
    margin: 5px;
    padding: 10px;
    width: 100%;
    overflow: hidden;
    transition: all 0s ease-in;
}

    .smallBox:hover {
        background: #faedd3;
        border: 1px solid #8a2900;
        -moz-box-shadow: #ccc 0 2px 10px;
        -webkit-box-shadow: #ccc 0 2px 10px;
        box-shadow: #ccc 0 2px 10px;
    }

.smallBoxHeader {
    position: relative;
    text-overflow: ellipsis;
}


.mainThemeSmallBox {
    display: inline-block;
    border: 1px solid #334d4d;
    border-radius: 10px;
    margin: 5px;
    padding: 5px;
    width: 100%;
    overflow: hidden;
    transition: all 0s ease-in;
}

    .mainThemeSmallBox:hover {
        background: #e1eaea;
        border: 1px solid #334d4d;
        -moz-box-shadow: #ccc 0 2px 10px;
        -webkit-box-shadow: #ccc 0 2px 10px;
        box-shadow: #ccc 0 2px 10px;
    }

.mainThemeSmallBoxHeader {
    position: relative;
    text-overflow: ellipsis;
}

.mainThemeBorderBox {
    display: inline-block;
    border: 1px solid #334d4d;
    border-radius: 10px;
    margin: 2px 0px;
    padding: 5px;
    width: 100%;
    overflow: hidden;
}

.mainTheme_TopBorder_Box {
    display: inline-block;
    border: 1px solid #ccc;
    border-top: 15px solid #334d4d;
    border-top-right-radius: 9px;
    border-top-left-radius: 9px;
    margin: 2px 0px;
    padding: 10px;
    width: 100%;
    overflow: hidden;
}

.imgBox {
    display: inline-block;
    border: 1px solid #c0a169;
    border-radius: 10px;
    margin: 5px;
    padding: 5px;
    overflow: hidden;
    transition: all 0s ease-in;
}

    .imgBox:hover {
        background: #faedd3;
        border: 1px solid #8a2900;
        -moz-box-shadow: #ccc 0 2px 10px;
        -webkit-box-shadow: #ccc 0 2px 10px;
        box-shadow: #ccc 0 2px 10px;
    }

/*Custom checkboxes */
/* Switch 1 Specific Styles Start */
input[type="checkbox"].checkbox_switch_1 {
    font-size: 30px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 2.0em;
    height: 1.0em;
    background: #ddd;
    border-radius: 3em;
    position: relative;
    cursor: pointer;
    outline: none;
}

    input[type="checkbox"].checkbox_switch_1:checked {
        background: #94b8b8; /*neon blue = #0ebeff  maintheme = #94b8b8*/
    }

    input[type="checkbox"].checkbox_switch_1:after {
        position: absolute;
        content: "";
        width: 1.0em;
        height: 1.0em;
        border-radius: 50%;
        background: #fff;
        -webkit-box-shadow: 0 0 .25em rgba(0,0,0,.3);
        box-shadow: 0 0 .25em rgba(0,0,0,.3);
        -webkit-transform: scale(.7);
        transform: scale(.7);
        left: 0;
    }

    input[type="checkbox"].checkbox_switch_1:checked:after {
        left: calc(100% - 1.0em);
    }

/*Checkboxes styles*/
input[type="checkbox"].hide_default_chk {
    display: none;
}

/**main theme*/
input[type="checkbox"].tick_checkbox + label {
    display: inline-block;
    position: relative;
    padding-left: 25px;
    margin: 5px;
    font: 14px/20px 'Open Sans', Arial, sans-serif;
    color: #1f2e2e;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

    input[type="checkbox"].tick_checkbox + label:last-child {
        margin-bottom: 0;
    }

    input[type="checkbox"].tick_checkbox + label:before {
        content: '';
        display: block;
        width: 20px;
        height: 20px;
        border: 1px solid #1f2e2e;
        position: absolute;
        left: 0;
        top: 0;
        opacity: .6;
        -webkit-transition: all .12s, border-color .08s;
        transition: all .12s, border-color .08s;
    }

input[type="checkbox"].tick_checkbox:checked + label:before {
    width: 10px;
    top: -5px;
    left: 5px;
    border-radius: 0;
    opacity: 1;
    border-top-color: transparent;
    border-left-color: transparent;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

/*blue Theme*/
input[type="checkbox"].tick_checkbox_blue + label {
    display: inline-block;
    position: relative;
    padding-left: 25px;
    margin: 5px;
    font: 14px/20px 'Open Sans', Arial, sans-serif;
    color: #0ebeff;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

    input[type="checkbox"].tick_checkbox_blue + label:last-child {
        margin-bottom: 0;
    }

    input[type="checkbox"].tick_checkbox_blue + label:before {
        content: '';
        display: block;
        width: 20px;
        height: 20px;
        border: 1px solid #0ebeff;
        position: absolute;
        left: 0;
        top: 0;
        opacity: .6;
        -webkit-transition: all .12s, border-color .08s;
        transition: all .12s, border-color .08s;
    }

input[type="checkbox"].tick_checkbox_blue:checked + label:before {
    width: 10px;
    top: -5px;
    left: 5px;
    border-radius: 0;
    opacity: 1;
    border-top-color: transparent;
    border-left-color: transparent;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

/*Red Theme*/
input[type="checkbox"].tick_checkbox_red + label {
    display: inline-block;
    position: relative;
    padding-left: 25px;
    margin: 5px;
    font: 14px/20px 'Open Sans', Arial, sans-serif;
    color: firebrick;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

    input[type="checkbox"].tick_checkbox_red + label:last-child {
        margin-bottom: 0;
    }

    input[type="checkbox"].tick_checkbox_red + label:before {
        content: '';
        display: block;
        width: 20px;
        height: 20px;
        border: 1px solid firebrick;
        position: absolute;
        left: 0;
        top: 0;
        opacity: .6;
        -webkit-transition: all .12s, border-color .08s;
        transition: all .12s, border-color .08s;
    }

input[type="checkbox"].tick_checkbox_red:checked + label:before {
    width: 10px;
    top: -5px;
    left: 5px;
    border-radius: 0;
    opacity: 1;
    border-top-color: transparent;
    border-left-color: transparent;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

/*Custom Radio Button */
@keyframes click-wave {
    0% {
        height: 20px;
        width: 20px;
        opacity: 0.35;
        position: relative;
    }

    100% {
        height: 200px;
        width: 200px;
        margin-left: -80px;
        margin-top: -80px;
        opacity: 0;
    }
}

.option-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    top: 6.33333px;
    right: 0;
    bottom: 0;
    left: 0;
    height: 20px;
    width: 20px;
    transition: all 0.15s ease-out 0s;
    background: #cbd1d8;
    border: none;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    margin-right: 0.5rem;
    outline: none;
    position: relative;
    z-index: 1000;
}

    .option-input:hover {
        background: #9faab7;
    }

    .option-input:checked {
        background: #40e0d0;
    }

        .option-input:checked::before {
            height: 20px;
            width: 20px;
            position: absolute;
            content: '✔';
            display: inline-block;
            font-size: 18px;
            text-align: center;
            line-height: 20px;
            border: none;
            outline: none;
        }

        .option-input:checked::after {
            /*-webkit-animation: click-wave 0.65s;
  -moz-animation: click-wave 0.65s;
  animation: click-wave 0.65s;*/
            background: #40e0d0;
            content: '';
            display: block;
            position: relative;
            z-index: 100;
        }

    .option-input.radio {
        border-radius: 50%;
    }

        .option-input.radio::after {
            border-radius: 50%;
        }


/* -- NAVBAR HEADER OVERRIDING --- */
#nav-expander span {
    padding: 1px;
}
/* MOBILE MENU HANDLE COLOR */
#nav-expander {
    border: 1px solid #334d4d;
}

    #nav-expander:hover {
        background-color: #b3cccc;
    }

    #nav-expander .icon-bar {
        background-color: #334d4d;
    }

.navbar-toggle#nav-expander {
    background-color: #b3cccc;
}

    .navbar-toggle#nav-expander:hover {
        background-color: #b3cccc;
    }


/* -- NAVBAR HEADER OVERRIDING --- */
#nav-expander1 span {
    padding: 1px;
}
/* MOBILE MENU HANDLE COLOR */
#nav-expander1 {
    border: 1px solid #2d6a9f;
}

    #nav-expander1:hover {
        background-color: #9cc2e3;
    }

    #nav-expander1 .icon-bar {
        background-color: #2d6a9f;
    }

.navbar-toggle#nav-expander1 {
    background-color: #9cc2e3;
}

    .navbar-toggle#nav-expander1:hover {
        background-color: #9cc2e3;
    }

/* GRADIENT COLOR */
.grad_bluegreen_tobottom {
    background: linear-gradient(to bottom, #1f8a93, #93b8b8);
}

.grad_bluegreen_toright {
    background: linear-gradient(to right, #1f8a93, #93b8b8);
}

.grad_login_toright {
    background: linear-gradient(to bottom, #1f8a93, #93b8b8);
}

.grad_info {
    background: linear-gradient(60deg, #e9f9fb, #beedf3);
}

.grad_primary {
    background: linear-gradient(60deg, #eeeedd, #dcdcbc);
}

.grad_success {
    background: linear-gradient(60deg, #edf7ee, #cbe7cd);
}

.grad_danger {
    background: linear-gradient(60deg, #fde8e8, #f9b9b9);
}

.grad_warning {
    background: linear-gradient(60deg, #fff5e6, #ffebcc);
}

.grad_rose {
    background: linear-gradient(60deg, #fce8ef, #f6bbd0);
}


.trim-info {
    max-width: 100px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 15px;
    position: relative;
}
 
.ellipseContent {
    white-space: nowrap;
    width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .ellipseContent:hover {
        overflow: visible;
        white-space: normal;
    }

span.glyphicon {
    margin-right: 3px;
}

i.fa {
    margin-right: 3px;
}

.icon-members {
    background-image: url(../img/icons/check-status.png);
    background-repeat: no-repeat;
    background-position: 10px 7px;
}

.icon-status {
    background-image: url(../img/icons/List-Members.png);
    background-repeat: no-repeat;
    background-position: 10px 7px;
}


/*Accordion - To show/hide content on click as a dropdown */
.accordion {
    background-color: #b3cccc;
    color: #444;
    cursor: pointer;
    padding: 10px;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    margin-top: 5px;
}

    .accordion_active, .accordion:hover {
        background-color: #94b8b8;
    }

    .accordion:after {
        content: '\002B';
        color: #777;
        font-weight: bold;
        float: right;
        margin-left: 5px;
    }

.accordion_active:after {
    content: "\2212";
}

.accordion_panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    border: 1px solid #94b8b8;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}


.blueText {
    color: #00bfff;
}

.greenText {
    color: #339966;
}



/* animations */
.mz-spin {
    -webkit-animation: spin 2s infinite linear;
    -moz-animation: spin 2s infinite linear;
    animation: spin 2s infinite linear;
}

.mz-spin-limit {
    -webkit-animation: spin 1s 1 linear;
    -moz-animation: spin 1s 1 linear;
    animation: spin 1s 1 linear;
}

.mz-spin-limit-2 {
    -webkit-animation: spin 2s 1 linear;
    -moz-animation: spin 2s 1 linear;
    animation: spin 2s 1 linear;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

@-moz-keyframes spin {
    0% {
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

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

    100% {
        transform: rotate(359deg);
    }
}

.mz-bell {
    -webkit-animation: bell 2s 5 ease 2s;
    -webkit-transform-origin: 50% 0;
    -moz-animation: bell 2s 5 ease 2s;
    -moz-transform-origin: 50% 0;
    animation: bell 2s 5 ease 2s;
    transform-origin: 50% 0;
}

.mz-bell-once {
    -webkit-animation: bell 2s ease 2s;
    -webkit-transform-origin: 50% 0;
    -moz-animation: bell 2s ease 2s;
    -moz-transform-origin: 50% 0;
    animation: bell 2s ease 2s;
    transform-origin: 50% 0;
}

@-webkit-keyframes bell {
    0% {
        -webkit-transform: rotate(-15deg);
        transform: rotate(-15deg);
    }

    2% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
    }

    4% {
        -webkit-transform: rotate(-18deg);
        transform: rotate(-18deg);
    }

    6% {
        -webkit-transform: rotate(18deg);
        transform: rotate(18deg);
    }

    8% {
        -webkit-transform: rotate(-22deg);
        transform: rotate(-22deg);
    }

    10% {
        -webkit-transform: rotate(22deg);
        transform: rotate(22deg);
    }

    12% {
        -webkit-transform: rotate(-18deg);
        transform: rotate(-18deg);
    }

    14% {
        -webkit-transform: rotate(18deg);
        transform: rotate(18deg);
    }

    16% {
        -webkit-transform: rotate(-12deg);
        transform: rotate(-12deg);
    }

    18% {
        -webkit-transform: rotate(12deg);
        transform: rotate(12deg);
    }

    20% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

@-moz-keyframes bell {
    0% {
        -moz-transform: rotate(-15deg);
        transform: rotate(-15deg);
    }

    2% {
        -moz-transform: rotate(15deg);
        transform: rotate(15deg);
    }

    4% {
        -moz-transform: rotate(-18deg);
        transform: rotate(-18deg);
    }

    6% {
        -moz-transform: rotate(18deg);
        transform: rotate(18deg);
    }

    8% {
        -moz-transform: rotate(-22deg);
        transform: rotate(-22deg);
    }

    10% {
        -moz-transform: rotate(22deg);
        transform: rotate(22deg);
    }

    12% {
        -moz-transform: rotate(-18deg);
        transform: rotate(-18deg);
    }

    14% {
        -moz-transform: rotate(18deg);
        transform: rotate(18deg);
    }

    16% {
        -moz-transform: rotate(-12deg);
        transform: rotate(-12deg);
    }

    18% {
        -moz-transform: rotate(12deg);
        transform: rotate(12deg);
    }

    20% {
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

@keyframes bell {
    0% {
        transform: rotate(-15deg);
    }

    2% {
        transform: rotate(15deg);
    }

    4% {
        transform: rotate(-18deg);
    }

    6% {
        transform: rotate(18deg);
    }

    8% {
        transform: rotate(-22deg);
    }

    10% {
        transform: rotate(22deg);
    }

    12% {
        transform: rotate(-18deg);
    }

    14% {
        transform: rotate(18deg);
    }

    16% {
        transform: rotate(-12deg);
    }

    18% {
        transform: rotate(12deg);
    }

    20% {
        transform: rotate(0deg);
    }
}

.mz-fadein {
    -webkit-animation: fadein 1s;
    -moz-animation: fadein 1s;
    animation: fadein 1s;
}

.mz-fadein-slow {
    -webkit-animation: fadein 2s;
    -moz-animation: fadein 2s;
    animation: fadein 2s;
}

@-webkit-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-moz-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.mz-fadeout {
    -webkit-animation: fadeout 1s;
    -moz-animation: fadeout 1s;
    animation: fadeout 1s;
}

@-webkit-keyframes fadeout {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@-moz-keyframes fadeout {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fadeout {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.mz-blinker {
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: blinker;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    animation-name: blinker;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.mz-blinker-2 {
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    -moz-animation-name: blinker;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: 1;
    animation-name: blinker;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
}

.mz-blinker-slow {
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 3s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: blinker;
    -moz-animation-duration: 3s;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-iteration-count: infinite;
    animation-name: blinker;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.mz-blinker-slow-3 {
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 3s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 3;
    -moz-animation-name: blinker;
    -moz-animation-duration: 3s;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-iteration-count: 3;
    animation-name: blinker;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 3;
}

@-webkit-keyframes blinker {
    0% {
        opacity: 1.0;
    }

    50% {
        opacity: 0.0;
    }

    100% {
        opacity: 1.0;
    }
}

@-moz-keyframes blinker {
    0% {
        opacity: 1.0;
    }

    50% {
        opacity: 0.0;
    }

    100% {
        opacity: 1.0;
    }
}

@keyframes blinker {
    0% {
        opacity: 1.0;
    }

    50% {
        opacity: 0.0;
    }

    100% {
        opacity: 1.0;
    }
}