﻿/** Jasmatuph Creations 2019 */
/** load _root.css before this stylesheet*/

body {
    background-color: var(--color5);
    background-image: var(--imageBackground);
    color: var(--color1);
    font-size: var(--fontSize);
    font-family: var(--fontFamily);
    height: 100%;
    margin: 0 auto;
    max-width: var(--widthMaxPage) !important;
    padding: 0;
}

a img {
    border: none;
    vertical-align: top;
}

a:link, a:visited {
    color: var(--color2);
}

a:hover {
    color: var(--color4);
}

a:active {
    color: var(--color4);
}

div {
}

p {
}

span {
    padding-left: var(--paddingParagraph);
}

table {
    padding: var(--paragraphPadding);
}

img {
    max-width:100%; 
    height:auto; 
}

label {
    color: var(--color2);
    display: block;
    float: left;
    margin-left: 10px;
    margin-top: 10px;
    min-width: 150px;
    position: relative;
    width: 20%;
    min-height: 25px;
}

input, textarea, select {
    border: 1px solid var(--color4);
    border-radius: var(--borderRadius);
    box-sizing: content-box;
    display: block;
    float: left;
    line-height: 25px;
    padding: 5px 5px;
    position: relative;
    -webkit-appearance: none;
    font-family: var(--fontFamily);
    font-size: var(--fontSize);
}

    input:focus, textarea:focus {
        border-color: var(--inputFocusBorder);
        border-radius: var(--borderRadius);
        color: var(--color2);
        -moz-box-shadow: 0px 2px 10px 6px var(--color3_o5) !important;
        -webkit-box-shadow: 0px 2px 10px 6px var(--color3_o5) !important;
    }

    input:invalid {
        border: 1px solid var(--inputFocusBorder);
        border-radius: var(--borderRadius);
    }

    input:required {
        border: 1px solid var(--inputFocusBorder);
        border-radius: var(--borderRadius);
        color: var(--color2);
    }

#footer {
    border-top: 1px solid var(--color4);
    margin-left: 25px;
    margin-right: 25px;
    color: var(--color2_o5);
    background: var(--color1);
}

.footer-text {
    height: 50px;
    padding-top: 10px;
    text-align: center;
}

/** for marking a text string*/
mark {
    background: var(--color6);
    color: black;
    padding: 5px;
    border: 5px var(--color3) dashed;
    font-size: var(--fontSizeLarge);
}

    mark:before {
        font-family: var(--fontIconFamily);
        text-decoration: none;
        font-style: normal;
        font-weight: 900;
        font-size: var(--fontSizeLarge) !important;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        /** bars **/
        content: '\f061';
        position: relative;
        display: inline-block;
        top: 0px;
        left: -2px;
        width: 44px;
        height: 38px;
        line-height: 38px;
        text-align: center;
        color: rgba(255,255,255,0.75);
        background-color: rgba(92,95,103,0.5);
        border-radius: 0.25em;
    }

/*********************************************************************************/
/* Duo Security
/*********************************************************************************/
.duoSecurityLogo {
    float: right;
    position: relative;
    width: 80px;
    padding-right: 30px;
    z-index: 101;
    top: -40px;
    line-height: 1px;
    height: 0px;
}


/*** DuoSecurity */
.duoSecurityBox {
    padding: 1% 1% 1% 1%;
    margin-left : 1%;
    background: #444;
    background: rgba(0, 0, 0, 0.3);
    -moz-border-radius: 4px 4px 4px 4px; 
    -webkit-border-radius: 4px 4px 4px 4px; 
    border-radius: 4px 4px 4px 4px;
    text-align: left;
    margin: auto;
    width: 97%;
    border: 0;
    top : -400px;
    position : relative;
    z-index : 102;
    min-height : 380px;
}

.half{
    width : 48% !important;
    float : left;
    position : relative;
    display : inline-block;
}

.third{
    width : 30% !important;
    float : left;
    position : relative;
    display : inline-block;
}

.quarter{
    width : 22% !important;
    float : left;
    position : relative;
    display : inline-block;
}

/** section */
section {
    background: transparent;
    margin-bottom: 20px;
    width : 100%;
}

.section-popup {
    max-width: var(--widthMinScreenResponsive);
    min-width: var(--widthMinPage);
    z-index: 4001;
    height: 1px;
    position: relative;
    display: block;
    top: 5px;
    float: right;
}

.section-box {
    width : auto;
    margin-left: var(--paddingParagraph);
    margin-right: var(--paddingParagraph);
    background-color: var(--color1);
    border-top-left-radius: var(--borderRadius);
    border-top-right-radius: var(--borderRadius);
    border-bottom-left-radius: var(--borderRadius);
    border-bottom-right-radius: var(--borderRadius);
    padding-bottom: var(--paddingParagraph);
    min-width : 280px;
    /**float: left;
    position: relative;
    display: inline-block;*/
}

.section-box-small {
    margin-left: var(--margin);
    margin-right: var(--margin);
    background-color: var(--color1);
    border-top-left-radius: var(--borderRadius);
    border-top-right-radius: var(--borderRadius);
    border-bottom-left-radius: var(--borderRadius);
    border-bottom-right-radius: var(--borderRadius);
    padding-bottom: var(--paddingParagraph);
    margin-bottom : 20px;
    max-width : 300px;
    float : left;
    position : relative;
    display : inline-block;
}

.section-header {
    color: var(--color1);
    font-size: var(--fontSizeLarge);
    padding: var(--paddingParagraphMedium);
    background-color: var(--color2);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom: 2px solid var(--color3);
    font-weight: bold;
    text-align: left;
}

.heading-medium {
    font-size: var(--fontSizeMedium);
    padding: var(--paddingParagraph);
}

.section-main {
    text-align: left;
    color: var(--color2);
    font-size: var(--fontSize);
    padding-top: var(--paddingParagraphMedium);
    padding-left: var(--paddingParagraphMedium);
    padding-right: var(--paddingParagraphMedium);
    background: var(--color1);
    clear: both;
}

.section-toolbar{
    background-color : var(--color5);
    width : 100%;
    min-height : var(--heightLine);
    border-top : 1px dotted var(--color4);
    padding-bottom : var(--paddingParagraph);
}

.section-contextmenu{
    background-color : var(--color5);
    width : 100%;
    height : auto;
    min-height : var(--heightLine);
    padding : var(--paddingParagraph);
    border-radius : var(--borderRadius);
    border : 1px dotted var(--color4);
}

.header-left
{
    float : left;
    position : relative;
    display : inline-block;
    width : 33%;
}

.header-center {
    float: left;
    width: 34%;
    height: 110px;
    text-align: center;
    padding-top: 5px;
}

.header-right
{
    float : right;
    position : relative;
    display : inline-block;
    width : auto !important;
}

.header-bottom-logout {
    float: right;
    position: relative;
    width: 20%;
    padding-right: 0px;
    text-align: right;
    top: -90px;
    right: 10px;
    height : 20px;
}

.heading-sub {
    color: var(--color2);
    font-weight: bold;
    font-size: var(--fontSizeMedium);
    padding-top: var(--paddingParagraph);
    padding-bottom: var(--paddingParagraph);
    border-bottom: 1px solid var(--color5);
}

.heading-large {
    color: var(--color3);
    font-size: var(--fontSizeExtraLarge);
    font-weight: bold;
    padding-top: 15px;
    border-top: 1px dotted var(--color4);
    margin-left: 5px;
    line-height: 25px;
}

.heading-info {
    color: var(--color3);
    font-weight: bold;
    padding: var(--paddingParagraph);
}



.heading-logo-center {
    width: 100%;
    max-width: var(--widthMinPage);
    text-align: center;
    margin: auto;
}

.circle {
    line-height: 50px;
    height: 50px;
    width: 50px;
    background: var(--color2);
    padding: 0;
    -webkit-border-radius: 25px 25px 25px 25px;
    -moz-border-radius: 25px 25px 25px 25px;
    -khtml-border-radius: 25px 25px 25px 25px;
    border-radius: 25px 25px 25px 25px;
    color: var(--color1);
    font-size: 32px;
    text-align: center;
    margin-left: 25px;
    margin-top: var(--paddingParagraph);
}

.drop-zone {
    background : var(--color3);
    width: auto;
    min-width: 150px;
    max-width: 150px;
    height: auto;
    min-height: 50px;
    padding-top: 5px;
    padding-right: 30px;
    padding-left: 20px;
    float: left;
    position: relative;
    margin-top: 0px;
}

.button {
    width: auto;
    min-width: 225px;
    max-width: 225px;
    height: 50px;
    min-height: 50px;
    padding-top: 5px;
    padding-right: 30px;
    padding-left: 5px;
    float: left;
    position: relative;
    margin-top: 0px;
    margin-left : 5px;
}

    .button-right {
    width: auto;
    min-width : 150px;
    max-width: 225px;
    height: 50px;
    min-height: 50px;
    padding-top: 5px;
    padding-right: 10px;
    padding-left: 20px;
    float: right;
    position: relative;
    margin-top: 0px;
    margin-right : 10px;
    }

    

.pager {
    min-width: 250px;
    width: auto;
    height: auto;
    min-height: 50px;
    padding-top: 5px;
    padding-right: 30px;
    padding-left: 20px;
    float: left;
    position: relative;
    margin-top: 0px;
}

.row {
    background-color: var(--color1);
    color: var(--color2);
    min-height: var(--heightLine);
    height: 100%;
    clear: both;
}

.row-grid {
    background-color: var(--color1);
    color: var(--color2);
    min-height: var(--heightLine);
    height: 100%;
    width: 100%;
    display: inline-block;
    clear: both;
}

.row-grid:nth-child(even) {
  background-color: var(--color5);
  border-radius: 10px;
}

