/*
 __            __  __                        __  __                        __
|  |          |  ||  |                      |  ||  |                      |  |
 |  |        |  |  |  |        ____        |  |  |  |        ____        |  |
  |  |      |  |    |  |      |    |      |  |    |  |      |    |      |  |
   |  |    |  |      |  |    |  ||  |    |  |      |  |    |  ||  |    |  |
    |  |  |  |        |  |  |  |  |  |  |  |        |  |  |  |  |  |  |  |
     |  ||  |          |  ||  |    |  ||  |          |  ||  |    |  ||  |
      |____|            |____|      |____|            |____|      |____|
	  
Copyright (C) 2019 Vanprijs Wim Websites https://vanparijswimwebsites.com
*/

/******************
 *                *
 * ADMIN PANEL V3 *
 *                *
 ******************/
 
.adminpanel img {
    display: inline-block;
    max-width: 100%;
    height: auto;
}

.adminpanel a:hover {
    opacity: 1;
}

.adminpanel a {
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    opacity: 0.75;
    transition:opacity 400ms;
    -webkit-transition:opacity 400ms;
}

.adminpanel a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: #69f;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 400ms ease-in-out 0s;
    transition: all 400ms ease-in-out 0s;
}

.adminpanel a:hover:before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

.adminpanel a .wrapper {
    display: block;
    padding: 10px;
}



/******************
 *                *
 * ERROR MESSAGES *
 *                *
 ******************/

.error, .error-message {
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 42px;
    margin-right: 10px;
    margin-left: 10px;
    
    background-image: url(/static/icons/close.png);
    background-repeat: no-repeat;
    background-position: 5px center;
    color: #600;
    font-weight: bold;
    font-size: 120%;
    background-color: #F66;
    text-align: left;
    
    display: block;
    border: 3px solid #900;
    border-radius: 5px;
}

.error p, .error-message p {
    margin: 0;
    padding: 0;
}

.success-message {
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 42px;
    margin-right: 10px;
    margin-left: 10px;
    
    background-image: url(/static/icons/check_green.png);
    background-repeat: no-repeat;
    background-position: 5px center;
    background-color: #CFC;
    color: #040;
    text-align: left;
    
    display: block;
    font-weight: bold;
    border: 3px solid #060;
    border-radius: 5px;
}

.warning-message {
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 42px;
    margin-right: 10px;
    margin-left: 10px;
    
    background-image: url(/static/icons/alert.png);
    background-repeat: no-repeat;
    background-position: 5px center;
    background-color: #FFBE9F;
    color: #9B4E00;
    text-align: left;
    
    display: block;
    font-weight: bold;
    border: 3px solid #9B4E00;
    border-radius: 5px;
}

.info-message {
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 42px;
    margin-right: 10px;
    margin-left: 10px;
    margin-top: 2px;
    margin-bottom: 2px;
    
    background-image: url(/static/icons/information.png);
    background-repeat: no-repeat;
    background-position: 5px center;
    background-color: #9CF;
    text-align: left;
    
    display: block;
    border-radius: 5px;
    border: 1px solid #069;
}



/****************
 *              *
 * Validate CSS *
 *              *
 ****************/

.validationerror {
    background-color: #FF7D5E;
    border: 2px solid #900;
    color: #000;
    padding: 0.25em;
}

.validationvalid {
	  background-color: #AFFF95;
}

span.validationerror {
    border: none;
    background-color: transparent;
    color: #F00;
    font-weight: bold;
    padding-left: 10px;
}



/*********************
 *                   *
 * VWW BUTTON STYLES *
 *                   *
 *********************/

.vww-button-blue {
    background-color: #69F;
    color: #FFF;
}

.vww-button-red {
    background-color: #C33;
    color: #FFF;
}

.vww-button-green {
    background-color: #060;
    color: #FFF;
}

.center-form {
    margin: 0 auto !important;
}



/****************
 *              *
 * SORTABLE CSS *
 *              *
 ****************/

body.dragging, body.dragging * {
    cursor: move !important;
}

.dragged {
    position: absolute;
    opacity: 0.5;
    z-index: 2000;
}

ol.sortable li.placeholder {
    position: relative;
}

ol.sortable li.placeholder:before {
    position: absolute;
}

ol.sortable span.actions, ol.likesortable span.actions {
    font-size: 75%;
    margin-left: 20px;
}

ol.sortable, ol.likesortable {
    width: 400px;
}

ol.sortable, ol.likesortable, ol.sortable ol, ol.likesortable ol {
    margin: auto;
    list-style-type: none;
    overflow: visible;
    padding: 0;
}

ol.sortable, ol.likesortable {
    margin-top: 20px;
    border-top: solid 1px #ccc;
}

ol.likesortable li {
    text-align: center;
}

ol.sortable li.hidden-1, ol.likesortable li.hidden-1 {
    background-color: #444 !important;
    color: #FFF !important;
}

ol.sortable span.actions, ol.likesortable span.actions {
    font-size: 75%;
    margin-left: 20px;
}

ol.sortable, ol.likesortable {
    width: 300px;
    margin: auto;
    list-style-type: none;
    overflow: visible;
    margin-top: 20px;
    border-top: solid 1px #ccc;
    font-size: 110%;
}

ol.sortable li {
    cursor: move;
    text-align: center;
    text-align: left;
    border: solid 1px #AAA;
}

ol.likesortable li {
    text-align: center;
}
    
ol.sortable ol {
    margin-left: 10px;
}



/***************
 *             *
 * CUSTOM PURE *
 *             *
 ***************/

@media screen and (max-width: 64em) {
    /*CUSTOM PURE CLASS: auto add margin top on elements on collapse of pure grid*/
    .cpure-hidden-below-lg {
        display: none;
    }
    
    .cpure-center-below-lg {
        text-align: center !important;
    }

    .pure-hidden-tablet {
        display: none;
    }
}

@media screen and (max-width: 48em) {
    .cpure-left-below-md {
        text-align: left !important;
    }
  
    .cpure-center-below-md {
        text-align: center !important;
    }

    .cpure-no-margin-below-md {
        margin: 0 !important;
    }

    .cpure-margin-top-below-md {
        margin-top: 1em !important;
    }

    .cpure-double-margin-top-below-md {
        margin-top: 2em !important;
    }

    .cpure-hidden-below-md{
        display: none;
    }

    .pure-hidden-phone {
        display: none;
    }
}

@media screen and (min-width: 64em) {
    .pure-hidden-desktop {
            display: none;
    }
}


.pure-form label {
    display: block;
    margin-top: 20px;
}

.pure-button:hover {
    text-decoration: none !important;
}