:root {
    --color-red: #c7766e;
    --color-green: #57A293; /*#6db1a1;*/
    --color-yellow: #ca9f5b; /*#e3c072;*/
    --color-blue: #568093;
    --color-hover: #0d313f;
    --color-gray: #9b9c9c;
    --color-silver: #f2f2f2;

    --bg-red: #c7766e40;
    --bg-gray: #56809320;

    --border-red: #c7766e80;
    --border-gray: #56809340;
    --border-silver: #eeeeee;
}

body {
    font-size: 16px;
    min-height: 100vh;
}

#currlang{
    float:right;
    font-size: 10px;
    color:#fff;
    margin-right: 10px;
}

#avbockaheader{
    margin-top:10px;
}

.tableActiveCol{
    /*width: 3px;*/
    padding-left:2px !important;
    padding-right: 2px !important;
}

#table_task .taskOn{
    background-color: #36c536;
}
#table_task .taskOff{
    background-color: #f13e3e;
}

#toggle_pwd
{
    cursor: pointer;
    float: right;
    top: -25px;
    right: 10px;
    position: relative;
}

.topnav .menuitem #menuhelp{
    float:right;
    margin-right: 10px;
    vertical-align: middle;
    color: white;
    padding: 15px 5px;
    text-decoration: none;
    font-size: 16px;
}

#exportexcelbutt{

}

#exportform{

}
#stable-form{
    margin-bottom: 10px;
    margin-top:10px;
}

#sp_version{
    width:80px;
    float:left;
}



#reportresult{
    overflow-x: auto;
}

/******************************************************************************
Containers
 */
#doneView{
    text-align: center;
    margin-top: 2px;
}
#doneViewLabel{
    font-size: 12px;
    margin-top: 10px;
    margin-bottom:0px;
    color:#212529;
}

#calendar .done{
    background-image: url("../img/checkmark30bw.png"); /* The image used */
    background-position: 2% 10%;/* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    /*background-size: 8%;*/
    background-size: 20px 20px;
}


.container {
    background-image: none;
    height: auto;

    padding: 0;
}

.innercontainer {
    width: 90%;
      /*max-width: 1320px;
  padding-bottom: 100px;*/
}


/******************************************************************************
The header
 */
 #companycontainer{
    text-align: center;
    width: auto;
    color:white;
    font-size: 40px;
}

#outercontainer_login, #outercontainer_auth{
    margin-top:0px;
    border: 0px solid #cfcbcb;
    padding: 20px;
    background-size: 20%;
    background-position: 95% 95%;
    background-repeat: no-repeat;
    /*height: 90vh;*/
    background:#69455D;
    /*230715 */
    overflow-y: hidden !important;
}

#innercontainer_login, #innercontainer_auth {
    width: 90%;
    /*max-width: 1320px;*/
    margin: auto;
    /*padding-bottom: 100px;*/
}


#innercontainer_login label, #innercontainer_auth label{
    font-size: 1.5rem;
}


#innercontainer_login input, #innercontainer_login select{
    font-size: 1.5rem;
}

#innercontainer_auth input{
    font-size: 1.5rem;
}

#loginbutton, #loginbuttonauth{
    padding-left: 20px;
    padding-right: 20px;
}

#outer-container {
    max-width: unset;
    padding-bottom: 30px;
}

#login, #enter-pin{
    margin-top: 30px;
    background-color: var(--bg-gray);
    border: 1px solid var(--border-gray);
    padding: 1rem;
    border-radius: 0.25rem;
}

#wrongcode{
    text-align: center;
    font-size: 35px;
}

.licensevalid{
    background-color: #a6f796 !important;
}
.licensevaliddemo{
    background-color: #96adf7 !important; 
}

.backbutton{
    font-size: 40px;
    padding-top: 20px;
}

#logincontainer{
    margin-top:50px;
}

#logincontainer #password, #logincontainer #SPversion{
    padding-top:20px;
}

 #loginsystembutt{
    background:#6db1a1;
    margin-top: 20px;
 }

#tologin, #toforgot{
    margin-top:10px;
    text-decoration: none;
}

#loginInfoWrapper{
    color:red;
    margin-top:20px;
    padding:10px;
    border: 1px solid #c7c5c5;
    border-radius: 0.25rem;
    background:#f4f5f561;
    line-height: 1.3;
}
.loginnewsentry{
    margin-bottom: 10px;
}

.loginnewshead{
    font-weight:500;
    font-size: 16px;
}
.loginnewstext{
    font-weight:400;
    font-size: 14px;
    color:#756868;
}
.loginnewstext a{
    text-decoration: none;
}