.row-mobile {
    background-color: var(--color1);
    color: var(--color2);
    min-height: var(--heightLine);
    height: 100%;
    max-width : 300px;
    width : auto;
    clear: both;
}

.row-left {
    float: left !important;
    display: inline !important;
    height: 100%;
    min-height: 150px;
    max-width: 290px;
    min-width: 290px;
    word-wrap: break-word;
    margin-top: var(--paddingParagraph);
    margin-bottom: var(--paddingParagraph);
    border-radius: var(--borderRadius);
    border: 0px solid var(--color5);
    margin-left: 25px !important;
    margin-right: 25px !important;
    -moz-box-shadow: 10px 10px 10px 0px var(--color5);
    -webkit-box-shadow: 10px 10px 10px 0px var(--color5);
    box-shadow: 10px 10px 10px 0px var(--color5);
    width: 100%;
}

.row-left-small {
    float: left !important;
    display: inline-block !important;
    word-wrap: break-word;
    width: 50px !important;
    height: 50px !important;
    padding-right: 25px;
    padding-bottom: var(--paddingParagraph);
}

.row-right {
    vertical-align: top;
    display: inline-block;
    padding: 0px;
    position: relative;
    float: left;
    height: auto;
    width: auto;
    max-width: 640px;
    min-width: 300px;
}

.row-right-big {
    vertical-align: top;
    display: inline-block;
    padding: 0px;
    position: relative;
    float: left;
    height: auto;
    width: auto;
    max-width: 90%;
    min-width: 300px;
}

.row .field {
    width : calc(75% - 10px);
    max-width : 770px;
    position: relative;
    display: inline-block;
    min-height: 45px;
    margin-bottom: 5px;
    line-height: 0px;
}

.access-denied{
    background : var(--color6);
    color : var(--color1);
    border : 1px solid var(--color6_o5);
    padding : 20px;
    height : 100px;
}

.checkbox {
    width: 50px !important;
    padding-left : var(--paddingParagraph);
    height : var(--heightButton);
}

.combo {
    width: 400px !important;
    padding-left : var(--paddingParagraph);
    padding-right : var(--paddingParagraph);
    padding-bottom : var(--paddingParagraph);
}

.number {
    width: 100px !important;
}

.date {
    width: 185px !important;
    padding-left : 0px;
}

.box-outer {
    float: left !important;
    display: inline !important;
    height: 100%;
    min-height: 150px;
    width: 100%;
    max-width: 295px;
    word-wrap: break-word;
    margin-top: var(--paddingParagraph);
    margin-bottom: var(--paddingParagraph);
    border: 0;
    border-radius: var(--borderRadius);
    border: 1px solid var(--color5);
    margin-left: 40px !important;
    margin-right: 0px !important;
    -moz-box-shadow: 10px 10px 10px 0px var(--color5);
    -webkit-box-shadow: 10px 10px 10px 0px var(--color5);
    box-shadow: 10px 10px 10px 0px var(--color5);
}

.box-350 {
    min-height: 350px;
    height: auto;
}

.box-300 {
    min-height: 300px;
    height: auto;
}


.section-footer {
    background-color: antiquewhite;
}

/** Lines **/
.clear {
    clear: both;
    height: var(--heightButtonClearRow);
}

.imageRounded {
    background: transparent;
    color: var(--color2);
    padding: 0;
    -webkit-border-radius: var(--borderRadius) var(--borderRadius) var(--borderRadius) var(--borderRadius);
    -moz-border-radius: var(--borderRadius) var(--borderRadius) var(--borderRadius) var(--borderRadius);
    -khtml-border-radius: var(--borderRadius) var(--borderRadius) var(--borderRadius) var(--borderRadius);
    border-radius: var(--borderRadius) var(--borderRadius) var(--borderRadius) var(--borderRadius);
    overflow: hidden;
    height: auto !important;
    text-align: center;
}

    .imageRounded .logo {
        height: 150px !important;
    }

.imageRoundedCrop {
    background: transparent;
    padding: 0;
    -webkit-border-radius: var(--borderRadius) var(--borderRadius) 0px 0px;
    -moz-border-radius: var(--borderRadius) var(--borderRadius) 0px 0px;
    -khtml-border-radius: var(--borderRadius) var(--borderRadius) 0px 0px;
    border-radius: var(--borderRadius) var(--borderRadius) 0px 0px;
    overflow: hidden;
    height: 150px !important;
    text-align: center;
    width: 100%;
    padding-top: 0px;
    top: 0px;
    position: relative;
    z-index: 9001;
}

.text {
    padding: var(--paddingParagraph);
    margin-right : var(--paddingParagraph);
    color: var(--color2);
}


    .text .skill {
        background-color: var(--color3);
        padding: 5px;
        padding-left: 10px;
        padding-right: 10px;
        color: var(--color1);
        font-weight: bold;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        height: auto;
        margin-right: 10px;
        float: left;
        position: relative;
        margin-bottom: 10px;
    }

    .text .skillText {
        float: right;
        padding-top: 3px;
        color: var(--color1);
    }

    .hidden
    {
        display : none;
    }

.validator-message {
    /**display: inline-grid;*/
    display: none;
    color: var(--color3);
    height: 0px;
    width: calc(100% - 10px);
    line-height: 0px;
    padding-left: 10px;
    position: relative;
    top: -10px;
    z-index: 9;
    margin-bottom: 40px;
    /** dynamically change this value on invalid entry*/
    line-height: 40px;
}

    .validator-message .icon {
        position: relative;
        left : calc(100% - 40px);
        top: -35px;
        color: var(--color1) !important;
        z-index: 10;
        width : 40px;
    }

.validator-message .single {
    background-color: var(--color3);
    color: var(--color1);
    border-radius: 5px 5px 5px 5px;
    top: -125px;
    padding-left: 10px;
    padding-top: 7px;
    z-index: 9;
}

    .validator-message .memo {
        background-color: var(--color3);
        color: var(--color1);
        border-radius: 5px 5px 5px 5px;
        top: -125px;
        padding-left: 10px;
        padding-top: 7px;
        z-index: 9;
    }

.icon-box {
    float: left;
    position: relative;
    display: inline-block;
    width: auto;
    text-align: center;
    vertical-align: middle;
    height: auto;
    padding: var(--paddingParagraph);
    margin-right: var(--paddingParagraph);
    min-height: 80px;
    color: var(--color2);
}

    .icon-box:hover {
        border-radius: var(--borderRadius);
        background: var(--color3);
        color: var(--color4);
    }

    .icon-box .icon {
        float: left;
        position: relative;
        display: inline-block;
        width: auto;
        text-align: left;
        vertical-align: middle;
        min-width: 32px;
        padding-top: var(--paddingParagraph);
    }

    .icon-box .text {
        float: left;
        position: relative;
        display: inline-block;
        width: auto;
        text-align: left;
        vertical-align: middle;
        padding-left: var(--paddingParagraph);
    }

/** Custom checkbox with FontAwesome Icon as image*/

.checkboxChecked_true {
    padding-top: 5px;
}

    .checkboxChecked_true:before {
        font-weight: 300;
        font-family: var(--fontIconFamily);
        font-size: var(--fontSizeLarge);
        background-color: transparent;
        color: var(--color3);
        content: "\f058";
    }

.checkboxChecked_false {
    padding-top: 5px;
}

    .checkboxChecked_false:before {
        font-weight: 300;
        font-family: var(--fontIconFamily);
        font-size: var(--fontSizeLarge);
        background-color: transparent;
        color: var(--color4);
        content: "\f057";
    }

/*********************************************************************************/
/* Feedback                                                                      */
/*********************************************************************************/

.feedback-icon{
    float : left;
    min-width : 50px;
    max-width : 50px;
    width : auto;
    display : inline-block;
    position : relative;
}

.feedback-text{
    width : 75%;
    float : left;
    display : inline-block;
    position : relative;
    padding-left : var(--paddingParagraph);
}
/*********************************************************************************/
/* Navigation Menu                                                               */
/*********************************************************************************/
.navMenu {
    backface-visibility: hidden;
    transition: -webkit-transform 0.5s ease 0s, opacity 0.5s ease 0s;
    z-index: 20001;
    position: fixed;
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    top: 0px;
    left: -100%;
    /*transform: translate(256px, 0px);*/
    width: 40%;
    max-width: 480px;
    min-width: 320px;
    height: 100%;
    text-align: left;
    background: var(--color5);
    border-right: 1px solid var(--color3);
}

.navMenuContainer{
    width : auto;
    float : left;
}

.navMenuItem {
    padding: 2%;
    line-height: 30px;
    color: var(--color1);
    text-align: left;
    width: 96%;
    float: left;
    position: relative;
    border-top: 1px solid var(--color3_o5);
    background-color : var(--color5);
}

    .navMenuItem:hover {
        background-color: var(--color1);
        border-top: 1px solid var(--color3);
        border-left: 3px solid black;
        cursor: pointer;
    }

.navMenuItemNoFollow {
    padding: 5px;
    line-height: 30px;
    color: var(--color1);
    text-align: left;
    width: 100%;
    float: left;
    position: relative;
    border-top: 1px solid var(--color3);
    background-color: var(--inputFocusBorder);
}

.navMenuItemLeft {
    float: left;
    position: relative;
    width: 60px;
    max-width: 27%;
}

.navMenuItemRight {
    float: left;
    position: relative;
    width: 70%;
    max-width: 70%;
    margin-left: 10px;
}

.navMenuButtonContainer {
    width: 100%;
    max-width: var(--widthMaxPage);
    min-width: var(--widthMinPage);
    line-height: 1px;
    height: 1px;
    position: fixed;
    z-index: 20011;
}

