﻿.crownGradient {
    color: white;
    border: none;
    box-shadow: inset;
    background: transparent linear-gradient(to bottom, #fa4a04 0%, #fc8905 100%);
}

    .crownGradient a :hover {
        color: black;
        background: transparent linear-gradient(240deg, #fa4a04 0%, #fc8905 100%);
    }


.crownGradientRed2Pink {
    color: white !important;
    border: none;
    box-shadow: inset;
    /*background: transparent linear-gradient(to bottom, RGBA(255,101,80,0.7), #fc8905 100%);*/
    /* Chrome 10-25, Safari 5.1-6 */
    background: -webkit-linear-gradient( 135deg, #ee7724, #d8363a, #dd3675, #b44593);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background: linear-gradient( to right, #ee7724, #d8363a, #dd3675, #b44593);
}



.crownOrangeGradietBtn {
    color: white !important;
    border: none;
    text-decoration: none;
    cursor: pointer;
    box-shadow: inset;
    background: transparent linear-gradient(to bottom, #fa4a04 0%, #fc8905 100%);
}

    .crownOrangeGradietBtn:hover {
        border: none;
        box-shadow: inset;
        background: transparent linear-gradient(to bottom, #AC1E22 0%, #fa4a04 100%);
    }

.crownLightGradietBtn {
    /* fallback for old browsers */
    color: black;
    border: none;
    box-shadow: inset;
    /* Chrome 10-25, Safari 5.1-6 */
    background: -webkit-linear-gradient(to bottom, #d1d2d6, #fff);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background: linear-gradient(to bottom, #d1d2d6, #fff);
}

    .crownLightGradietBtn:hover {
        /* fallback for old browsers */
        border: none;
        box-shadow: inset;
        /* Chrome 10-25, Safari 5.1-6 */
        background: -webkit-linear-gradient(to bottom, #fc8905, #ABACB0, #c3c3c4, #e2e2e2);
        /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        background: linear-gradient(to bottom, #6e6e6e, #ececec);
        /* box-shadow: inset 6px 6px 6px -2px rgba(141, 138, 138, 0.2),
        inset -6px -6px 6px -2px rgba(223, 222, 222, 0.7),
        -0.5px -0.5px 0px -1px rgba(255, 255, 255, 1),
        0.5px 0.5px 0px rgba(0, 0, 0, 0.15), 0px 12px 10px -10px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 124, 196, 0.1);*/
    }

.crownDarkGradietBtn {
    border: none;
}

 


.rotate-button {
    display: inline-block;
    width: 150px;
    height: 30px;
    text-align: center;
    transform-style: preserve-3d;
    cursor: pointer;
    transition: all .3s ease;
    font-family: 'arial'
}

    .rotate-button .rotate-button-face,
    .rotate-button .rotate-button-face-back {
        position: absolute;
        display: block;
        border: 1px solid #fa4a04;
        transition: all .5s;
        color: #fa4a04;
        text-decoration: none;
        width: 150px;
        height: 30px;
        line-height: 30px;
        border-radius: 4px;
    }

    .rotate-button .rotate-button-face {
        background-color: #fff;
        transform: translateZ(15px);
    }

    .rotate-button .rotate-button-face-back {
        background-color: #35495e;
        color: #fa4a04;
        border: 1px solid #fa4a04;
        transform: rotateX(-90deg) translateZ(15px);
    }

    .rotate-button:hover {
        transform: rotateX(90deg);
    }



.crownBackground {
    /*background-image: linear-gradient(rgba(255, 254, 253, 0.25) 10%, rgba(255, 253, 253, 0.25) 100%), url("'../css/images/Crown SDS - full page white low.jpg'");*/
    background-image: linear-gradient(rgba(255, 254, 253, 0.6) 10%, rgba(255, 253, 253, 0.7) 100%), url("../css/images/Crown SDS - full page white low.jpg");
    background-color: white;
    min-height: 100%;
    overflow: scroll;
    overflow-x: hidden;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: top;
    background-size: cover;
}

.crownBackgroundDark {
    background-image: url("../css/images/Crown SDS - full page low.jpg");
    background-repeat: no-repeat;  
    background-attachment: fixed;
    background-position: top;
    background-size: cover;
}

/*
.crownBackground {
    background-image: linear-gradient(rgba(255, 254, 253, 0.62) 0%, rgba(255, 253, 253, 0.62) 100%), url("../css/images/CrownLogoCorner.png");
    background-position: 100% 0;
    background-repeat: no-repeat;
    background-color: black;
    background-size: 25% auto;
    background-attachment: fixed;
}
*/


/*.crownGradientRed2Pink a  {
        background: #fccb90;
        color: white;*/
/* Chrome 10-25, Safari 5.1-6 */
/*background: -webkit-linear-gradient(to bottom, #000, #272727, #484848);*/
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
/*background: linear-gradient(to bottom, #000,#272727,#484848);
    }*/

.btnWhiteShadow {
    display: flex;
    justify-content: center;
    background: #fff;
    margin: 0 15px;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 6px 6px 10px -1px rgba(54, 69, 79, 0.25), -2px -1px 10px 2px rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 124, 196, 0);
    transition: transform 0.5s;
}

    .btnWhiteShadow:hover {
        background: #fff;
        color: #000;
        box-shadow: inset 6px 6px 6px -2px rgba(0, 0, 0, 0.2), inset -6px -6px 6px -2px rgba(255, 255, 255, 0.7), -0.5px -0.5px 0px -1px rgba(255, 255, 255, 1), 0.5px 0.5px 0px rgba(0, 0, 0, 0.15), 0px 12px 10px -10px rgba(0, 0, 0, 0.05);
        border: 1px solid rgba(0, 124, 196, 0.1);
        transform: translateY(2px);
    }

.divider {
    /* minor cosmetics */
    display: table;
    font-size: 16px;
    text-align: center;
    width: 75%;
    /* divider width */
    margin: 10px auto;
    /* spacing above/below */
}

    .divider span {
        display: table-cell;
        position: relative;
    }

        .divider span:first-child,
        .divider span:last-child {
            width: 50%;
            top: 13px;
            /* adjust vertical align */
            background-size: 100% 2px;
            /* line width */
            background-size: 100% 2px;
            /* line width */
            background-position: 0 0, 0 100%;
            background-repeat: no-repeat;
        }

        .divider span:first-child {
            /* color changes in here */
            background-image: -webkit-linear-gradient(left, rgba(250, 74, 4, 0), rgba(216, 54, 58, 0.6), rgba(250, 74, 4, 0.8));
        }

        .divider span:nth-child(2) {
            color: #000;
            padding: 0px 5px;
            width: auto;
            white-space: nowrap;
        }

        .divider span:last-child {
            /* color changes in here */
            background-image: -webkit-linear-gradient(left, rgba(250, 74, 4, 0.8), rgba(216, 54, 58, 0.6), rgba(0, 0, 0, 0));
        }

.form-check-input:checked {
    background-color: #e6180d !important;
    border-color: #ffffff !important;
}




/*=========Tooltip Design Start=============*/


/*You can use [title] selector as well*/
[data-title] {
    font-size: 30px; /*optional styling*/
    position: relative;
    cursor: help;
}

    [data-title]:hover::before {
        content: attr(data-title) !important;
        position: absolute !important;
        bottom: -26px !important;
        display: inline-block;
        padding: 6px 12px 6px;
        border-radius: 4px;
        background: linear-gradient( to right, #ee7724, #d8363a, #dd3675, #b44593);
        color: #fff;
        font-size: 12px;
        font-family: sans-serif;
        white-space: nowrap;
        opacity: 1;
        z-index: 1000 !important;
        -webkit-transition: all 0.2s ease;
        -moz-transition: all 0.2s ease;
        -o-transition: all 0.2s ease;
        transition: all 0.2s ease;
    }

    [data-title]:hover::after {
        content: '';
        position: absolute;
        bottom: -9px;
        left: 8px;
        display: inline-block;
        color: #fff;
        border: 8px solid transparent;
        border-bottom: 14px solid #ee7724;
    }


/*=========Tooltip Design END=============*/