header {
    margin-bottom: 30px;
    height: 150px;
    color: white;
    position: relative;
    background-color: #777;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 360px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

header a,
header a:focus,
header a:hover {
    color: inherit;
}

header h1 {
    text-align: center;
}

/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
  display: none;
  background-color: #69455D;
  text-align:center;
}

.menuitem{
    border-top: 1px solid #8a9da7eb;
}

#plogout:hover{
    cursor: pointer; 
}

#plogout{
    font-size: 16px;
}


.plantable{
    display:grid;
    grid-template-columns: 50% 50%;
    padding:0px !important;
    border-radius: 5px;
    border: 0px solid #d4d5d2;
}

.plantable .one{
    border-top-right-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    border-top-left-radius: 5px !important;
    border: 1px solid #d4d5d2;
}
.plantable .two{
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    border-top-right-radius: 5px !important;
    border: 1px solid #d4d5d2;
}
.plantable .three{
    border-top-right-radius: 0px !important;
    border-top-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    border-bottom-left-radius: 5px !important;
    border: 1px solid #d4d5d2;
}
.plantable .four{
    border-top-right-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    border-top-left-radius: 0px !important;
    border-bottom-right-radius: 5px !important;
    border: 1px solid #d4d5d2;
}
.plantable .all{
    border-radius: 5px;
    border: 1px solid #d4d5d2;
}

.plantable .taskbutt{
    line-height:6.5px;
}

.taskbutt{
    text-align: center !important;

}

.taskbutt:hover{
    cursor: pointer; 
}

.taskbutt, #calendar table th span{
    overflow: hidden;
    min-width:40px;
}

#calendar table th, #calendar table td{
    white-space: nowrap;
}
#calendar table{
    table-layout: auto !important;
}



/* Style navigation menu links */
.topnav .menuitem, .topnav a{
  color: white;
  padding: 5px 15px;
  text-decoration: none;
  font-size: 16px;
  display: block;
}
.topnav #menuitemlogoout{
    text-align: left;
}

.topnav .menuitem #plogout{
    color: white;
    padding: 5px 15px;
    text-decoration: none;
    font-size: 16px;
}

.topnav i{
 padding: 15px 5px;
}

.topnav .fa{
 font-size: 28px;
}

/* Style the hamburger menu */
.topnav a.icon {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}
.topnav .langswitcher {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
}

.langswitch{
    display:block;
    margin-top: 10px;
}
.langswitch img{
    width:36px;
    height: 21px;
}
#svflagQ{
    background-image: url("../img/sv.png");
}
#enflagQ{
    background-image: url("../img/en.png");
}

#langdropdown{
    background-color: #69455D;
    border:0px;
}

/* Add a grey background color on mouse-over */
.topnav a:hover {
    /*
  background-color: #ddd;
  color: black;
*/
}

/* Style the active link (or home/logo) */
.activeQQ {
  background-color: #04AA6D;
  color: white;
}

/*
.taskshortname{
    display:none;
}

.taskname{
    display:block;
}
*/

.tasktime{
    font-weight: normal;
    font-size:10px;
/*display:none;*/
}


#table_stables_wrapper{
    width: 100%;
    overflow-x: auto;
    position: relative;
}

#table_stables{
    margin-bottom:20px;
    margin-top:5px;
    padding-top: 10px;
}

#table_stables .thedate{
    font-size: 12px;
}

#table_stables a{
    text-decoration: none;
    color: #000;
}

#table_stables .locked {
    position: sticky;
    left: 0;
    background-color: #575f62;
    z-index: 1;
}

.stableEdit .fa-edit{
    color:white;
}

.stableDelete{
    cursor: pointer;
}

#note{
    font-size: 13px;
    font-weight: 400;
    font-style: italic;
}

#stables-count{
    font-size: 14px;
    font-weight: 400;
    margin-left:2px;
}

#stables-count #suminfolabel{
 font-weight: 300;
 font-size: 16px;
}

#stables-count #suminfo{
 font-weight: 500;
 font-size: 16px;
}


.container{
    margin-bottom: 20px;
}

#cellsyntwrapper, #weekstatewrapper, #reoccuringwrapper{
    background-color: #b6c2c720;
    padding:10px;
    border: 1px solid #dbd7d7;;
    border-radius: 5px;
}

#stableswrapper{
    margin-top:20px;
}