.navMenuButton {
    top: 6px;
    left: 6px;
    position: -webkit-sticky; /* Safari */
    position: sticky;
    z-index: 20012;
    margin-left: 35px;
    margin-top: 10px;
    float: left;
}

    .navMenuButton .topLeft {
        position: absolute;
        left: -200px;
    }

.navMenuButtonFixed:before {
    font-family: var(--fontIconFamily);
    text-decoration: none;
    font-style: normal;
    font-weight: 900;
    font-size: var(--fontSizeLarge) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /** bars **/
    content: '\f0c9';
    position: fixed;
    display: block;
    top: 10px;
    left: 6px;
    width: 54px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    color: rgba(255,255,255,0.75);
    background-color: rgba(92,95,103,0.5);
    border-radius: 0.25em;
    z-index: 20012;
}

.navMenuButton:before {
    font-family: var(--fontIconFamily);
    text-decoration: none;
    font-style: normal;
    font-weight: 900;
    font-size: var(--fontSizeLarge) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /** bars **/
    content: '\f0c9';
    display: block;
    width: 54px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    color: rgba(255,255,255,0.75);
    background-color: rgba(92,95,103,0.5);
    border-radius: 0.25em;
    z-index: 20002;
}

.navMenuSearchContainer {
    position: relative;
    top: -0px;
    margin-right: 10px;
    margin-top: 10px;
    float: right;
}

.navMenuSearchButton {
    position: -webkit-sticky;
    position: sticky;
    z-index: 30012;
    margin-right: 35px;
    margin-top: 10px;
    float: right;
}

    .navMenuSearchButton:before {
        font-family: var(--fontIconFamily);
        text-decoration: none;
        font-style: normal;
        font-weight: 900;
        font-size: var(--fontSizeLarge);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        /** bars **/
        content: '\f002';
        display: block;
        width: 54px;
        height: auto;
        line-height: 38px;
        text-align: center;
        color: rgba(255,255,255,0.75);
        background-color: rgba(92,95,103,0.5);
        border-radius: 0.25em;
        z-index: 20002;
    }

.navSearchButtonNextResult {
    background: var(--color3);
    float: right;
    width: 50px;
    height: auto;
    top: -39px;
    left: -2px;
    position: relative;
    z-index: 20002;
    border-radius: 10px 10px 10px 10px;
}

    .navSearchButtonNextResult::before {
        font-family: var(--fontIconFamily);
        text-decoration: none;
        font-style: normal;
        font-weight: 900;
        font-size: var(--fontSizeLarge);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        /** bars **/
        content: '\f32b';
        display: block;
        width: 54px;
        height: 38px;
        line-height: 38px;
        text-align: center;
        color: rgba(255,255,255,0.75);
        background-color: transparent;
        border-radius: 0.25em;
        z-index: 20002;
    }

.navSearchButtonResultCount {
    background: transparent;
    width: 50px;
    height: 40px;
    top: -43px;
    left: 0px;
    position: relative;
    float: right;
    line-height: var(--heightLine);
    text-align: center;
    text-decoration: underline;
    z-index : 20003;

}

.navMenuItemIcon {
    padding: 5px;
    line-height: 30px;
    color: black;
    text-align: center;
    width: 100%;
    min-width: 50px;
    float: left;
    position: relative;
}

.navMenuItemTitle {
    width: 100%;
    min-width: 205px;
    text-align: left;
    color: var(--color2);
    font-weight: bold;
    margin-left: 5px;
}

.navMenuItemDescription {
    width: 100%;
    min-width: 205px;
    text-align: left;
    font-weight: bold;
    color: var(--color3);
    padding-top: 0px;
    border-top: 1px dotted var(--color4);
    margin-left: 5px;
}

.navMenuItemSearchBox {
    width: 100%;
    min-width: 280px;
    max-width: 915px;
    text-align: left;
    color: var(--color2);
    font-weight: bold;
    margin-left: 0px;
    padding-top: 5px;
    background: rgba(92,95,103,0.5);
    border-radius: 0.25em;
    float: right;
    margin-right: 0px;
    height: var(--heightButton);
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 0px;
    padding-right: 10px;
    position: relative;
    top: 0px;
}

.navWrapperBottom {
    padding: 5px;
    background: rgba(0,0,0,0.3);
    color: var(--color1);
    border-radius : 0px 0px 10px 10px;
}

    .navWrapperBottom .itemLine {
        padding: 5px;
        width: 95% !important;
        margin-bottom: 5px;
        background-color: var(--color4);
        -moz-border-radius: 4px 4px 4px 4px;
        -webkit-border-radius: 4px 4px 4px 4px;
        border-radius: 4px 4px 4px 4px;
    }

    .navWrapperBottom .itemLine:hover {
        background-color: var(--color3);
        cursor : pointer;
    }

     .navWrapperBottom .icon {
        float : left;
        width : 40px;
        left :0px;
        clear : both;
    }

/** Scroll up button **/
.scrollUpContainer {
    width: 100%;
    max-width: var(--widthMaxPage);
    min-width: var(--widthMinPage);
    line-height: 1px;
    height: 1px;
    position: fixed;
    z-index: 30011;
    bottom: 65px;
}

.scrollUpButton {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    z-index: 30012;
    margin-right: 60px;
    float: right;
}

    .scrollUpButton:before {
        font-family: var(--fontIconFamily);
        text-decoration: none;
        font-style: normal;
        font-weight: 900;
        font-size: var(--fontSizeLarge);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        /** bars **/
        content: '\f35b';
        display: block;
        width: 54px;
        height: 38px;
        line-height: 38px;
        text-align: center;
        color: rgba(255,255,255,0.75);
        background-color: rgba(92,95,103,0.5);
        border-radius: 0.25em;
        z-index: 30012;
    }

/*** TELERIK CUSTOM CONTROLS */

/* Ajax */
.RadAjax_Jasmatuph .raDiv {
    background-image: var(--imageLoader);
}

.RadAjax_Jasmatuph .raColor {
    background-color: var(--color5);
    color: var(--color1);
}

.RadAjax_Jasmatuph .raTransp {
    opacity: 0.7;
    -moz-opacity: 0.7;
    filter: alpha(opacity=70);
}

