/* vietnamese */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 300;
    src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url(../../../../sourcesanspro/v9/toadOcfmlt9b38dHJxOBGCD5K6T8I4oZ1X3Xvlj_UeP3rGVtsTkPsbDajuO5ueQw.woff2) format('woff2');
    unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 300;
    src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url(../../../../sourcesanspro/v9/toadOcfmlt9b38dHJxOBGDOFnJNygIkrHciC8BWzbCz3rGVtsTkPsbDajuO5ueQw.woff2) format('woff2');
    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 300;
    src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url(../../../../sourcesanspro/v9/toadOcfmlt9b38dHJxOBGCP2LEk6lMzYsRqr3dHFImA.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
/* vietnamese */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 400;
    src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(../../../../sourcesanspro/v9/ODelI1aHBYDBqgeIAH2zlCxe5Tewm2_XWfbGchcXw4g.woff2) format('woff2');
    unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 400;
    src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(../../../../sourcesanspro/v9/ODelI1aHBYDBqgeIAH2zlIa1YDtoarzwSXxTHggEXMw.woff2) format('woff2');
    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 400;
    src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(../../../../sourcesanspro/v9/ODelI1aHBYDBqgeIAH2zlJbPFduIYtoLzwST68uhz_Y.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
/* vietnamese */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 600;
    src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'), url(../../../../sourcesanspro/v9/toadOcfmlt9b38dHJxOBGMZXFz2iDKd7GJNSaxRYiSj3rGVtsTkPsbDajuO5ueQw.woff2) format('woff2');
    unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 600;
    src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'), url(../../../../sourcesanspro/v9/toadOcfmlt9b38dHJxOBGKyGJhAh-RE0BxGcd_izyev3rGVtsTkPsbDajuO5ueQw.woff2) format('woff2');
    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 600;
    src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'), url(../../../../sourcesanspro/v9/toadOcfmlt9b38dHJxOBGMzFoXZ-Kj537nB_-9jJhlA.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
/* vietnamese */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: italic;
    font-weight: 300;
    src: local('Source Sans Pro Light Italic'), local('SourceSansPro-LightIt'), url(../../../../sourcesanspro/v9/fpTVHK8qsXbIeTHTrnQH6B_gmbEOuTnFVLOcZ03JXzUU24FapfJwyacJ6xNu5rm9.woff2) format('woff2');
    unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: italic;
    font-weight: 300;
    src: local('Source Sans Pro Light Italic'), local('SourceSansPro-LightIt'), url(../../../../sourcesanspro/v9/fpTVHK8qsXbIeTHTrnQH6I592LlB3Spcld5cOzjZxycU24FapfJwyacJ6xNu5rm9.woff2) format('woff2');
    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: italic;
    font-weight: 300;
    src: local('Source Sans Pro Light Italic'), local('SourceSansPro-LightIt'), url(../../../../sourcesanspro/v9/fpTVHK8qsXbIeTHTrnQH6KWfmYpLTwMIZXVESxMi2BP3rGVtsTkPsbDajuO5ueQw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
/* vietnamese */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: italic;
    font-weight: 400;
    src: local('Source Sans Pro Italic'), local('SourceSansPro-It'), url(../../../../sourcesanspro/v9/M2Jd71oPJhLKp0zdtTvoM-hx0s8EczIZ6Z1k6LZjTLo.woff2) format('woff2');
    unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: italic;
    font-weight: 400;
    src: local('Source Sans Pro Italic'), local('SourceSansPro-It'), url(../../../../sourcesanspro/v9/M2Jd71oPJhLKp0zdtTvoMyVjDpjOAxwEYJFCET2nD1s.woff2) format('woff2');
    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: italic;
    font-weight: 400;
    src: local('Source Sans Pro Italic'), local('SourceSansPro-It'), url(../../../../sourcesanspro/v9/M2Jd71oPJhLKp0zdtTvoM2Sl3jWJ3D9poyJPMfASioc.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
/* vietnamese */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: italic;
    font-weight: 600;
    src: local('Source Sans Pro Semibold Italic'), local('SourceSansPro-SemiboldIt'), url(../../../../sourcesanspro/v9/fpTVHK8qsXbIeTHTrnQH6O0_5fr73lDnMnLTNvHFLLgU24FapfJwyacJ6xNu5rm9.woff2) format('woff2');
    unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: italic;
    font-weight: 600;
    src: local('Source Sans Pro Semibold Italic'), local('SourceSansPro-SemiboldIt'), url(../../../../sourcesanspro/v9/fpTVHK8qsXbIeTHTrnQH6FJb469ExK4t7Ej8F0pF-7kU24FapfJwyacJ6xNu5rm9.woff2) format('woff2');
    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: italic;
    font-weight: 600;
    src: local('Source Sans Pro Semibold Italic'), local('SourceSansPro-SemiboldIt'), url(../../../../sourcesanspro/v9/fpTVHK8qsXbIeTHTrnQH6FuRfpT8-4D6FEAtfkspckX3rGVtsTkPsbDajuO5ueQw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

/* latin-ext */
@font-face {
    font-family: 'Kaushan Script';
    font-style: normal;
    font-weight: 400;
    src: local('Kaushan Script'), local('KaushanScript-Regular'), url(../../../../kaushanscript/v5/qx1LSqts-NtiKcLw4N03IJsabQn3CiWJQhcyqO-X-wo.woff2) format('woff2');
    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Kaushan Script';
    font-style: normal;
    font-weight: 400;
    src: local('Kaushan Script'), local('KaushanScript-Regular'), url(../../../../kaushanscript/v5/qx1LSqts-NtiKcLw4N03IJsM3FTMmj2kTPH3yX99Yaw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

.icon-huge{

}
.icon-normal{
    transform: scale(0.6);
    transform-origin: top;
    -webkit-transform: scale(0.6);
    -webkit-transform-origin: top;
}
.icon-panel{
    transform: scale(0.6);
    -webkit-transform: scale(0.6);
    margin-bottom: -10px;
    margin-top: -10px;
}
.icon-big{
    transform: scale(0.48);
    transform-origin: top;
    -webkit-transform: scale(0.48);
    -webkit-transform-origin: top;
    margin-bottom: -52%;
}

.icon-small{
    transform: scale(0.29);
    transform-origin: top;
    -webkit-transform: scale(0.29);
    -webkit-transform-origin: top;
    margin-bottom: -71%;
}

.sprite-nav-faf {
    background: url('../img/smart_web_sprite.png') no-repeat -34px -22px;
    width: 44px;
    height: 34px;
}
.sprite-nav-photostream {
    background: url('../img/smart_web_sprite.png') no-repeat -38px -328px;
    width: 44px;
    height: 43px;
}
.sprite-nav-suggestion {
    background: url('../img/smart_web_sprite.png') no-repeat -44px -663px;
    width: 44px;
    height: 40px;
}
.sprite-nav-messages {
    background: url('../img/smart_web_sprite.png') no-repeat -34px -265px;
    width: 44px;
    height: 40px;
}
.sprite-nav-favorites {
    background: url('../img/smart_web_sprite.png') no-repeat -34px -79px;
    width: 44px;
    height: 38px;
}
.sprite-nav-friends {
    background: url('../img/smart_web_sprite.png') no-repeat -32px -140px;
    width: 44px;
    height: 28px;
}
.sprite-nav-visitors {
    background: url('../img/smart_web_sprite.png') no-repeat -32px -544px;
    width: 44px;
    height: 30px;
}
.sprite-nav-notifications {
    background: url('../img/smart_web_sprite.png') no-repeat -38px -401px;
    width: 44px;
    height: 39px;
}
.sprite-nav-likes {
    background: url('../img/smart_web_sprite.png') no-repeat -34px -198px;
    width: 44px;
    height: 37px;
}
.sprite-nav-settings {
    background: url('../img/smart_web_sprite.png') no-repeat -34px -472px;
    width: 44px;
    height: 40px;
}
.sprite-nav-feedback {
    background: url('../img/smart_web_sprite.png') no-repeat -34px -598px;
    width: 44px;
    height: 40px;
}

.sprite-actionbar-menu {
    background: url('../img/smart_web_sprite.png') no-repeat -373px -419px;
    width: 36px;
    height: 24px;
}
.sprite-actionbar-back {
    background: url('../img/smart_web_sprite.png') no-repeat -365px -733px;
    width: 36px;
    height: 32px;
}
.sprite-actionbar-settings {
    background: url('../img/smart_web_sprite.png') no-repeat -176px -473px;
    width: 40px;
    height: 40px;
}
.sprite-actionbar-panel {
    background: url('../img/smart_web_sprite.png') no-repeat -106px -536px;
    width: 41px;
    height: 40px;
}
.sprite-actionbar-logo {
    background: url('../img/smart_web_sprite.png') no-repeat -111px -330px;
    width: 38px;
    height: 41px;
    position: absolute;
    left: 50%;
    margin-left: -13px;
    top: 30px;
}
.sprite-landing-logo {
    background: url('../img/smart_web_sprite.png') no-repeat -111px -330px;
    width: 38px;
    height: 41px;

}
.sprite-actionbar-friendrequests {
    background: url('../img/smart_web_sprite.png') no-repeat -109px -142px;
    width: 44px;
    height: 28px;
}
.sprite-actionbar-notifications {
    background: url('../img/smart_web_sprite.png') no-repeat -115px -399px;
    width: 32px;
    height: 39px;
}
.sprite-actionbar-messages {
    background: url('../img/smart_web_sprite.png') no-repeat -456px -203px;
    width: 40px;
    height: 32px;
}
.sprite-likes-red {
    background: url('../img/smart_web_sprite.png') no-repeat -267px -200px;
    width: 44px;
    height: 37px;
}
.sprite-likes-grey {
    background: url('../img/smart_web_sprite.png') no-repeat -111px -200px;
    width: 44px;
    height: 37px;
}
.sprite-comment {
    background: url('../img/smart_web_sprite.png') no-repeat -111px -265px;
    width: 44px;
    height: 40px;
}
.sprite-comment-white {
    background: url('../img/smart_web_sprite.png') no-repeat -187px -265px;
    width: 42px;
    height: 40px;
}
.sprite-report {
    background: url('../img/smart_web_sprite.png') no-repeat -377px -343px;
    width: 44px;
    height: 36px;
}
.sprite-suggestion-person-add {
    background: url('../img/smart_web_sprite.png') no-repeat -380px -23px;
    width: 44px;
    height: 32px;
}
.sprite-suggestion-person-pending  {
    background: url('../img/smart_web_sprite.png') no-repeat -381px -84px;
    width: 44px;
    height: 32px;
}
.sprite-suggestion-person-already-friend {
    background: url('../img/smart_web_sprite.png') no-repeat -381px -138px;
    width: 44px;
    height: 32px;
}
.sprite-suggestion-send-message {
    background: url('../img/smart_web_sprite.png') no-repeat -374px -203px;
    width: 44px;
    height: 33px;
}


.sprite-suggestion-like {
    background: url('../img/smart_web_sprite.png') no-repeat -110px -200px;
    width: 44px;
    height: 37px;
}
.sprite-suggestion-liked {
    background: url('../img/smart_web_sprite.png') no-repeat -267px -200px;
    width: 44px;
    height: 37px;
}
.sprite-suggestion-arrow-right {
    background: url('../img/smart_web_sprite.png') no-repeat -151px -602px;
    width: 40px;
    height: 128px;
}
.sprite-suggestion-arrow-left {
    background: url('../img/smart_web_sprite.png') no-repeat -102px -602px;
    width: 40px;
    height: 128px;
}
.sprite-delete {
    background: url('../img/smart_web_sprite.png') no-repeat -381px -269px;
    width: 32px;
    height: 36px;
}
.sprite-ignore {
    background: url('../img/smart_web_sprite.png') no-repeat -449px -546px;
    width: 28px;
    height: 28px;
    position: relative;
    top:7px;
}
.sprite-accept {
    background: url('../img/smart_web_sprite.png') no-repeat -370px -669px;
    width: 36px;
    height: 27px;
    position: relative;
    top:7px;
}
.sprite-profile-friends {
    background: url('../img/smart_web_sprite.png') no-repeat -188px -142px;
    width: 44px;
    height: 37px;
}
.sprite-like-white {
    background: url('../img/smart_web_sprite.png') no-repeat -187px -200px;
    width: 42px;
    height: 37px;
}
.sprite-profile-edit {
    background: url('../img/smart_web_sprite.png') no-repeat -374px -602px;
    width: 36px;
    height: 36px;
}
.sprite-profile-add-photo {
    background: url('../img/smart_web_sprite.png') no-repeat -373px -480px;
    width: 40px;
    height: 36px;
}
.sprite-add-photo-from-gallery {
    background: url('../img/smart_web_sprite.png') no-repeat -105px -22px;
    width: 28px;
    height: 35px;
}
.sprite-upload-photo {
    background: url('../img/smart_web_sprite.png') no-repeat -160px -22px;
    width: 28px;
    height: 34px;
}.sprite-add-photo-from-facebook {
     background: url('../img/smart_web_sprite.png') no-repeat -207px -22px;
     width: 16px;
     height: 34px;
 }
.sprite-make-profile-photo {
    background: url('../img/smart_web_sprite.png') no-repeat -111px -466px;
    width: 35px;
    height: 44px;
}

.sprite-panel-profile {
    background: url('../img/smart_web_sprite.png') no-repeat -563px -25px;
    width: 68px;
    height: 67px;
    left: 50%;
    margin-left: -34px;
    position: relative;
}
.sprite-panel-friends {
    background: url('../img/smart_web_sprite.png') no-repeat -545px -131px;
    width: 104px;
    height: 67px;
    left: 50%;
    margin-left: -52px;
    position: relative;
}
.sprite-panel-settings {
    background: url('../img/smart_web_sprite.png') no-repeat -566px -237px;
    width: 67px;
    height: 68px;
    left: 50%;
    margin-left: -33px;
    position: relative;
}
.sprite-panel-messages {
    background: url('../img/smart_web_sprite.png') no-repeat -566px -345px;
    width: 68px;
    height: 68px;
    left: 50%;
    margin-left: -34px;
    position: relative;
}
.sprite-panel-faf {
    background: url('../img/smart_web_sprite.png') no-repeat -433px -434px;
    width: 85px;
    height: 68px;
    left: 50%;
    margin-left: -40px;
    position: relative;
}

.sprite-panel-favorites {
    background: url('../img/smart_web_sprite.png') no-repeat -566px -434px;
    width: 72px;
    height: 68px;
    left: 50%;
    margin-left: -36px;
    position: relative;
}
.sprite-panel-likes {
    background: url('../img/smart_web_sprite.png') no-repeat -563px -531px;
    width: 74px;
    height: 67px;
    left: 50%;
    margin-left: -39px;
    position: relative;
}
.sprite-panel-suggestions {
    background: url('../img/smart_web_sprite.png') no-repeat -463px -618px;
    width: 34px;
    height: 67px;
    left: 50%;
    margin-left: -17px;
    position: relative;
}
.sprite-panel-updates {
    background: url('../img/smart_web_sprite.png') no-repeat -574px -618px;
    width: 56px;
    height: 68px;
    left: 50%;
    margin-left: -28px;
    position: relative;
}
.sprite-panel-photostream {
    background: url('../img/smart_web_sprite.png') no-repeat -575px -722px;
    width: 50px;
    height: 67px;
    left: 50%;
    margin-left: -25px;
    position: relative;
}
.sprite-panel-visitors {
    background: url('../img/smart_web_sprite.png') no-repeat -480px -800px;
    width: 101px;
    height: 69px;
    left: 50%;
    margin-left: -50px;
    position: relative;
}
.sprite-panel-vip {
    background: url('../img/smart_web_sprite.png') no-repeat -251px -494px;
    width: 71px;
    height: 71px;
    left: 50%;
    margin-left: -35px;
    position: relative;
}
.sprite-panel-appoftheday {
    background: url('../img/smart_web_sprite.png') no-repeat -256px -597px;
    width: 61px;
    height: 66px;
    left: 50%;
    margin-left: -30px;
    position: relative;
}
.sprite-edit-profile-info {
    background: url('../img/smart_web_sprite.png') no-repeat -618px -826px;
    width: 36px;
    height: 36px;
    position: relative;
    top: 5px;
    left: -10px;
}
.sprite-fav-send-message {
    background: url('../img/smart_web_sprite.png') no-repeat -267px -269px;
    width: 40px;
    height: 40px;
}


html,
body {
    overflow-x: hidden !important;
    font-family:sans-serif;
    min-height: 100%;
    background: #f9f9f9;
}
h1,h2,h3,h4,h5{font-weight: 300;}
a {
    color: #333;
}

a:hover,
a:active,
a:focus {
    outline: none;
    text-decoration: none;
    color: #333;
}

/* Layouts */
.wrapper {
    min-height: 100% !important;
}

.wrapper:before,
.wrapper:after {
    display: table;
    content: " ";
}

.wrapper:after {
    clear: both;
}

.content {
    min-height: 250px;
    padding: 15px;
    margin-right: auto;
    margin-left: auto;

}

/* Header */
body > .header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
}

/* Define 2 column template */
.right-side,
.left-side {
    min-height: 100%;
    display: block;
}

/*right side - contins main content*/
.right-side {
    background-color: #f9f9f9;
}

/*left side - contains sidebar*/
.left-side {
    position: absolute;
    width: 220px;
    top: 0;
    z-index: 999999;
}

.nav > li > a {
    padding: 15px 9px !important;
}

@media screen and (min-width: 992px) {
    .left-side {
        top: 50px;
        z-index: 999999;
    }

    /*Right side strech mode*/
    .right-side.strech {
        margin-left: 0;
    }

    .right-side.strech > .content-header {
        margin-top: 0;
    }

    /* Left side collapse */
    .left-side.collapse-left {
        left: -220px;
    }
}

/*Give content full width on xs screens*/
@media screen and (max-width: 992px) {
    .right-side {
        margin-right: 15px;
        margin-left: 15px;
        margin-top: 10px;
    }
}

/*
    By default the layout is not fixed but if you add the class .fixed to the body element
    the sidebar and the navbar will automatically become poisitioned fixed
*/
body.fixed > .header,
body.fixed .left-side,
body.fixed .navbar {
    position: fixed;
}

body.fixed > .header {
    top: 0;
    right: 0;
    left: 0;
}

body.fixed .navbar {
    left: 0;
    right: 0;
}

body.fixed .wrapper {
    margin-top: 50px;
}

/* Page Header */
.page-header {
    margin: 10px 0 20px 0;
    font-size: 22px;
}

.page-header > small {
    color: #666;
    display: block;
    margin-top: 5px;
}

/* All images should be responsive */
img {
    max-width: 100% !important;
}

.sort-highlight {
    background: #f4f4f4;
    border: 1px dashed #ddd;
    margin-bottom: 10px;
}

/* 10px padding and margins */
.pad {
    padding: 10px;
}

.margin {
    margin: 10px;
}

/* Display inline */
.inline {
    display: inline;
    width: auto;
}

/* Background colors */
.bg-red,
.bg-yellow,
.bg-aqua,
.bg-blue,
.bg-light-blue,
.bg-green,
.bg-navy,
.bg-teal,
.bg-olive,
.bg-lime,
.bg-orange,
.bg-fuchsia,
.bg-purple,
.bg-maroon,
.bg-black {
    color: #f9f9f9 !important;
}

.bg-gray {
    background-color: #eaeaec !important;
}

.bg-black {
    background-color: #222222 !important;
}

.bg-red {
    background-color: #f56954 !important;
}

.bg-yellow {
    background-color: #f39c12 !important;
}

.bg-aqua {
    background-color: #00c0ef !important;
}

.bg-blue {
    background-color: #0073b7 !important;
}

.bg-light-blue {
    background-color: #3c8dbc !important;
}

.bg-green {
    background-color: #00a65a !important;
}

.bg-navy {
    background-color: #001f3f !important;
}

.bg-teal {
    background-color: #39cccc !important;
}

.bg-olive {
    background-color: #3d9970 !important;
}

.bg-lime {
    background-color: #01ff70 !important;
}

.bg-orange {
    background-color: #ff851b !important;
}

.bg-fuchsia {
    background-color: #f012be !important;
}

.bg-purple {
    background-color: #932ab6 !important;
}

.bg-maroon {
    background-color: #85144b !important;
}

.bg-primary {
    background-color: #9F004D !important;
}

.bg-secondary {
    background-color: #2196f3 !important;
}

.bg-white {
    background-color: #ffffff !important;
}

/* Text colors */
.text-red {
    color: #f56954 !important;
}

.text-yellow {
    color: #f39c12 !important;
}

.text-aqua {
    color: #00c0ef !important;
}

.text-blue {
    color: #0073b7 !important;
}

.text-light-blue {
    color: #3c8dbc !important;
}

.text-green {
    color: #8dc550 !important;
}

.text-navy {
    color: #001f3f !important;
}

.text-teal {
    color: #39cccc !important;
}

.text-olive {
    color: #3d9970 !important;
}

.text-lime {
    color: #01ff70 !important;
}

.text-orange {
    color: #ff851b !important;
}

.text-fuchsia {
    color: #f012be !important;
}

.text-purple {
    color: #932ab6 !important;
}

.text-maroon {
    color: #85144b !important;
}

.text-grey {
    color: #999 !important;
}

.text-wred {
    color: #e91e63 !important;
}

/*Hide elements by display none only*/
.hide {
    display: none !important;
}

/* Remove borders */
.no-border {
    border: 0 !important;
}

/* Remove padding */
.no-padding {
    padding: 0 !important;
}

/* Remove margins */
.no-margin {
    margin: 0 !important;
}

/* Remove box shadow */
.no-shadow {
    box-shadow: none !important;
}

/* Don't display when printing */
@media print {
    .no-print {
        display: none;
    }

    .left-side,
    .header,
    .content-header {
        display: none;
    }

    .right-side {
        margin: 0;
    }
}

/* Remove border radius */
.flat {
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
}

/* Change the color of the striped tables */
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
    background-color: #f3f4f5;
}

/* .text-center in tables */
table.text-center td,
table.text-center th {
    text-align: center;
}

/* _fix for sparkline tooltip */
.jqstooltip {
    padding: 5px !important;
    width: auto !important;
    height: auto !important;
}

/*
    Components: navbar, logo and content header
-------------------------------------------------
*/
body > .header {
    position: relative;
    max-height: 100px;
    z-index: 1030;
}

body > .header .navbar {
    height: 60px;
    margin-bottom: 0;
}

body > .header .navbar .sidebar-toggle {
    float: left;
    padding: 20px 10px;
    margin-right: 0;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
}
body > .header .navbar .sidebar-toggle span {
    line-height: 30px;
    color: #ffffff;
    margin-left: 7px;
    font-size: 18px;
    font-weight: 300;
}

body > .header .navbar .sidebar-settings {
    float: left;
    padding: 17px 10px;
    margin-right: 0;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
}

body > .header .navbar .sidebar-toggle:hover .icon-bar {
    background: #f6f6f6;
}

body > .header .navbar .sidebar-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

body > .header .navbar .sidebar-toggle .icon-bar + .icon-bar {
    margin-top: 4px;
}

body > .header .navbar .nav > li.user > a {
    font-weight: bold;
}

body > .header .navbar .nav > li > a > .label {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    position: absolute;
    top: 9px;
    right: 2px;
    font-size: 10px;
    font-weight: normal;
    width: 15px;
    height: 15px;
    line-height: 1.0em;
    text-align: center;
    padding: 2px;
}

body > .header .navbar .nav > li > a:hover > .label {
    top: 3px;
}

body > .header .logo {
    display: block;
    float: left;
    height: 50px;
    line-height: 50px;
    padding: 0 10px;
    text-align: center;
}

body > .header .logo .icon {
    margin-right: 10px;
}

.right-side > .content-header {
    position: relative;
    padding: 15px 15px 10px 20px;
}

.right-side > .content-header > h1 {
    margin: 0;
    font-size: 24px;
}

.right-side > .content-header > h1 > small {
    font-size: 15px;
    display: inline-block;
    padding-left: 4px;
    font-weight: 300;
}

.right-side > .content-header > .breadcrumb {
    float: right;
    background: transparent;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 12px;
    padding: 7px 5px;
    position: absolute;
    top: 15px;
    right: 10px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

.right-side > .content-header > .breadcrumb > li > a {
    color: #444;
    text-decoration: none;
}

.right-side > .content-header > .breadcrumb > li + li:before {
    content: '>\00a0';
}

@media screen and (max-width: 767px) {
    .right-side > .content-header > .breadcrumb {
        position: relative;
        margin-top: 5px;
        top: 0;
        right: 0;
        float: none;
        background: #efefef;
    }
}

@media (max-width: 767px) {
    .navbar .navbar-nav > li {
        float: left;
    }

    .navbar-nav {
        margin: 0;
        float: left;
    }

    .navbar .navbar-right {
        float: right;
    }
}

@media screen and (max-width: 560px) {
    body > .header {
        position: relative;
    }

    body > .header .logo,
    body > .header .navbar {
        /*width: 100%;
        float: none;*/
        position: relative !important;
    }

    body > .header .navbar {
        margin: 0;
    }

    body.fixed > .header {
        position: fixed;
    }

    body.fixed > .wrapper,
    body.fixed .sidebar-offcanvas {
        margin-top: 100px !important;
    }
}

/*
    Component: Sidebar
--------------------------
*/
.sidebar {
    margin-bottom: 5px;
}

.sidebar .sidebar-form input:focus {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border-color: transparent !important;
}

.sidebar .sidebar-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar .sidebar-menu > li {
    margin: 0;
    padding: 0;
}

.sidebar .sidebar-menu > li > a {
    padding: 12px 5px 12px 15px;
    display: block;
}

.sidebar .sidebar-menu .treeview-menu {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar .sidebar-menu .treeview-menu > li {
    margin: 0;
}

.sidebar .sidebar-menu .treeview-menu > li > a {
    padding: 5px 5px 5px 15px;
    display: block;
    font-size: 14px;
    margin: 0 0;
}

.user-panel {
    padding: 10px;
}

.user-panel:before,
.user-panel:after {
    display: table;
    content: " ";
}

.user-panel:after {
    clear: both;
}

.user-panel > .image > img {
    width: 45px;
    height: 45px;
}
.user-panel > .singlephoto {
    font-weight: 600;
    padding: 2px 5px 5px 5px;
    font-size: 16px;
    line-height: 1;
}
.user-panel > .info {
    font-weight: 600;
    padding: 0px 5px 0px 15px;
    font-size: 14px;
    line-height: 1;
}

.user-panel > .info > p {
    margin-bottom: 9px;
}

.user-panel > .info > a {
    text-decoration: none;
    padding-right: 5px;
    margin-top: 3px;
    font-size: 11px;
    font-weight: normal;
}

/*
 * Off Canvas
 * --------------------------------------------------
 *  Gives us the push menu effect
 */
@media screen and (max-width: 992px) {
    .relative {
        position: relative;
    }

    .row-offcanvas-right .sidebar-offcanvas {
        right: -220px;
    }

    .row-offcanvas-left .sidebar-offcanvas {
        left: -220px;
    }

    .row-offcanvas-right.active {
        right: 220px;
    }

    .row-offcanvas-left.active {
        left: 220px;
    }

    .sidebar-offcanvas {
        left: 0;
    }

    body.fixed .sidebar-offcanvas {
        margin-top: 50px;
        left: -220px;
    }

    body.fixed .row-offcanvas-left.active .navbar {
        left: 220px !important;
        right: 0;
    }

    body.fixed .row-offcanvas-left.active .sidebar-offcanvas {
        left: 0;
    }
}

/*
    Dropdown menus
----------------------------
*/
/*Dropdowns in general*/
.dropdown-menu {
    -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    z-index: 2300;
}

.dropdown-menu > li > a:hover {
    background-color: #f4f4f4;

}

/*Drodown in navbars*/
.skin-blue .navbar .dropdown-menu > li > a {
    color: #444444;
}

/*
    Navbar custom dropdown menu
------------------------------------
*/
.navbar-nav > .notifications-menu > .dropdown-menu,
.navbar-nav > .messages-menu > .dropdown-menu,
.navbar-nav > .tasks-menu > .dropdown-menu {
    width: 280px;
    padding: 0 0 0 0 !important;
    margin: 0 !important;
    top: 100%;
    border: 1px solid #dfdfdf;
    -webkit-border-radius: 4px !important;
    -moz-border-radius: 4px !important;
    border-radius: 4px !important;
}

.navbar-nav > .notifications-menu > .dropdown-menu > li.header,
.navbar-nav > .messages-menu > .dropdown-menu > li.header,
.navbar-nav > .tasks-menu > .dropdown-menu > li.header {
    -webkit-border-top-left-radius: 4px;
    -webkit-border-top-right-radius: 4px;
    -webkit-border-bottom-right-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 4px;
    -moz-border-radius-bottomright: 0;
    -moz-border-radius-bottomleft: 0;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    background-color: #ffffff;
    padding: 7px 10px;
    border-bottom: 1px solid #f4f4f4;
    color: #444444;
    font-size: 14px;
}

.navbar-nav > .notifications-menu > .dropdown-menu > li.header:after,
.navbar-nav > .messages-menu > .dropdown-menu > li.header:after,
.navbar-nav > .tasks-menu > .dropdown-menu > li.header:after {
    bottom: 100%;
    left: 92%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #ffffff;
    border-width: 7px;
    margin-left: -7px;
}

.navbar-nav > .notifications-menu > .dropdown-menu > li.footer > a,
.navbar-nav > .messages-menu > .dropdown-menu > li.footer > a,
.navbar-nav > .tasks-menu > .dropdown-menu > li.footer > a {
    -webkit-border-top-left-radius: 0;
    -webkit-border-top-right-radius: 0;
    -webkit-border-bottom-right-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-radius-topleft: 0;
    -moz-border-radius-topright: 0;
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-bottomleft: 4px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    font-size: 12px;
    background-color: #f4f4f4;
    padding: 7px 10px;
    border-bottom: 1px solid #eeeeee;
    color: #444444;
    text-align: center;
}

.navbar-nav > .notifications-menu > .dropdown-menu > li.footer > a:hover,
.navbar-nav > .messages-menu > .dropdown-menu > li.footer > a:hover,
.navbar-nav > .tasks-menu > .dropdown-menu > li.footer > a:hover {
    background: #f4f4f4;
    text-decoration: none;
    font-weight: normal;
}

.navbar-nav > .notifications-menu > .dropdown-menu > li .menu,
.navbar-nav > .messages-menu > .dropdown-menu > li .menu,
.navbar-nav > .tasks-menu > .dropdown-menu > li .menu {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: hidden;
}

.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a,
.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a,
.navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > a {
    display: block;
    white-space: nowrap;
    /* Prevent text from breaking */

    border-bottom: 1px solid #f4f4f4;
}

.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a:hover,
.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a:hover,
.navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > a:hover {
    background: #f6f6f6;
    text-decoration: none;
}

.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a {
    font-size: 12px;
    color: #444444;
}

.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a {
    margin: 0;
    line-height: 20px;
    padding: 10px 5px 10px 5px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > div > img {
    margin: auto 10px auto auto;
    width: 40px;
    height: 40px;
    border: 1px solid #dddddd;
}

.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > h4 {
    padding: 0;
    margin: 0 0 0 45px;
    color: #444444;
    font-size: 15px;
}

.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > h4 > small {
    color: #999999;
    font-size: 10px;
    float: right;
}

.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > p {
    margin: 0 0 0 45px;
    font-size: 12px;
    color: #888888;
}

.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a:before,
.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a:after {
    display: table;
    content: " ";
}

.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a:after {
    clear: both;
}

.navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > a {
    padding: 10px;
}

.navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > a > h3 {
    font-size: 14px;
    padding: 0;
    margin: 0 0 10px 0;
    color: #666666;
}

.navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > a > .progress {
    padding: 0;
    margin: 0;
}

.navbar-nav > .user-menu > .dropdown-menu {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    padding: 1px 0 0 0;
    border-top-width: 0;
    width: 280px;
}

.navbar-nav > .user-menu > .dropdown-menu:after {
    bottom: 100%;
    right: 10px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #ffffff;
    border-width: 10px;
    margin-left: -10px;
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-header {
    height: 175px;
    padding: 10px;
    background: #3c8dbc;
    text-align: center;
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-header > img {
    z-index: 5;
    height: 90px;
    width: 90px;
    border: 8px solid;
    border-color: transparent;
    border-color: rgba(255, 255, 255, 0.2);
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-header > p {
    z-index: 5;
    color: #f9f9f9;
    color: rgba(255, 255, 255, 0.8);
    font-size: 17px;
    text-shadow: 2px 2px 3px #333333;
    margin-top: 10px;
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-header > p > small {
    display: block;
    font-size: 12px;
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-body {
    padding: 15px;
    border-bottom: 1px solid #f4f4f4;
    border-top: 1px solid #dddddd;
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-body:before,
.navbar-nav > .user-menu > .dropdown-menu > li.user-body:after {
    display: table;
    content: " ";
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-body:after {
    clear: both;
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-body > div > a {
    color: #0073b7;
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-footer {
    background-color: #f9f9f9;
    padding: 10px;
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-footer:before,
.navbar-nav > .user-menu > .dropdown-menu > li.user-footer:after {
    display: table;
    content: " ";
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-footer:after {
    clear: both;
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-footer .btn-default {
    color: #666666;
}

/* Add fade animation to dropdown menus */
.open > .dropdown-menu {
    animation-name: fadeAnimation;
    animation-duration: .7s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    -webkit-animation-name: fadeAnimation;
    -webkit-animation-duration: .7s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-name: fadeAnimation;
    -moz-animation-duration: .7s;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease;
    -moz-animation-fill-mode: forwards;
}

@keyframes fadeAnimation {
    from {
        opacity: 0;
        top: 120%;
    }
    to {
        opacity: 1;
        top: 100%;
    }
}

@-webkit-keyframes fadeAnimation {
    from {
        opacity: 0;
        top: 120%;
    }
    to {
        opacity: 1;
        top: 100%;
    }
}

/* Fix dropdown menu for small screens to display correctly on small screens */
@media screen and (max-width: 767px) {
    .navbar-nav > .notifications-menu > .dropdown-menu,
    .navbar-nav > .user-menu > .dropdown-menu,
    .navbar-nav > .tasks-menu > .dropdown-menu,
    .navbar-nav > .messages-menu > .dropdown-menu {
        position: absolute;
        top: 100%;
        right: 0;
        left: auto;
        border-right: 1px solid #dddddd;
        border-bottom: 1px solid #dddddd;
        border-left: 1px solid #dddddd;
        background: #ffffff;
    }
}

/* Fix menu positions on xs screens to appear correctly and fully */
@media screen and (max-width: 480px) {
    .navbar-nav > .notifications-menu > .dropdown-menu > li.header,
    .navbar-nav > .tasks-menu > .dropdown-menu > li.header,
    .navbar-nav > .messages-menu > .dropdown-menu > li.header {
        /* Remove arrow from the top */
    }

    .navbar-nav > .notifications-menu > .dropdown-menu > li.header:after,
    .navbar-nav > .tasks-menu > .dropdown-menu > li.header:after,
    .navbar-nav > .messages-menu > .dropdown-menu > li.header:after {
        border-width: 0 !important;
    }

    .navbar-nav > .tasks-menu > .dropdown-menu {
        position: absolute;
        right: -120px;
        left: auto;
    }

    .navbar-nav > .notifications-menu > .dropdown-menu {
        position: absolute;
        right: -170px;
        left: auto;
    }

    .navbar-nav > .messages-menu > .dropdown-menu {
        position: absolute;
        right: -210px;
        left: auto;
    }
}

/*
   All form elements including input, select, textarea etc.
-----------------------------------------------------------------
*/
.form-control {
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.form-control:focus {
    border-color: #3c8dbc !important;
    box-shadow: none;
}

.form-group {
    margin-bottom: 5px;
}

.form-group.has-success label {
    color: #00a65a;
}

.form-group.has-success .form-control {
    border-color: #00a65a !important;
    box-shadow: none;
}

.form-group.has-warning label {
    color: #f39c12;
}

.form-group.has-warning .form-control {
    border-color: #f39c12 !important;
    box-shadow: none;
}

.form-group.has-error label {
    color: #f56954;
}

.form-group.has-error .form-control {
    border-color: #f56954 !important;
    box-shadow: none;
}

/* Input group */
.input-group .input-group-addon {
    border-radius: 0;
    background-color: #f4f4f4;
}

/* button groups */
.btn-group-vertical .btn.btn-flat:first-of-type,
.btn-group-vertical .btn.btn-flat:last-of-type {
    border-radius: 0;
}

.btn-group-vertical > .btn + .btn, .btn-group-vertical > .btn + .btn-group, .btn-group-vertical > .btn-group + .btn, .btn-group-vertical > .btn-group + .btn-group {
    margin-top: -2px !important;

}

/* Checkbox and radio inputs */
.checkbox,
.radio {
    padding-left: 0;
}

.search-item {
    font-size: 18px;
    font-weight: normal
}

/*
    Component: Small boxes
*/
.small-box {
    position: relative;
    display: block;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    margin-bottom: 15px;
}

.small-box > .inner {
    padding: 10px;
}

.small-box > .small-box-footer {
    position: relative;
    text-align: center;
    padding: 3px 0;
    color: #fff;
    color: rgba(255, 255, 255, 0.8);
    display: block;
    z-index: 10;
    background: rgba(0, 0, 0, 0.1);
    text-decoration: none;
}

.small-box > .small-box-footer:hover {
    color: #fff;
    background: rgba(0, 0, 0, 0.15);
}

.small-box h3 {
    font-size: 38px;
    font-weight: bold;
    margin: 0 0 10px 0;
    white-space: nowrap;
    padding: 0;
}

.small-box p {
    font-size: 15px;
}

.small-box p > small {
    display: block;
    color: #f9f9f9;
    font-size: 13px;
    margin-top: 5px;
}

.small-box h3, .small-box p {
    z-index:5px;
}

.small-box .icon {
    position: absolute;
    top: auto;
    bottom: 5px;
    right: 5px;
    z-index: 0;
    font-size: 90px;
    color: rgba(0, 0, 0, 0.15);
}

.small-box:hover {
    text-decoration: none;
    color: #f9f9f9;
}

.small-box:hover .icon {
    animation-name: tansformAnimation;
    animation-duration: .5s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    -webkit-animation-name: tansformAnimation;
    -webkit-animation-duration: .5s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-name: tansformAnimation;
    -moz-animation-duration: .5s;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease;
    -moz-animation-fill-mode: forwards;
}

@keyframes tansformAnimation {
    from {
        font-size: 90px;
    }
    to {
        font-size: 100px;
    }
}

@-webkit-keyframes tansformAnimation {
    from {
        font-size: 90px;
    }
    to {
        font-size: 100px;
    }
}

@media screen and (max-width: 480px) {
    .small-box {
        text-align: center;
    }

    .small-box .icon {
        display: none;
    }

    .small-box p {
        font-size: 12px;
    }
}

/*
    component: Boxes
-------------------------
*/
.box {
    position: relative;
    background: #ffffff;
    border-top: 2px solid #c1c1c1;
    margin-bottom: 10px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    width: 100%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.box.box-primary {
    border-top-color: #3c8dbc;
}

.box.box-info {
    border-top-color: #00c0ef;
}

.box.box-danger {
    border-top-color: #f56954;
}

.box.box-warning {
    border-top-color: #f39c12;
}

.box.box-success {
    border-top-color: #00a65a;
}

.box.height-control .box-body {
    max-height: 300px;
    overflow: auto;
}

.box .box-header {
    position: relative;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-top-right-radius: 3px;
    -webkit-border-bottom-right-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-topright: 3px;
    -moz-border-radius-bottomright: 0;
    -moz-border-radius-bottomleft: 0;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom: 0 solid #f4f4f4;
    color: #444;
    padding-bottom: 10px;
}

.box .box-header:before,
.box .box-header:after {
    display: table;
    content: " ";
}

.box .box-header:after {
    clear: both;
}

.box .box-header a {
    color: #444;
}

.box .box-header > .box-tools {
    padding: 5px 10px 5px 5px;
}

.box .box-body {
    padding: 10px;
    -webkit-border-top-left-radius: 0;
    -webkit-border-top-right-radius: 0;
    -webkit-border-bottom-right-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-topleft: 0;
    -moz-border-radius-topright: 0;
    -moz-border-radius-bottomright: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}

.box .box-body > table,
.box .box-body > .table {
    margin-bottom: 0;
}

.box .box-body.chart-responsive {
    width: 100%;
    overflow: hidden;
}

.box .box-body > .chart {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.box .box-body > .chart svg,
.box .box-body > .chart canvas {
    width: 100% !important;
}

.box .box-body .fc {
    margin-top: 5px;
}

.box .box-body .fc-header-title h2 {
    font-size: 15px;
    line-height: 1.6em;
    color: #666;
    margin-left: 10px;
}

.box .box-body .fc-header-right {
    padding-right: 10px;
}

.box .box-body .fc-header-left {
    padding-left: 10px;
}

.box .box-body .fc-widget-header {
    background: #fafafa;
    box-shadow: inset 0 -3px 1px rgba(0, 0, 0, 0.02);
}

.box .box-body .fc-grid {
    width: 100%;
    border: 0;
}

.box .box-body .fc-widget-header:first-of-type,
.box .box-body .fc-widget-content:first-of-type {
    border-left: 0;
    border-right: 0;
}

.box .box-body .fc-widget-header:last-of-type,
.box .box-body .fc-widget-content:last-of-type {
    border-right: 0;
}

.box .box-body .table {
    margin-bottom: 0;
}

.box .box-body .full-width-chart {
    margin: -19px;
}

.box .box-body.no-padding .full-width-chart {
    margin: -9px;
}

.box .box-footer {
    border-top: 1px solid #f4f4f4;
    -webkit-border-top-left-radius: 0;
    -webkit-border-top-right-radius: 0;
    -webkit-border-bottom-right-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-topleft: 0;
    -moz-border-radius-topright: 0;
    -moz-border-radius-bottomright: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    padding: 10px;
    background-color: #ffffff;
}

.box.box-solid {
    border-top: 0;
}

.box.box-solid > .box-header {
    padding-bottom: 0 !important;
}

.box.box-solid > .box-header .btn.btn-default {
    background: transparent;
}

.box.box-solid.box-primary > .box-header {
    color: #fff;
    background: #3c8dbc;
    background-color: #3c8dbc;
}

.box.box-solid.box-primary > .box-header a {
    color: #444;
}

.box.box-solid.box-info > .box-header {
    color: #fff;
    background: #00c0ef;
    background-color: #00c0ef;
}

.box.box-solid.box-info > .box-header a {
    color: #444;
}

.box.box-solid.box-danger > .box-header {
    color: #fff;
    background: #f56954;
    background-color: #f56954;
}

.box.box-solid.box-danger > .box-header a {
    color: #444;
}

.box.box-solid.box-warning > .box-header {
    color: #fff;
    background: #f39c12;
    background-color: #f39c12;
}

.box.box-solid.box-warning > .box-header a {
    color: #444;
}

.box.box-solid.box-success > .box-header {
    color: #fff;
    background: #00a65a;
    background-color: #00a65a;
}

.box.box-solid.box-success > .box-header a {
    color: #444;
}

.box.box-solid > .box-header > .box-tools > .btn {
    border: 0;
    box-shadow: none;
}

.box.box-solid.collapsed-box .box-header {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.box.box-solid[class*='bg'] > .box-header {
    color: #fff;
}

.box .box-group > .box {
    margin-bottom: 5px;
}

.box .knob-label {
    text-align: center;
    color: #333;
    font-weight: 100;
    font-size: 12px;
    margin-bottom: 0.3em;
}

.box .chat {
    padding: 5px 20px 5px 10px;
}

.box .chat .item {
    margin-bottom: 10px;
}

.box .chat .item:before,
.box .chat .item:after {
    display: table;
    content: " ";
}

.box .chat .item:after {
    clear: both;
}

.box .chat .item > img {
    width: 40px;
    height: 40px;
    border: 2px solid transparent;
    -webkit-border-radius: 50% !important;
    -moz-border-radius: 50% !important;
    border-radius: 50% !important;
}

.box .chat .item > img.online {
    border: 2px solid #00a65a;
}

.box .chat .item > img.offline {
    border: 2px solid #f56954;
}

.box .chat .item > .message {
    margin-left: 55px;
    margin-top: -40px;
}

.box .chat .item > .message > .name {
    display: block;
    font-weight: 600;
}

.box .chat .item > .attachment {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: #f0f0f0;
    margin-left: 65px;
    margin-right: 15px;
    padding: 10px;
}

.box .chat .item > .attachment > h4 {
    margin: 0 0 5px 0;
    font-weight: 600;
    font-size: 14px;
}

.box .chat .item > .attachment > p,
.box .chat .item > .attachment > .filename {
    font-weight: 600;
    font-size: 13px;
    font-style: italic;
    margin: 0;
}

.box .chat .item > .attachment:before,
.box .chat .item > .attachment:after {
    display: table;
    content: " ";
}

.box .chat .item > .attachment:after {
    clear: both;
}

.box > .overlay,
.box > .loading-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.box > .overlay {
    z-index: 1010;
    background: rgba(255, 255, 255, 0.7);
}

.box > .overlay.dark {
    background: rgba(0, 0, 0, 0.5);
}

.box > .loading-img {
    z-index: 1020;
    background: transparent url('../img/ajax-loader1.gif') 50% 50% no-repeat;
}

/*
    Component: Buttons
-------------------------
*/
.btn {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid transparent;
    -webkit-box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.09);
    -moz-box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.09);
    box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.09);
}

.btn.active, .btn:active {
    background: #f4f4f4 !important;
    border: 1px solid #ddd !important;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.btn.btn-default {
    background-color: #ffffff;
    color: #666;
    border-color: #ddd;
    border-bottom-color: #ddd;
}

.btn.btn-default:hover,
.btn.btn-default:active,
.btn.btn-default.hover {
    background-color: #f4f4f4 !important;
}

.btn.btn-default.btn-flat {
    border-bottom-color: #d9dadc;
}

.btn-secondary {
    color: #ffffff;
}

.btn.btn-secondary {
    background-color: #2196f3;
    border-color: #2196f3;
}

.btn.btn-secondary:hover,
.btn.btn-secondary:active,
.btn.btn-secondary.hover {
    background-color: #2093EE;
    color: #ffffff;
}

.btn.btn-primary {
    background-color: #2196f3;
    border-color: #186FB3;
}

.btn.btn-primary:hover,
.btn.btn-primary:active,
.btn.btn-primary.hover {
    background-color: #1E86D9;
}

.btn.btn-success {
    background-color: #8dc550;
    border-color: #6ca331;
}

.btn.btn-success:hover,
.btn.btn-success:active,
.btn.btn-success.hover {
    background-color: #6ca331;
}

.btn.btn-info {
    background-color: #00c0ef;
    border-color: #00acd6;
}

.btn.btn-info:hover,
.btn.btn-info:active,
.btn.btn-info.hover {
    background-color: #00acd6;
}

.btn.btn-danger {
    background-color: #f56954;
    border-color: #f4543c;
}

.btn.btn-danger:hover,
.btn.btn-danger:active,
.btn.btn-danger.hover {
    background-color: #f4543c;
}

.btn.btn-warning {
    background-color: #f39c12;
    border-color: #e08e0b;
}

.btn.btn-normal {
    background-color: #ffffff;
    border-color: #eee;
    color: #9F004D;

}

.btn.btn-warning:hover,
.btn.btn-warning:active,
.btn.btn-warning.hover {
    background-color: #e08e0b;
}

.btn.btn-flat {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border-width: 1px;
}

.btn:active {
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    -moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.btn:focus {
    outline: none;
}

.btn.btn-file {
    position: relative;
    width: 120px;
    height: 35px;
    overflow: hidden;
}

.btn.btn-file > input[type='file'] {
    display: block !important;
    width: 100% !important;
    height: 35px !important;
    opacity: 0 !important;
    position: absolute;
    top: -10px;
    cursor: pointer;
}

.btn.btn-app {
    position: relative;
    padding: 15px 15px;
    margin: 0 0 25px 5px;
    min-width: 100%;
    height: 100px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 6px;
    text-align: center;
    color: #ffffff;
    border: 1px solid #9F004D;
    background-color: #9F004D;
    font-size: 12px;
}

.btn.btn-app:hover {
    background: #f4f4f4;
    color: #444;
    border-color: #aaa;
}

.btn.btn-app:active,
.btn.btn-app:focus {
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    -moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.btn.btn-app > .badge {
    position: absolute;
    top: 3px;
    right: -5px;
    font-size: 12px;
    font-weight: 400;
}

.btn.btn-social-old {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    opacity: 0.9;
    padding: 0;
}

.btn.btn-social-old span {
    padding: 10px;
}

.btn.btn-social-old:hover {
    opacity: 1;
}

.btn.btn-circle {
    width: 30px;
    height: 30px;
    line-height: 30px;
    padding: 0;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

/*
    Component: callout
------------------------
*/
.callout {
    margin: 10px 0 15px 0;
    padding: 15px 15px 15px 15px;
    border-left: 5px solid #eee;
    border-radius: 3px;

}


.callout h4 {
    margin-top: 0;
}

.callout p:last-child {
    margin-bottom: 0;
}

.callout code,
.callout .highlight {
    background-color: #fff;
}

.callout.callout-success {
    background-color: #e4f1d5;
    border-color: #8dc550;
}

.callout.callout-warning {
    border-color: #c87f0a;
    background-color: #f39c12 !important;
    color: #ffffff;
}

.callout.callout-normal {
    border-color: #9F004D;
    background-color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.callout.callout-info {
    background-color: #f0f7fd;
    border-color: #d0e3f0;
}

.callout.callout-danger h4 {
    color: #B94A48;
}

.callout.callout-info h4 {
    color: #3A87AD;
}

/*
    Component: alert
------------------------
*/
.alert {
    padding-left: 30px;
    margin-left: 15px;
    position: relative;
}

/*
    Component: Navs
*/
/* NAV PILLS */
.nav.nav-pills > li > a {
    border-top: 3px solid transparent;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    color: #444;
}

.nav.nav-pills > li.active > a,
.nav.nav-pills > li.active > a:hover {
    background-color: #f6f6f6;
    border-top-color: #3c8dbc;
    color: #444;
}

.nav.nav-pills > li.active > a {
    font-weight: 600;
}

.nav.nav-pills > li > a:hover {
    background-color: #f6f6f6;
}

.nav.nav-pills.nav-stacked > li > a {
    border-top: 0;
    border-left: 3px solid transparent;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    color: #444;
}

.nav.nav-pills.nav-stacked > li.active > a,
.nav.nav-pills.nav-stacked > li.active > a:hover {
    background-color: #f6f6f6;
    border-left-color: #3c8dbc;
    color: #444;
}

.nav.nav-pills.nav-stacked > li.header {
    border-bottom: 1px solid #ddd;
    color: #777;
    margin-bottom: 10px;
    padding: 5px 10px;
    text-transform: uppercase;
}

/* NAV TABS wlog */
.nav-tabs-custom-wlog {
    margin-bottom: 10px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.nav-tabs-custom-wlog > .nav-tabs {
    margin: 0;
    border-bottom-color: #f4f4f4;
}

.nav-tabs-custom-wlog > .nav-tabs > li {
    border-bottom: 3px solid transparent;
    margin-bottom: 0;

}

.nav-tabs-custom-wlog > .nav-tabs > li > a {
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
    border: 0px;

}

.nav-tabs-custom-wlog > .nav-tabs > li > a,
.nav-tabs-custom-wlog > .nav-tabs > li > a:hover {
    background: transparent;
    margin: 0;

}

.nav-tabs-custom-wlog > .nav-tabs > li:not(.active) > a:hover,
.nav-tabs-custom-wlog > .nav-tabs > li:not(.active) > a:focus,
.nav-tabs-custom-wlog > .nav-tabs > li:not(.active) > a:active {
    border-color: transparent;

}

.nav-tabs-custom-wlog > .nav-tabs > li.active {
    border-bottom-color: #2196f3;

}

.nav-tabs-custom-wlog > .nav-tabs > li.active > a,
.nav-tabs-custom-wlog > .nav-tabs > li.active:hover > a {
    background-color: #ffffff;

}

.nav-tabs-custom-wlog > .nav-tabs > li.active > a {
    border: 0;
    border-left-color: #f4f4f4;
    border-right-color: #f4f4f4;
}

.nav-tabs-custom-wlog > .nav-tabs > li:first-of-type {
    margin-left: 0;
}

.nav-tabs-custom-wlog > .nav-tabs > li:first-of-type.active > a {
    border-left-width: 0;
}

.nav-tabs-custom-wlog > .nav-tabs.pull-right {
    float: none !important;
}

.nav-tabs-custom-wlog > .nav-tabs.pull-right > li {
    float: right;
}

.nav-tabs-custom-wlog > .nav-tabs.pull-right > li:first-of-type {
    margin-right: 0;
}

.nav-tabs-custom-wlog > .nav-tabs.pull-right > li:first-of-type.active > a {

    border-right-width: 0;
}

.nav-tabs-custom-wlog > .nav-tabs > li.header {
    font-weight: 400;
    line-height: 35px;
    padding: 0 10px;
    font-size: 20px;
    color: #444;
    cursor: default;
}

.nav-tabs-custom-wlog > .tab-content {
    background: #fff;
    padding: 10px;
}

/* NAV TABS */
.nav-tabs-custom {
    margin-bottom: 20px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.nav-tabs-custom > .nav-tabs {
    margin: 0;
    border-bottom-color: #f4f4f4;
}

.nav-tabs-custom > .nav-tabs > li {
    border-bottom: 3px solid transparent;
    margin-bottom: 0;

}

.nav-tabs-custom > .nav-tabs > li > a {
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
    border: 0px;
    color: #ffffff;
}

.nav-tabs-custom > .nav-tabs > li > a,
.nav-tabs-custom > .nav-tabs > li > a:hover {
    background: transparent;
    margin: 0;
    color: #ffffff;
}

.nav-tabs-custom > .nav-tabs > li:not(.active) > a:hover,
.nav-tabs-custom > .nav-tabs > li:not(.active) > a:focus,
.nav-tabs-custom > .nav-tabs > li:not(.active) > a:active {
    border-color: transparent;
    color: #ffffff;
}

.nav-tabs-custom > .nav-tabs > li.active {
    border-bottom-color: #2196f3;
    color: #ffffff;
}

.nav-tabs-custom > .nav-tabs > li.active > a,
.nav-tabs-custom > .nav-tabs > li.active:hover > a {
    background-color: #9F004D;
    color: #ffffff;

}

.nav-tabs-custom > .nav-tabs > li.active > a {
    border: 0;
    border-left-color: #f4f4f4;
    border-right-color: #f4f4f4;
}

.nav-tabs-custom > .nav-tabs > li:first-of-type {
    margin-left: 0;
}

.nav-tabs-custom > .nav-tabs > li:first-of-type.active > a {
    border-left-width: 0;
}

.nav-tabs-custom > .nav-tabs.pull-right {
    float: none !important;
}

.nav-tabs-custom > .nav-tabs.pull-right > li {
    float: right;
}

.nav-tabs-custom > .nav-tabs.pull-right > li:first-of-type {
    margin-right: 0;
}

.nav-tabs-custom > .nav-tabs.pull-right > li:first-of-type.active > a {

    border-right-width: 0;
}

.nav-tabs-custom > .nav-tabs > li.header {
    font-weight: 400;
    line-height: 35px;
    padding: 0 10px;
    font-size: 20px;
    color: #444;
    cursor: default;
}

.nav-tabs-custom > .tab-content {
    background: #fff;
    padding: 10px;
}

/* PAGINATION */
.pagination > li > a {
    background: #fafafa;
    color: #666;
    -webkit-box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.09);
    -moz-box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.09);
    box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.09);
}

.pagination > li:first-of-type a,
.pagination > li:last-of-type a {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

/*
    Component: Mailbox
*/
.mailbox .table-mailbox {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.mailbox .table-mailbox tr.unread > td {
    background-color: rgba(0, 0, 0, 0.05);
    color: #000;
    font-weight: 600;
}

.mailbox .table-mailbox tr > td.small-col {
    width: 30px;
}

.mailbox .table-mailbox tr > td.name {
    width: 150px;
    font-weight: 600;
}

.mailbox .table-mailbox tr > td.time {
    text-align: right;
    width: 100px;
}

.mailbox .table-mailbox tr > td {
    white-space: nowrap;
}

.mailbox .table-mailbox tr > td > a {
    color: #444;
}

@media screen and (max-width: 767px) {
    .mailbox .nav-stacked > li:not(.header) {
        float: left;
        width: 50%;
    }

    .mailbox .nav-stacked > li:not(.header).header {
        border: 0 !important;
    }

    .mailbox .search-form {
        margin-top: 10px;
    }
}

/*
    Page: register and login
*/
.form-box {
    width: 360px;
    margin: 90px auto 0 auto;
}

.form-box .header {
    -webkit-border-top-left-radius: 4px;
    -webkit-border-top-right-radius: 4px;
    -webkit-border-bottom-right-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 4px;
    -moz-border-radius-bottomright: 0;
    -moz-border-radius-bottomleft: 0;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    background: #3d9970;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.2);
    padding: 20px 10px;
    text-align: center;
    font-size: 26px;
    font-weight: 300;
    color: #fff;
}

.form-box .body,
.form-box .footer {
    padding: 10px 20px;
    background: #fff;
    color: #444;
}

.form-box .body > .form-group,
.form-box .footer > .form-group {
    margin-top: 20px;
}

.form-box .body > .form-group > input,
.form-box .footer > .form-group > input {
    border: #fff;
}

.form-box .body > .btn,
.form-box .footer > .btn {
    margin-bottom: 10px;
}

.form-box .footer {
    -webkit-border-top-left-radius: 0;
    -webkit-border-top-right-radius: 0;
    -webkit-border-bottom-right-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-radius-topleft: 0;
    -moz-border-radius-topright: 0;
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-bottomleft: 4px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}

@media (max-width: 767px) {
    .form-box {
        width: 90%;
    }
}

/*
    Page: 404 and 500 error pages
------------------------------------
*/
.error-page {
    width: 600px;
    margin: 20px auto 0 auto;
}

@media screen and (max-width: 767px) {
    .error-page {
        width: 100%;
    }
}

.error-page > .headline {
    float: left;
    font-size: 100px;
    font-weight: 300;
}

@media screen and (max-width: 767px) {
    .error-page > .headline {
        float: none;
        text-align: center;
    }
}

.error-page > .error-content {
    margin-left: 190px;
    display: block;
}

@media screen and (max-width: 767px) {
    .error-page > .error-content {
        margin-left: 0;
    }
}

.error-page > .error-content > h3 {
    font-weight: 300;
    font-size: 25px;
}

@media screen and (max-width: 767px) {
    .error-page > .error-content > h3 {
        text-align: center;
    }
}

.error-page:before,
.error-page:after {
    display: table;
    content: " ";
}

.error-page:after {
    clear: both;
}

/*
    Page: Invoice
*/
.invoice {
    position: relative;
    width: 90%;
    margin: 10px auto;
    background: #fff;
    border: 1px solid #f4f4f4;
}

.invoice-title {
    margin-top: 0;
}

/* Enhancement for printing */
@media print {
    .invoice {
        width: 100%;
        border: 0;
        margin: 0;
        padding: 0;
    }

    .invoice-col {
        float: left;
        width: 33.3333333%;
    }

    .table-responsive {
        overflow: auto;
    }

    .table-responsive > .table tr th,
    .table-responsive > .table tr td {
        white-space: normal !important;
    }
}

/*
    Skins
    -----
*/
/* 
    Skin Blue 
    ---------
*/
/* skin-blue navbar */
.skin-blue .navbar {
    background-color: #ffffff;
}

.skin-blue .navbar .nav a {
    color: rgba(255, 255, 255, 0.8);
}

.skin-blue .navbar .nav > li > a:hover,
.skin-blue .navbar .nav > li > a:active,
.skin-blue .navbar .nav > li > a:focus,
.skin-blue .navbar .nav .open > a,
.skin-blue .navbar .nav .open > a:hover,
.skin-blue .navbar .nav .open > a:focus {
    background: rgba(0, 0, 0, 0.1);
    color: #f6f6f6;
}

.skin-blue .navbar .navbar-right > .nav {
    margin-right: 10px;
}

.skin-blue .navbar .sidebar-toggle .icon-bar {
    background: rgba(255, 255, 255, 0.8);
}

.skin-blue .navbar .sidebar-toggle:hover .icon-bar {
    background: #f6f6f6 !important;
}

/* skin-blue logo */
/*.skin-blue .logo {
  background-color: #367fa9;
  color: #f9f9f9;
}
.skin-blue .logo > a {
  color: #f9f9f9;
}
.skin-blue .logo:hover {
  background: #357ca5;
}*/
/* skin-blue content header */
.skin-blue .right-side > .content-header {
    background: #fbfbfb;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* Skin-blue user panel */
.skin-blue .user-panel > .image > img {
    border: 1px solid #dfdfdf;
}

.skin-blue .user-panel > .info,
.skin-blue .user-panel > .info > a {
    color: #555555;
}

/* skin-blue sidebar */
.skin-blue .sidebar {
    border-bottom: 1px solid #fff;
}

.skin-blue .sidebar > .sidebar-menu > li {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #dbdbdb;
}

.skin-blue .sidebar > .sidebar-menu > li:first-of-type {
    border-top: 1px solid #dbdbdb;
}

.skin-blue .sidebar > .sidebar-menu > li:first-of-type > a {
    border-top: 1px solid #fff;
}

.skin-blue .sidebar > .sidebar-menu > li > a {
    margin-right: 1px;
}

.skin-blue .sidebar > .sidebar-menu > li > a:hover,
.skin-blue .sidebar > .sidebar-menu > li.active > a {
    background: #ffffff;
}

.skin-blue .sidebar > .sidebar-menu > li > .treeview-menu {
    margin: 0 1px;
    background: #f9f9f9;
}

.skin-blue .left-side {
    background: #f4f4f4;
    -webkit-box-shadow: inset -3px 0 8px -4px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: inset -3px 0 8px -4px rgba(0, 0, 0, 0.1);
    box-shadow: inset -3px 0 8px -4px rgba(0, 0, 0, 0.07);
}

.skin-blue .sidebar a {
    color: #555555;
}

.skin-blue .sidebar a:hover {
    text-decoration: none;
}

.skin-blue .treeview-menu > li > a {
    color: #777;
}

.skin-blue .treeview-menu > li.active > a,
.skin-blue .treeview-menu > li > a:hover {
    color: #111;
}

.skin-blue .sidebar-form {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    border: 1px solid #dbdbdb;
    margin: 10px 10px;
}

.skin-blue .sidebar-form input[type="text"],
.skin-blue .sidebar-form .btn {
    box-shadow: none;
    background-color: #fafafa;
    border: 1px solid #fafafa;
    height: 35px;
}

.skin-blue .sidebar-form input[type="text"] {
    color: #666;
    -webkit-border-top-left-radius: 2px !important;
    -webkit-border-top-right-radius: 0 !important;
    -webkit-border-bottom-right-radius: 0 !important;
    -webkit-border-bottom-left-radius: 2px !important;
    -moz-border-radius-topleft: 2px !important;
    -moz-border-radius-topright: 0 !important;
    -moz-border-radius-bottomright: 0 !important;
    -moz-border-radius-bottomleft: 2px !important;
    border-top-left-radius: 2px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 2px !important;
}

.skin-blue .sidebar-form input[type="text"]:focus,
.skin-blue .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
    background-color: #fff;
    color: #666;
}

.skin-blue .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
    border-left-color: #fff;
}

.skin-blue .sidebar-form .btn {
    color: #999;
    -webkit-border-top-left-radius: 0 !important;
    -webkit-border-top-right-radius: 2px !important;
    -webkit-border-bottom-right-radius: 2px !important;
    -webkit-border-bottom-left-radius: 0 !important;
    -moz-border-radius-topleft: 0 !important;
    -moz-border-radius-topright: 2px !important;
    -moz-border-radius-bottomright: 2px !important;
    -moz-border-radius-bottomleft: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 2px !important;
    border-bottom-right-radius: 2px !important;
    border-bottom-left-radius: 0 !important;
}

/*
    Skin Black
    --------
*/
/* skin-black navbar */
.skin-black .navbar {
    background-color: #ffffff;
    border-bottom: 1px solid #eee;
}

.skin-black .navbar .nav a {
    color: #333333;
}

.skin-black .navbar .nav > li > a:hover,
.skin-black .navbar .nav > li > a:active,
.skin-black .navbar .nav > li > a:focus,
.skin-black .navbar .nav .open > a,
.skin-black .navbar .nav .open > a:hover,
.skin-black .navbar .nav .open > a:focus {
    background: #ffffff;
    color: #999999;
}

.skin-black .navbar .navbar-right > .nav {
    margin-right: 10px;
}

.skin-black .navbar .sidebar-toggle .icon-bar {
    background: #333333;
}

.skin-black .navbar .sidebar-toggle:hover .icon-bar {
    background: #999999 !important;
}

/* skin-black logo */
.skin-black .logo {
    background-color: #333333;
    color: #f9f9f9;
}

.skin-black .logo > a {
    color: #f9f9f9;
}

.skin-black .logo:hover {
    background: #303030;
}

/* skin-black content header */
.skin-black .right-side > .content-header {
    background: transparent;
    box-shadow: none;
}

/* Skin-red user panel */
.skin-black .user-panel > .image > img {
    border: 1px solid #444;
}

.skin-black .user-panel > .info,
.skin-black .user-panel > .info > a {
    color: #eee;
}

/* skin-black sidebar */
.skin-black .sidebar {
    border-bottom: 1px solid #333;
}

.skin-black .sidebar > .sidebar-menu > li {
    border-top: 1px solid #333;
    border-bottom: 0 solid #444;
}

.skin-black .sidebar > .sidebar-menu > li:first-of-type {
    border-top: 1px solid #444;
}

.skin-black .sidebar > .sidebar-menu > li:first-of-type > a {
    border-top: 0 solid #333;
}

.skin-black .sidebar > .sidebar-menu > li > a {
    margin-right: 1px;
}

.skin-black .sidebar > .sidebar-menu > li > a:hover,
.skin-black .sidebar > .sidebar-menu > li.active > a {
    color: #f6f6f6;
    background: #444;
}

.skin-black .sidebar > .sidebar-menu > li > .treeview-menu {
    margin: 0 1px;
    background: #444;
}

.skin-black .left-side {
    background: #333;
}

.skin-black .sidebar a {
    color: #eee;
}

.skin-black .sidebar a:hover {
    text-decoration: none;
}

.skin-black .treeview-menu > li > a {
    color: #ccc;
}

.skin-black .treeview-menu > li.active > a,
.skin-black .treeview-menu > li > a:hover {
    color: #fff;
}

.skin-black .sidebar-form {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    border: 0 solid #555;
    margin: 10px 10px;
}

.skin-black .sidebar-form input[type="text"],
.skin-black .sidebar-form .btn {
    box-shadow: none;
    background-color: rgba(255, 255, 255, 0.1);
    border: 0 solid rgba(255, 255, 255, 0.1);
    height: 35px;
    outline: none;
}

.skin-black .sidebar-form input[type="text"] {
    color: #666;
    -webkit-border-top-left-radius: 2px !important;
    -webkit-border-top-right-radius: 0 !important;
    -webkit-border-bottom-right-radius: 0 !important;
    -webkit-border-bottom-left-radius: 2px !important;
    -moz-border-radius-topleft: 2px !important;
    -moz-border-radius-topright: 0 !important;
    -moz-border-radius-bottomright: 0 !important;
    -moz-border-radius-bottomleft: 2px !important;
    border-top-left-radius: 2px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 2px !important;
}

.skin-black .sidebar-form input[type="text"]:focus,
.skin-black .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
    background-color: #444;
    border: 0;
}

.skin-black .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
    border-left: 0;
}

.skin-black .sidebar-form .btn {
    color: #999;
    -webkit-border-top-left-radius: 0 !important;
    -webkit-border-top-right-radius: 2px !important;
    -webkit-border-bottom-right-radius: 2px !important;
    -webkit-border-bottom-left-radius: 0 !important;
    -moz-border-radius-topleft: 0 !important;
    -moz-border-radius-topright: 2px !important;
    -moz-border-radius-bottomright: 2px !important;
    -moz-border-radius-bottomleft: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 2px !important;
    border-bottom-right-radius: 2px !important;
    border-bottom-left-radius: 0 !important;
    border-left: 0;
}

/* Retina support */

.pace .pace-progress {
    background: #00c0ef;
    position: fixed;
    z-index: 2000;
    top: 0;
    left: 0;
    height: 2px;
    -webkit-transition: width 1s;
    -moz-transition: width 1s;
    -o-transition: width 1s;
    transition: width 1s;
}

.pace-inactive {
    display: none;
}

/*
 * Social Buttons for Bootstrap
 *
 * Copyright 2013-2014 Panayiotis Lipiridis
 * Licensed under the MIT License
 *
 * https://github.com/lipis/bootstrap-social
 *
 * Note: this file has been altered to work correctly with AdminLTE
 */
.btn-social {
    position: relative;
    padding-left: 44px !important;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-social :first-child {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 32px !important;
    line-height: 34px !important;
    font-size: 1.6em !important;
    text-align: center;
    border-right: 1px solid rgba(0, 0, 0, 0.2);
}

.btn-social.btn-lg {
    padding-left: 60px !important;
}

.btn-social.btn-lg :first-child {
    line-height: 45px;
    width: 45px;
    font-size: 1.8em;
}

.btn-social.btn-sm {
    padding-left: 38px !important;
}

.btn-social.btn-sm :first-child {
    line-height: 28px;
    width: 28px;
    font-size: 1.4em;
}

.btn-social.btn-xs {
    padding-left: 30px !important;
}

.btn-social.btn-xs :first-child {
    line-height: 20px;
    width: 20px;
    font-size: 1.2em;
}

.btn-social-icon {
    position: relative;
    padding-left: 44px !important;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 34px;
    width: 34px;
    padding: 0;
}

.btn-social-icon :first-child {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 32px !important;
    line-height: 34px !important;
    font-size: 1.6em !important;
    text-align: center;
    border-right: 1px solid rgba(0, 0, 0, 0.2);
}

.btn-social-icon.btn-lg {
    padding-left: 60px !important;
}

.btn-social-icon.btn-lg :first-child {
    line-height: 45px;
    width: 45px;
    font-size: 1.8em;
}

.btn-social-icon.btn-sm {
    padding-left: 38px !important;
}

.btn-social-icon.btn-sm :first-child {
    line-height: 28px;
    width: 28px;
    font-size: 1.4em;
}

.btn-social-icon.btn-xs {
    padding-left: 30px !important;
}

.btn-social-icon.btn-xs :first-child {
    line-height: 20px;
    width: 20px;
    font-size: 1.2em;
}

.btn-social-icon :first-child {
    border: none;
    text-align: center;
    width: 100% !important;
}

.btn-social-icon.btn-lg {
    height: 45px;
    width: 45px;
    padding-left: 0;
    padding-right: 0;
}

.btn-social-icon.btn-sm {
    height: 30px;
    width: 30px;
    padding-left: 0;
    padding-right: 0;
}

.btn-social-icon.btn-xs {
    height: 22px;
    width: 22px;
    padding-left: 0;
    padding-right: 0;
}

.btn-facebook {
    color: #ffffff !important;
    background-color: #3b5998;
    border-color: rgba(0, 0, 0, 0.2);
    text-transform: uppercase;
}

.btn-facebook img {
    position: relative;
    top: -2px;
    padding-right: 5px;
    height: 16px;
}

.btn-facebook:hover,
.btn-facebook:focus,
.btn-facebook:active,
.btn-facebook.active,
.open .dropdown-toggle.btn-facebook {
    color: #ffffff !important;
    background-color: #30487b !important;
    border-color: rgba(0, 0, 0, 0.2);
}

.btn-facebook:active,
.btn-facebook.active,
.open .dropdown-toggle.btn-facebook {
    background-image: none;
}

.btn-facebook.disabled,
.btn-facebook[disabled],
fieldset[disabled] .btn-facebook,
.btn-facebook.disabled:hover,
.btn-facebook[disabled]:hover,
fieldset[disabled] .btn-facebook:hover,
.btn-facebook.disabled:focus,
.btn-facebook[disabled]:focus,
fieldset[disabled] .btn-facebook:focus,
.btn-facebook.disabled:active,
.btn-facebook[disabled]:active,
fieldset[disabled] .btn-facebook:active,
.btn-facebook.disabled.active,
.btn-facebook[disabled].active,
fieldset[disabled] .btn-facebook.active {
    background-color: #3b5998;
    border-color: rgba(0, 0, 0, 0.2);
}

.btn-facebook .badge {
    color: #3b5998;
    background-color: #ffffff;
}

.btn-google-plus {
    color: #ffffff !important;
    background-color: #dd4b39;
    border-color: rgba(0, 0, 0, 0.2);
    padding: 10px 0px !important;
    text-transform: uppercase;
}

.btn-google-plus:hover,
.btn-google-plus:focus,
.btn-google-plus:active,
.btn-google-plus.active,
.open .dropdown-toggle.btn-google-plus {
    color: #ffffff !important;
    background-color: #ca3523 !important;
    border-color: rgba(0, 0, 0, 0.2);
}

.btn-google-plus:active,
.btn-google-plus.active,
.open .dropdown-toggle.btn-google-plus {
    background-image: none;
}

.btn-google-plus.disabled,
.btn-google-plus[disabled],
fieldset[disabled] .btn-google-plus,
.btn-google-plus.disabled:hover,
.btn-google-plus[disabled]:hover,
fieldset[disabled] .btn-google-plus:hover,
.btn-google-plus.disabled:focus,
.btn-google-plus[disabled]:focus,
fieldset[disabled] .btn-google-plus:focus,
.btn-google-plus.disabled:active,
.btn-google-plus[disabled]:active,
fieldset[disabled] .btn-google-plus:active,
.btn-google-plus.disabled.active,
.btn-google-plus[disabled].active,
fieldset[disabled] .btn-google-plus.active {
    background-color: #dd4b39;
    border-color: rgba(0, 0, 0, 0.2);
}

.btn-google-plus .badge {
    color: #dd4b39;
    background-color: #ffffff;
}

.btn-twitter {
    color: #ffffff !important;
    background-color: #55acee !important;
    border-color: rgba(0, 0, 0, 0.2);
    padding: 10px 0px !important;
    text-transform: uppercase;
}

.btn-twitter:hover,
.btn-twitter:focus,
.btn-twitter:active,
.btn-twitter.active,
.open .dropdown-toggle.btn-twitter {
    color: #ffffff;
    background-color: #309aea !important;
    border-color: rgba(0, 0, 0, 0.2);
}

.btn-twitter:active,
.btn-twitter.active,
.open .dropdown-toggle.btn-twitter {
    background-image: none;
}

.btn-twitter.disabled,
.btn-twitter[disabled],
fieldset[disabled] .btn-twitter,
.btn-twitter.disabled:hover,
.btn-twitter[disabled]:hover,
fieldset[disabled] .btn-twitter:hover,
.btn-twitter.disabled:focus,
.btn-twitter[disabled]:focus,
fieldset[disabled] .btn-twitter:focus,
.btn-twitter.disabled:active,
.btn-twitter[disabled]:active,
fieldset[disabled] .btn-twitter:active,
.btn-twitter.disabled.active,
.btn-twitter[disabled].active,
fieldset[disabled] .btn-twitter.active {
    background-color: #55acee;
    border-color: rgba(0, 0, 0, 0.2);
}

.btn-twitter .badge {
    color: #55acee;
    background-color: #ffffff;
}

.btn-yahoo {
    color: #ffffff !important;
    background-color: #801d99 !important;
    border-color: rgba(0, 0, 0, 0.2);
    padding: 10px 0px !important;
    text-transform: uppercase;
}

.btn-yahoo:hover,
.btn-yahoo:focus,
.btn-yahoo:active,
.btn-yahoo.active,
.open .dropdown-toggle.btn-yahoo {
    color: #ffffff !important;
    background-color: #801d99 !important;
    border-color: rgba(0, 0, 0, 0.2);
}

.btn-yahoo:active,
.btn-yahoo.active,
.open .dropdown-toggle.btn-yahoo {
    background-image: none;
}

.btn-yahoo.disabled,
.btn-yahoo[disabled],
fieldset[disabled] .btn-yahoo,
.btn-yahoo.disabled:hover,
.btn-yahoo[disabled]:hover,
fieldset[disabled] .btn-yahoo:hover,
.btn-yahoo.disabled:focus,
.btn-yahoo[disabled]:focus,
fieldset[disabled] .btn-yahoo:focus,
.btn-yahoo.disabled:active,
.btn-yahoo[disabled]:active,
fieldset[disabled] .btn-yahoo:active,
.btn-yahoo.disabled.active,
.btn-yahoo[disabled].active,
fieldset[disabled] .btn-yahoo.active {
    background-color: #55acee;
    border-color: rgba(0, 0, 0, 0.2);
}

.btn-yahoo .badge {
    color: #55acee;
    background-color: #ffffff;
}

/****add by ahu****/
.dropdown-menu.dropdown-menu-right {
    right: 0;
    left: auto;
}

.p-0 {
    padding: 0 !important
}

.p-20 {
    padding: 20px 20px 0;
}

.p-10 {
    padding: 10px 10px 0;
}

.p-b-10 {
    padding-bottom: 10px
}

.p-t-10 {
    padding-top: 10px
}

.p-t-5 {
    padding-top: 5px
}

.p-b-5 {
    padding-bottom: 5px
}

.full-width {
    width: 100%
}

.m-0 {
    margin: 0px
}

.m-10 {
    margin: 10px
}
.m-t-0 {
    margin-top: 0px
}

.m-t-5
{
    margin-top: 5px;
}

.m-t-5-important
{
    margin-top: 5px !important;
}


.m-t-10 {
    margin-top: 10px
}

.m-t-30 {
    margin-top: 30px
}

.m-l-3 {
    margin-left: 3px
}

.m-r-3 {
    margin-right: 3px
}

.m-l-10 {
    margin-left: 10px
}

.m-r-10 {
    margin-right: 10px
}

.m-r-15 {
    margin-right: 15px
}

.m-r-20 {
    margin-right: 20px
}

.m-b-0
{
    margin-bottom: 0px;
}

.m-b-10 {
    margin-bottom: 10px
}

.m-b-25 {
    margin-bottom: 25px
}

.l-h-30 {
    line-height: 30px !important
}

.l-h-40 {
    line-height: 40px !important
}

.img-sm, .img-md, .img-lg, .box-comments .box-comment img, .user-block.user-block-sm img {
    float: left;
}

.image > img {
    width: 45px;
    height: 45px;
}

.unread-message {
    background: #f7f7f7 !important
}

.box-comments .box-comment img, .user-block.user-block-sm img {
    float: left
}

.img-sm, .box-comments .box-comment img, .user-block.user-block-sm img {
    width: 45px !important;
    height: 45px !important
}

.box-comments .username {
    color: #444;
    display: block;
    font-weight: 600;
}

.attachment-block {
    background: #ffffff none repeat scroll 0 0;
    border-bottom: 1px solid #f4f4f4;
    padding: 10px;
}

.attachment-block .attachment-pushed {
    margin-left: 55px;
}

.attachment-block .attachment-text {
    color: #555;
    margin: 0px
}

.attachment-heading {
    margin: 0
}

.attachment-text a, .box-comments a {
    color: #2196f3 !important
}

.tab-bg {
    background: #f9f9f9 !important;
    box-shadow: none !important
}

.message-bg {
    background: #ffffff !important;
    box-shadow: none !important
}

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

.md-14 {
    font-size: 1px !important;
}

/*chat*/
.direct-chat .box-body {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    position: relative;
    overflow-x: hidden;
    padding: 0
}

.direct-chat.chat-pane-open .direct-chat-contacts {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0)
}

.direct-chat-messages {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
    padding: 10px;
    height: 300px;
    overflow: auto;
    margin-bottom: 30px;
}

.direct-chat-msg, .direct-chat-text {
    display: block
}

.direct-chat-msg {
    margin-bottom: 10px
}

.direct-chat-msg:before, .direct-chat-msg:after {
    content: " ";
    display: table
}

.direct-chat-msg:after {
    clear: both
}

.direct-chat-messages, .direct-chat-contacts {
    -webkit-transition: -webkit-transform .5s ease-in-out;
    -moz-transition: -moz-transform .5s ease-in-out;
    -o-transition: -o-transform .5s ease-in-out;
    transition: transform .5s ease-in-out
}

.direct-chat-text {
    border-radius: 5px;
    position: relative;
    padding: 5px 10px;
    background: #d2d6de;
    border: 1px solid #d2d6de;
    margin: 5px 0 0 50px;
    color: #444;
    word-wrap: break-word;
}

.text-white {
    color: #ffffff !important
}

.direct-chat-text:after, .direct-chat-text:before {
    position: absolute;
    right: 100%;
    top: 15px;
    border: solid transparent;
    border-right-color: #d2d6de;
    content: ' ';
    height: 0;
    width: 0;
    pointer-events: none
}

.direct-chat-text:after {
    border-width: 5px;
    margin-top: -5px
}

.direct-chat-text:before {
    border-width: 6px;
    margin-top: -6px
}

.right .direct-chat-text {
    margin-right: 50px;
    margin-left: 0
}

.right .direct-chat-text:after, .right .direct-chat-text:before {
    right: auto;
    left: 100%;
    border-right-color: transparent;
    border-left-color: #d2d6de
}

.direct-chat-img {
    border-radius: 50%;
    float: left;
    width: 40px;
    height: 40px
}

.right .direct-chat-img {
    float: right
}

.direct-chat-info {
    display: block;
    margin-bottom: 2px;
    font-size: 12px
}

.direct-chat-name {
    font-weight: 600
}

.direct-chat-timestamp {
    color: #999
}

.direct-chat-contacts-open .direct-chat-contacts {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0)
}

.direct-chat-contacts {
    -webkit-transform: translate(101%, 0);
    -ms-transform: translate(101%, 0);
    -o-transform: translate(101%, 0);
    transform: translate(101%, 0);
    position: absolute;
    top: 0;
    bottom: 0;
    height: 250px;
    width: 100%;
    background: #222d32;
    color: #fff;
    overflow: auto
}

.direct-chat-primary .right > .direct-chat-text::after, .direct-chat-primary .right > .direct-chat-text::before {
    border-left-color: #2196f3;
}

/* Sticky footer styles
-------------------------------------------------- */

.footer {
    border-top: 1px solid #f4f4f4;
    bottom: 0;
    height: 80px;
    width: 100%;
    margin-top: -70px;
    background: #fff;
}

/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

.footer .container {
    width: auto;
    padding: 10px;
}

.footer .container .text-muted {
    margin: 20px 0;
}

.photo-remove {
    margin-right: 10px;
    margin-top: 10px;
    position: absolute;
    right: 0;
    top: 0;
}

.suggestion-photo {
    bottom: 75px;
    position: absolute;
}

.visitor-number {
    margin-right: 10px;
    position: absolute;
    right: 0;
    top: 0;
}

.visitor-badge {
    background-color: #999;
    color: #fff;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    min-width: 10px;
    padding: 7px;
    text-align: center;
    vertical-align: baseline;
    white-space: nowrap;
}

.profile-user-img {
    margin: 0 auto;
    width: 170px;
    padding: 3px;
    border: 3px solid #d2d6de;
}

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

.description-block {
    display: block;
    margin: 10px 0;
    text-align: center;
}

.description-block > .description-header {
    margin: 0;
    padding: 0;
    font-weight: 600;
    font-size: 16px;
}

.box .border-right {
    border-right: 1px solid #f4f4f4;
}

/*profile button style*/

.btn.btn-add-friends:hover {
    background-color: #59d4e4;
    color: #ffffff;
}

.btn.btn-send-message:hover {
    background-color: #8BC34A;
    color: #ffffff;
}

.btn.btn-like-profile:hover {
    background-color: #FF8AB7;
    color: #ffffff;
}

.btn.btn-add-friends, .btn.btn-send-message, .btn.btn-like-profile {
    background-color: #ffffff;
    border-radius: 50%;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    color: #999;
    font-size: 12px;
    height: 60px;
    line-height: 60px;
    margin: 0 0 10px 10px;
    width: 60px;
    padding-top: 19px;
    padding-left: 17px;
    position: relative;
    text-align: center;
}

.btn.btn-send-message-fav {
    background-color: #9F004D;
    border-radius: 50%;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    color: #999;
    font-size: 12px;
    height: 50px;
    line-height: 50px;
    margin: 0 0 10px 10px;
    width: 50px;
    padding-top: 17px;
    padding-left: 15px;
    position: relative;
    text-align: center;
}

/*profile button style*/

.carousel-inner > .item > img, .carousel-inner > .item > a > img {
    margin: 0 auto;
    width: 100%;
}

.online-dot, .online-dot-sm {
    background: #8bc34a none repeat scroll 0 0;
    border-radius: 50%;
    display: inline-block;
    min-height: 12px;
    min-width: 12px;
    vertical-align: middle;
}

.list-onlinedot {
    position: absolute !important;
    left: 47px !important;
    top: 15px !important;
}

.button-text {
    position: relative;
    top: -7px
}

.photo-text {
    font-size: 24px;
    position: relative;
    top: -15px;
    color: #ffffff;
}

.carousel-caption {
    padding-bottom: 10px;
    bottom: 0px;
    text-indent: 5px;
    margin: 0 auto;
}

/****login-register***/
.login-page, .register-page {

}

.login-box, .register-box {
    margin: 2% auto;
    width: 320px;
}

.login-box, .register-box .dropdown-menu {
    padding: 0 !important;
}

.login-logo, .register-logo {
    font-size: 35px;
    font-weight: 300;
    margin-bottom: 25px;
    text-align: center;
}

.login-box-body, .register-box-body {
    background: #fff none repeat scroll 0 0;
    border-top: 0 none;
    color: #666;
    padding: 20px;
}

.login-box-msg, .register-box-msg {
    margin: 0;
    padding: 0 20px 20px;
    text-align: center;
}

.login-box-body, .register-box-body {
    color: #666;
}

.has-feedback {
    position: relative;
}

.has-feedback .form-control {
    padding-right: 42.5px;
}

.form-control:not(select) {
    -moz-appearance: none;
}

.checkbox, .radio {
    display: block;
    margin-bottom: 10px;
    margin-top: 10px;
    position: relative;
}

.social-auth-links {
    margin: 10px 0;
}

.form-control-feedback {
    display: block;
    height: 34px;
    line-height: 34px;
    pointer-events: none;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    width: 34px;
    z-index: 2;
}

.landing {
    position: absolute;
    left: 0;
    top: 0;

    right: 0;
    background-size: cover;
    background-image: url(../img/landing.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-transition: opacity 3s ease-in-out;
    -moz-transition: opacity 3s ease-in-out;
    -o-transition: opacity 3s ease-in-out;
    transition: opacity 3s ease-in-out;
}

.landing2 {
    content: '';
    background-image: url(../img/banner2.jpg);
    z-index: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding-top: 30px;
    padding-bottom: 30px;
}

.landing-white {
    background-color: #ffffff;
    padding-bottom: 30px;
}

.landing-grey {
    background-color: #f9f9f9;
    padding-bottom: 30px;
}

.landing-grey .caption p {
    margin: 0px;
}

.btn-lg .caret {
    border-width: 8px 8px 0;
    border-bottom-width: 0;
    float: right;
    top: 9px;
    position: relative;
}

/****login-register***/
/****add by ahu***/

.bgm-read {
    /*background: #F4F4F4;*/
}

.m-pagination {
    height: 50px;
}

.m-pagination img {
    height: 32px;
    padding: 5px 5px;
}

.m-pagination .suggest-arrow {
    height: 48px !important;
    position: relative;
    top: 10px;
}

.m-pagination .material-icons {
    font-size: 30px;
    padding-top: 4px;
}

.m-pagination a:hover, .m-pagination a:focus, .m-pagination a:active {
    color: #9F004D;
}

hr {
    margin-top: 10px;
    margin-bottom: 10px;
}

.material-icons-list {
    margin-right: 3px;
    position: relative;
    top: 2px;
    font-size: 13px;
}

.f-l {
    float: left
}

.f-r {
    float: right
}

.fake-app-banner {
    position: relative;
    min-height: 80px;
    background: #fff;
    text-align: left;
    border-bottom: #e6ecf2;
    padding: 0 0 0 75px;
    top: 0;
    left: 0;
    -webkit-backface-visibility: hidden

}

.fake-app-banner .google-play-icon {
    background: url('../img/smart_web_sprite.png') no-repeat -155px -739px;
    width: 125px;
    height: 128px;
    position: absolute;
    left: -19px;
    overflow: hidden;
    transform: scale(0.40);
    transform-origin: top;
    -webkit-transform: scale(0.4);
    -webkit-transform-origin: top;
    top: 79px;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
}


.fake-app-banner .close {
    position: absolute;
    top: 0;
    left: 0;
    padding: 5px;
    width: 60px;
    height: 60px;
}

.fake-app-banner .contents {
    display: inline-block;
    margin-right: 36%;
    margin-top: 10px;
}

.fake-app-banner span.title {
    color: #14171b;
    font-size: 13px;
    width: 100%;
}

.fake-app-banner span {
    display: block;
    color: #888;
    font-size: 10.5px;
    line-height: 14px;
    margin-bottom: 4px;
    font-family: "Helvetica Neue", Helvetica, Helvetica, Arial, sans-serif;
}

.fake-app-banner .rating-stars {
    background: url('../img/smart_web_sprite.png') no-repeat -22px -837px;
    width: 100px;
    height: 19px;
    background-repeat: no-repeat;
    display: inline-block;
    transform: scale(0.45);
    -moz-transform: scale(0.45);
    -moz-transform-origin: 0 0;
    -webkit-transform: scale(0.45);
}

.fake-app-banner .close .close-icon {
    background: url('../img/smart_web_sprite.png') no-repeat -449px -546px;
    width: 28px;
    height: 28px;
    position: absolute;
    -moz-transform: scale(.4);
    -moz-transform-origin: 0 0;
    -ms-transform: scale(.4);
    -ms-transform-origin: 0 0;
    -webkit-transform: scale(.4);
    -webkit-transform-origin: 0 0;
}

.fake-app-banner .buttons {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 2px;
    width: 30%;
    height: 100%;
}

.fake-app-banner .button-wrap {
    margin-top: auto;
    margin-bottom: auto;
    margin-right: 10px;
    margin-left: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    height: 60px;
    text-align: center;
}

.fake-app-banner.android .google-play-button {
    color: #a4c739;
    border: 1px solid #a4c739;
}

.aligner {
    display: flex;
    align-items: center;
    justify-content: center;
}

.edit-profile-item {
    color: #2196f3;
}

/* centered columns styles */
.row-centered {
    text-align: center;
    margin-left: 0px;
    margin-right: 0px;
}

.col-centered {
    display: inline-block;
    float: none;
    /* reset the text-align */
    text-align: left;
    /* inline-block space fix */
    margin-right: -4px;
    padding-left: 5px;
    padding-right: 5px;
}

.col-centered-landing {
    float: none;
    margin: 0 auto;
}

.col-fixed {
    /* custom width */
    width: 320px;
}

.col-min {
    /* custom min width */
    min-width: 320px;
}

.col-max {
    /* custom max width */
    max-width: 320px;
}

.item-panel {
    width: 100%;
    height: 100%;
    border: 1px solid #D64163;
    padding: 10px 8px 0px 8px;
    background: #D64163;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #D64163), color-stop(100%, #D64163));
    background: -moz-linear-gradient(top, #9F004D 0%, #9F004D 100%);
    background: -ms-linear-gradient(top, #9F004D 0%, #9F004D 100%);
    color: #ffffff;
    border-radius: 4px;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.35);
}

.item-panel:active {
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.35);
    transform: translateY(1px);
}

/* content styles */
.item-panel {
    display: table;
}

.content-panel {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    height: 80px;
}

.content-panel:before {
    font-family: sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    color: #ffffff;
}

.content-panel > .badge {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 13px;
    font-weight: bold;
    z-index: 1031;
}

.panel-text {
    height: 30px;
    line-height: 1.1em;
    padding-top: 3px;
    font-size: 1.1em;
}

.message_number {
    display: inline-block;
    position: absolute;
    top: 1px;
    z-index: 9999;
    right: 58px;
    padding: 5px;
}

.arrow > img {
    width: 30px;
}

.arrow {
    position: relative;

}

.bounce {
    -webkit-animation-name: bounce;
    -moz-animation-name: bounce;
    -webkit-animation-duration: 0.5s;
    -moz-animation-duration: 0.5s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -moz-animation-direction: alternate;
    -webkit-animation-timing-function: eaze-in-out;
    -moz-animation-timing-function: eaze-in-out;
}

.btn-group-lg > .btn, .btn-lg {
    font-size: 15px;

}

.unregistered-user {
    top: -15px;
}

@-webkit-keyframes bounce {
    from {
        left: -0.5em;
    }
    to {
        left: 0.5em;
    }
}

@-moz-keyframes bounce {
    from {
        left: -0.5em;
    }
    to {
        left: 0.5em;
    }
}

@media (min-width: 1200px) {
    h1 {
        font-size: 48px;
    }

    .h3, h3 {
        font-size: 32px;
    }

    .landing2 {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .register-page p {
        font-size: 24px;
    }

    .register-page a {
        font-size: 20px;
    }

}

@media (min-width: 900px) {

    .register-page .hcenter, .register-page .container {
        max-width: 700px;
        margin: 0 auto;
        border-left: 1px solid #cccccc;
        border-right: 1px solid #cccccc;
        border-bottom: 1px solid #cccccc;
    }

    .register-page .header {
        max-width: 700px;
        margin: 0 auto;
        border-left: 1px solid #9F004D;
        border-right: 1px solid #9F004D;
    }

    .landing2 {
        padding-top: 80px;
        padding-bottom: 80px;
    }

}

@media (min-width: 768px) {
    .container {
        width: 100%;
    }

    .panel-text {
        height: 64px;
        line-height: 48px;
        padding-top: 3px;
        font-size: 24px;
    }

    .icon-panel {
        transform: scale(0.6);
        -webkit-transform: scale(0.6);
        -moz-transform: scale(0.6);
        -moz-transform-origin: 0 0;
        margin-bottom: -10px;
        margin-top: -10px;
    }

    .content-panel > .badge {
        top: 20px;
        right: 20px;
        font-size: 25px;
        padding: 5px 9px;
        border-radius: 20px;
    }

    .item-panel {
        padding: 25px 8px 0px 8px;
    }

    .landing-text-button {
        font-size: 24px;
    }

    .h3, h3 {
        font-size: 32px;
    }

    .landing-grey .caption p {
        margin: auto;
        font-size: 20px;
    }

    #all-langs-list a, .landing-footer-list a, .footer p {
        font-size: 20px;
        padding-top: 5px;
        padding-bottom: 5px;
    }

}
.uppercase{
    text-transform: uppercase
}
.box-border{
    border-bottom:1px solid #f4f4f4
}

.width-pct-50{
    width: 50%;
}
.text-muted
{
    word-wrap: break-word;
}

.notifications-top-ad-holder
{
    margin-top: 5px;
    margin-bottom: 5px;
}

.notifications-inline-ad-holder
{

}


.message-top-ad-holder
{
    margin-top: 5px;
    margin-bottom: 5px;
}

.message-inline-ad-holder
{

}

.friends-inline-ad-holder
{

}


@media screen and (max-width: 340px){
    .notifications-top-ad-holder
    {
        margin-top: 5px;
        margin-bottom: 5px;
        min-width: 320px;
        overflow-x: auto;
        left: -15px;
        position: relative;
    }

    .notifications-inline-ad-holder
    {
        min-width: 320px;
        overflow-x: auto;
        left: -25px;
        position: relative;
        background-color: white;
    }

    .message-top-ad-holder
    {
        margin-top: 5px;
        margin-bottom: 5px;
        min-width: 320px;
        overflow-x: auto;
        left: -15px;
        position: relative;
    }

    .message-inline-ad-holder
    {
        min-width: 320px;
        overflow-x: auto;
        left: -25px;
        position: relative;
        background-color: white;
    }

    .friends-inline-ad-holder
    {
        min-width: 320px;
        overflow-x: auto;
        left: -25px;
        position: relative;
        background-color: white;
    }

    .profile-inline-ad-holder
    {
        min-width: 336px;
        overflow-x: auto;
        left: -15px;
        position: relative;
    }
}

.scale-left-top
{
    transform-origin: left top;
    -webkit-transform-origin: left top;
}

.scale-right-top
{
    transform-origin: right top;
    -webkit-transform-origin: right top;
}

#anchor-ad {
    position:fixed;
    left:0px;
    bottom:0px;
    height:50px;
    line-height: 50px;
    width:100%;
    background:#999;
    text-align: center;
    z-index: 1032;
}

/* IE 6 */
* html #anchor-ad {
    position:absolute;
    top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

.vip-blur {
    -webkit-filter: blur(3px);
    border:1px #cccccc;
}
.vip-lock {
    z-index:1031;
    position: absolute;
    top: 43%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}

.vip-badge-list-item
{
    z-index:1031;
    position: absolute;
    top: 20px;
    left: 20px;
    transform: translate(-70%, -70%);
}

.vip-badge-message-list-item
{
    z-index:1031;
    position: relative;
    top: 30px;
    left: 5px;
    transform: translate(-70%, -70%);
}

.vip-badge-message-read-item
{
    z-index:1031;
    position: relative;
    top: 30px;
    left: 5px;
    transform: translate(-70%, -70%);
}

.vip-badge-suggestion
{
    z-index:1031;
    position: absolute;
    top: 25px;
    right: 0px;
    transform: translate(-50%, -50%);
}

.vip-badge-profile
{
    z-index:1031;
    position: absolute;
    top: 25px;
    right: 0px;
    transform: translate(-50%, -50%);
}

.attachment-block{
    position: relative;
}
.attachment-block .vip-badge {
    position: absolute;
    top: 5px;
    left: 10px;
    width: 16px;
    height:16px;
    z-index: 99999;
}
.attachment-block .vip-badge img {
    width: 16px;
    height:16px;
}
.attachment-block .profile-photo {
    position: absolute;
}


.video-container {
    position: relative;
}

video {
    height: auto;
    vertical-align: middle;
    width: 100%;
}

.overlay-play {
    background: rgba(0, 0, 0, 0);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.overlay-container {
    position: relative;
}

.overlay-play {
    background: rgba(0, 0, 0, 0);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.p-r-0
{
    padding-right: 0px;
}

.p-r-5
{
    padding-right: 5px;
}

.p-l-r-0
{
    padding-left: 0px;
    padding-right: 0px;
}

.p-l-r-5
{
    padding-left: 5px;
    padding-right: 5px;
}

.m-b-30
{
    margin-bottom: 30px;
}

.p-l-15
{
    padding-left: 15px;
}

.m-b-5{
    margin-bottom: 5px;
}

.story-border-image {
    padding: 1px;
    border-radius: 50%;
    background: linear-gradient(#ff0029, #E87F58, #D10086);
    border-image-slice: 1;
    width: 60px;
    height: 60px;
}

.fix-cookie-statement
{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    width: 100%;
}
.cookie-statement {
    position: relative;
    max-height: 80px;
    opacity: 0.95;
    background: slategray;
    color: #fff;
    text-align: center;
    border-bottom: #e6ecf2;
    padding: 5px;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 11px;
    -webkit-backface-visibility: hidden

}

.cookie-statement .btn
{
    font-size: 10px !important;
}

.photo-container {
    display: block;
    overflow: hidden;
}

.photo-container * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.photo-span, .photo-span a {
    display: block;
    overflow: hidden;
}

.photo-span {
    float: left;
    width: calc(50vw - 15px);
    height: calc(50vw - 15px);
    position: relative;
    padding: 3px;

}

.photo-span a {
    border-radius: 4px;
    width: 100%;
    height: 100%;
    position: relative
}

.photo-span a img {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    object-fit:cover;
}

.ps-selected {
    display: block;
    overflow: hidden;
    width: 40px;
    height: 40px;
    border-radius: 100px;
    background:#8dc550;
    position: absolute;
    bottom: 6px;
    right: 6px;
    visibility: visible;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    webkit-box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.24);
    -moz-box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.24);
    box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.24);


}

.ps-selected .glyphicon-ok {
    color: #FFF;
    margin: 12px 0 0 12px;
    visibility: visible;
    opacity: 1;

}

.ps-selected.off {
    background:#FFF;
    -moz-background-clip: content;
    -webkit-background-clip: content;  /* Safari 4? Chrome 6? */
    background-clip: content-box;
    border:2px solid rgba(0, 0, 0, 0.3);

}

.ps-selected.off .glyphicon-ok {
    visibility:hidden; opacity:0;
}


/*mo-web*/
.mo_container {
    margin: -15px;
}
.roboto {
    font-family: 'Roboto', sans-serif;
}
.robotoC {
    font-family: 'Roboto Condensed', sans-serif;
}
.fl {
    float: left;
}
.fr {
    float: right;
}
.mb4 {
    margin-bottom: 4px;
}
.mb8 {
    margin-bottom: 8px;
}
.mb12 {
    margin-bottom: 12px;
}
.mb16 {
    margin-bottom: 16px;
}
.mb24 {
    margin-bottom: 24px;
}
.mt4 {
    margin-top: 4px !important;
}
.mt8 {
    margin-top: 8px !important;
}
.ml8 {
    margin-left: 8px;
}
.nowrap {
    white-space: nowrap;
}
.fs14 {
    font-size: 14px !important;
}
.pb0 {
    padding-bottom: 0 !important;
}
.pt0 {
    padding-top: 0 !important;
}
.pr {
    position: relative;
}
.borderNone {
    border: none !important;
}
.mo_container {
    color: #2A2A22;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    line-height: normal;
    letter-spacing: -0.2px;
    outline: none;
    -webkit-touch-callout: none;
    -webkit-font-smoothing: antialiased;
}
.mo_container * {
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.mo_container ul,
.mo_container ul li {
    margin: 0;
    padding: 0;
}
.mo_container input:focus {
    outline: none;
}
.mo_all {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}
.mo_ad {
    display: block;
    overflow: hidden;
    background-color: #f9f9f9;
    border-bottom: 1px solid #EEE;
}
.mo_ad.fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: #FFF;
    z-index: 100;
    -webkit-box-shadow: 0px -4px 16px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px -4px 16px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px -4px 16px 0px rgba(0, 0, 0, 0.1);
}
.mo_ad.fixed .mo_addContainer {
    display: block;
    overflow: hidden;
    width: 320px;
    height: 50px;
    margin: 0 auto;
}
.mo_ad.bottomMargin {
    margin-bottom: 58px;
}
.mo_userPhotoArea {
    display: block;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: auto;
    z-index: 1;
}
.mo_userPhotoArea::before,
.mo_photoList.forList li::before,
.matchInside::before {
    content: "";
    display: block;
    overflow: hidden;
    width: 100%;
    height: 85px;
    position: absolute;
    bottom: 0;
    background: #000000;
    background: -moz-linear-gradient(0deg, rgba(0, 0, 0, 0.64) 0%, rgba(255, 255, 255, 0) 100%, rgba(255, 255, 255, 0) 100%);
    background: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0.64) 0%, rgba(255, 255, 255, 0) 100%, rgba(255, 255, 255, 0) 100%);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.64) 0%, rgba(255, 255, 255, 0) 100%, rgba(255, 255, 255, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000", endColorstr="#ffffff", GradientType=1);
}
.mo_userPhotoArea .mo_userPhoto,
.mo_photoList.forList li .mo_userPhoto,
.matchInside .mo_userPhoto {
    width: 100%;
    height: auto;
    object-fit: cover;
}
.mo_content {
    display: block;
    overflow: hidden;
    width: 100%;
    background-color: #FFF;
    -webkit-border-radius: 16px 16px 0 0;
    -moz-border-radius: 16px 16px 0 0;
    border-radius: 16px 16px 0 0;
    position: relative;
    top: -16px;
    z-index: 2;
    margin-bottom: -16px;
    -webkit-box-shadow: 0px -8px 16px 0px rgba(0, 0, 0, 0.16);
    -moz-box-shadow: 0px -8px 16px 0px rgba(0, 0, 0, 0.16);
    box-shadow: 0px -8px 16px 0px rgba(0, 0, 0, 0.16);
}
.mo_content.mo_woTop {
    top: 0;
    margin-bottom: 0;
}
.mo_section {
    display: block;
    overflow: hidden;
    padding: 16px 16px;
    position: relative;
}
.mo_section.mo_topBar {
    height: 56px;
    width: 100%;
}
.mo_section.mo_fixedBar {
    height: 56px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    background: rgba(0, 0, 0, 0.6);
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.6)), color-stop(100%, rgba(0, 0, 0, 0)));
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000', GradientType=0);
}
.mo_section.mo_fixedBar .mo_leftIcon {
    margin-right: 32px;
}
.mo_section.withBorder {
    border-bottom: 1px solid #EEE;
}
.mo_section .mo_title {
    display: block;
    overflow: hidden;
    margin-bottom: 4px;
}
.mo_section .mo_title b {
    font-size: 21px;
    font-weight: 700;
}
.mo_section .mo_title .mo_miniNumber {
    font-weight: 300;
    color: rgba(42, 42, 34, 0.54);
}
.mo_badge {
    display: block;
    overflow: hidden;
    width: 24px;
    height: 24px;
}
.mo_badge.fl {
    margin-right: 4px;
}
.mo_badge.mo_verified {
    background: url(../img/profile/ic_verified_24px.png);
}
.mo_icText {
    display: block;
    overflow: hidden;
    font-size: 15px;
    color: rgba(42, 42, 34, 0.7);
}
.mo_icText .mo_ic {
    display: block;
    overflow: hidden;
    float: left;
    width: 24px;
    height: 24px;
    margin-right: 4px;
}
.mo_icText b {
    display: block;
    padding-top: 3px;
}
.mo_secTitle {
    display: block;
    overflow: hidden;
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 12px;
}
.mo_secTitle b {
    color: rgba(42, 42, 34, 0.54);
    font-weight: 200;
    font-size: 14px;
}
.mo_text {
    display: block;
    font-size: 15px;
    line-height: 1.27;
    letter-spacing: -0.2px;
    color: rgba(42, 42, 34, 0.7);
    position: relative;
}
.mo_text b {
    font-weight: 500;
    color: #2A2A22;
}
.mo_text .mo_date {
    position: absolute;
    top: 3px;
    right: 0;
    font-size: 12px;
    font-style: normal;
}
.mo_textList {
    display: block;
    overflow: hidden;
}
.mo_textList.forMore {
    visibility: hidden;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=(0));
    filter: alpha(opacity = (0));
    opacity: 0;
    display: none;
}
.mo_textList li {
    display: block;
    overflow: hidden;
    margin-bottom: 6px !important;
}
.mo_line {
    display: block;
    overflow: hidden;
    width: calc(100% - 32px);
    width: -webkit-calc(100% - 32px);
    width: -moz-calc(100% - 32px);
    height: 1px;
    margin-left: 16px;
    background-color: #EEE;
}
.mo_line.mo_in {
    width: 100%;
    margin-left: 0;
}
.mo_titlePager {
    display: block;
    overflow: hidden;
    position: absolute;
    right: 16px;
    top: 14px;
}
.mo_titlePager .mo_next.disabled,
.mo_titlePager .mo_prev.disabled {
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=(24));
    filter: alpha(opacity = (24));
    opacity: 0.24;
}
.mo_titlePager .mo_prev {
    float: left;
    margin-right: 4px;
}
.mo_titlePager.mo_insideTitle {
    top: 16px;
}
.mo_messageList {
    display: block;
    overflow: hidden;
}
.mo_messageList li {
    display: block;
    overflow: hidden;
    padding: 8px 0 8px 0 !important;
    border-bottom: 1px solid #EEE;
    position: relative;
}
.mo_messageList li .mo_ppCircle {
    width: 54px;
    height: 54px;
    float: left;
    margin-right: 8px;
}
.mo_messageList li .mo_mlContainer {
    display: block;
    overflow: hidden;
    margin-top: 8px;
}
.mo_messageList li:last-of-type {
    border-bottom: none;
}
.mo_messageList li .mo_delete {
    position: absolute;
    top: 6px;
    left: 32px;
}
.mo_ppCircle {
    display: block;
    overflow: hidden;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
}
.mo_ppCircle img {
    width: 100%;
    height: auto;
    object-fit: cover;
}
.mo_messageWrite {
    display: block;
    overflow: hidden;
    margin-top: 12px;
    position: relative;
}
.mo_messageWrite .mo_messageText {
    width: 100%;
    height: 40px;
    -webkit-border-radius: 44px;
    -moz-border-radius: 44px;
    border-radius: 44px;
    background-color: #EEE;
    padding: 12px 54px 12px 16px;
    font-size: 15px;
    border: none !important;
}
.mo_messageWrite .mo_send {
    position: absolute;
    right: 16px;
    top: 8px;
}
/*------ICONS-----*/
.mo_ic {
    display: block;
    overflow: hidden;
    width: 24px;
    height: 24px;
}
.mo_ic.mo_send {
    background: url(../img/profile/ic_send_24px.png);
}
.mo_ic.mo_delete {
    background: url(../img/profile/ic_delete_red_24px.png);
}
.mo_ic.mo_edit {
    background: url(../img/profile/ic_edit_red_24px.png);
}
.mo_ic.mo_next {
    background: url(../img/profile/ic_next_mini_24px.png);
}
.mo_ic.mo_prev {
    background: url(../img/profile/ic_prev_mini_24px.png);
}
.mo_ic.mo_location {
    background: url(../img/profile/ic_location_24px.png);
}
.mo_ic.mo_location.ic_white {
    background: url(../img/match/ic_location_white_24px.png);
}
.mo_ic.mo_back {
    background: url(../img/profile/ic_arrow_left_white_24px.png);
    margin-right: 16px;
}
.mo_ic.mo_back_black {
    background: url(../img/profile/ic_arrow_left_black_24px.png);
    margin-right: 16px;
}
.mo_ic.mo_trash {
    background: url(../img/profile/ic_trash_red_24px.png);
}
.mo_ic.mo_face {
    background: url(../img/profile/ic_face_purple_24px.png);
}
.mo_ic.mo_arrowRight {
    background: url(../img/profile/ic_arrow_right_black_24px.png);
}
.mo_ic.mo_report {
    background: url(../img/profile/ic_report_black_24px.png);
}
.mo_ic.mo_online {
    background-color: #6CEE2B;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    border-radius: 24px;
    width: 10px;
    height: 10px;
    position: relative;
    top: 7px;
    left: 4px;
}
.mo_ic.mo_icFb {
    background: url(../img/register/ic_facebook.png);
}
.mo_ic.mo_icGoogle {
    background: url(../img/register/ic_google.png);
}
.mo_ic_addPhoto {
    display: block;
    overflow: hidden;
    width: 118px;
    height: 118px;
    background: url(../img/profile/ic_add_photo_100px.png);
}
/*------ICONS END-----*/
.mo_secIc,
.mo_bottomIc {
    position: absolute;
    right: 16px;
}
.mo_secIc {
    top: 14px;
}
.mo_bottomIc {
    bottom: 32px;
}
.mo_section.pt0 .mo_secIc {
    top: -2px;
}
.mo_photoList {
    display: block;
    overflow: hidden;
    width: 100%;
    position: relative;
}
.mo_photoList li {
    display: block;
    overflow: hidden;
    float: left;
    width: calc(25% - 2px);
    width: -webkit-calc(25% - 2px);
    width: -moz-calc(25% - 2px);
    height: calc(25vw - 10px);
    height: -webkit-calc(25vw - 10px);
    height: -moz-calc(25vw - 10px);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    margin: 1px !important;
    position: relative;
}
.mo_photoList li a {
    display: block;
    overflow: hidden;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.mo_photoList li a img {
    width: calc(100%);
    width: -webkit-calc(100%);
    width: -moz-calc(100%);
    height: auto;
    object-fit: cover;
}
.mo_photoList li.mo_addPhoto::before {
    display: none;
}
.mo_photoList li.mo_addPhoto .mo_ic_addPhoto {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -55px;
    margin-left: -59px;
}
.mo_photoList li.mo_listNumber {
    position: absolute;
    bottom: 0;
    right: 0;
}
.mo_photoList li.mo_listNumber a {
    display: table;
    width: 100%;
    height: 100%;
}
.mo_photoList li.mo_listNumber a b {
    display: table-cell;
    color: #FFF;
    font-size: 19px;
    font-weight: 500;
    text-align: center;
    vertical-align: middle;
}
.mo_photoList li.mo_addPhoto,
.mo_photoList li.mo_listNumber {
    background: #6fc8ff;
    background: -moz-linear-gradient(0deg, rgba(111, 200, 255, 0.8) 0%, rgba(127, 255, 212, 0.8) 100%);
    background: -webkit-linear-gradient(0deg, rgba(111, 200, 255, 0.8) 0%, rgba(127, 255, 212, 0.8) 100%);
    background: linear-gradient(0deg, rgba(111, 200, 255, 0.8) 0%, rgba(127, 255, 212, 0.8) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#6fc8ff", endColorstr="#7fffd4", GradientType=1);
}
.mo_photoList.forList li {
    width: calc(50% - 2px);
    width: -webkit-calc(50% - 2px);
    width: -moz-calc(50% - 2px);
    height: calc(50vw - 18px);
    height: -webkit-calc(50vw - 18px);
    height: -moz-calc(50vw - 18px);
}
.mo_button {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 44px;
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    -webkit-border-radius: 44px;
    -moz-border-radius: 44px;
    border-radius: 44px;
    padding-top: 14px;
}
.mo_button.mo_blue {
    color: #FFF;
    background: #6fc8ff;
    background: -moz-linear-gradient(0deg, rgba(111, 200, 255, 0.8) 0%, #4bcde1 100%);
    background: -webkit-linear-gradient(0deg, rgba(111, 200, 255, 0.8) 0%, #4bcde1 100%);
    background: linear-gradient(0deg, rgba(111, 200, 255, 0.8) 0%, #4bcde1 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#6fc8ff", endColorstr="#4bcde1", GradientType=1);
}
.mo_profileActions {
    display: block;
    overflow: hidden;
    width: 258px;
    margin: 0 auto;
}
.mo_profileActions.mo_sticky {
    position: fixed;
    bottom: 32px;
    left: 50%;
    margin-left: -129px;
    z-index: 3;
}
.mo_profileActions .mo_ic_action,
.mo_photoActions .mo_ic_action {
    display: block;
    overflow: hidden;
    float: left;
    background: url(../img/profile/ic_profile_actions.png);
    width: 86px;
    height: 86px;
}
.mo_profileActions .mo_ic_action.mo_addFriend,
.mo_photoActions .mo_ic_action.mo_addFriend {
    background-position: 0 0;
}
.mo_profileActions .mo_ic_action.mo_addFriend.clicked,
.mo_photoActions .mo_ic_action.mo_addFriend.clicked {
    background-position: 0 -100px;
}
.mo_profileActions .mo_ic_action.mo_addFriend.pending,
.mo_photoActions .mo_ic_action.mo_addFriend.pending {
    background-position: 0 -200px;
}
.mo_profileActions .mo_ic_action.mo_addFriend.newRequest,
.mo_photoActions .mo_ic_action.mo_addFriend.newRequest {
    background-position: 0 -300px;
}
.mo_profileActions .mo_ic_action.mo_message,
.mo_photoActions .mo_ic_action.mo_message {
    background-position: -100px 0;
}
.mo_profileActions .mo_ic_action.mo_like,
.mo_photoActions .mo_ic_action.mo_like {
    background-position: -200px 0;
}
.mo_profileActions .mo_ic_action.mo_like.clicked,
.mo_photoActions .mo_ic_action.mo_like.clicked {
    background-position: -200px -100px;
}
.mo_profileActions .mo_ic_action.mo_dislike,
.mo_photoActions .mo_ic_action.mo_dislike {
    background-position: -200px 0;
}
.mo_photoActions {
    display: block;
    overflow: hidden;
    width: 100%;
    position: absolute;
    bottom: 28px;
}
.mo_photoActions .mo_ic_action {
    float: none;
    margin: 0 auto;
}
.mo_photoActions .mo_count {
    display: block;
    overflow: hidden;
    margin: 0 auto;
    color: #FFF;
    font-size: 21px;
    text-align: center;
    font-weight: 700;
    letter-spacing: -1px;
}
.mo_showMore {
    display: inline-block;
    font-size: 13px;
    color: #6FC8FF;
    font-weight: 500;
}
.sh {
    visibility: visible !important;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=(100)) !important;
    filter: alpha(opacity = (100)) !important;
    opacity: 1 !important;
}
.photoList_iconArea {
    position: absolute;
    bottom: 8px;
    right: 8px;
}
.photoList_iconArea .mo_ic {
    float: right;
    margin-left: 8px;
}
.mo_photoPager {
    display: block;
    overflow: hidden;
}
.mo_photoPager a {
    display: block;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 80px;
    height: 100%;
}
.mo_photoPager a::before {
    content: '';
    display: block;
    overflow: hidden;
    background: url(../img/profile/ic_bigArrows_white_60px.png);
    width: 60px;
    height: 60px;
    position: absolute;
    top: 50%;
    margin-top: -30px;
}
.mo_photoPager .ic_leftArrow_big {
    left: 0;
    background: #000000;
    background: -moz-linear-gradient(90deg, rgba(0, 0, 0, 0.24) 0%, rgba(255, 255, 255, 0) 100%);
    background: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0.24) 0%, rgba(255, 255, 255, 0) 100%);
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.24) 0%, rgba(255, 255, 255, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000", endColorstr="#ffffff", GradientType=1);
}
.mo_photoPager .ic_leftArrow_big::before {
    background-position: 0 0;
}
.mo_photoPager .ic_rightArrow_big {
    right: 0;
    background: #ffffff;
    background: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.24) 100%);
    background: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.24) 100%);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.24) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#000000", GradientType=1);
}
.mo_photoPager .ic_rightArrow_big::before {
    background-position: -60px 0;
    right: 0;
}
/*----- REGISTER -----*/
.mo_container.mo_forRegister .mo_ad {
    border-top: 1px solid #EEE;
}
.mo_container.mo_forRegister .mo_all {
    padding: 46px 8px 8px 8px;
    z-index: 99;
    margin-top: 8px;
    margin-bottom: 8px;
    border-top: 1px solid #6FC8FF;
    border-bottom: 1px solid #6FC8FF;
    overflow: hidden;
    -webkit-border-radius: 32px;
    -moz-border-radius: 32px;
    border-radius: 32px;
    height: auto !important;
}
.mo_container.mo_forRegister .mo_all .mo_content {
    -webkit-border-radius: 32px;
    -moz-border-radius: 32px;
    border-radius: 32px;
    padding-top: 38px;
    top: inherit;
    margin-bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0px 0 16px 0px rgba(0, 0, 0, 0.16);
    -moz-box-shadow: 0px 0 16px 0px rgba(0, 0, 0, 0.16);
    box-shadow: 0px 0 16px 0px rgba(0, 0, 0, 0.16);
}
.mo_registerText {
    display: block;
    overflow: hidden;
    padding: 0 32px 24px 32px;
    font-size: 24px;
    letter-spacing: 2px;
    text-align: center;
    color: #FFF;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 400;
}
.mo_registerText b {
    display: block;
    overflow: hidden;
    margin: 8px 0;
    font-size: 24px;
    font-weight: 300;
}
.mo_button.mo_rb,
.mo_button.mo_fb {
    border-width: 2px;
    border-style: solid;
    height: 40px;
    font-weight: 700;
    letter-spacing: 1px;
    padding-top: 9px;
    color: #FFF;
    position: relative;
}
.mo_button.mo_rb i,
.mo_button.mo_fb i {
    position: absolute;
    top: 6px;
    left: 16px;
}
.mo_button.mo_rb {
    border-color: #7DD9E8;
}
.mo_button.mo_fb {
    color: #FFF;
    border-color: #7D98D0;
    background: #3b5998;
    background: -moz-linear-gradient(45deg, #3b5998 0%, #6288d8 100%);
    background: -webkit-linear-gradient(45deg, #3b5998 0%, #6288d8 100%);
    background: linear-gradient(45deg, #3b5998 0%, #6288d8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3b5998", endColorstr="#6288d8", GradientType=1);
}
.mo_button.mo_google {
    border-color: #E47881;
    background: #d34836;
    background: -moz-linear-gradient(45deg, #d34836 0%, #e04e75 100%);
    background: -webkit-linear-gradient(45deg, #d34836 0%, #e04e75 100%);
    background: linear-gradient(45deg, #d34836 0%, #e04e75 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d34836", endColorstr="#e04e75", GradientType=1);
}
.mo_wHeart {
    display: block;
    overflow: hidden;
    background: url(../img/register/wHeart.png) no-repeat;
    width: 100px;
    height: 100px;
    background-size: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -50px;
    z-index: 100;
}
.mo_wText {
    display: block;
    overflow: hidden;
    background: url(../img/register/wText.png) no-repeat;
    width: 124px;
    height: 30px;
    margin: 0 auto 16px auto;
}
.mo_registerImg {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.mo_registerImg img {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mo_container.forMatch {
    width: 100%;
    height: 100%;
    min-height: 100%;
    position: absolute;
    margin: 0;
}
.mo_container.forMatch .mo_all {
    padding: 0 10px 10px 10px;
}
.matchHeader {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 48px;
}
.matchHeader .matchLogo {
    display: block;
    overflow: hidden;
    background: url(../img/match/matchLogo.png) no-repeat;
    width: 70px;
    height: 16px;
    margin: 15px auto 0 auto;
}
.matchHeader .waplogLogo {
    display: block;
    overflow: hidden;
    background: url(../img/match/waplog_logo.png) no-repeat;
    width: 70px;
    height: 16px;
    margin: 15px auto 0 auto;
}
.matchInside {
    display: block;
    overflow: hidden;
    background-color: #FFF;
    width: 100%;
    height: calc(100% - 48px);
    height: -webkit-calc(100% - 48px);
    height: -moz-calc(100% - 48px);
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
    position: relative;
    -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
    -moz-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
}
.matchInside.withBg {
    background-color: #323232;
    padding-top: 40px;
}
.matchInside.withBg .itsamatch {
    display: block;
    overflow: hidden;
    font-family: 'Pacifico', cursive;
    font-size: 38px;
    text-align: center;
    color: #FFF;
}
.matchInside.withBg .itsamatch_sub {
    display: block;
    overflow: hidden;
    font-size: 15px;
    font-weight: 400;
    text-align: center;
    color: #FFF;
}
.matchInside.withBg .itsamatch_profiles {
    display: block;
    overflow: hidden;
    width: 280px;
    margin: 20px auto;
}
.matchInside.withBg .itsamatch_profiles .itsamatch_pp {
    display: block;
    overflow: hidden;
    float: left;
    width: 100px;
    height: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    border: 2px solid #FFF;
    object-fit: cover;
    margin: 20px;
}
.matchInside.emptyState {
    background-color: #FFF;
}
.matchInside.emptyState::before {
    display: none;
}
.matchInside.emptyState .itsamatch_sub {
    font-size: 17px;
    font-weight: 500;
    color: #2A2A22;
}
.matchInside.emptyState .refreshButton {
    position: absolute;
    bottom: 0;
    width: 100%;
}
.matchInside .matchImg {
    width: 100%;
    height: 100vw;
}
.matchInside .matchImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.matchInside::before {
    height: 200px;
}
.mo_section.matchTitle {
    position: absolute;
    width: 100%;
    bottom: 0;
    z-index: 100;
    padding-bottom: 8px;
}
.mo_section.matchTitle .mo_title {
    color: #FFF;
    margin-bottom: 0;
}
.mo_section.matchTitle .mo_title b {
    font-weight: 500;
}
.mo_section.matchTitle .mo_icText {
    color: #FFF;
}
.mo_section.matchTitle .mo_icText b {
    font-weight: 500;
}
.matchActions {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 80px;
    margin-top: 15px;
}
.matchActions .matchActions_inside {
    display: block;
    width: 148px;
    margin: 0 auto;
}
.circleButton {
    display: block;
    overflow: hidden;
    width: 64px;
    height: 64px;
    background: #FFF;
    -webkit-border-radius: 64px;
    -moz-border-radius: 64px;
    border-radius: 64px;
    -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
    -moz-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
}
.circleButton.fl {
    margin-right: 20px;
}
.circleButton .ic_matchActions {
    display: block;
    overflow: hidden;
    width: 34px;
    height: 34px;
    margin: 15px auto;
    background: url(../img/match/actions.png) no-repeat;
}
.circleButton .ic_matchActions.matchDislike {
    background-position: 0 0;
}
.circleButton .ic_matchActions.matchLike {
    background-position: -40px 0;
}
.circleButton:active {
    -webkit-transform: scale(0.75, 0.75);
    -ms-transform: scale(0.75, 0.75);
    transform: scale(0.75, 0.75);
}
:root {
    --color-1: #fa5f5f;
    --color-04: rgba(250, 95, 95, 0.6);
    --color-00: rgba(250, 95, 95, 0.3);
}
.circle {
    display: block;
    overflow: hidden;
    width: 250px;
    height: 250px;
    margin: 0 auto;
}
.circle::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--color-1);
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: cdot linear 1s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}
.circle .wave,
.circle .wave2 {
    position: absolute;
    background: var(--color-04);
    border-radius: 50%;
    opacity: 0;
    animation-iteration-count: infinite;
}
.circle .wave::after,
.circle .wave2::after {
    content: '';
    position: absolute;
    background: var(--color-04);
    border-radius: 50%;
    opacity: 0;
}
.circle .wave {
    left: 7%;
    top: 7%;
    width: 86%;
    height: 86%;
    animation: radarWave cubic-bezier(0, 0.54, 0.53, 1) 2s 0s;
    animation-iteration-count: infinite;
}
.circle .wave::after {
    left: 7%;
    top: 7%;
    width: 86%;
    height: 86%;
    animation: radarWave cubic-bezier(0, 0.54, 0.53, 1) 2s 0.1s;
}
.circle .wave2 {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    animation: radarWave cubic-bezier(0, 0.54, 0.53, 1) 4s 0s;
    animation-iteration-count: infinite;
}
.circle .wave2::after {
    left: 0;
    top: 0;
    width: 100%;
    animation: radarWave cubic-bezier(0, 0.54, 0.53, 1) 4s 0.1s;
}
@keyframes cdot {
    0% {
        opacity: 0;
        background: var(--color-1);
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
        background: var(--color-00);
    }
}
@keyframes radarWave {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    5% {
        background: var(--color-04);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        background: var(--color-00);
    }
}
.matchModal {
    color: #2A2A22;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    line-height: normal;
    letter-spacing: -0.2px;
    outline: none;
    -webkit-touch-callout: none;
    -webkit-font-smoothing: antialiased;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    display: block;
    overflow: hidden;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 999;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    visibility: visible;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=(100));
    filter: alpha(opacity = (100));
    opacity: 1;
}
.matchModal * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.matchModal .modalContainer {
    display: block;
    overflow: hidden;
    height: 380px;
    position: relative;
    top: 50%;
    margin-top: -190px;
}
.matchModal.hidden {
    visibility: hidden;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=(0));
    filter: alpha(opacity = (0));
    opacity: 0;
}
.mo_notification {
    display: block;
    overflow: hidden;
    position: fixed;
    z-index: 1031;
    width: auto;
    height: auto;
    padding: 16px;
    top: 8px;
    left: 16px;
    right: 16px;
    background-color: rgba(0, 0, 0, 0.75);
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
    -moz-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
}
.mo_notification span {
    display: block;
    overflow: hidden;
    color: #FFF;
}
.mo_notification .mo_notifImg {
    float: left;
    margin-right: 16px;
    width: 50px;
    height: 50px;
}
.mo_notification .mo_notifText {
    text-align: left;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0;
    height: 50px;
    line-height: 50px;
}
.mo_notification .mo_notifText span {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}
.openApp_area {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 56px;
    line-height: normal;
    background: #f9f9f9;
    border-bottom: 1px solid #EEE;
    padding: 8px 16px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.openApp_area .oa_icon {
    display: block;
    overflow: hidden;
    background: url(../img/ic_waplog_48px.png) no-repeat;
    width: 40px;
    height: 40px;
    background-size: 40px;
    float: left;
    margin-right: 16px;
}
.openApp_area .oa_text {
    display: block;
    overflow: hidden;
    font-family: 'Hind Vadodara', sans-serif;
    font-weight: 400;
    font-size: 14px;
    padding: 2px 0;
}
.openApp_area .oa_text b {
    display: block;
    overflow: hidden;
    margin-bottom: 4px;
    font-weight: inherit;
}
.openApp_area .oa_text b.oa_title {
    font-family: 'Hind Vadodara', sans-serif;
    font-weight: 600;
}
.openApp_area .oa_button {
    display: block;
    overflow: hidden;
    float: right;
    padding: 4px 10px;
    margin-top: 8px;
    background: #6FC8FF;
    font-size: 14px;
    border: 1px solid #6FC8FF;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 400;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    text-decoration: none;
    color: #FFF;
}
/* iPhone 5 and 5S */
/* iPhone 6 */
/* iPhone 5 and 5S */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .mo_profileActions .mo_ic_action,
    .mo_photoActions .mo_ic_action {
        background: url(../img/profile/ic_profile_actions@2x.png);
        background-size: 286px 386px;
    }
    .mo_ic.mo_edit {
        background: url(../img/profile/ic_edit_red_24px@2x.png);
        background-size: 100%;
    }
    .mo_badge.mo_verified {
        background: url(../img/profile/ic_verified_24px@2x.png);
        background-size: 100%;
    }
    .mo_ic.mo_location {
        background: url(../img/profile/ic_location_24px@2x.png);
        background-size: 24px;
    }
    .mo_ic.mo_location.ic_white {
        background: url(../img/match/ic_location_white_24px@2x.png);
        background-size: 24px;
    }
    .mo_ic.mo_delete {
        background: url(../img/profile/ic_delete_red_24px@2x.png);
        background-size: 24px;
    }
    .mo_ic.mo_next {
        background: url(../img/profile/ic_next_mini_24px@2x.png);
        background-size: 24px;
    }
    .mo_ic.mo_prev {
        background: url(../img/profile/ic_prev_mini_24px@2x.png);
        background-size: 24px;
    }
    .mo_ic.mo_send {
        background: url(../img/profile/ic_send_24px@2x.png);
        background-size: 24px;
    }
    .mo_ic.mo_back {
        background: url(../img/profile/ic_arrow_left_white_24px@2x.png);
        background-size: 24px;
    }
    .mo_ic.mo_back_black {
        background: url(../img/profile/ic_arrow_left_black_24px@2x.png);
        background-size: 24px;
    }
    .mo_ic.mo_face {
        background: url(../img/profile/ic_face_purple_24px@2x.png);
        background-size: 24px;
    }
    .mo_ic.mo_arrowRight {
        background: url(../img/profile/ic_arrow_right_black_24px@2x.png);
        background-size: 24px;
    }
    .mo_ic_addPhoto {
        background: url(../img/profile/ic_add_photo_100px@2x.png);
        background-size: 118px;
    }
    .mo_ic.mo_report {
        background: url(../img/profile/ic_report_black_24px@2x.png);
        background-size: 24px;
    }
    .mo_ic.mo_icFb {
        background: url(../img/register/ic_facebook@2x.png);
        background-size: 24px;
    }
    .mo_ic.mo_icGoogle {
        background: url(../img/register/ic_google@2x.png);
        background-size: 24px;
    }
    .openApp_area .oa_icon {
        background: url(../img/ic_waplog_48px@2x.png);
        background-size: 40px;
    }
    .mo_photoPager a::before {
        background: url(../img/profile/ic_bigArrows_white_60px@2x.png);
        background-size: 120px 60px;
    }
    .mo_registerLogo {
        background: url(../img/register/registerLogo@2x.png);
        background-size: 240px 68px;
    }
    .mo_wText {
        background: url(../img/register/wText@2x.png);
        background-size: 100%;
    }
    /*----- MATCH -----*/
    .matchHeader .matchLogo {
        background: url(../img/match/matchLogo@2x.png);
        background-size: 100%;
    }
    .matchHeader .waplogLogo {
        background: url(../img/waplog_logo@2x.png);
        background-size: 100%;
    }
    .circleButton .ic_matchActions {
        background: url(../img/match/actions@2x.png);
        background-size: 74px 34px;
    }
    /*----- MATCH END-----*/
}