#smsloggswrapperstd, #smsloggswrapperpro, #smsloggswrapper, #productswrapper, #personswrapper, #horseswrapper, #taskswrapper, #licenseswrapper, #stableswrapper, #calendarwrapper, #groupswrapper, #todoswrapper, #horsecalendarswrapper,  #messageswrapper{
    background-color: #b6c2c720;
    padding:10px;
    border: 1px solid #dbd7d7;;
    border-radius: 5px;
    margin-bottom: 20px;
}

#smsloggswrapperstd .smsloggsstd_open, #smsloggswrapperpro .smsloggspro_open, #smsloggswrapper .smsloggs_open, #productswrapper .products_open, #personswrapper .persons_open, #horseswrapper .horses_open, #taskswrapper .tasks_open, #licenseswrapper .licenses_open, #stableswrapper .stables_open, #calendarwrapper .calendar_open, #groupswrapper .groups_open, #todoswrapper .todos_open, #horsecalendarswrapper .horsecalendars_open, #messageswrapper .messages_open{
    /*float:right;*/
    color:#69455D;
    margin-right:10px;
}

#smsloggswrapperstd #smsloggstdinfo, #smsloggswrapperpro #smsloggproinfo,  #smsloggswrapper #smslogginfo, #productswrapper #productinfo,#personswrapper #personsinfo, #horseswrapper #horsesinfo, #taskswrapper #tasksinfo, #licenseswrapper #licensesinfo, #stableswrapper #stablesinfo, #calendarwrapper #calendarinfo, #groupswrapper #groupsinfo, #todoswrapper #todosinfo, #horsecalendarswrapper #horsecalendarsinfo, #messageswrapper #messageinfo{
    vertical-align: middle;
    font-size: 24px;
    font-weight: 500;
}

#smsloggswrapperstd .smsloggsstd_info, #smsloggswrapperpro .smsloggspro_info, #smsloggswrapper .smsloggs_info, #productswrapper .products_info, #personswrapper .persons_info, #horseswrapper .horses_info, #taskswrapper .tasks_info, #licenseswrapper .licenses_info, #stableswrapper .stables_info, #calendarwrapper .calendar_info, #groupswrapper .groups_info, #todoswrapper .todos_info, #horsecalendarswrapper .horsecalendars_info, #messageswrapper .messages_info{
    display:none;
}

#smsloggs, #smsloggSTD, #smsloggPRO{
        overflow-x: scroll;
}







#licensewarningwrapper
{
    background-color: rgba(241, 137, 17, 0.727);
    padding:3px 6px;
    border: 1px solid #dbd7d7;;
    border-radius: 5px;
    text-align: center;
}

#licensewarningwrapper #licenselabel{
    margin-left: 10px;
    color: #fff;
    font-size: 16px;
    margin-bottom: 0px;
}

#licensewarningwrapper .fa-2x {
    font-size: 1.5em;
    color:#fff;
    vertical-align: middle;
}

#licensewarningwrapper #licensewarningcontent{
    color: #fff;
    font-size: 12px;
    padding-bottom:5px;
}


#notiswrapper{
    background-color: rgb(241, 17, 31);
    padding:3px 0px;
    border: 1px solid #dbd7d7;;
    border-radius: 5px;
    text-align: center;
}
#notiswrapper #notislabel{
    margin-left: 10px;
    color: #fff;
    font-size: 16px;
    margin-bottom: 0px;
}

#notiswrapper .fa-2x {
    font-size: 1.5em;
    color:#fff;
    vertical-align: middle;
}
#notiswrapper #notiscontent{
    color: #fff;
    font-size: 12px;
    padding-bottom:5px;
}

#notiswrapper #notiscontent .calinfoentry{

}


#filtercontainer{
    margin-bottom: 5px;
    border: 1px solid #ced4da;
    color: #69455D;
    border-radius: 3px;
}

#logg{
    text-align: center;
    font-size: 12px;
    color:#818080;
    /*padding:3px;*/
    height:20px;
    border-radius: 3px;
}

.loggborder{
    border: 1px solid #00000020;
}

.stepcontainer{
    margin-bottom: 15px;
}

#calendar{
    margin-bottom:20px;
    overflow-x: auto;
    /*margin-left: 10px;*/
}

#calendar table{
    width:66%;
    margin:auto;
}

#calendar th{
    font-size:12px;
}



/* 230715 */
#calendar{
    overflow: auto;
    height: 550px;
}
#calendar table thead tr {
    /*background-color: white;*/
    position: sticky; top: 0; z-index: 1;
}