/* Button */
.RadButton_Jasmatuph {
    font-size: var(--fontSize) !important;
    color: var(--color1) !important;
    /* ToggleStates */
    /* three state */
    /* Split buttons */
    /* disabled states */
}

    .RadButton_Jasmatuph .rbDecorated {
        color: var(--color1);
    }

    .RadButton_Jasmatuph.rbSkinnedButton, .RadButton_Jasmatuph.rbVerticalButton, .RadButton_Jasmatuph.rbLinkButton {
        border-color: var(--color2);
        color: var(color1);
        background-color: var(--color4);
        -webkit-border-radius: var(--borderRadius);
        -moz-border-radius: var(--borderRadius);
        border-radius: var(--borderRadius);
    }

    .RadButton_Jasmatuph.rbLinkButton {
        text-decoration: none;
        line-height: var(--heightLine);
    }

    .RadButton_Jasmatuph.rbSkinnedButton .rbDecorated {
        height: var(--heightButton) !important;
    }

    .RadButton_Jasmatuph.rbPressedButton .rbDecorated {
        margin-left: -4px;
    }

    .RadButton_Jasmatuph.rbSkinnedButtonChecked .rbDecorated, .RadButton_Jasmatuph.rbSkinnedButtonChecked:hover .rbDecorated {
        color: var(--color1);
    }

    .RadButton_Jasmatuph .rbDecorated.rbPrimary {
        padding-left: var(--heightButton);
    }

    .RadButton_Jasmatuph .rbDecorated.rbSecondary {
        padding-right: var(--heightButton);
    }

    .RadButton_Jasmatuph.rbVerticalButton {
        padding-left: 0;
    }

        .RadButton_Jasmatuph.rbVerticalButton .rbDecorated {
            padding-left: 8px;
            height: var(--heightButton) !important;
        }

            .RadButton_Jasmatuph.rbVerticalButton .rbDecorated.rbPrimary {
                padding-left: var(--heightButton);
                height: var(--heightButton) !important;
            }

        .RadButton_Jasmatuph.rbVerticalButton, .RadButton_Jasmatuph.rbVerticalButton .rbDecorated {
            height: 50px;
            line-height: 20px;
            width: 60px;
            padding-left: 20px;
        }

    .RadButton_Jasmatuph span.rbPrimary {
        padding-left: var(--heightButton);
    }

    .RadButton_Jasmatuph span.rbSecondary {
        padding-right: var(--heightButton);
    }



    .RadButton_Jasmatuph.RadButton:hover {
        border-color: var(--color3);
        color: var(--color1);
        background-color: var(--color3);
        border: 1px solid var(--color3);
        -webkit-border-radius: var(--borderRadius);
        -moz-border-radius: var(--borderRadius);
        border-radius: var(--borderRadius);
    }

    .RadButton_Jasmatuph.RadButton:active, .RadButton_Jasmatuph.RadButton:focus, .RadButton_Jasmatuph.rbPressedButton, .RadButton_Jasmatuph.RadButton.rbSkinnedButtonChecked, .RadButton_Jasmatuph.RadButton.rbSkinnedButtonChecked:hover, .RadButton_Jasmatuph.RadButton.rbLinkButtonChecked, .RadButton_Jasmatuph.RadButton.rbLinkButtonChecked:hover, .RadButton_Jasmatuph.RadButton.rbVerticalButtonChecked, .RadButton_Jasmatuph.RadButton.rbVerticalButtonChecked:hover {
        border-color: var(--color3);
        color: var(--color1);
        background-color: var(--color3);
        border: 1px solid var(--color3);
        -webkit-border-radius: var(--borderRadius);
        -moz-border-radius: var(--borderRadius);
        border-radius: var(--borderRadius);
    }

        .RadButton_Jasmatuph.RadButton:active .rbDecorated, .RadButton_Jasmatuph.RadButton:focus .rbDecorated {
            color: var(--color1);
        }

        .RadButton_Jasmatuph.RadButton.rbLinkButtonChecked, .RadButton_Jasmatuph.RadButton.rbLinkButtonChecked:hover {
            background-color: var(--color3);
            color: var(--color1);
            border: 1px solid var(--color3);
        }



    .RadButton_Jasmatuph .rbSplitRight,
    .RadButton_Jasmatuph .rbSplitLeft {
        width: 28px;
    }

    .RadButton_Jasmatuph span.rbSplitRight,
    .RadButton_Jasmatuph span.rbSplitLeft,
    .RadButton_Jasmatuph span.rbSplitRight:hover,
    .RadButton_Jasmatuph span.rbSplitLeft:hover, .RadButton_Jasmatuph.RadButton.rbDisabled span.rbSplitLeft, .RadButton_Jasmatuph.RadButton.rbDisabled span.rbSplitRight, .RadButton_Jasmatuph.RadButton.rbDisabled:hover span.rbSplitLeft, .RadButton_Jasmatuph.RadButton.rbDisabled:hover span.rbSplitRight {
        width: 25px;
        height: 15px;
        line-height: 15px;
        background-color: var(--color6);
        background-image: url('../images/ToggleSprite.png');
        background-position: 0px 0px;
        border: 0;
        border-width: 0;
        cursor: pointer;
    }

        .RadButton_Jasmatuph span.rbSplitRight:active,
        .RadButton_Jasmatuph span.rbSplitRight:focus,
        .RadButton_Jasmatuph span.rbSplitLeft:active,
        .RadButton_Jasmatuph span.rbSplitLeft:focus {
            background-position: -11px -58px;
        }

    .RadButton_Jasmatuph.RadButton .rbSplitRight {
        border-left: 1px solid var(--color2);
    }

        .RadButton_Jasmatuph.RadButton:hover .rbSplitRight, .RadButton_Jasmatuph.RadButton .rbSplitRight:hover {
            border-left: 1px solid var(--color3);
        }

        .RadButton_Jasmatuph.RadButton:active .rbSplitRight, .RadButton_Jasmatuph.RadButton:focus .rbSplitRight, .RadButton_Jasmatuph.RadButton .rbSplitRight:active, .RadButton_Jasmatuph.RadButton .rbSplitRight:focus {
            border-left: 1px solid var(--color3);
        }

    .RadButton_Jasmatuph.RadButton .rbSplitLeft {
        border-right: 1px solid var(--color2);
    }

        .RadButton_Jasmatuph.RadButton:hover .rbSplitLeft, .RadButton_Jasmatuph.RadButton .rbSplitLeft:hover {
            border-right: 1px solid var(--color3);
        }

        .RadButton_Jasmatuph.RadButton:active .rbSplitLeft, .RadButton_Jasmatuph.RadButton:focus .rbSplitLeft, .RadButton_Jasmatuph.RadButton .rbSplitLeft:active, .RadButton_Jasmatuph.RadButton .rbSplitLeft:focus {
            border-right: 1px solidvar(--color3);
        }

    .RadButton_Jasmatuph.rbLinkButton.rbDisabled {
        opacity: .5;
    }

    .RadButton_Jasmatuph.RadButton.rbDisabled, .RadButton_Jasmatuph.RadButton.rbDisabled:hover, .RadButton_Jasmatuph.RadButton.rbDisabled:active, .RadButton_Jasmatuph.RadButton.rbDisabled:focus {
        background-color: var(--color2) !important;
        border-style: solid;
        border-width: 1px;
        border-color: var(--color2) !important;
        color: var(--color2_o5) !important;
        outline: none !important;
    }

    .RadButton_Jasmatuph.rbToggleButton.rbDisabled, .RadButton_Jasmatuph.rbToggleButton.rbDisabled:hover, .RadButton_Jasmatuph.rbToggleButton.rbDisabled:active, .RadButton_Jasmatuph.rbToggleButton.rbDisabled:focus {
        background-color: transparent !important;
        border: 0 none !important;
    }

    .RadButton_Jasmatuph.rbDisabled:hover .rbSplitLeft, .RadButton_Jasmatuph.rbDisabled:active .rbSplitLeft, .RadButton_Jasmatuph.rbDisabled:focus .rbSplitLeft, .RadButton_Jasmatuph.rbDisabled .rbSplitLeft, .RadButton_Jasmatuph.rbDisabled .rbSplitLeft:hover, .RadButton_Jasmatuph.rbDisabled .rbSplitLeft:active, .RadButton_Jasmatuph.rbDisabled .rbSplitLeft:focus {
        border-right: 1px solid var(--color2);
    }

    .RadButton_Jasmatuph.rbDisabled:hover .rbSplitRight, .RadButton_Jasmatuph.rbDisabled:active .rbSplitRight, .RadButton_Jasmatuph.rbDisabled:focus .rbSplitRight, .RadButton_Jasmatuph.rbDisabled .rbSplitRight, .RadButton_Jasmatuph.rbDisabled .rbSplitRight:hover, .RadButton_Jasmatuph.rbDisabled .rbSplitRight:active, .RadButton_Jasmatuph.rbDisabled .rbSplitRight:focus {
        border-left: 1px solid var(--color2);
    }

    .RadButton_Jasmatuph.rbLinkButton.rbDisabled, .RadButton_Jasmatuph.rbLinkButton.rbDisabled:hover {
        border: 1px solid var(--color2);
    }

    .RadButton_Jasmatuph span.rbPrimaryIcon {
        top: 9px;
        left: 5px;
    }

    .RadButton_Jasmatuph span.rbSecondaryIcon {
        top: 9px;
        right: 5px;
    }

    .RadButton_Jasmatuph:focus .rbToggleCheckbox + .rbDecorated, .RadButton_Jasmatuph:focus .rbToggleCheckboxChecked + .rbDecorated, .RadButton_Jasmatuph:active .rbToggleCheckbox + .rbDecorated, .RadButton_Jasmatuph:active .rbToggleCheckboxChecked + .rbDecorated, .RadButton_Jasmatuph:focus .rbToggleRadio + .rbDecorated, .RadButton_Jasmatuph:focus .rbToggleRadioChecked + .rbDecorated, .RadButton_Jasmatuph:active .rbToggleRadio + .rbDecorated, .RadButton_Jasmatuph:active .rbToggleRadioChecked + .rbDecorated {
        color: var(--color1);
    }

    .RadButton_Jasmatuph.rbLinkButton.rbRounded {
        border-radius: 0;
    }

.RadButton.RadButton_Jasmatuph {
    height: var(--heightButton);
    line-height: var(--heightLine);
}

/** DataPager */

.RadDataPager_Jasmatuph {
    border: 1px solid var(--color2);
    color: var(--color1);
    padding-top: 0px;
}

    .RadDataPager_Jasmatuph .rdpPageFirst,
    .RadDataPager_Jasmatuph .rdpPagePrev,
    .RadDataPager_Jasmatuph .rdpPageNext,
    .RadDataPager_Jasmatuph .rdpPageLast {
        background-color: var(--color3);
        border-color: var(--color2);
        line-height: 50px;
        height: 50px;
        width: 50px;
        padding: 0px;
        border-radius: 25px 25px 25px 25px;
        color: var(--color2);
        font-size: 32px;
        text-align: center;
    }

        .RadDataPager_Jasmatuph .rdpPageFirst:hover,
        .RadDataPager_Jasmatuph .rdpPagePrev:hover,
        .RadDataPager_Jasmatuph .rdpPageNext:hover,
        .RadDataPager_Jasmatuph .rdpPageLast:hover {
            background-color: var(--color3);
            border-color: var(--color2);
            line-height: 50px;
            height: 50px;
            width: 50px;
            padding: 0px;
            border-radius: 25px 25px 25px 25px;
            color: var(--color2);
            font-size: 32px;
            text-align: center;
        }

        .RadDataPager_Jasmatuph .rdpPageFirst:active,
        .RadDataPager_Jasmatuph .rdpPagePrev:active,
        .RadDataPager_Jasmatuph .rdpPageNext:active,
        .RadDataPager_Jasmatuph .rdpPageLast:active {
            border-color: var(--color4);
            background-color: var(--color4);
        }

    .RadDataPager_Jasmatuph .rdpPageFirst {
        background-position: -11px -711px;
    }

    .RadDataPager_Jasmatuph .rdpPagePrev {
        background-position: -11px -111px;
    }

    .RadDataPager_Jasmatuph .rdpPageNext {
        background-position: -11px -161px;
    }

    .RadDataPager_Jasmatuph .rdpPageLast {
        background-position: -11px -761px;
    }

    .RadDataPager_Jasmatuph .rdpPagerButton {
        background-color: var(--color3);
        border-color: var(--color2);
        line-height: 50px;
        height: 50px;
        width: 50px;
        padding: 0px;
        border-radius: 25px 25px 25px 25px;
        color: var(--color2);
        font-size: 32px;
        text-align: center;
    }

    .RadDataPager_Jasmatuph .rdpNumPart a,
    .RadDataPager_Jasmatuph .rdpPagerButton,
    .RadDataPager_Jasmatuph .rdpWrap,
    .RadDataPager_Jasmatuph .rdpWrapRight,
    .RadDataPager_Jasmatuph .rdpWrapNone {
        /*font:$font-weight 16px/34px $font-family;*/
        font-weight: 100;
        font-size: var(--fontSize);
        line-height: var(--heightLine);
    }

    .RadDataPager_Jasmatuph .rdpNumPart a {
        line-height: 50px !important;
        height: 50px !important;
        width: 50px !important;
        background: none repeat scroll 0% 0% var(--color2);
        padding: 0px;
        border-radius: 25px 25px 25px 25px;
        color: var(--color4);
        font-size: var(--fontSizeLarge);
        text-align: center;
    }

        .RadDataPager_Jasmatuph .rdpNumPart a:hover {
            background-color: var(--color3);
            border-color: var(--color3);
        }

        .RadDataPager_Jasmatuph .rdpNumPart a.rdpCurrentPage, .RadDataPager_Jasmatuph .rdpNumPart a.rdpCurrentPage:hover {
            border-color: var(--color3);
            background-color: var(--color3);
        }

        .RadDataPager_Jasmatuph .rdpNumPart a span {
            float: none;
            padding: 0;
        }

