/* ------------ Tab Container - BEGIN ------------ */
/*Use this inside another container like a <div> or <td> that has the class .tabPageHeader-border for the border effect*/

.tabPageHeader {
    font-family: 'Arial Rounded MT';
    font-size: large;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 2px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background-image: linear-gradient(whitesmoke, rgb(0, 0, 0, 0));
    background-color: white;
    color: dimgray;
    user-select: none;
    cursor: pointer;
    pointer-events: auto;
}

    .tabPageHeader:hover {
        background-image: linear-gradient( #a31f1a, rgb(0, 0, 0, 0));
        background-color: #cf2a24;
        color: lightgray;
    }

    .tabPageHeader:active {
        background-image: linear-gradient( #6b110e, rgb(0, 0, 0, 0));
        background-color: #a31f1a;
        color: darkgray;
    }

/*Use this on a container like a <div> or <td> containing an element that has the class .tabPageHeader for the border effect*/
.tabPageHeader-border {
    background-image: linear-gradient(rgb(0, 0, 0, 0), lightgray);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    padding-right: 2px;
    padding-bottom: 3px;
    pointer-events: none;
}

    .tabPageHeader-border:hover {
        background-image: linear-gradient(#a31f1a, #6b110e);
    }

/*Use this class to switch between an inactive and a selected state look*/
.tabPageHeader-selected {
    font-family: 'Arial Rounded MT';
    font-size: large;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 2px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background-image: linear-gradient(rgb(0, 0, 0, 0), black);
    background-color: #0a6ec6;
    color: whitesmoke;
    user-select: none;
    cursor: default;
}

/*Use this class to switch between an inactive and a selected state look*/
.tabPageHeader-selected-border {
    background-image: linear-gradient(#0a6ec6, #010168);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    padding-right: 2px;
    padding-bottom: 3px;
}
/* ------------ Tab Container - END   ------------ */


/* ------------ Dropdown Header - BEGIN ------------ */

/*Use this inside another container like a <div> or <td> that has the class .dropDownHeader-border for the border effect*/

.border-grey {
    border-color: #e1e1e1;
    border-width: 2px;
}

.dropDownHeader {
    font-family: 'Arial Rounded MT';
    font-size: medium;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 2px;
    background-image: linear-gradient(#292e62, rgb(0, 0, 0, 0));
    background-color: #292e62;
    color: white;
    user-select: none;
    width: 100%;
    text-align: center;
    cursor: pointer;
    pointer-events: auto;
    height: 45px;
    padding-top: 10px;
}

    .dropDownHeader:hover {
        background-image: linear-gradient(#292e62, #292e62);
        background-color: #292e62;
        color: white;
    }

    .dropDownHeader:active {
        background-image: linear-gradient(#292e62, #292e62);
        background-color: #292e62;
        color: white;
    }

/*Use this on a container like a <div> or <td> containing an element that has the class .dropDownHeader for the border effect*/
.dropDownHeader-border {
    background-image: linear-gradient(#292e62, #292e62);
    pointer-events: none;
}

    .dropDownHeader-border:hover {
        background-image: linear-gradient(#292e62, #292e62);
    }

/*Use this class to switch between an inactive and a selected state look*/
.dropDownHeader-selected {
    font-family: 'Arial Rounded MT';
    font-size: medium;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 2px;
    background-image: linear-gradient(#292e62, #292e62);
    /*background-color: #0a6ec6;*/
    color: white;
    user-select: none;
    display: inline-block;
    width: 100%;
    text-align: center;
    cursor: pointer;
    height: 45px;
    padding-top: 10px;
}

    .dropDownHeader-selected:hover {
        background-color: #292e62;
        color: white;
    }

    .dropDownHeader-selected:active {
        background-color: #292e62;
        color: white;
    }

/*Use this class to switch between an inactive and a selected state look*/
.dropDownHeader-selected-border {
    /*background-image: linear-gradient(#0a6ec6, #010168);*/
    padding-bottom: 3px;
}

.dropDownContent {
    width: 100%;
    visibility: collapse;
    margin-left: auto;
    margin-right: auto;
    background-color: white;
    height: 45px;
    padding-top: 10px;
}

/* ------------ Dropdown Header - END   ------------ */

.dropDownSubHeader {
    font-family: 'Arial Rounded MT';
    font-size: medium;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 2px;
    background-image: linear-gradient(#e1e1e1, rgb(0, 0, 0, 0));
    background-color: #e1e1e1;
    color: #292e62;
    user-select: none;
    width: 100%;
    text-align: center;
    cursor: pointer;
    pointer-events: auto;
    height: 45px;
    padding-top: 10px;
}

    .dropDownSubHeader:hover {
        background-image: linear-gradient(#e1e1e1, #e1e1e1);
        background-color: #e1e1e1;
        color: #292e62;
    }

    .dropDownSubHeader:active {
        background-image: linear-gradient(#e1e1e1, #e1e1e1);
        background-color: #e1e1e1;
        color: #292e62;
    }

/*Use this on a container like a <div> or <td> containing an element that has the class .dropDownHeader for the border effect*/
.dropDownSubHeader-border {
    background-image: linear-gradient(#e1e1e1, #e1e1e1);
    pointer-events: none;
}

    .dropDownSubHeader-border:hover {
        background-image: linear-gradient(#e1e1e1, #e1e1e1);
    }

/*Use this class to switch between an inactive and a selected state look*/
.dropDownSubHeader-selected {
    font-family: 'Arial Rounded MT';
    font-size: medium;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 2px;
    background-image: linear-gradient(#e1e1e1, #e1e1e1);
    /*background-color: #0a6ec6;*/
    color: #292e62;
    user-select: none;
    width: 100%;
    text-align: center;
    cursor: pointer;
    height: 45px;
    padding-top: 10px;
}

    .dropDownSubHeader-selected:hover {
        background-color: #e1e1e1;
        color: #292e62;
    }

    .dropDownSubHeader-selected:active {
        background-color: #e1e1e1;
        color: #292e62;
    }

/*Use this class to switch between an inactive and a selected state look*/
.dropDownSubHeader-selected-border {
    /*background-image: linear-gradient(#0a6ec6, #010168);*/
    padding-bottom: 3px;
}

/* ------------ Dropdown Specifics - End   ------------ */

/* ------------ Dropdown Specifics - Start   ------------ */

.dropDownAttributeHeader {
    font-family: 'Arial Rounded MT';
    font-size: medium;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 2px;
    background-image: linear-gradient(#FCFFFC, rgb(0, 0, 0, 0));
    background-color: #FCFFFC;
    color: #292e62;
    user-select: none;
    width: 100%;
    text-align: center;
    cursor: pointer;
    pointer-events: auto;
    height: 45px;
    padding-top: 10px;
}

    .dropDownAttributeHeader:hover {
        background-image: linear-gradient(#FCFFFC, #FCFFFC);
        background-color: #FCFFFC;
        color: #292e62;
    }

    .dropDownAttributeHeader:active {
        background-image: linear-gradient(#FCFFFC, #FCFFFC);
        background-color: #FCFFFC;
        color: #292e62;
    }

/*Use this on a container like a <div> or <td> containing an element that has the class .dropDownHeader for the border effect*/
.dropDownAttributeHeader-border {
    background-image: linear-gradient(#FCFFFC, #FCFFFC);
    pointer-events: none;
}

    .dropDownAttributeHeader-border:hover {
        background-image: linear-gradient(#FCFFFC, #FCFFFC);
    }

/*Use this class to switch between an inactive and a selected state look*/
.dropDownAttributeHeader-selected {
    font-family: 'Arial Rounded MT';
    font-size: medium;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 2px;
    background-image: linear-gradient(#FCFFFC, #FCFFFC);
    /*background-color: #0a6ec6;*/
    color: #292e62;
    user-select: none;
    width: 100%;
    text-align: center;
    cursor: pointer;
    height: 45px;
    padding-top: 10px;
}

    .dropDownAttributeHeader-selected:hover {
        background-color: #FCFFFC;
        color: #292e62;
    }

    .dropDownAttributeHeader-selected:active {
        background-color: #FCFFFC;
        color: #292e62;
    }

/*Tool Tip Styling */
.tooltip {
    position: relative;
    display: inline-block;
}

    .tooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        /* Position the tooltip */
        position: absolute;
        z-index: 1;
    }

    .tooltip:hover .tooltiptext {
        visibility: visible;
    }

/*Use this class to switch between an inactive and a selected state look*/
.dropDownAttributeHeader-selected-border {
    /*background-image: linear-gradient(#0a6ec6, #010168);*/
    padding-bottom: 3px;
}

/* ------------ Info Header - BEGIN ------------ */
.infoHeader-medium {
    font-family: 'Arial Rounded MT';
    font-size: medium;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 4px;
    background-color: #0a6ec6;
    background-image: linear-gradient(rgb(0, 0, 0, 0), rgb(0, 0, 0, 0.3), rgb(0, 0, 0, 0.5), rgb(0, 0, 0));
    color: whitesmoke;
    user-select: none;
    width: 100%;
    text-align: center;
}

.infoHeader-xxLarge {
    font-family: 'Arial Rounded MT';
    font-size: x-large;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 4px;
    background-color: #0a6ec6;
    background-image: linear-gradient(rgb(0, 0, 0, 0), rgb(0, 0, 0, 0.3), rgb(0, 0, 0, 0.5), rgb(0, 0, 0));
    color: whitesmoke;
    user-select: none;
    width: 100%;
    text-align: center;
}

/* ------------ Info Header - END   ------------ */


/* ------------ Input - BEGIN ------------ */
.gwInput {
    color: dimgrey;
    font-family: Arial 'Arial Rounded MT';
    font-size: x-large;
    border: 0;
    text-align: center;
    padding-bottom: 4px;
    background-color: whitesmoke;
    border-radius: 8px 8px 8px 8px;
}

    .gwInput:focus {
        outline: none;
    }

    .gwInput::placeholder {
        color: darkgray;
    }

.gwSelect {
    width: 100%;
    color: dimgrey;
    font-family: Arial 'Arial Rounded MT';
    font-size: x-large;
    background-color: whitesmoke;
    border-radius: 8px 8px 8px 8px;
    border: 0;
}
    /* ------------ Input - END   ------------ */
    .gwSelect:focus {
        outline: none;
    }

.gwTextArea {
    color: dimgrey;
    font-family: Arial 'Arial Rounded MT';
    font-size: large;
    background-color: whitesmoke;
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    outline: none;
    padding: 3px 0px 3px 3px;
    margin: 5px 1px 3px 0px;
    border: 1px solid #DDDDDD;
}

    .gwTextArea:focus {
        box-shadow: 0 0 5px rgba(81, 203, 238, 1);
        padding: 3px 0px 3px 3px;
        margin: 5px 1px 3px 0px;
        border: 1px solid rgba(81, 203, 238, 1);
    }

/* CHECk !! - Use border and header */
/*Use this on a container like a <div> or <td> containing an element that has the class .gwGridHeader for the border effect*/
.gwGridHeader-border {
    background-image: linear-gradient(rgb(0, 0, 0, 0), lightgray);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    padding-right: 2px;
    padding-bottom: 3px;
    pointer-events: none;
}

.gwGridHeader {
    font-family: 'Arial Rounded MT';
    font-size: large;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 2px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background-image: linear-gradient(whitesmoke, rgb(0, 0, 0, 0));
    background-color: white;
    color: dimgray;
    user-select: none;
    pointer-events: auto;
}

.gwGridRow {
    font-family: 'Arial Rounded MT';
    background-image: linear-gradient(whitesmoke, rgb(0, 0, 0, 0));
    background-color: white;
    color: dimgrey;
}

    .gwGridRow:hover {
        background-color: greenyellow;
        cursor: pointer;
    }

.gwGridCell {
    padding-top: 5px;
    padding-left: 8px;
    padding-right: 8px;
}

.gwLogoAtag {
    padding-left: 10px;
    padding-right: 10px;
}

.gwCommentBubble {
    cursor: pointer;
    color: whitesmoke;
}

    .gwCommentBubble:hover {
        cursor: pointer;
        color: greenyellow;
    }

/*  Sign In Look */
.signInText {
    font-family: 'Arial Rounded MT';
    font-size: large;
    text-decoration: none;
    color: whitesmoke;
}

    .signInText:hover {
        color: greenyellow;
        text-decoration: none;
    }

/*Users Grid Hover*/
.userRow:hover {
    background-color: red;
    cursor: pointer;
}



/* ------------ CHECK BOX - BEGIN ------------ */

/* Styling Checkbox Starts */
.checkbox-label {
    display: block;
    position: relative;
    margin: auto;
    cursor: pointer;
    font-size: 22px;
    line-height: 24px;
    height: 24px;
    width: 24px;
    clear: both;
}

    .checkbox-label input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

    .checkbox-label .checkbox-custom {
        position: absolute;
        top: 0px;
        left: 0px;
        height: 24px;
        width: 24px;
        background-color: transparent; /*transparent;*/
        border-radius: 5px;
        transition: all 0.3s ease-out;
        -webkit-transition: all 0.3s ease-out;
        -moz-transition: all 0.3s ease-out;
        -ms-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
        border: 2px solid red; /*#FFFFFF;*/
    }

    .checkbox-label input:checked ~ .checkbox-custom {
        background-color: transparent; /*#FFFFFF;*/
        border-radius: 5px;
        -webkit-transform: rotate(0deg) scale(1);
        -ms-transform: rotate(0deg) scale(1);
        transform: rotate(0deg) scale(1);
        opacity: 1;
        border: 2px solid #0a6ec6; /*#FFFFFF;*/
    }

    .checkbox-label .checkbox-custom::after {
        position: absolute;
        content: "";
        left: 12px;
        top: 12px;
        height: 0px;
        width: 0px;
        border-radius: 5px;
        border: solid #009BFF;
        border-width: 0 3px 3px 0;
        -webkit-transform: rotate(0deg) scale(0);
        -ms-transform: rotate(0deg) scale(0);
        transform: rotate(0deg) scale(0);
        opacity: 1;
        transition: all 0.3s ease-out;
        -webkit-transition: all 0.3s ease-out;
        -moz-transition: all 0.3s ease-out;
        -ms-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
    }

    .checkbox-label input:checked ~ .checkbox-custom::after {
        -webkit-transform: rotate(45deg) scale(1);
        -ms-transform: rotate(45deg) scale(1);
        transform: rotate(45deg) scale(1);
        opacity: 1;
        left: 8px;
        top: 3px;
        width: 6px;
        height: 12px;
        border: solid #0a6ec6; /*#009BFF;*/
        border-width: 0 2px 2px 0;
        background-color: transparent;
        border-radius: 0;
    }

    /* For Ripple Effect */
    .checkbox-label .checkbox-custom::before {
        position: absolute;
        content: "";
        left: 10px;
        top: 10px;
        width: 0px;
        height: 0px;
        border-radius: 5px;
        border: 2px solid #0a6ec6; /*#FFFFFF;*/
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
    }

    .checkbox-label input:checked ~ .checkbox-custom::before {
        left: -3px;
        top: -3px;
        width: 24px;
        height: 24px;
        border-radius: 5px;
        -webkit-transform: scale(3);
        -ms-transform: scale(3);
        transform: scale(3);
        opacity: 0;
        z-index: 999;
        transition: all 0.3s ease-out;
        -webkit-transition: all 0.3s ease-out;
        -moz-transition: all 0.3s ease-out;
        -ms-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
    }

    /* Style for Circular Checkbox */
    .checkbox-label .checkbox-custom.circular {
        border-radius: 50%;
        border: 2px solid red; /*#FFFFFF;*/
    }

    .checkbox-label input:checked ~ .checkbox-custom.circular {
        background-color: transparent; /*#FFFFFF;*/
        border-radius: 50%;
        border: 2px solid #0a6ec6; /*#FFFFFF;*/
    }

        .checkbox-label input:checked ~ .checkbox-custom.circular::after {
            border: solid #0a6ec6; /*#0067FF;*/
            border-width: 0 2px 2px 0;
        }

    .checkbox-label .checkbox-custom.circular::after {
        border-radius: 50%;
    }

    .checkbox-label .checkbox-custom.circular::before {
        border-radius: 50%;
        border: 2px solid #0a6ec6; /*#FFFFFF;*/
    }

    .checkbox-label input:checked ~ .checkbox-custom.circular::before {
        border-radius: 50%;
    }
/* ------------ CHECK BOX - END ------------ */