#calendar .plandate{
    font-weight: 400;
    border-radius: 3px;
    /*border: 1px dashed #d4d5d2;
    padding:5px;*/
}

#calendar .plandateweek{
    font-weight: 400;
    border-radius: 3px;
    /*border: 1px dashed #d4d5d2;
    padding:5px;*/
}

.filterchk .form-label{
  font-size:12px;
}

.filterchk .col{
    text-align:center;
}

#outertickoff #calendar .table-spacing{
    background-color: #95e1a54a;
}

.avbockfilterchk{
    width:auto;
}

.avbockfilterchk .col{
    text-align:left;
    margin: 3px 7px;
}

#avbockaheader{
    margin: 20px 0px;
    font-size: 16px;
}

#calendar td{
    font-size:12px;
    padding:5px;
}
#calendar .isset, #calendar .notset{
    border-radius: 5px;
    border: 1px solid #d4d5d2;
    padding:5px;
    color:white;
}

.justClicked{
    border: 1px solid #000 !important;
}
#calendar .notset{
    background-color:#E1E1E1;
}

#startdate{
    font-size:14px;
    display:none;
}

#period{
    font-weight: 500;
    font-size:14px;
    margin: auto;

}

.calbutt .period{
     text-align: center;
}


.outercontainer{
    margin-top:0px;
    border: 0px solid #cfcbcb;
    padding: 0px;
    /*background-image: url(img/kurbitsbgOP50crop2.png);*/
    background-size: 20%;
    background-position: 95% 95%;
    background-repeat: no-repeat;
    /*height: 90vh;*/

    /*230715 */
    overflow-y: hidden !important;
}



.innercontainer{
    width: 90%;
    margin: auto;
    /*padding-bottom: 100px;*/
}

.innercontainer .form-label, .innercontainer .form-check label, .form-control{
    color: #818080;
    font-weight: 400;
}

#smsreminderchk{
    margin-bottom:20px;
}

.formheader{
    font-size: 24px;
    font-weight: 500;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 20px;
}

#helpcontainer{
    padding: 0px 7px;
    margin-top:10px;
}

#helpcontainer a{
    text-decoration: none;
    color:white;
}


#help_wrapper{
    margin:20px 0px;
}

#helpcontainer .help_subject_wrapper
{
    background-color: var(--bg-gray);
    border-radius: 5px;
    padding: 1em 1em;
    margin: 8px 0px;
    border: 1px solid #6db1a140;
}

#helpcontainer .help_subject_header{
    font-size: 18px;
    font-weight: 400;
}
#helpcontainer .help_subject_info{
    font-size: 16px;
    font-weight: 300;
    display: none;
}

#helpcontainer  .help_open{
    float:right;
    color:#69455D;
}

#cellsyntwrapper  .sms_open{
    /*float:right;*/
    color:#69455D;
    margin-right:10px;
}

#smssetting{
    vertical-align: middle;
}

.sms_setting_info{
    display:none;
}

#statcontainer table td, table th {
    padding: 2px 10px;
}

#allsmscontainerQQ{
    display:grid;
    grid-template-columns: 50% 50%;
}

 #allsmscontainer .allsmslogitem{
    padding:0px 0px;
 }

#weekstatediv{
    display:grid;
    grid-template-columns: 25% 25% 25% 25%;
}


#weekstatewrapper  .weekstate_open{
    /*float:right;*/
    color:#69455D;
    margin-right:10px;
}

#weekstatesetting{
    vertical-align: middle;
}

.weekopencheckbox{
    padding:5px 0px
}

.weekstate_setting_info{
    display:none;
}

#reoccuringwrapper  .reoccuring_open{
    /*float:right;*/
    color:#69455D;
    margin-right:10px;
}

#reoccuring_setting{
    vertical-align: middle;
}

.weekdayopencheckbox{
    padding:5px 0px
}

.reoccuring_setting_info{
    display:none;
}

.form-group label, .form-check label{
    color: #818080;
    font-weight: 500;
}

input.error {
    border: 1px solid var(--color-red);
    box-shadow: 0 0 0 0.25rem #C7766E66;
    outline: 0;
}


/******************************************************************************
The alert box
 */

#alertplan{
    width:75%;
    margin:auto;
    margin-top:30px;
}

.alert {
    display: none;
    text-align: center;
}

.alert.show {
    display: block;
}

.ok-to-save {
    background-color: #edf5f3ee; /*#6db1a120;*/
    border-radius: 5px;
    padding: 1em 2em;
    margin-top: 2em;
    border: 1px solid #6db1a140;
}