.RadDataPager .rdpNumPart a {
    line-height: 50px !important;
    height: 50px !important;
    width: 50px !important;
    background: none repeat scroll 0% 0% var(--color2);
    padding: 0px !important;
    border-radius: 25px 25px 25px 25px;
    color: rgb(250, 250, 250);
    font-size: 32px;
    text-align: center;
    margin: 3px !important;
}

/** Combobox*/
.RadComboBox_Jasmatuph {
    color: var(--color2);
    background-color: var(--color1);
    border: 1px solid var(--color2);
}

    .RadComboBox_Jasmatuph table {
        background-color: var(--color1);
    }

    .RadComboBox_Jasmatuph .rcbInputCell,
    .RadComboBox_Jasmatuph .rcbArrowCell {
        border: 1px solid;
    }

    .RadComboBox_Jasmatuph .rcbInputCell {
        color: var(--color2);
        border-color: var(--color2);
        background-color: var(--color1);
    }

    .RadComboBox_Jasmatuph .rcbInputCellLeft {
        border-right: 0;
    }

    .RadComboBox_Jasmatuph .rcbInputCellRight {
        border-left: 0;
    }

    .RadComboBox_Jasmatuph .rcbInput {
        color: var(--color2);
        font-size: 16px;
        line-height: 22px;
    }

    .RadComboBox_Jasmatuph .rcbEmptyMessage {
        color: var(--color2);
        font-style: italic;
    }

    .RadComboBox_Jasmatuph .rcbArrowCell {
        border-color: var(--color2);
        color: var(--color2);
        background-color: var(--color1);
    }

    .RadComboBox_Jasmatuph .rcbArrowCellLeft.rcbArrowCellHidden,
    .RadComboBox_Jasmatuph .rcbArrowCellRight.rcbArrowCellHidden {
        border-color: var(--color2);
        color: var(--color2);
        background-color: var(--color1);
        background-image: none;
    }

    .RadComboBox_Jasmatuph .rcbArrowCellLeft.rcbArrowCellHidden {
        border-right: 0;
    }

    .RadComboBox_Jasmatuph .rcbArrowCellRight.rcbArrowCellHidden {
        border-left: 0;
    }

    .RadComboBox_Jasmatuph .rcbHovered .rcbInputCell {
        border-color: var(--color2);
        color: var(--color2);
        background-color: var(--color1);
    }

    .RadComboBox_Jasmatuph .rcbHovered .rcbInput {
        color: var(--color2);
        background-color: var(--color1);
    }

    .RadComboBox_Jasmatuph .rcbHovered .rcbArrowCell {
        border-color: var(--color4);
        color: var(--color1);
        background-color: var(--color3);
    }

.RadComboBox .rcbHovered .rcbArrowCellRight {
    background-color: var(--color4) !important;
}

.RadComboBox_Jasmatuph .rcbHovered .rcbArrowCellLeft.rcbArrowCellHidden,
.RadComboBox_Jasmatuph .rcbHovered .rcbArrowCellRight.rcbArrowCellHidden {
    border-color: var(--color2);
    color: var(--color1);
    background-color: var(--color1) !important;
}

.RadComboBox_Jasmatuph .rcbFocused .rcbInputCell {
    border-color: var(--color4);
    color: var(--color2);
    background-color: var(--color1);
}

.RadComboBox_Jasmatuph .rcbFocused .rcbInput {
    color: var(--color3);
    /* border around input on focus, turn off for combobox */
    border-radius: 0px;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
}

.RadComboBox_Jasmatuph .rcbFocused .rcbArrowCell {
    border-color: var(--color4);
    color: var(--color2);
    background-color: var(--color1);
}

.RadComboBox_Jasmatuph .rcbFocused .rcbArrowCellLeft.rcbArrowCellHidden,
.RadComboBox_Jasmatuph .rcbFocused .rcbArrowCellRight.rcbArrowCellHidden {
    border-color: var(--color3);
    color: var(--color2);
    background-color: var(--color1);
}

.RadComboBox_Jasmatuph .rcbDisabled {
    border-color: var(--color1);
    color: var(--color4);
    background-color: var(--color2);
}

    .RadComboBox_Jasmatuph .rcbDisabled .rcbInput {
        color: var(--color2);
    }

    .RadComboBox_Jasmatuph .rcbDisabled .rcbArrowCell {
        border-color: var(--color2);
        color: var(--color2);
        background-color: var(--color4);
        background-position: -61px 50%;
    }

    .RadComboBox_Jasmatuph .rcbDisabled .rcbArrowCellLeft.rcbArrowCellHidden,
    .RadComboBox_Jasmatuph .rcbDisabled .rcbArrowCellRight.rcbArrowCellHidden {
        border-color: var(--color2);
        color: var(--color4);
        background-color: var(--color2);
    }

.RadComboBox_Jasmatuph .rcbReadOnly .rcbInputCell {
    border-color: var(--color4);
    color: var(--color2);
    background-color: var(--color2);
}

.RadComboBox_Jasmatuph .rcbReadOnly .rcbInput {
    color: var(--color2);
}

.RadComboBox_Jasmatuph .rcbReadOnly .rcbArrowCell {
    background-position: -2px 50%;
}

.RadComboBox_Jasmatuph .rcbReadOnly .rcbArrowCellLeft {
    border-right: 0;
}

.RadComboBox_Jasmatuph .rcbReadOnly .rcbArrowCellRight {
    border-left: 0;
}

    .RadComboBox_Jasmatuph .rcbReadOnly .rcbArrowCellLeft.rcbArrowCellHidden,
    .RadComboBox_Jasmatuph .rcbReadOnly .rcbArrowCellRight.rcbArrowCellHidden {
        border-color: var(--color2);
        color: var(--color2);
        background-color: var(--color2);
    }

.RadComboBox_Jasmatuph .rcbHovered .rcbReadOnly .rcbInputCell {
    border-color: var(--color4);
    color: var(--color2);
    background-color: var(--color1);
}

.RadComboBox_Jasmatuph .rcbHovered .rcbReadOnly .rcbInput {
    color: var(--color2);
}

.RadComboBox_Jasmatuph .rcbHovered .rcbReadOnly .rcbArrowCell {
    /**background-position: -22px 50%;*/
}

.RadComboBox_Jasmatuph .rcbHovered .rcbReadOnly .rcbArrowCellLeft.rcbArrowCellHidden,
.RadComboBox_Jasmatuph .rcbHovered .rcbReadOnly .rcbArrowCellRight.rcbArrowCellHidden {
    border-color: var(--color2);
    color: var(--color2);
    background-color: var(--color2);
}

.RadComboBox_Jasmatuph .rcbFocused .rcbReadOnly .rcbInputCell {
    border-color: var(--color3);
    color: var(--color2);
    background-color: var(--color2);
}

.RadComboBox_Jasmatuph .rcbFocused .rcbReadOnly .rcbInput {
    color: var(--color2);
}

.RadComboBox_Jasmatuph .rcbFocused .rcbReadOnly .rcbArrowCell {
    background-position: -42px 50%;
}

.RadComboBox_Jasmatuph .rcbFocused .rcbReadOnly .rcbArrowCellLeft.rcbArrowCellHidden,
.RadComboBox_Jasmatuph .rcbFocused .rcbReadOnly .rcbArrowCellRight.rcbArrowCellHidden {
    border-color: var(--color3);
    color: var(--color2);
    background-color: var(--color3);
}

.RadComboBox_Jasmatuph .rcbDisabled .rcbReadOnly .rcbInputCell {
    border-color: var(--color2);
    color: var(--color2);
    background-color: var(--color2);
}

.RadComboBox_Jasmatuph .rcbDisabled .rcbReadOnly .rcbInput {
    color: var(--color2);
}

.RadComboBox_Jasmatuph .rcbDisabled .rcbReadOnly .rcbArrowCell {
    background-position: -62px 50%;
}

.RadComboBox_Jasmatuph .rcbDisabled .rcbReadOnly .rcbArrowCellLeft.rcbArrowCellHidden,
.RadComboBox_Jasmatuph .rcbDisabled .rcbReadOnly .rcbArrowCellRight.rcbArrowCellHidden {
    border-color: var(--color2);
    color: var(--color2);
    background-color: var(--color2);
}

