/*
*---------------------------------------------
*   site style sheets
*   Version 1.0
*   Last updated 07/09/2023
*   Designed by: Simon Gibson
*   For: Red Star Websites
*---------------------------------------------
*/

    /* Modal Forms */
    /* Style the cancel X Close Button */
    .frmClose{
        position: absolute;
        top: 5px;
        right: 10px;
        cursor: pointer;
        font-size: 40px;
        font-weight: bold;
        transition: 0.3s;
    }

    .frmClose:hover,
    .frmClose:focus {
        color: #bbb;
        text-decoration: none;
        cursor: pointer;
    }

    /* Style inputs, select elements and textareas */
    input[type=text], select, textarea{
        width: 100%;
        padding: 12px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
        resize: vertical;
    }

    /* Style the label to display next to the inputs */
    label {
        padding: 12px 12px 12px 0;
        display: inline-block;
    }

    /* Style the frmContainer */
    .frmContainer {
        position: fixed;
        border-radius: 5px;
        background-color: white;
        padding: 20px;
    }

    /* Style the submit button */
    .frmContainer button{
        width: 100%;
        margin-top: 10px;
    }

    /* Floating column for labels: 25% width */
    .col-25 {
        float: left;
        width: 25%;
        margin-top: 6px;
    }

    /* Floating column for inputs: 75% width */
    .col-75 {
        float: left;
        width: 75%;
        margin-top: 6px;
    }

    /* Clear floats after the columns */
    .row:after {
        content: "";
        display: table;
        clear: both;
    }

    /* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
    @media screen and (max-width: 600px) {
        .col-25, .col-75 {
            width: 100%;
            margin-top: 0;
        }
    }

    /* Form Elements */
    textarea, input[type=text], input[type=radio], input[type=password], input[type=date], input, select, button{
        background-color: var(--color-1);
        border: inset 2px var(--color-3);
        color: var(--font-color-1);
        font-size: 14pt;
        font-weight: 200;
        padding: 5px;
    }

    input{
        width: calc(100% - 10px);
    }
    textarea{
        width: calc(100% - 10px);
        margin-top: 10px;
        margin-bottom: 10px;
    }

    select, button, input[type=button] {
        border: outset 2px var(--color-3);
    }

    button:hover, input[type=button]:hover, select:hover{
        border: inset 2px var(--color-3);
        cursor: pointer;
    }

    .disabled{
        color: red;
    }

    button:disabled{
        color: black;
        cursor: auto;
    }

    /* Tables */
    table {
        border-collapse: collapse;
        border: inset 2px var(--color-2);
        outline: inset 2px var(--color-3);
        background-color: var(--color-1);
    }

    th, td{
        border-bottom: solid 1px hsl(calc(var(--c-primary) - var(--c-offset)), calc(var(--c-sat) - 0%), calc(var(--c-light) + 50%));
        padding: 5px;
        text-align: center;
    }

    th{
        font-size: calc(var(--f-size) + 2pt);
        text-align: center;
    }

    td{
        text-align: left;
        color: var(--font-color-1);
        font-size: var(--f-size);
    }

    /* --------------------- LOADERS / BUFFERING ------------------------ */
    .loader1 {
        position: absolute;
        left: 50%;
        top: 50%;
        z-index: 1;
        border: 16px solid #f3f3f3; /* Light grey */
        border-top: 16px solid #3498db; /* Blue */
        border-radius: 50%;
        width: 240px;
        height: 240px;
        animation: spin 2s linear infinite;
        display: none;
    }
      
    .loader2 {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
        border-top: 16px solid blue;
        border-right: 16px solid green;
        border-bottom: 16px solid red;
        border-left: 16px solid pink;
        border-radius: 50%;
        width: 120px;
        height: 240px;
        animation: spin 4s linear infinite;
        display: none;
    }
      
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    
    /**/
    .toolTip{
        position: relative;
    }

    /*  Show the tool tip when mouse hovering over it, Note all tooltips are covered here */
    .toolTip:hover .tipTextTopLeft, .toolTip:hover .tipTextTopCenter, .toolTip:hover .tipTextTopRight, .toolTip:hover .tipTextBottomLeft, .toolTip:hover .tipTextBottomCenter, .toolTip:hover .tipTextBottomRight, .toolTip:hover .tipTextCenterLeft, .toolTip:hover .tipTextCenterRight{
        visibility: visible;
        transition-property: visibility;
        transition-delay: 0.5s;
    }

    /* The tool tip container styling */
    .toolTip .tipTextBottomLeft, .toolTip .tipTextBottomCenter, .toolTip .tipTextBottomRight, .toolTip .tipTextTopLeft, .toolTip .tipTextTopCenter, .toolTip .tipTextTopRight, .toolTip .tipTextCenterLeft, .toolTip .tipTextCenterRight{
        position: absolute;
        z-index: 2;
        visibility: hidden;
        width: max-content;
        
        /* Borders and background */
        border: solid 1px black;
        background-color: white;
        color: black;
        padding: 5px 10px;
        font-size: 14pt;
        border-radius: 8px;
    }

    .toolTip .tipTextTopLeft{
        top: calc(-200% - 20px);
        right: -15px;
    }

    .toolTip .tipTextTopCenter{
        top: calc(-200% - 20px);
        right: 50%;
        transform: translateX(50%);
    }
    
    .toolTip .tipTextTopRight{
        top: calc(-200% - 20px);
        left: -15px;
    }

    .toolTip .tipTextCenterLeft{
        top: 50%;
        transform: translateY(-50%);
        right: calc(100% + 15px);
    }

    .toolTip .tipTextCenterRight{
        top: 50%;
        transform: translateY(-50%);
        left: calc(100% + 15px);
    }

    .toolTip .tipTextBottomLeft{
        top: calc(100% + 20px);
        right: -15px;
    }

    .toolTip .tipTextBottomCenter{
        top: calc(100% + 20px);
        right: 50%;
        transform: translateX(50%);
    }

    .toolTip .tipTextBottomRight{
        top: calc(100% + 20px);
        left: -15px;
    }

    /* The tool tips arrows */
    .toolTip .tipTextTopLeft::after, .toolTip .tipTextTopCenter::after, .toolTip .tipTextTopRight::after, .toolTip .tipTextCenterLeft::after, .toolTip .tipTextCenterRight::after, .toolTip .tipTextBottomLeft::after, .toolTip .tipTextBottomCenter::after, .toolTip .tipTextBottomRight::after{
        content: " ";
        position: absolute;
        border-width: 15px;
        border-style: solid;
    }
    
    /* The arrow for TOP LEFT tool tip */
    .toolTip .tipTextTopLeft::after{
        top: 100%;      /* At the top of the tooltip */
        right: 10px;
        border-color: black transparent transparent transparent;
    }    

    /* The arrow for TOP CENTER tool tip */
    .toolTip .tipTextTopCenter::after{
        top: 100%;      /* At the top of the tooltip */
        right: 50%;
        transform: translateX(50%);
        border-color: black transparent transparent transparent;
    }    
    
    /* The arrow for TOP RIGHT tool tip */
    .toolTip .tipTextTopRight::after{
        top: 100%;      /* At the top of the tooltip */
        left: 10px;
        border-color: black transparent transparent transparent;
    }    
    
    /* The arrow for CENTER LEFT tool tip */
    .toolTip .tipTextCenterLeft::after{
        top: 50%;
        transform: translateY(-50%);
        left: 100%;
        border-color: transparent transparent transparent black;
    }    
    
    /* The arrow for CENTER RIGHT tool tip */
    .toolTip .tipTextCenterRight::after{
        top: 50%;      /* At the bottom of the tooltip */
        transform: translateY(-50%);
        left: -30px;
        border-color: transparent black transparent transparent;
    }

    /* The arrow for BOTTOM LEFT tool tip */
    .toolTip .tipTextBottomLeft::after{
        top: -100%;      /* At the bottom of the tooltip */
        right: 10px;
        border-color: transparent transparent black transparent;
    }

    /* The arrow for BOTTOM CENTER tool tip */
    .toolTip .tipTextBottomCenter::after{
        top: -100%;      /* At the bottom of the tooltip */
        right: 50%;
        transform: translateX(50%);
        border-color: transparent transparent black transparent;
    }

    /* The arrow for BOTTOM Right tool tip */
    .toolTip .tipTextBottomRight::after{
        top: -100%;      /* At the bottom of the tooltip */
        /* top: 100%;     At the top of the tooltip */
        left: 10px;
        border-color: transparent transparent black transparent;
    }

    /* Show the tooltip text when you mouse over the tooltip container */
    .tooltip:hover .tooltiptext {
        visibility: visible;
        transition-property: visibility;
        transition-delay: 0.5s;
    }


    /* @media reverence */
    /* Extra small devices (phones, 600px and down) 
    @media only screen and (max-width: 600px) {...}

    Small devices (portrait tablets and large phones, 600px and up)
    @media only screen and (min-width: 600px) {...}

    Medium devices (landscape tablets, 768px and up) 
    @media only screen and (min-width: 768px) {...}

    Large devices (laptops/desktops, 992px and up) 
    @media only screen and (min-width: 992px) {...}

    Extra large devices (large laptops and desktops, 1200px and up) 
    @media only screen and (min-width: 1200px) {...}*/