.disclosure {
    background-color: #00000010;
    border-radius: 5px;
    padding: 1em 2em;
    border: 1px solid #00000020;
}

.disclosure .content {
    margin-top: 1em;
    border-top: 1px solid #00000020;
    padding-top: 1em;
}


.clickable {
    cursor: pointer;
}


#loginheader{
    margin-bottom:0px;
    padding-bottom: 0px;
    background:#69455D;
    color:#ffffff;
    min-height: 80px;
    width: 100%;
    text-align: center;
    font-weight: 500;
}

#header h1{
    margin-bottom:0px;
    padding-bottom: 0px;
    background:#69455D;
    color:#ffffff;
    min-height: 80px;
    width: 100%;

    text-align: center;
}

h2, .formheader {
    font-size: 24px;
    font-weight: 500;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 20px;
}


.info-message {
    background-color: var(--bg-gray);
    border: 1px solid var(--border-gray);
    padding: 1rem;
    border-radius: 0.25rem;
}



.loginbutt{
    color:#69455D;
    background:white;
    border: 2px solid #69455D;
    margin-top:10px;
}

.dateTD{
    width:65px;
}

.dateTDweek{
    width:10px;
}

.weekend{
    border: 0px dashed #e79ea5 !important;
    background:#fdeff0;

}
.today{
    /*background:#f3c7cb;*/
    border: 1px solid #6a6a68 !important;
}

/*
#calendar table .open{
    background: #d5e9d4 !important;
}
*/
#calendar table .closed{
    /*background: #f5caca !important;
    opacity: 0.5;*/
}
.dateTDweek .fa-lock {
    font-size:18px !important;
    color:#b9b7b7 !important;
}

#logout{
    position: absolute;
    display: inline-block;
    top: 0;
    right: 0;
    font-size: 12px;
    cursor: pointer;
    vertical-align: top;
    overflow: hidden;
    text-decoration: none;
    padding: 1em 2em;
}

#maintext{
    float: left;
    font-size: 40px;
    vertical-align: middle;
}


.sneaky {
    opacity: 0;
}

.sneaky:hover,
.sneaky:focus {
    opacity: 1;
}

#companyhead, #systemloginhead{
    width: 100%;
    float: left;
    text-align: center;
    font-size: 22px;
    vertical-align: middle;
    margin-top: 25px;
    text-decoration: none;
    color:white;
}
#personhead{
    width: 100%;
    font-weight: 400;
    float: left;
    text-align: center;
    font-size: 14px;
    vertical-align: middle;
    margin-top: 5px;
    text-decoration: none;
    color:white;
}

#person-combobox {
    position: relative;
}

#person-combobox i {
    font-size: 27px;
}


#show-all {
    position: absolute;
    top: 5px;
    right: 10px;
}

#show-all i{
    color: var(--color-blue);
}

#persons #person{
    padding-top: 1px;
    padding-bottom:1px;
}




#prevbutt, #nextbutt{
    background:#69455D;
    border: 2px solid #69455D;
    color:  white;
    margin-top: 0px;
    padding: 1px 10px;
}


#backbutt{
    background:#f5f2f2fa;
    border: 1px solid #69455D;
    color:  #69455D;
}

#usersbutt{
    background:#c7766e;
}

#prevQ{
    margin-left: 10px;
}

#nextQ{
    margin-right: 10px;
}

#inloggadmess, #utloggadmess{
    font-size: 32px;
}


.adminbuttext {
    margin-left: 5px;
    font-weight: 600;
    color:white;
}

.adminbuttexttable {
    margin-left: 5px;
    font-weight: 600;
    color:black;
}

.backbuttext {
    margin-left: 5px;
    font-weight: 600;
    color:#69455D;
}


#loading-img{
    display:none;
}

.response_msg{
    margin-top:10px;
    font-size:22px;
    background:#9b9c9c;
    color:#ffffff;
    padding:3px;
    display:none;
}




#logout:hover,
#logout:focus {
    background-color: var(--color-red);
    color: white;
}

#ddvisitor {
    position: absolute;
    top: 0;
    left: 50%;
    padding: 1em 2em;
    font-size: 12px;
    transform: translateX(-50%);
}

#version {
    position: absolute;
    top: 0;
    left: 0;
    padding: 1em 2em;
    font-size: 12px;
}

#logo {
    width: 400px;
    max-width: 90%;
    margin: auto;
    text-align: center;
}

#logo img {
    max-width: 100%;
    max-height: 100%;
}