.RadComboBoxDropDown_Jasmatuph {
    border-color: var(--color4);
    color: var(--color2);
    background: var(--color1);
    /** drop down background color*/
    font-size: 12px;
    line-height: 20px;
    height: 140px;
}

    .RadComboBoxDropDown_Jasmatuph .rcbHeader,
    .RadComboBoxDropDown_Jasmatuph .rcbFooter {
        color: var(--color2);
        background-color: var(--color1);
    }

    .RadComboBoxDropDown_Jasmatuph .rcbHeader {
        border-bottom-color: var(--color1);
    }

    .RadComboBoxDropDown_Jasmatuph .rcbFooter {
        border-top-color: var(--color1);
    }

    .RadComboBoxDropDown_Jasmatuph .rcbHovered {
        color: var(--color2);
        background: var(--color3);
    }

    .RadComboBoxDropDown_Jasmatuph .rcbDisabled {
        color: var(--color5);
        background-color: var(--color1);
    }

    .RadComboBoxDropDown_Jasmatuph .rcbLoading {
        color: var(--color2);
        background: var(--color2);
    }

    .RadComboBoxDropDown_Jasmatuph .rcbItem em,
    .RadComboBoxDropDown_Jasmatuph .rcbHovered em {
        color: var(--color2);
        background: var(--color3);
    }

    .RadComboBoxDropDown_Jasmatuph .rcbCheckAllItems {
        color: var(--color2);
        background-color: var(--color1);
    }

    .RadComboBoxDropDown_Jasmatuph .rcbCheckAllItemsHovered {
        color: var(--color3);
        background-color: var(--color1);
    }

    .RadComboBoxDropDown_Jasmatuph .rcbMoreResults {
        border-top-color: var(--color5);
        color: var(--color2);
        background-color: var(--color4);
    }

        .RadComboBoxDropDown_Jasmatuph .rcbMoreResults a {
            width: 26px !important;
            height: 26px !important;
            background-color: var(--color2);
            -webkit-mask: url(../svg/angle-double-down.svg) no-repeat 50% 50%;
            mask: url(../svg/angle-double-down.svg) no-repeat 50% 50%;
            background-size: 25px 25px;
        }

    .RadComboBoxDropDown_Jasmatuph .rcbSeparator {
        color: var(--color2);
        background: var(--color5);
    }


.RadComboBoxDropDown .rcbItem, .RadComboBoxDropDown .rcbHovered, .RadComboBoxDropDown .rcbDisabled, .RadComboBoxDropDown .rcbLoading, .RadComboBoxDropDown .rcbCheckAllItems, .RadComboBoxDropDown .rcbCheckAllItemsHovered {
    padding: 14px 0px 0px 8px !important;
    min-height: 30px !important;
    background-repeat: repeat-x;
    font-size: var(--fontSize);
    font-family: var(--fontFamily);
}

.RadComboBox .rcbArrowCellRight {
    background-color: var(--color4) !important;
}

.RadComboBox .rcbArrowCell a {
    /* Right drop downbutton */
    width: 46px !important;
    height: 46px !important;
    background-color: var(--color1);
    -webkit-mask: url(../svg/angle-double-down.svg) no-repeat 50% 50%;
    mask: url(../svg/angle-double-down.svg) no-repeat 50% 50%;
    background-size: 45px 45px;
}

.RadComboBox .rcbLabel {
    display: inline-block;
    vertical-align: top;
    padding-right: 0px !important;
    margin-left: 10px !important;
    margin-right: -10px !important;
    line-height: var(--lineHeight);
    *zoom: 1;
}

/** DataPager */
.RadDataPager_Jasmatuph {
    border: 1px solid var(--color2);
    color: var(--color1);
    padding-top: 0px;
}

    .RadDataPager_Jasmatuph .rdpPageFirst,
    .RadDataPager_Jasmatuph .rdpPagePrev,
    .RadDataPager_Jasmatuph .rdpPageNext,
    .RadDataPager_Jasmatuph .rdpPageLast {
        background-color: var(--color3);
        border-color: var(--color2);
        line-height: 50px;
        height: 50px;
        width: 50px;
        padding: 0px;
        border-radius: 25px 25px 25px 25px;
        color: var(--color2);
        font-size: 32px;
        text-align: center;
    }

        .RadDataPager_Jasmatuph .rdpPageFirst:hover,
        .RadDataPager_Jasmatuph .rdpPagePrev:hover,
        .RadDataPager_Jasmatuph .rdpPageNext:hover,
        .RadDataPager_Jasmatuph .rdpPageLast:hover {
            background-color: var(--color3);
            border-color: var(--color2);
            line-height: 50px;
            height: 50px;
            width: 50px;
            padding: 0px;
            border-radius: 25px 25px 25px 25px;
            color: var(--color2);
            font-size: 32px;
            text-align: center;
        }

        .RadDataPager_Jasmatuph .rdpPageFirst:active,
        .RadDataPager_Jasmatuph .rdpPagePrev:active,
        .RadDataPager_Jasmatuph .rdpPageNext:active,
        .RadDataPager_Jasmatuph .rdpPageLast:active {
            border-color: var(--color4);
            background-color: var(--color4);
        }

    .RadDataPager_Jasmatuph .rdpPageFirst {
        background-position: -11px -711px;
    }

    .RadDataPager_Jasmatuph .rdpPagePrev {
        background-position: -11px -111px;
    }

    .RadDataPager_Jasmatuph .rdpPageNext {
        background-position: -11px -161px;
    }

    .RadDataPager_Jasmatuph .rdpPageLast {
        background-position: -11px -761px;
    }

    .RadDataPager_Jasmatuph .rdpPagerButton {
        background-color: var(--color3);
        border-color: var(--color2);
        line-height: 50px;
        height: 50px;
        width: 50px;
        padding: 0px;
        border-radius: 25px 25px 25px 25px;
        color: var(--color2);
        font-size: 32px;
        text-align: center;
    }

    .RadDataPager_Jasmatuph .rdpNumPart a,
    .RadDataPager_Jasmatuph .rdpPagerButton,
    .RadDataPager_Jasmatuph .rdpWrap,
    .RadDataPager_Jasmatuph .rdpWrapRight,
    .RadDataPager_Jasmatuph .rdpWrapNone {
        /*font:$font-weight 16px/34px $font-family;*/
        font-weight: 100;
        font-size: var(--fontSize);
        line-height: var(--heightLine);
    }

    .RadDataPager_Jasmatuph .rdpNumPart a {
        line-height: 50px !important;
        height: 50px !important;
        width: 50px !important;
        background: none repeat scroll 0% 0% var(--color2);
        padding: 0px;
        border-radius: 25px 25px 25px 25px;
        color: var(--color4);
        font-size: var(--fontSizeLarge);
        text-align: center;
    }

        .RadDataPager_Jasmatuph .rdpNumPart a:hover {
            background-color: var(--color3);
            border-color: var(--color3);
        }

        .RadDataPager_Jasmatuph .rdpNumPart a.rdpCurrentPage, .RadDataPager_Jasmatuph .rdpNumPart a.rdpCurrentPage:hover {
            border-color: var(--color3);
            background-color: var(--color3);
        }

        .RadDataPager_Jasmatuph .rdpNumPart a span {
            float: none;
            padding: 0;
        }

.RadDataPager .rdpNumPart a {
    line-height: 50px !important;
    height: 50px !important;
    width: 50px !important;
    background: none repeat scroll 0% 0% var(--color2);
    padding: 0px !important;
    border-radius: 25px 25px 25px 25px;
    color: rgb(250, 250, 250);
    font-size: 32px;
    text-align: center;
    margin: 3px !important;
}

/** Lightbox */
.RadLightBox_Jasmatuph {
    font: 100 16px;
    color: var(--color1);
}

    .RadLightBox_Jasmatuph .rltbWrapper {
        background: var(--color2);
    }

    .RadLightBox_Jasmatuph .rltbDescriptionBox {
        color: var(--color1);
    }

    .RadLightBox_Jasmatuph .rmpPager {
        color: var(--color2);
    }

.RadLightBox .rltbGlowEffect {
    width: 100%;
    height: 100%;
    border-radius: var(--borderRadius);
    background: var(--color2);
    filter: alpha(opacity=50);
    opacity: .5;
    position: absolute;
    top: 0;
    left: 0;
}

.RadLightBox .rltbActionButton .rltbPrevButton {
    background: purple !important;
}

    .RadLightBox .rltbActionButton .rltbPrevButton:before {
        font-family: var(--fontIconFamily);
        text-decoration: none;
        font-style: normal;
        font-weight: 900;
        font-size: var(--fontSizeLarge) !important;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        /** bars **/
        color: var(--color2);
        content: '\f057';
    }

.RadLightBox_Jasmatuph .rltbClose {
    width: var(--heightLine) !important;
    height: var(--heightLine) !important;
    /**background: var(--color1) !important;*/
    border-radius: var(--borderRadius);
    background: var(--color2);
    filter: alpha(opacity=75);
    opacity: .75;
    height : 45px !important;
}

.RadLightBox_Jasmatuph .rltbCloseButton:hover .rltbCloseIcon {
    background-position: 0px 0 !important;
}

.RadLightBox_Jasmatuph .rltbClose:before {
    font-family: var(--fontIconFamily);
    text-decoration: none;
    font-style: normal;
    font-weight: 900;
    font-size: var(--fontSizeHuge) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /** bars **/
    color: var(--color1);
    content: '\f057';
    margin-left : 7px;
}

.RadLightBox_Jasmatuph .rltbPrevButton {
    width: var(--heightLine) !important;
    height: var(--heightLine) !important;
    background: var(--color3) !important;
    border-radius: var(--borderRadius);
    /**Use svg **/
    -webkit-mask: url(../svg/arrow-circle-left.svg);
    mask: url(../svg/arrow-circle-left.svg);
    mask-size: 100% 100%;
    background-size: 32px 32px;
}


.RadLightBox_Jasmatuph .rltbNextButton {
    width: var(--heightLine) !important;
    height: var(--heightLine) !important;
    background: var(--color3) !important;
    border-radius: var(--borderRadius);
    /**Use svg **/
    -webkit-mask: url(../svg/arrow-circle-right.svg);
    mask: url(../svg/arrow-circle-right.svg);
    mask-size: 100% 100%;
    background-size: 32px 32px;
}

/** input */
html body .RadInput_Jasmatuph .riTextBox,
html body .RadInputMgr_Jasmatuph {
    font-family: var(--fontFamily);
    background: var(--color5);
    color: var(--color2);
    font-weight: 100;
    font-size: var(--fontSize);
}

