html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

button, input[type=button], input[type=submit], input[type=reset] {
}

a {
    text-decoration: none;
}


/*Unviersal Colors*/
.red {
    color: #f55453
}

.light-red {
    color: #f55453
}

.BackgroundBox {
    background-color: #0e1218; /*@CSS.Color.backgroundColor;*/
    border-radius: 10px;
    padding: 10px;
    margin: 0px;
    filter: drop-shadow(5px 5px 10px #000000); /*@CSS.DropShadow.Dark;*/
}
/* Normally, a background box does not have any margin.
        But if the background boxes stack on top each of each ohter,
        it will look too ugly with no margin between the top and bottom of each background box 
        So add some margin at the bottom of the box*/
.BackgroundBoxCanStack {
    margin-bottom: 10px;
}

.ForegroundBox {
    background-color: #141a22; /*@CSS.Color.Foreground;*/
    border-radius: 10px;
    padding: 10px;
    margin: 0px;
    filter: drop-shadow(5px 5px 10px #000000); /*@CSS.DropShadow.Dark;*/ margin-top: 10px;
    margin-bottom: 10px;
}






/*Remove White input background colour for Chrome autocomplete*/
/*https://stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete*/
/*Change text in autofill textbox*/
/* Change the white to any color */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #0e1218 inset !important;
}

input:-webkit-autofill {
    -webkit-text-fill-color: rgb(227, 230, 229) !important;
}


/*Buttons*/
/*Turn a A link into a button*/
a.btn-primary {
    color: #000000;
    font-size: 14px;
    line-height: 21px;
    text-decoration: none;
    color: #fff;
    background-color: #0d6efd;
    border-radius: 3.5px;
    border: 1px solid #0D6EFD;
    padding: 7.5px 15px 7.5px 15px;
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 33px;
    margin-bottom: 1px;
    user-select: none;
}

    a.btn-primary:hover {
        user-select: none;
        background-color: #085ed7;
    }

input[type=button], input[type=submit], input[type=reset] {
    background-color: #0d6efd;
    color: #000000;
    font-size: 14px;
    line-height: 21px;
    text-decoration: none;
    color: #fff;
    background-color: #0d6efd;
    border-radius: 3.5px;
    border: 1px solid #0D6EFD;
    padding: 7.5px 15px 7.5px 15px;
    user-select: none;
}

/* Inputs*/



input, input[type="text"], textarea {
    background-color: #141a22;
    background: #141a22;
    color: #e3e6e5;
    margin-top: 15px;
    margin-bottom: 15px;
    font-size: 15px
}

.form-label {
}

input[type="text"]:disabled {
    background-color: #0e1218;
    color: red;
}




/*input[type="text"]:focus {
        background-color: yellow;
    }

    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0 30px white inset !important;
    }*/

/* input:-webkit-autofill {
        -webkit-box-shadow: 0 0 0px 1000px white inset;
        -webkit-text-fill-color: red !important;
    }*/

.form-control:focus {
    border-color: #74dc51;
    background-color: #1b2129;
    color: #e3e6e5;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(116, 220, 81, 0.6);
}



/*
textarea:focus, input:focus {
    outline: none;
    background-color: #141a22;
    background: #141a22;
}

input:-webkit-autofill {
    -webkit-box-shadow: 200px 200px 100px white inset;
    box-shadow: 200px 200px 100px white inset;
}*/

.form-control {
    background-color: #141a22;
    background: #141a22;
    color: #e3e6e5;
}

    .form-control .valid {
        background-color: #1b2129;
        background: #1b2129;
        color: #e3e6e5;
    }

    .form-control:disabled, .form-control[readonly] {
        background-color: #141a22;
        opacity: 1;
    }

/*Readonly Text Fields*/
input[type="text"][readonly], input[type="number"][readonly] {
    color: #727980;
    background-color: #0e1218 !important;
    border: none;
    padding-left: 5px;
    cursor: default;
}

/*Readonly TextArea Fields*/
textarea[readonly] {
    color: #727980;
    background-color: #0e1218 !important;
    border: solid 1px;
    padding-left: 5px;
    cursor: default;
}
/*Readonly TextArea Fields*/
textarea[readonly]:focus {
    color: #727980;
    background-color: #0e1218 !important;
    border: solid 1px;
    padding-left: 5px;
    cursor: default;
}


.form-control[readonly]:focus {
    color: #727980;
    border-color: none;
    background-color: #1b2129;
    box-shadow: none;
}

/*Readonly Drop Down*/
select:disabled, input[type="number"][readonly] {
    color: #727980;
    background-color: #0e1218 !important;
    border: none;
    padding-left: 5px;
    cursor: default;
}

/*Readonly DateTime Fields*/
select:disabled, input[type="date"][readonly], input[type="datetime-local"][readonly] {
    color: #727980;
    background-color: #0e1218 !important;
    border: none;
    padding-left: 5px;
    cursor: default;
}

input[type="datetime-local"] {
}












/* End Inputs */




/*IOS Style Checkbox*/
/*https://www.cssscript.com/realistic-ios-switch-pure-css/*/
/*#3AABFA*/
.form-switch span {
    font-size: 20px;
    line-height: 40px;
    padding-right: 10px;
    color: #e3e6e5;
}

.form-switch {
    text-align: right;
    display: inline-block;
    width: 100%;
}


.form-switch {
    display: inline-block;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

    .form-switch i {
        position: relative;
        display: inline-block;
        margin-right: .5rem;
        width: 46px;
        height: 26px;
        background-color: #e6e6e6;
        border-radius: 23px;
        vertical-align: text-bottom;
        transition: all 0.3s linear;
    }

        .form-switch i::before {
            content: "";
            position: absolute;
            left: 0;
            width: 42px;
            height: 22px;
            background-color: #e3e6e5;
            border-radius: 11px;
            transform: translate3d(2px, 2px, 0) scale3d(1, 1, 1);
            transition: all 0.25s linear;
        }

        .form-switch i::after {
            content: "";
            position: absolute;
            left: 0;
            width: 22px;
            height: 22px;
            background-color: #fff;
            border-radius: 11px;
            box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24);
            transform: translate3d(2px, 2px, 0);
            transition: all 0.2s ease-in-out;
        }

    .form-switch:active i::after {
        width: 28px;
        transform: translate3d(2px, 2px, 0);
    }

    .form-switch:active input:checked + i::after {
        transform: translate3d(16px, 2px, 0);
    }

    .form-switch input {
        display: none;
    }

        .form-switch input:checked + i {
            background-color: #3AABFA;
        }

            .form-switch input:checked + i::before {
                transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0);
            }

            .form-switch input:checked + i::after {
                transform: translate3d(22px, 2px, 0);
            }