#companyname {
    color: white;
    font-size: 1.2rem;
    text-align: center;
    text-decoration: none;
    margin-top: 2rem;
    padding: 1rem;
}

/******************************************************************************
Buttons
 */

.btn-primary{
    padding: 10px 20px;
    margin-top:20px;
    background:#6db1a1;
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 1.0rem;
    border-color: #cfcbcb;
}


.btn {
    padding: 10px 10px;
    /*margin-top: 20px;*/
    font-weight: 400;
    /*margin-bottom: 10px;*/
    font-size: 1rem;
    color: white;
}

.btn-sm {
    font-size: 1rem;
}

.btn-fullwidth {
    width: 100%;
}

.btn-red {
    background-color: var(--color-red);
}

.btn-lila {
    background-color: #69455D;
}


.btn-green {
    background-color: var(--color-green);
}

.btn-yellow {
    background-color: var(--color-yellow);
}

.btn-blue {
    background-color: var(--color-blue);
}

.btn-dummy-visitor {
    padding-left: 2em;
    text-align: left;
}

.btn:disabled {
    background-color: var(--color-gray);
    border-color: #888;
    color: #eee;
}

/*
.btn:hover,
.btn:focus {
    background-color: var(--color-hover);
    color: white;
}
*/

.btn.btn-dummy,
.btn.btn-dummy:disabled {
    background-color: var(--color-silver);
    border-color: var(--border-silver);
    color: black;
    opacity: 1;
    cursor: default;
}

.btn.btn-dummy:hover {
    background-color: var(--color-silver);
}


#return-button {
    display: none;
}

.adminsmallbutt {
    width: 100%;
}

.icon-right>i.fa {
    margin-left: 10px;
}

.icon-left>i.fa {
    margin-right: 10px;
}


/******************************************************************************
Statistic buttons
 */

.statbutt {
    padding: 15px 15px;
    background: #5a8397 !important;
    font-weight: 400;
    width: 100%;
}

.statbutt i {
    float: left;
}

.adminbuttext {
    margin-left: 5px;
    font-weight: 400;
}

.stattext {
    margin-top: 10px;
    float: right;
}

.statdata {
    font-weight: 600;
    font-size: 1rem;
    float: right;
}

/******************************************************************************
Status texts
 */

#last_updated {
    text-align: right;
    font-size: 1em;
    margin-top: 3em;
    margin-bottom: -2em;
}

#last_updated_datetime {
    white-space: nowrap;
}

#alarm-message-response {
    text-align: left;
    display: none;
}

#alarm-message-form {
    display: none;
}

/******************************************************************************
The appointment tables
 */

.appointments_container .fa-exclamation-triangle {
    color: var(--color-red);
    margin-right: 0.3em;
    margin-left: 0.3em;
}

.appointments_container .fa-calendar-alt {
    color: var(--color-blue);
    margin-right: 0.3em;
    margin-left: 0.3em;
}

#person-form #horses .owner{
    background-color: #99959826;
}

#person-form #horses .helper{
    background-color: #99959826;
}



.horsethumbnail{
    width: 20px;
    height: 20px;
    margin: 5px;
    cursor: pointer;
    object-fit: cover;
}
/* Modal styles */


.horsemodal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
}

.horsemodal img {
    max-width: 80%;
    max-height: 80%;
}


.horsemodal .close {
    position: absolute;
    top: 10px;
    right: 10px;
    color: white;
    font-size: 30px;
    cursor: pointer;
}




#person-form #groups .grouplistbyperson{
    background-color: #99959826;
}

#horseselect{
    margin-top:10px;
}

.table button {
    padding: 5px 10px;
    margin-top: 0;
    margin-bottom: 0;
}

#person,#horse,#task,#group,#todo,#activity,#message {
    margin-top: 20px;
    overflow-x: auto;
}

#printcalbutt{
    margin-top:10px;
}
#printcalbutt i{
    color: #69455D;
}

.horselistbyowner, .grouplistbyperson, #personlistbygroup{
    margin-right:10px;
    padding:5px;
    border:1px solid #818080;
    border-radius: 3px;
    text-decoration: none;
    color:#818080;
    float:left;
    margin-top:3px;
}
#licenseinfo{
    font-size:13px;
}

#horseactivity-form{
    margin-top:10px;
}
#horseactivity-form #form-heading-edit, #horseactivity-form #form-heading-add{
    float:left;
}
#horseactivityhname{
    margin-left:10px;
    float:left;
}



#toregister{
    margin-left:20px;
    text-decoration: none;
}