.RadInput_Jasmatuph.riSingle .riTextBox {
    height: 40px;
    font-size: var(--fontSize);
    line-height: 32px;
    z-index: 10;
    position : relative;
}

html body .RadInput_Jasmatuph .riTextBox,
html body .RadInputMgr_Jasmatuph,
* + html .RadInput_Jasmatuph.riSingle .riTextBox,
* + html .RadForm_Jasmatuph.RadForm.rfdTextbox input.riTextBox.rfdDecorated {
    height: 31px;
    line-height: var(--heightLine);
    
}

html body .RadInput_Jasmatuph .riEmpty,
html body .RadInput_Empty_Jasmatuph {
    color: var(--color2);
}

html body .RadInput_Jasmatuph .riHover,
html body .RadInput_Hover_Jasmatuph {
    border-color: var(--color3);
    color: var(--color2);
}

html body .RadInput_Jasmatuph .riFocused,
html body .RadInput_Focused_Jasmatuph {
    border-color: var(--color3);
    background: var(--color1);
    color: var(--color2) !important;
    font-weight: bold;
}

html body .RadInput_Jasmatuph .riRead,
html body .RadInput_Read_Jasmatuph {
    border-color: var(--color4);
    border-bottom-color: var(--color5);
}

html body .RadInput_Jasmatuph .riDisabled,
html body .RadInput_Disabled_Jasmatuph {
    Opacity: 1;
    -moz-opacity: 1;
    filter: alpha(opacity=100);
    cursor: default;
}

html body .RadInput_Jasmatuph .riError,
html body .RadInput_Error_Jasmatuph {
    border-color: var(--color3);
    color: var(--color3);
}

.RadForm.rfdTextbox .RadInput_Jasmatuph .riError[type="text"],
.RadForm.rfdTextbox .RadInput_Error_Jasmatuph[type="text"] {
    border-color: var(--color3);
    background: var(--color2);
    color: var(--color3);
}

html body .RadInput_Jasmatuph .riNegative,
html body .RadInput_Negative_Jasmatuph {
    color: var(--color1);
}

/*spin*/
.RadInput_Jasmatuph .riSpin a {
    width: 15px;
    height: 17px;
    line-height: 17px;
}

.RadInput_Jasmatuph a.riUp,
.RadInput_Jasmatuph a.riDown {
    height: 17px;
}

.RadInput_Jasmatuph a.riUp {
    background-position: -16.5px -17.5px;
}

    .RadInput_Jasmatuph a.riUp:hover {
        background-position: -66.5px -17.5px;
    }

.RadInput_Jasmatuph a.riDown {
    background-position: -16.5px -67.5px;
}

    .RadInput_Jasmatuph a.riDown:hover {
        background-position: -66.5px -67.5px;
    }

.RadInput_Jasmatuph .riLabel {
    color: var(--color2);
}

.riContButton.RadInput_Jasmatuph .riResizeIcon {
    margin-left: -32px;
}

html body .RadInputRTL_Jasmatuph .riError,
html body .RadInputRTL_Error_Jasmatuph {
    background-position: 3px -298px;
}

html body .RadInputRTL_Jasmatuph .riResizeIcon {
    background-position: 0 -19px;
    margin-right: -12px;
}

html body .RadInputRTL_Jasmatuph.riContButton .riResizeIcon {
    margin-right: -32px;
}

.RadForm.rfdTextbox .RadInputRTL_Jasmatuph .riError[type="text"],
.RadForm.rfdTextbox .RadInputRTL_Error_Jasmatuph[type="text"] {
    background-position: 3px -298px;
}


/** Grid */
.RadGrid {
    border-width: 0px !important;
    border-style: solid;
}

/** Window **/
.RadWindow_Jasmatuph .rwTable {
    height: 100% !important;
}

.RadGrid .rgAltRow
{
    background-color : var(--color5);
    border-bottom : 1px solid var(--color5) !important;
    border-radius : var(--borderRadius) var(--borderRadius) var(--borderRadius) var(--borderRadius) !important;
}

.RadGrid .rgRow > td,.RadGrid .rgAltRow > td
{
    padding : 1px !important;
}

.RadWindow_Jasmatuph {
    font-size: var(--fontSize);
    background-color: var(--color1);
    border-width: 0px;
    border-style: solid;
    /**border-color:var(--color1);**/
    border-color: var(--color3) !important;
    border-radius: var(--borderRadius);
}

    .RadWindow_Jasmatuph td.rwWindowContent {
        background-color: var(--color1) !important;
        color: var(--color2) !important;
    }

    .RadWindow_Jasmatuph.rwShadow {
        -webkit-box-shadow: 0px 2px 10px 6px var(--color3_o5) !important;
        -moz-box-shadow: 0px 2px 10px 6px var(--color3_o5) !important;
        box-shadow: 0px 2px 10px 6px var(--color3_o5) !important;
    }

        .RadWindow_Jasmatuph.rwShadow .rwTopResize {
            height: 6px;
        }

    .RadWindow_Jasmatuph .rwTitleRow .rwCorner, .RadWindow_Jasmatuph .rwTitleRow .rwTitlebar {
        /** changed */
        background-color: var(--color2) !important;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: var(--color2) !important;
    }

    .RadWindow_Jasmatuph .rwContentRow {
        /**background-color:var(--color6);*/
        text-align: left !important;
    }

    .RadWindow_Jasmatuph.rwNoTitleBar .rwTitleRow .rwCorner, .RadWindow_Jasmatuph.rwNoTitleBar .rwTitleRow .rwTitlebar {
        background-color: transparent;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: transparent;
    }

    .RadWindow_Jasmatuph .rwTitleRow .rwTopLeft {
        border-radius: 4px 0 0;
    }

    .RadWindow_Jasmatuph .rwTitleRow .rwTopRight {
        border-radius: 0 4px 0 0;
    }

    .RadWindow_Jasmatuph .rwTitlebarControls {
        height: 34px;
        *height: 36px;
    }

    .RadWindow_Jasmatuph.rwShadow .rwTitlebarControls {
        height: 28px;
    }

    .RadWindow_Jasmatuph .rwTitlebarControls em {
        font-size: 16px;
    }

    .RadWindow_Jasmatuph .rwControlButtons li a {
        width: 32px;
        height: 32px;
        border-width: 1px;
        border-style: solid;
        border-color: transparent;
    }

        .RadWindow_Jasmatuph .rwControlButtons li a:hover {
            background-color: var(--color4);
            border-color: var(--color1);
            border-radius: 3px;
        }

.RadWindow .rwControlButtons a {
    text-indent: -3333px !important;
    overflow: hidden;
    text-align: center;
    padding-top: 15px;
    height: 15px !important;
    color: var(--color1) !important;
}

.RadWindow .rwControlButtons span {
    /**Hide text' **/
    display: inline-block !important;
    color: red;
    background-color: pink;
    height: 32px;
    width: 32px;
}

.RadWindow_Jasmatuph table.rwShadow em {
    padding: 0 0 0 1px;
}

.RadWindow_Jasmatuph .rwStatusbar input {
    background-color: var(--color1);
}

.RadWindow_Jasmatuph .rwStatusbar div {
    background-position: -12px -2212px;
    margin: 6px -3px 0 0;
}

.RadWindow_Jasmatuph.rwShadow .rwStatusbar div {
    margin: 9px -9px 0 0;
}

.RadWindow_Jasmatuph .rwTable .rwTitlebarControls .rwIcon {
    background-position: 0 0;
    margin: 8px 5px 0 0;
}

.RadWindow_Jasmatuph .rwTable.rwShadow .rwTitlebarControls .rwIcon {
    margin: 5px 5px 0 0;
}

.RadWindow_Jasmatuph .rwTable .rwTitlebarControls em {
    color: var(--color1);
    font-weight: normal;
    font-size :  var(--fontSizeMedium);
}

.RadWindow_Jasmatuph .rwTable .rwDialogInput, .RadWindow_Jasmatuph .rwTable .rwDialogInput:hover {
    height: 1.5em;
    padding: .42857em .85714em;
    background-color: var(--color1);
    color: var(--color2);
    border-width: 1px;
    border-style: solid;
    border-color: var(--color4);
}

    .RadWindow_Jasmatuph .rwTable .rwDialogInput:focus {
        background-color: var(--color3);
        color: var(--color2);
        border-color: var(--color3);
        box-shadow: 0 1px 1px rgba(0,0,0,0.075) inset,0 0 8px var(--color3_o5);
        outline: 0 none;
    }

    .RadWindow_Jasmatuph .rwTable .rwDialogInput:active {
        background-color: var(--color3);
        color: var(--color2);
        border-color: var(--color4);
    }

.RadWindow_Jasmatuph .rwTable tr td.rwLoading {
    background-color: var(--color1);
}

.RadWindow_Jasmatuph td.rwWindowContent.rwLoading {
    /**background-image:url('WebResource.axd?d=Z3fCFYsHCa8LB8HgJc38wV8WcdLaKTjxwGh0wVyCSw0Y5VOAUDN28onVogJ40RmD8PB_pReaVib-L2Ul2ywEkb7efcc7fsNsObmHx4uIhR0YJ9c6tTE0wRWY0zwYGgi53mYy6YverHK9oOhbpJmqR8AF04ZYZtpl7grtXdP3Bj41&t=635633627180000000');**/
    background: transparent var(--imageLoader) center no-repeat !important;
}

.RadWindow_Jasmatuph input.rwLoading {
    /** background-image:url('WebResource.axd?d=bz98Dn6wg0C_K7Z9m_bwv_sgddiNAL6EKVVJHSai_0AMkLt3S0BNsYpY3gapK83tMk0yr45q1Lkrfd-RfG4UAB4KfgnEHGYWT6IHnIgzO9IeQIg99toC64HHA5UiMSHRihKKSDB797WZD-3xWVLlidrg3sK101bWOikuL_Xn5HHC1Mp7ya-tY7IwlFfMBZms0&t=635633627180000000'); **/
    background: transparent var(--imageLoader) center no-repeat !important;
}