/* When Checkbox is readonly Disabled*/



/*IOS Style Checkbox End*/



/* Bar and Circle Graphs*/

.single-chart .percentage {
    Text Color
    /*color: #e3e6e5;
    fill: #e3e6e5;*/
}


.single-chart.progress-bar-graph .circle-bg {
    stroke-width: 12.8;
}

.single-chart.progress-bar-graph .circle {
    stroke-width: 9.8;
    stroke-linecap: butt;
}

.single-chart.progress-bar-graph {
    font-size: 25px;
}


.circle-graph .drawing {
    width: 100px;
    height: 100px;
}



/*Helpers*/

/*Vertical Center*/
.centerVertically {
    display: flex;
    justify-content: center;
    align-items: center;
}


.fade-in-animation {
    transition: background-color 5s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-in-text-low-opacity-start {
    color: black;
    transition: color 3s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-in-text {
    color: red;
    transition: color 3s cubic-bezier(0.16, 1, 0.3, 1);
}


.fade-in-opacity {
    transition: opacity .5s cubic-bezier(0.16, 1, 0.3, 1);
}

.ChangeSVGColorToWhite {
    background-color: white;
    -webkit-mask: url(logo.svg) no-repeat center;
    mask: url(logo.svg) no-repeat center;
}

.ChangeColorfulSVGColorToWhite {
    filter: brightness(0) saturate(100%) invert(96%) sepia(4%) saturate(17%) hue-rotate(203deg) brightness(106%) contrast(104%);
}

Meet the Rubik’s Cube community

Skip navigation
Search





Avatar image





.ChangeSVGColorToSoftGrey {
    background-color: #727980;
    -webkit-mask: url(logo.svg) no-repeat center;
    mask: url(logo.svg) no-repeat center;
}



/*Color SVG Pictures*/

/*.colorize-pink {
    filter: brightness(0.5) sepia(1) hue-rotate(-70deg) saturate(5);
}
.colorize-lightRed {
    filter: invert(45%) sepia(11%) saturate(3841%) hue-rotate(314deg) brightness(101%) contrast(97%);
}


.colorize-navy {
    filter: brightness(0.2) sepia(1) hue-rotate(180deg) saturate(5);
}

.colorize-blue {
    filter: brightness(0.5) sepia(1) hue-rotate(140deg) saturate(6);
}

.colorize-green {
    filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
}*/

/*Comment Boxes*/
.commentBox {
    background-color: #141a22; /*@CSS.Color.Foreground*/
    ;
    border-radius: 8px;
    margin-top: 10px;
}

    .commentBox .name, .commentBox .message {
        padding: 10px;
    }

    .commentBox .name {
        background-color: #1b2129; /*@CSS.Color.ForeGroundLight;*/
        border-radius: 10px 10px 0px 0px;
        font-weight: 600;
    }



/*Loading Icons*/
/* HTML: <div class="loader"></div> */
.loader {
    width: 50px;
    aspect-ratio: 1;
    display: grid;
    -webkit-mask: conic-gradient(from 15deg,#0000,#000);
    animation: l26 1s infinite steps(12);
}

    .loader,
    .loader:before,
    .loader:after {
        background: radial-gradient(closest-side at 50% 12.5%, #008cd2 96%,#0000) 50% 0/20% 80% repeat-y, radial-gradient(closest-side at 12.5% 50%, #00699f 96%,#0000) 0 50%/80% 20% repeat-x;
    }

        .loader:before,
        .loader:after {
            content: "";
            grid-area: 1/1;
            transform: rotate(30deg);
        }

        .loader:after {
            transform: rotate(60deg);
        }

@keyframes l26 {
    100% {
        transform: rotate(1turn)
    }
}

.loader.gray, .loader.gray:before, .loader.gray:after {
    background-color: red;
    background: radial-gradient(closest-side at 50% 12.5%, #737373 96%,#0000) 50% 0/20% 80% repeat-y, radial-gradient(closest-side at 12.5% 50%, #979797 96%,#0000) 0 50%/80% 20% repeat-x;
}

.loader.fast {
    animation: l26 0.5s infinite steps(12);
}




/*Tables*/
/*Defualt Tables Style*/
table {
    font-size: 12px;
    /*Remove unwanted table cell borders*/
    border-collapse: collapse;
    border: none;
    border-radius: inherit;

}

/*Bootstrap also includes a .table class, not just a table element. Bootstrap sets the .table class margin to 14px. So override the bootstrap style*/
.table {
    margin-bottom:0px;
    padding-top:0px;
}

th {
    border-spacing: 0;
    border: none;
    border-radius: inherit;
    background-color: purple;
    border-collapse: separate;
    padding: 40px;
}

tr {
    border-spacing: 0;
    border: none;
    border-radius: inherit;
    padding-left: 50px;
}

td {
    border-spacing: 0;
    border: none;
    border-radius: inherit;
    padding-left: 50px;
}

/*Adding padding to table*/
/*Table element dosen't support padding (easily), so you have to do it on the TD elemetns instead*/
/*https://stackoverflow.com/questions/3656615/padding-a-table-row*/

/*The Left side of the header*/
th:first-child {
    padding-left: 10px;
}
/*The right side of the header*/
th:last-child {
    padding-right: 10px;
}
th:first-child {
    padding-left: 10px;
    /*background-color: red;*/
}

/*All rows in the first Coulmn of Data*/
td:first-child {
    padding-left: 10px;
    /*background-color: red;*/
}
/*All rows in the Last Coulmn of Data*/
td:last-child {
    padding-right: 10px;
    /*background-color: green;*/
}




/*Alternate Row Colors*/
table tr:nth-child(odd) td {
}

table tr:nth-child(even) td {
    background-color: #131921;
}

table tr:hover td {
    box-shadow: inset 0 0 0 10em rgba(255, 255, 255, 0.03);
    overflow: hidden;
}


/*Last Row of Table*/
tr:last-child td {
    /*background-color: yellow;*/
}

    /*Round the top left corner of table*/
tr:last-child th:first-child {
    /*background-color: pink;*/
    border-top-left-radius: 10px;
}

    /*Round the top right corner of table*/
tr:last-child th:last-child {
    /*background-color: purple;*/
    border-top-right-radius: 10px;
}

    /*Round the bottom left corner of table*/
tr:last-child td:first-child {
    /*background-color: pink;*/
    border-bottom-left-radius: 10px;
    
}

    /*Round the bottom right corner of table*/
tr:last-child td:last-child {
    /*background-color: purple;*/
    border-bottom-right-radius: 10px;
    
}

/* If the table is direclty inside in a a backgroundbox, format the background box so it looks nice and works with tables. */
.BackgroundBox .TableContainer {
    padding: 0px; /*Let the table but right up aginst the sides of the background box*/
    overflow: hidden; /*The background box has rounded corners... Hide the table from sticking outside these rounded corners. */
}

.MarginlessTableContainer {
    margin-left: -10px;
    margin-right: -10px;
    margin-bottom: -10px;
}



/*Table Navigation Buttons*/
/*Table Navigation Floating Buttons*/
a.tableNavigationFloatingButton {
    background-color: #3aabfb; /*Set to a nice blue*/
}
/*Disable from turning a diffrent color on hover*/
    a.tableNavigationFloatingButton:hover {
        background-color: #3aabfb; /*Keep the same nice blue color*/
    }
    /*Float to the top right of table*/
    a.tableNavigationFloatingButton.topRight {
        float: right;
        margin-top: 0px;
        margin-right: 0px;
    }

/*Split the Div evenly into 2. One section will be on the left. One section will be on the right. The space between them will auto grow. */
/* [Left]<---- Auto Growing Space    ---->[Right]*/
.reggieTheAlligatorStyleNavigation {
    /*background-color: red;*/
    display: flex;
    justify-content: space-between;
    align-items:end;
}
    /*Flex box requires inline elements, convert H1 to H6 to inline.*/
    .reggieTheAlligatorStyleNavigation > h1, .reggieTheAlligatorStyleNavigation h2, .reggieTheAlligatorStyleNavigation h3, .reggieTheAlligatorStyleNavigation h4, .reggieTheAlligatorStyleNavigation h5, .reggieTheAlligatorStyleNavigation h6 {
        display: inline;
        overflow-y: hidden; /*If the text is too large to hit in the heading navigation bar, don't display the extra along the y axis*/
        overflow-x: auto; /*If the text is too large to hit in the heading navigation bar, display a scrollbar instead of expanding the heading navigation bar*/
      
    }

    .reggieTheAlligatorStyleNavigation .NavigationButton {
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 10px; /*Give the navigation buttons some margins so they have some space between each other when they float on top of each other*/
        margin-left: 10px;
    }

hr.reggieTheAlligatorStyleNavigation  {
    margin-top: 5px; /*Set custom margin for hr to look nice.*/
    margin-bottom: 15px; /*Set custom margin for hr to look nice.*/
 
}

/*Confrim Delete Prompt*/
.reggieTheAlligatorStyle-ConfirmDelete {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
    
}

    .reggieTheAlligatorStyle-ConfirmDelete h5 {
        color:#f55453; /*@CSS.Color.LightRed;*/
    }

    /*Contrainer for the NO/YES buttons to confirm delete*/
    .reggieTheAlligatorStyle-ConfirmDelete.form-group {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .reggieTheAlligatorStyle-ConfirmDelete a, .reggieTheAlligatorStyle-ConfirmDelete input {
        width: 100px;
        margin: 10px;
    }
.redDangerButton, input[type=button].redDangerButton, input[type=submit].redDangerButton, input[type=reset].redDangerButton {
    background-color: #f55453; /*@CSS.Color.LightRed;*/
    border-color: #f55453; /*@CSS.Color.LightRed;*/
}


    /*Images Style*/
    /*Circular Images*/
    .circularPictureCover { /* need to give parent container equal width and height*/
        margin: auto;
        width: 200px;
        height: 200px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        overflow: hidden;
    }

    .circularPictureCover img {
        width: 100%;
    }

.circularPicture .whiteBorder {
}




/* Custom Scrolbars*/

/*Add this class to hide scrollbars*/
div-No-X-Scrollbar {
    overflow-x: hidden;
}


div::-webkit-scrollbar {
    width: 16px;
}

div::-webkit-scrollbar-thumb {
    background-color: #1b2129;
    border: 4px solid transparent;
    border-radius: 6px;
    background-clip: padding-box;
    /*Prevent Entire Page From Scolling when scrolling inside div*/
    
}

.volk-grey-scrollbar {
    /*Turn on Scrollbar*/
    overflow: auto;
    /*Hide the X Scrollbar by defualt*/
    overflow-x: hidden;
    /*Prevent Entire Page From Scolling when scrolling inside div*/
    overscroll-behavior: contain;
}

    .volk-grey-scrollbar::-webkit-scrollbar {
        width: 16px;
    }

    .volk-grey-scrollbar::-webkit-scrollbar-thumb {
        background-color: #1b2129;
        border: 4px solid transparent;
        border-radius: 6px;
        background-clip: padding-box;
    }



/*Helpers*/

.display-none {
    display: none;
}

/*Clear Float*/
.clear {
    clear: both;
}