#person-form h3, #horse-form h3, #task-form h3, #group-form h3  {
    font-size: 1.4rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.initial, .horsecolor, .horseactivitycolor{
    color:white;
    padding:5px;
    border-radius: 3px;
    border: 2px solid #d4d5d2;
    text-align: center;
}

.shortname{
    color:white;
    padding:5px;
    border-radius: 3px;
    border: 2px solid #d4d5d2;
    text-align: center;
}

#add-person-group-button, #add-person-horse-button{
    margin-top:25px;
}

#table_todo td, #table_task td, #table_person td,#table_group td, #table_horse td, #table_activity td, #table_message td{
    padding: 3px;
    font-size:14px;
    vertical-align: middle;
}

.todoEdit:hover, .infologgEdit:hover, .taskEdit:hover, .licenseEdit:hover, .personEdit:hover, .groupEdit:hover, .horseEdit:hover, .horseActivityEdit:hover, .horseCalenderEdit:hover, .groupPersonEdit a{
    cursor: pointer;
}
.todo-edit-button-table, .infologg-edit-button-table, .infologg-delete-button-table, .license-edit-button-table, .todo-delete-button-table, .activity-edit-button-table, .activity-delete-button-table, .person-delete-button-table, .person-edit-button-table, .horse-delete-button-table, .horse-edit-button-table, .task-edit-button-table, .task-delete-button-table, .group-edit-button-table, .group-delete-button-table, .group-person-delete-button-table, .horse-person-delete-button-table{
    float:right;
}

.todo-edit-button-table i, .todo-delete-button-table i,.infologg-edit-button-table i, .infologg-delete-button-table i, .license-edit-button-table i, .license-delete-button-table i,.activity-edit-button-table i, .activity-delete-button-table i, .person-delete-button-table i, .person-edit-button-table i,.horse-delete-button-table i, .horse-edit-button-table i, .task-edit-button-table i, .task-delete-button-table i, .group-edit-button-table i, .group-delete-button-table i, .group-person-delete-button-table i, .horse-person-delete-button-table i{
    color:#212529;
}
.groupPersonEdit,.horsePersonEdit, .horseImageEdit{
    vertical-align: middle;
}

.groupPersonEdit a, .horsePersonEdit a, .horseImageEdit a{
    color: #212529;
    text-decoration: none;
}


.horseImageEdit{
    font-size: 13px;
}


.persongroup-edit-table i, .personhorse-edit-table i{
    color: #212529;
}

.tabledescription {
    font-size: 22px;
    font-weight: 700;
    color: #4e474e;
    text-align: center;
}

#appointments_out {
    margin-bottom: 50px;
}

#appointments_history {
    display: none;
}

.appointments_container .today {
    /*background: #cfedd1;*/
    /*border-color: #c9dace;*/
}

.appointments_container .nottoday {
    /*background: #f0e4e4;*/
    /*border-color: #e5dede;*/
}

.appointment-details {
    background-color: white;
}

.appointment-details-label {
    padding-left: 5%;
    padding-right: 2em;
    font-weight: 600;
    min-width: 30%;
    display: inline-block;
}

.table tbody {
    background: #f2f2f2;
}

.table thead {
    color: white;
    background: #575f62;
}

.table tr {
    border-color: #ede9e9;
}

.table tbody tr:not(.appointment-details):hover {
    background: #cfedd1 !important;
}

.table tbody tr.today:hover {
    /*background: #f3fff3 !important;*/
}

#reporttablefooterrow{
    background: #daddda !important;
}
#table_person_group tbody, #table_person_horse tbody{
    background: #ced3d5;
}

#reportinnercontainer{
    margin-top: 20px;
}

#statcontainer{
    padding:10px;
}

#statcontainer h5{
    text-align: center;
}

.countLic{
    padding:10px;
}

.innerstat{
    background-color: #b6c2c720;
    border: 1px solid #dbd7d7;
    border-radius: 5px;
    height: 160px;
}

.rapportcontainer{
    border: 1px solid #dbd7d7 !important;
    border-radius: 5px !important;
    padding:10px;
    background-color: var(--bg-gray) !important;

}

.appointments_table td,
.appointments_table th {
    vertical-align: middle;
}

.appointments_table tr th:first-child {
    width: 30%;
}

.appointments_table tr td:nth-child(2),
.appointments_table tr td:nth-child(3){
    width: 12%;
}

.appointments_table tr td:nth-child(4) {
    width: 16%;
}

.appointments_table tr td:last-child {
    white-space: nowrap;
}

.appointments_container td {
    font-size: 0.9rem;
}