.RadWindow_Jasmatuph .rwTable a.rwCancel, .RadWindow_Jasmatuph .rwTable a.rwCancel span {
    background: 0;
    cursor: pointer;
}

    .RadWindow_Jasmatuph .rwTable a.rwCancel span span {
        color: var(--color2);
        text-decoration: underline;
    }

.RadWindow .rwControlButtons, .RadWindow_Jasmatuph .rwControlButtons {
    margin: -2px 0 0;
    *margin: 0;
}

.RadWindow_Jasmatuph.rwShadow .rwControlButtons {
    margin: -4px 0 0;
}

.RadWindow .rwControlButtons li {
    float: left;
    padding: 0 1px 0 0;
    /*Set FontAwesome for Icons here*/
    font-family: var(--fontIconFamily);
    font-weight: 900;
    font-size: var(--fontSizeLarge) !important;
}

.RadWindow_Jasmatuph .rwTable .rwControlButtons li a {
    display: block;
    width: 32px;
    height: 32px;
    margin: 0 0 0 8px;
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    background-color: var(--color2);
    text-decoration: none;
    font-style: normal;
    color: var(--color1);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /** bars **/
    position: relative;
    display: inline-block;
}

    .RadWindow_Jasmatuph .rwTable .rwControlButtons li a:hover {
        background-color: var(--color3);
        color: var(--color1);
        border-color: var(--color3);
        border-radius: 3px;
        text-decoration: none;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        /** bars **/
        position: relative;
        display: inline-block;
    }

.RadWindow_Jasmatuph .rwCloseButton {
    width: 24px !important;
    height: 24px !important;
    background-color: var(--color1) !important;
    -webkit-mask: url(../svg/window-close-solid.svg) no-repeat 50% 50%;
    mask: url(../svg/window-close-solid.svg) no-repeat 50% 50%;
    background-size: 24px 24px;
}

    .RadWindow_Jasmatuph .rwCloseButton:hover {
        background-color: var(--color3) !important;
    }

.RadWindow_Jasmatuph .rwPinButton,
.RadWindow_Jasmatuph .rwPinButton:hover:before {
    content: '\f08d';
}

    .RadWindow_Jasmatuph .rwPinButton.on, .RadWindow_Jasmatuph .rwPinButton.on:hover:before {
        background-position: -9px -1209px;
    }

.RadWindow_Jasmatuph .rwMinimizeButton, .RadWindow_Jasmatuph .rwMinimizeButton:hover:before {
    background-position: -9px -1509px;
}

.RadWindow_Jasmatuph .rwMaximizeButton, .RadWindow_Jasmatuph .rwMaximizeButton:hover:before {
    background-position: -9px -1609px;
}

.RadWindow_Jasmatuph.rwMaximizedWindow .rwMaximizeButton:before, .RadWindow_Jasmatuph.rwMinimizedWindow .rwMinimizeButton:before,
.RadWindow_Jasmatuph.rwMaximizedWindow .rwMaximizeButton:hover:before, .RadWindow_Jasmatuph.rwMinimizedWindow .rwMinimizeButton:hover:before {
    background-position: -9px -1809px;
}

.RadWindow_Jasmatuph .rwReloadButton:before,
.RadWindow_Jasmatuph .rwReloadButton:hover:before {
    background-position: -9px -1309px;
}

.RadWindow_Jasmatuph .rwStatusbarRow .rwCorner, .RadWindow_Jasmatuph .rwStatusbarRow .rwStatusbar {
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: var(--color4);
}

.RadWindow_Jasmatuph a.rwPopupButton span {
    height: 32px;
    line-height: 32px;
}

.RadWindow_Jasmatuph a.rwPopupButton {
    height: 32px;
    border-color: var(--color1);
    color: var(--color2);
    background-color: var(--color1);
    background-image: linear-gradient();
    background-position: 0 0;
    background-repeat: repeat-x;
    border-radius: 3px;
    border-width: 1px;
    border-style: solid;
    border-color: var(--color4);
}

    .RadWindow_Jasmatuph .rwWindowContent a.rwPopupButton:hover, .RadWindow_Jasmatuph a.rwPopupButton:focus {
        border-color: var(--color1);
        color: var(--color2);
        background-color: var(--color1);
        background-image: linear-gradient();
        background-position: 0 0;
        background-repeat: repeat-x;
        border-radius: 3px;
        border-color: var(--color4);
    }

    .RadWindow_Jasmatuph a.rwPopupButton:focus {
        outline-width: thin;
        outline-style: dotted;
        outline-offset: -2px;
    }

    .RadWindow_Jasmatuph a.rwPopupButton:active {
        border-color: var(--color1);
        color: var(--color2);
        background-color: var(--color1);
        background-image: linear-gradient();
        color: var(--color2);
        box-shadow: 0 3px 5px rgba(0,0,0,0.125) inset;
        border-color: var(--color4);
    }

.RadWindow_Jasmatuph.rwMinimizedWindow, .RadWindow_Jasmatuph .RadWindow .rwMinimizedWindowOverlay {
    width: 214px !important;
    height: 36px !important;
}

    .RadWindow_Jasmatuph.rwMinimizedWindow .rwControlButtons {
        margin: -3px 0 0;
        width: 86px !important;
    }

    .RadWindow_Jasmatuph.rwMinimizedWindow .rwTable {
        width: 214px !important;
        height: 55px !important;
    }

/** ProgressArea ***/
.RadUploadProgressArea_Jasmatuph {
    border-color: var(--color2);
    color: var(--color1);
    background-color: var(--color2) !important;
    border-radius: 3px;
    min-Width : 280px !important;
   width : 100%;
   max-width : 450px;
}

.RadUploadProgressArea .ruShadow .ruProgress
{
    box-shadow : 1px 1px 11px 11px var(--color3) !important;
}

    .RadUploadProgressArea_Jasmatuph .ruProgressHeader {
        margin: 0 0 var(--paddingParagraph);
        padding: var(--paddingParagraph);
        border-bottom: 1px solid;
        color: var(--color1);
        background-color: var(--color2);
    }

    .RadUploadProgressArea_Jasmatuph .ruActions {
        margin: 0;
        padding: var(--paddingParagraph);
        border-top: 1px solid;
        text-align: left;
        background: var(--color2);
        height: var(--buttonHeight);
    }

    .RadUploadProgressArea_Jasmatuph .ruHeader {
        color: yellow;
        background-color: var(--color1);
        border-color: #dedede;
    }

    .RadUploadProgressArea_Jasmatuph .ruFooter {
        color: yellow;
        background: var(--color1);
        border-color: #dedede;
        padding: 0.5em 0.85714em;
    }

    .RadUploadProgressArea_Jasmatuph .ruProgressBar {
        border-color: forestgreen;
        border-radius: 0.31746em;
        background: red;
    }

    .RadUploadProgressArea_Jasmatuph .ruProgress {
        background-color: var(--color4) !important;
    }

        .RadUploadProgressArea_Jasmatuph .ruButton {
        border: 1px solid var(--color4) !important;
        background: var(--color4) !important;
        color: var(--color1) !important;
    }

        .RadUploadProgressArea_Jasmatuph .ruButton:hover {
        border: 1px solid var(--color3) !important;
        background: var(--color3) !important;
    }

    .RadUploadProgressArea_Jasmatuph .radButton {
        color: var(--color1);
        background-color: var(--color4);;
        border-radius: 0.21429em;
        border-color: var(--color4);
    }

        .RadUploadProgressArea_Jasmatuph .radButton.ruHovered {
            color: var(--color1);
            background-color: var(--color3);
            border-color: var(--color3);
        }

/** progress bar moving across*/
#RadProgressArea1_Panel_SecondaryProgressElement, #RadProgressArea1_Panel_PrimaryProgressElement
{
    background: repeating-linear-gradient(-45deg,  var(--color2),  var(--color2) 10px,  var(--color3) 10px,  var(--color3) 20px) !important;
}

/*********************************************************************************/
/* Responsive
/*********************************************************************************/
@media all and (max-width: 1024px) {

    .row-right {
        max-width: 590px;
    }

    .box-outer {
        max-width: 305px;
        margin-left: 20px !important;
    }

    .imgToTag {
        width: 100%;
    }
}


@media all and (max-width: 768px) {

    .box-outer {
        max-width: 340px;
        margin-left: 20px !important;
    }

    .row-right-big {
        width: 85%;
    }

    .row-left {
        margin-left: 10px !important;
    }

    .row .field {
        width: 98%;
    }

    .navMenu {
        width: 100%;
    }


    .navMenuSearchContainer {
        position: relative;
        top: -10px;
        margin-right: 5%;
        float: right;
        width: 65%;
        margin-left: 5%;
    }

    .navMenuItemSearchBox {
        top: 15px;
    }

    
}

@media all and (max-width: 375px) {
    
    .button{
        max-width : 265px;
    }

     .box-outer {
        margin-left: 10px !important;
        max-width : 285px;
    }

    .row-left {
       margin-left: 10px !important;
    }

    .navMenu{
        width : 100%;
        max-width : 355px;
    }

    .section-box
    {
        margin-left : 5px;
        margin-right : 5px;
    }

    .heading-sub
    {
        margin-left : var(--paddingParagraph);
        margin-right : var(--paddingParagraph);
    }

    .button-right{
        float : left;
    }
  
    .section-box-small
    {
        margin-left : 10px;
        margin-right : 10px;
    }

    .section-main
    {
        padding : 0px;
    }
}