.r-flex-row-modal {
    flex-direction: row
}

body {
    width: 100%;
    height: 100%;
}

html {
    width: 100%;
    height: 100%;
}

.res-d-flex {
    display: flex;
}


.modal-shadow {
    box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.05);
    -webkit-box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.05);
    -moz-box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.05);
}

/*.login-shadow {
    box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.1);
}*/

.btn-dan {
    box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.13);
    -webkit-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.13);
    -moz-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.13);
}


    .btn-dan:hover {
        box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.23);
        -webkit-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.23);
        -moz-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.23);
    }

    .btn-dan:active {
        transform: translateY(1px);
        box-shadow: 0px 4px 4px 0px rgba(0,0,0,0);
        -webkit-box-shadow: 0px 4px 4px 0px rgba(0,0,0,0);
        -moz-box-shadow: 0px 4px 4px 0px rgba(0,0,0,0);
    }

.mt-25 {
    margin-top: 25px
}

input:autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    background-color: transparent !important
}

.r-beta-version-outside-container {
    width: 260px;
    margin-left: -495px;
    font-size: 13px;
}

.r-beta-version-inside-container {
    width: 160px;
    display: block !important;
    top: 0px;
    right: -13px;
}

/*@media (max-width:1300px) {
    .r-beta-version-outside-container {
        width: 200px;
        margin-left: -465px;
        font-size: 13px;
    }

}

@media (max-width:1200px) {
    .r-beta-version-outside-container {
        margin-left: -435px;
        font-size: 12px;
    }
}

@media (max-width:1100px) {
    .r-beta-version-outside-container {
        display: none !important;
    }

    .r-beta-version-inside-container {
        display: block;
    }
}*/

@media (max-width:1100px) {
    .r-beta-version-inside-container {
        width: 130px;
        right: 10px;
        top: -25px;
    }

    .r-flex-row-modal {
        flex-direction: column
    }

    .r-left-side, .r-right-side, .r-top-side {
        width: 100% !important;
        padding: 20px 30px !important
    }

    .r-artwork {
        display: none !important
    }

    .r-modal-width {
        width: 320px !important
    }

    .mt-30 {
        margin-top: 20px !important;
    }

    .mt-25 {
        margin-top: 20px !important;
    }

    .r-bottom-side {
        display: none !important
    }

    .r-top-side {
        display: flex !important
    }
}

.ahref-nodeco-orange:hover, .ahref-nodeco:focus, .ahref-nodeco:visited, .ahref-nodeco:active {
    color: #fc4d03 !important;
    text-decoration: none !important;
}


/**************************************************
    Notification
***************************************************/


/****************
    Notification and login contnainer
***************/

#login-notif--container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}


#notif-toggle--btn img {
    transition: all 0.4s;
}

.arrow-rotate--180deg {
    transform: rotate(180deg);
}


#notification--container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#login--container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    flex-grow: 1;
    background: #f1f1f2;
}
/**
    TOP SEction
    ------------
*/
#notif--top {
    height: 70px;
    border-bottom: 4px solid #17A2B7;
    transition: all 0.4s;
    background-color: white;
}

#notif-toggle--btn {
    position: fixed;
    z-index: 21;
    right: 0;
    top: 30px;
    width: 50px;
    height: 40px;
    transition: all 0.4s;
    cursor: pointer;
    background: white;
    border-bottom: 4px solid rgba(23, 162, 183, 1);
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    #notif-toggle--btn:hover {
        box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.1);
        -webkit-box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.1);
        -moz-box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.1);
    }


/**
    Bottom Section
    ------------
*/

#notif--btm {
    height: calc(100% - 70px);
    transition: all 0.4s;
    padding-bottom: 20px;
    background-color: white;
    overflow: hidden;
    scrollbar-color: #fc4d03;
    scrollbar-width: thin;
}


.btm-scroll--class {
    overflow-y: scroll !important;
}

/*  Scroll bar decoration  */
#notif--btm::-webkit-scrollbar {
    width: 4px;
}


#notif--btm::-webkit-scrollbar-track {
    border-radius: 4px;
    background: #f1f1f1;
}

#notif--btm::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: #fc4d03;
}

/**
    Toggle classes
    ------------
*/

.notif-btm--wh-0 {
    height: 0 !important;
    width: 0 !important;
    opacity: 0 !important;
}



/**
    Green ribbon
*/

#get-notification--ribbon {
    padding: 9px;
    background: rgba(23, 162, 183, 0.1);
    text-align: center;
}

#notif--top, #get-notification--ribbon, #notif--btm {
    width: 430px;
}
/**
   notification card
*/
#notif-card--container {
    width: 100%;
    padding: 0 25px;
}

.notif--card {
    width: 100%;
    padding: 25px 25px 10px 25px;
    box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.1);
    margin-top: 20px;
    border-radius: 4px;
    cursor: pointer;
    transition: all .3s;
    max-width: 500px;
    margin-right: auto;
    margin-left: auto;
}

    .notif--card:nth-child(1) {
        margin-top: 30px;
    }

.card-msg--btm {
    line-height: 1.5;
    min-height: 80px;
    overflow: hidden;
    word-break: keep-all;
    text-overflow: ellipsis;    
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-top: 10px;
}

.remove--ellipsis {
    -webkit-line-clamp: 5 !important;
}


.card-msg--top {
    font-size: 16px;
    line-height: 1.2;
    overflow: hidden;
    word-break: keep-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    margin-left: 0 !important;
    color: rgba(0,0,0,0.87) !important;
}

.card-msg--daysago {
    margin-top: 12px;
    font-size: 12px;
    text-align: end;
}

    .card-msg--daysago > span {
        font-weight: 500 !important;
    }





@media (max-height:700px) and (min-width:450px) {

    #notif--top {
        height: 60px;
    }

    #notif-toggle--btn {
        top: 20px;
    }

    #notif--btm {
        height: calc(100% - 60px);
        top: 60px;
    }
}


@media (max-width:768px) {
    #login-notif--container {
        display: flex;
        flex-direction: column;
    }

    #login--container, #notification--container, #notif--top, #notif--btm, #get-notification--ribbon {
        width: 100% !important;
    }

    #login--container {
        padding: 30px 0;
    }

    #notif-toggle--btn, #notif--top {
        display: none !important;
    }

    #notif--btm {
        border-top: 4px solid #17A2B7;
        border-bottom: 4px solid #17A2B7;
    }

    .notif-btm--wh-0 {
        width: 100% !important;
        height: auto !important;
        opacity: 1 !important;
    }

    body {
        height: auto;
    }

    .card-msg--top, .card-msg--btm {
        -webkit-line-clamp: 5;
    }
}