td.buttons {
    text-align: right;
}

td.buttons button,
td.buttons a {
    margin-left: 0.5em;
}

th.spinner {
    text-align: right;
}

.hidden_id {
    display: none;
    /*display: inline-block;*/
    width: 3em;
    background-color: var(--color-blue);
    padding: 5px 0;
    color: white;
    text-align: center;
    margin-right: 0.5em;
    border-radius: 4px;
}

.hidden {
    display: none;
}

.settings-root,
.settings-admin {
    margin-bottom: 3rem;
}

/******************************************************************************
Responsive
 */


@media only screen and (min-width: 768px) and (max-width: 1023px) {

    .container {
        max-width: 100%;
    }

    .innercontainer {
        width: 90%;
    }

    .statbutt {
        padding: 15px 12px;
        font-size: 0.8em;
    }

    .adminsmallbutt {
        width: 94px;
        padding: 10px 4px;
    }
}


/*231025 tog bort
@media (min-width: 375px) {
    .col-md-6 {
        flex: 0 0 auto;
        width: 50%;
    }
}
*/


@media only screen and (max-width: 767px) {
    /* 230715*/
    #calendar{
        height: 55vh;
    }

    .outercontainer{
        margin-top:0px;
        border: 0px;
        background:none;
    }

    .container {
        max-width: 100%;
        margin-top: 0;
        border: 0;
        background: none;
    }

    .innercontainer {
        width: 95%;
        margin: auto;
    }

    .statbutt {
        margin-top: 0;
        font-size: 0.8em;
    }

    .adminsmallbutt {
        padding: 5px;
        width: 100px;
        margin-top: 5px;
        font-size: 0.8rem;
    }

    .adminbuttext {
        margin-left: 2px;
        /*font-size: 0.7rem;*/
    }


    table button {
        min-width: 40px;
        margin-bottom: 2px;
    }

    table .fa,
    table .fas {
        font-size: 0.8em;
    }

}

@media only screen and (max-width: 600px) {
    #calendar .done{
        background-image: url("../img/checkmark30bw.png"); /* The image used */
        background-position: 10% 10%;/* Center the image */
        background-repeat: no-repeat; /* Do not repeat the image */
        /*background-size: 25%;*/
        background-size: 15px 15px;
    }
    .appointments_container tr {
        display: block;
        border-bottom: 1px solid silver;
    }
    .appointments_container td,
    .appointments_container th {
        display: inline-block;
        border: none;
        padding-top: 3px;
        padding-bottom: 3px;
        width: 49%;
    }
    .appointments_container td:last-child {
        display: block;
        padding-bottom: 10px;
        width: 100%;
        text-align: left;
    }
    .appointments_container thead tr {
        position: relative;
    }
    .appointments_container th:last-child {
        position: absolute;
        top: 0;
        right: 0;
    }
    #appointments_out td:nth-child(4),
    #appointments_out th:nth-child(4) {
        display: none;
    }
    .appointments_container .adminbuttext {
        display: inline;
        font-size: 0.8em;
    }
    .appointments_container td.buttons button {
        margin-left: 0;
        margin-right: 10px;
    }

}


@media only screen and (max-width: 576px) {
    .calbutt .col-sm-4{
       flex: 0 0 auto;
       width: 33.33333333%;
    }

    .filterchk .col-sm-3{
       flex: 0 0 auto;
       width: 25%; 
    }
 .filterchk .form-label{
        font-size:10px;
    }
}

@media only screen and (max-width: 480px) {
    #weekstatediv .weekdayopencheckbox{
        font-size: 14px;
    }

}


@media only screen and (max-width: 359px) {


    #admin-stats {
        display: none;
        margin-top: 1em;
    }
    #admin-stats .col-md-3 {
        width: 100%;
        margin-top: 0;
    }
    #admin-stats br {
        display: none;
    }
    #admin-stats .stattext {
        font-size: 1rem;
        margin-top: 0;
        margin-right: 1em;
    }
    #admin-functions .col-md-2 {
        width: 50%;
    }
    .appointments_container .adminbuttext {
        display: none;
    }
}



@media (min-width: 820px) {
    .initials {
        padding:5px 35px;
    }

    .taskbutt, #calendar table th span{
        min-width:50px;
    }
}




@media (min-width: 1200px) {
    .initials {
        padding:5px 35px;
    }

    .taskbutt, #calendar table th span{
        min-width:75px;
    }
}



@media (max-width: 1180px) {
    #calendar table{
       width:95%;

    }
}